57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
import React from 'react';
|
|
import { cn } from '@/components/ui';
|
|
|
|
interface ScribbleProps {
|
|
variant: 'circle' | 'underline';
|
|
className?: string;
|
|
color?: string;
|
|
}
|
|
|
|
export default function Scribble({ variant, className, color = '#82ed20' }: ScribbleProps) {
|
|
if (variant === 'circle') {
|
|
return (
|
|
<svg
|
|
className={cn("absolute pointer-events-none", className)}
|
|
role="presentation"
|
|
viewBox="0 0 800 350"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<path
|
|
style={{ animationDuration: '1.8s' }}
|
|
transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)"
|
|
strokeLinejoin="miter"
|
|
fillOpacity="0"
|
|
pathLength="1"
|
|
strokeMiterlimit="4"
|
|
stroke={color}
|
|
strokeOpacity="1"
|
|
strokeWidth="20"
|
|
d=" M253,-161 C253,-161 -284.78900146484375,-201.4600067138672 -376,-21 C-469,163 67.62300109863281,174.2100067138672 256,121 C564,34 250.82899475097656,-141.6929931640625 19.10700035095215,-116.93599700927734"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
if (variant === 'underline') {
|
|
return (
|
|
<svg
|
|
className={cn("absolute pointer-events-none", className)}
|
|
role="presentation"
|
|
viewBox="-400 -55 730 60"
|
|
preserveAspectRatio="none"
|
|
>
|
|
<path
|
|
style={{ animationDuration: '1.8s' }}
|
|
d="m -383.25 -6 c 55.25 -22 130.75 -33.5 293.25 -38 c 54.5 -0.5 195 -2.5 401 15"
|
|
stroke={color}
|
|
pathLength="1"
|
|
strokeWidth="20"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|
|
|
|
return null;
|
|
}
|