storytellurx-v1/app/components/vectors/love-letter.tsx

39 lines
1.7 KiB
TypeScript

export const LoveLetterSVG = ({ className }: { className?: string }) => (
<svg
viewBox="5 15 90 50"
fill="none"
xmlns="http://www.w3.org/2000/svg"
className={className}
strokeLinecap="round"
preserveAspectRatio="none"
strokeLinejoin="round"
vectorEffect="non-scaling-stroke"
>
{/* Envelope */}
<path
d="M5 15 L50 50 L95 15 L95 65 L5 65 Z"
stroke="var(--foreground)"
strokeWidth="1"
fill="oklch(from var(--background) l c h)"
/>
<path
d="M5 15 L50 50 L95 15"
stroke="var(--foreground)"
strokeWidth="1"
/>
{/* Lipstick Kiss */}
<g
transform="translate(39, 37) rotate(5) scale(0.4)"
className="starting:opacity-0 opacity-100 duration-4000"
>
<path
fill="var(--confetti-1)"
d="M11 41c4-2 5-3-1-5 2 0 8 3 10 0 2-1-6-3-7-4 2 1 9 4 10 2 0-1-1-3-5-4l4-1c0-1-4-3-5-6 2 1 3 5 5 5l3-2-4-2c1 2 6 1 8 3l1-3v-1h1l2-3v2l4 1 1-1c0 1 0 4 1 3l3-3c0 2 1 2 2 2l2-3v2l5-2-1 2c1 0 7-3 8-6l-3-1c-1 0-1 3-2 2l1-3c-4-3-2 2-3 2 0 0-1-5-3-5 0 1-1-2-2 4 0-1 1-5-5-7l2 7-3-7c-2-1-6-3-8-2-2 0 3 5 2 7 0-3-3-6-5-6-4 2-1 7-2 9l-1-6-2 3h-2c-1 1 1 4 1 4-1-1-1-3-3-3-1-1-4-1-6 1-3 1-5 7-5 8l2 3-2-2-1 4 4 3-4-2c-3 7 0 6 0 7H7c-2 3 0 3 0 3H6l-1 4c2-1 5-1 4-3h2"
/>
<path
fill="var(--confetti-1)"
d="M51 24c-2 0-7 0-8 2 1 2 7 3 8 5l-10-4c-3-1-2 1-3 4l2 5c-1-1-2-5-3-3-3 4 1 5 3 8l-5-5-1 1h-2l5 8-6-8-3-1 1 6c-1-3-2-8-7-7-1 4 1 10 1 12l-2-9c-2 0-5-1-4 1-4 0-12 6-11 7 3 3 9 6 12 7l1-3 3 4v-3c1 2 5 4 8 2v-3c0 3 6 3 7 1l-1-3c1 1 1 3 3 2 3 0 1-4 0-6l3 5 1-3c3 2 3 1 2-3l2 3c3-1-1-6-2-6 2 0 3 3 5 4v-2c-1-4-4-7-6-9 2 2 5 7 8 8 1-1-1-5-2-6l4 3-1-4 2 1c1-1-1-3-1-4l2 2 2-13-7 4"
/>
</g>
</svg>
);