44 lines
1.3 KiB
React
44 lines
1.3 KiB
React
// Brand mark for آرام جان — a layered translucent lotus on a blue→indigo
|
|
// gradient, matching the app icon. Self-contained SVG so it stays crisp at any
|
|
// size and needs no image asset. Size it with `className` (e.g. "w-9 h-9").
|
|
function LotusLogo({ className = "w-9 h-9", title = "آرام جان" }) {
|
|
const petal = "M50 72 C42 56 42 34 50 22 C58 34 58 56 50 72 Z";
|
|
const angles = [-50, -25, 0, 25, 50];
|
|
|
|
const opacityFor = (a) => {
|
|
if (a === 0) return 0.95;
|
|
if (Math.abs(a) === 25) return 0.72;
|
|
return 0.5;
|
|
};
|
|
|
|
return (
|
|
<svg
|
|
viewBox="0 0 100 100"
|
|
className={className}
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
role="img"
|
|
aria-label={title}
|
|
>
|
|
<defs>
|
|
<linearGradient id="aramjan-lotus-bg" x1="0" y1="0" x2="0" y2="1">
|
|
<stop offset="0%" stopColor="#5fa0ff" />
|
|
<stop offset="100%" stopColor="#6a4ff0" />
|
|
</linearGradient>
|
|
</defs>
|
|
<rect width="100" height="100" rx="26" fill="url(#aramjan-lotus-bg)" />
|
|
<g fill="#ffffff">
|
|
{angles.map((a) => (
|
|
<path
|
|
key={a}
|
|
d={petal}
|
|
transform={`rotate(${a} 50 72)`}
|
|
fillOpacity={opacityFor(a)}
|
|
/>
|
|
))}
|
|
</g>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
export default LotusLogo;
|