klz-cables.com/components/Scribble.tsx

'use client';

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)}
        aria-hidden="true"
        viewBox="0 0 800 350"
        preserveAspectRatio="none"
      >
        <path
          className="animate-draw-stroke"
          pathLength="1"
          style={{ strokeDasharray: 1, strokeDashoffset: 1, animation: 'draw-stroke 1.8s ease-in-out 0.5s forwards' }}
          transform="matrix(0.9791300296783447,0,0,0.9791300296783447,400,179)"
          strokeLinejoin="miter"
          fillOpacity="0"
          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)}
        aria-hidden="true"
        viewBox="-400 -55 730 60"
        preserveAspectRatio="none"
      >
        <path
          className="animate-draw-stroke"
          pathLength="1"
          style={{ strokeDasharray: 1, strokeDashoffset: 1, animation: 'draw-stroke 1.8s ease-in-out 0.5s forwards' }}
          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}
          strokeWidth="20"
          fill="none"
        />
      </svg>
    );
  }

  return null;
}