'use client'
import {
type Easing,
motion,
type SVGMotionProps,
type Variants,
} from 'motion/react'
import { cn } from '@/lib/utils'
const PATH_DURATIONS = [1, 0.5, 1, 3] as const
const PATH_EASINGS: Easing[] = [
[0.4, 0, 0.2, 1],
[0.4, 0, 0.6, 1],
[0.35, 0, 0.25, 1],
[0.22, 0.03, 0.26, 1],
]
const PATH_DELAYS = PATH_DURATIONS.reduce<number[]>(
(acc, _, i) => [
...acc,
i === 0 ? 0 : acc[i - 1] + PATH_DURATIONS[i - 1]
],
[],
)
const container: Variants = {
initial: {},
animate: {},
}
const createDrawVariant = (index: number): Variants => ({
initial: {
opacity: 0,
pathLength: index === 2 || index === 3 ? 0.01 : 0,
},
animate: {
opacity: 1,
pathLength: 1,
transition: {
opacity: { duration: 0.01, delay: PATH_DELAYS[index] },
pathLength: {
ease: PATH_EASINGS[index],
duration: PATH_DURATIONS[index],
delay: PATH_DELAYS[index],
},
},
},
})
export type SignatureProps = SVGMotionProps<SVGSVGElement>
export const Signature = ({ className, ...props }: SignatureProps) => (
<motion.svg
viewBox="0 0 646 226"
fill="none"
stroke="currentColor"
xmlns="http://www.w3.org/2000/svg"
className={cn('h-auto w-full overflow-hidden drop-shadow-md', className)}
variants={container}
initial="initial"
animate="animate"
{...props}
>
<motion.path
d="M23 58.5C21.1758 58.0946 22.9947 55.0693 23.4444 54.3333C27.1684 48.2396 34.1912 42.7897 40.5556 39.7222C45.6381 37.2725 53.5305 35.1899 56.8611 41.4167C58.7499 44.9479 59.283 49.5995 59.5556 53.5C60.2595 63.5737 58.562 73.6065 55.6111 83.2222C47.6138 109.282 33.3512 133.251 19.0278 156.25C13.9477 164.407 7.64346 172.435 3.33334 181.056C2.81152 182.099 4.74365 179.194 5.38889 178.222C12.2054 167.952 18.8526 157.597 25.9722 147.528C47.3464 117.299 70.2833 88.0327 95.6667 61.0556C102.989 53.2734 110.488 45.6229 118.278 38.3056C119.924 36.7589 123.69 33.2274 125.917 31.6111C127.698 30.3179 127.215 31.1422 126.306 32.4722C116.542 46.7553 103.221 59.2738 90.6667 71C76.0678 84.6355 59.7415 97.2999 46.6389 112.444C46.3756 112.749 43.5611 115.646 43.8333 116.667C44.0155 117.35 49.2662 114.531 49.3333 114.5C55.4726 111.694 62.9048 108.611 69.7778 108.611C74.0002 108.611 73.0754 112.71 72.5556 115.722C71.551 121.543 69.2989 127.239 68.5833 133.083C68.3476 135.008 68.3769 136.026 70 137"
strokeWidth="5"
strokeLinecap="round"
variants={createDrawVariant(0)}
/>
<motion.path
d="M84.5 137C83.6222 137.11 85 139.086 85 136.389C85 133.96 83 135.159 83 137"
strokeWidth="5"
strokeLinecap="round"
variants={createDrawVariant(1)}
/>
<motion.path
d="M153 56.5C146.971 65.8789 143.25 76.7211 139.111 87C130.946 107.278 122.603 127.728 110.333 145.944C105.475 153.157 99.3911 161.874 92.0556 166.944C89.9234 168.418 92.1217 158.512 92.1667 158.333C98.3891 133.587 109.683 109.322 121.167 86.6667C134.125 61.1017 150.072 36.6876 169.833 15.8333C173.077 12.4101 183.364 -0.196207 190.056 3.05556C192.332 4.16187 192.46 7.64184 192.583 9.66667C192.989 16.3418 191.91 23.1387 189.889 29.5C183.13 50.775 169.305 68.0937 153.5 83.3889C148.642 88.0903 143.571 92.571 138.639 97.1944C137.578 98.1887 134.564 100.891 136 100.667C141.57 99.7963 176.169 90.2785 170.611 105.167C168.675 110.352 164.557 114.95 160.972 119C156.092 124.514 150.761 129.475 145 134.056C136.357 140.927 126.546 146.628 118.5 154.222C117.968 154.725 116.559 156.459 117.722 154.889C118.967 153.209 121.173 152.731 123 152"
strokeWidth="5"
strokeLinecap="round"
variants={createDrawVariant(2)}
/>
<motion.path
d="M174 132C173.815 132.208 172.757 133.713 173.611 133.389C178.171 131.659 182.864 127.342 186 123.778C186.868 122.791 194.644 112.018 189.222 112.556C181.335 113.337 174.599 124.248 171.917 130.806C169.482 136.757 174.609 133.892 177.389 131.833C181.16 129.04 184.504 125.819 187.917 122.611C189.03 121.565 192.597 117.222 194.556 117.222C195.129 117.222 193.755 122.34 193.75 122.361C193.198 124.947 192.556 127.643 192.556 130.306C192.556 135.413 204.761 124.772 205 124.611C212.075 119.828 219.432 114.208 227.5 111.167C228.266 110.878 231.481 109.862 230.556 111.944C228.952 115.553 224.812 118.724 224.111 122.667C223.84 124.191 227.411 123.1 227.667 123.056C236.123 121.595 244.515 119.72 252.944 118.111C260.492 116.67 268.093 115.116 275.778 114.611C279.132 114.391 279.557 114.601 276.778 116.639C274.194 118.534 271.504 120.294 269.028 122.333C267.555 123.546 267.079 124.126 269.25 123.667C280.219 121.346 291.099 118.513 302.056 116.111C304.16 115.65 307.758 114.277 310.056 114.583C311.296 114.749 308.965 116.844 308.278 117.889C304.43 123.738 301.391 130.047 298.222 136.278C288.625 155.151 278.432 173.672 266.722 191.333C260.645 200.5 253.944 209.298 246.611 217.5C245.534 218.705 242.845 221.641 241.167 222.833C241.076 222.898 239.955 223.546 239.722 222.944C238.563 219.956 242.721 213.225 243.778 211.167C250.332 198.396 258.116 186.161 265.889 174.111C287.642 140.388 313.152 108.547 331.556 72.7778C334.13 67.7748 337.872 61.4584 339.056 55.7778C339.241 54.8857 338.043 57.3227 337.778 58.1944C336.968 60.8567 338.096 64.1894 338.194 66.8611C338.773 82.4911 335.176 97.9222 327.417 111.528C326.627 112.912 323.134 116.777 323.028 118.583C323.001 119.044 323.933 118.901 324.389 118.833C326.173 118.569 327.639 118.055 329.389 117.472C337.137 114.89 344.79 112.062 352.611 109.694C356.288 108.581 358.982 107.812 362.639 106.972C363.512 106.772 367.195 105.628 368.444 106.111C368.842 106.265 368.035 106.877 367.722 107.167C367.118 107.724 364.735 109.726 364.278 110.111C361.693 112.285 359.014 114.394 356.722 116.889C352.3 121.705 357.27 120.789 361.444 120.278C381.119 117.87 400.925 115.353 420.778 115.222C428.494 115.171 421.961 118.46 424.028 118.694C430.517 119.432 438.084 117.602 444.389 116.75C467.334 113.651 490.228 110.226 513.139 106.889C543.437 102.475 573.787 98.4035 604.333 96.1389C615.32 95.3244 626.398 94.7495 637.417 95.2778C637.651 95.289 644.004 96.625 643 94.7222C641.529 91.9353 638.951 89.8626 636.444 88.0556C629.533 83.0731 623.279 80.3694 615 78.5"
strokeWidth="5"
strokeLinecap="round"
variants={createDrawVariant(3)}
/>
<motion.path
d="M23 58.5C21.1758 58.0946 22.9947 55.0693 23.4444 54.3333C27.1684 48.2396 34.1912 42.7897 40.5556 39.7222C45.6381 37.2725 53.5305 35.1899 56.8611 41.4167C58.7499 44.9479 59.283 49.5995 59.5556 53.5C60.2595 63.5737 58.562 73.6065 55.6111 83.2222C47.6138 109.282 33.3512 133.251 19.0278 156.25C13.9477 164.407 7.64346 172.435 3.33334 181.056C2.81152 182.099 4.74365 179.194 5.38889 178.222C12.2054 167.952 18.8526 157.597 25.9722 147.528C47.3464 117.299 70.2833 88.0327 95.6667 61.0556C102.989 53.2734 110.488 45.6229 118.278 38.3056C119.924 36.7589 123.69 33.2274 125.917 31.6111C127.698 30.3179 127.215 31.1422 126.306 32.4722C116.542 46.7553 103.221 59.2738 90.6667 71C76.0678 84.6355 59.7415 97.2999 46.6389 112.444C46.3756 112.749 43.5611 115.646 43.8333 116.667C44.0155 117.35 49.2662 114.531 49.3333 114.5C55.4726 111.694 62.9048 108.611 69.7778 108.611C74.0002 108.611 73.0754 112.71 72.5556 115.722C71.551 121.543 69.2989 127.239 68.5833 133.083C68.3476 135.008 68.3769 136.026 70 137"
strokeWidth="5"
strokeLinecap="round"
opacity={0.1}
/>
<motion.path
d="M84.5 137C83.6222 137.11 85 139.086 85 136.389C85 133.96 83 135.159 83 137"
strokeWidth="5"
strokeLinecap="round"
opacity={0.1}
/>
<motion.path
d="M153 56.5C146.971 65.8789 143.25 76.7211 139.111 87C130.946 107.278 122.603 127.728 110.333 145.944C105.475 153.157 99.3911 161.874 92.0556 166.944C89.9234 168.418 92.1217 158.512 92.1667 158.333C98.3891 133.587 109.683 109.322 121.167 86.6667C134.125 61.1017 150.072 36.6876 169.833 15.8333C173.077 12.4101 183.364 -0.196207 190.056 3.05556C192.332 4.16187 192.46 7.64184 192.583 9.66667C192.989 16.3418 191.91 23.1387 189.889 29.5C183.13 50.775 169.305 68.0937 153.5 83.3889C148.642 88.0903 143.571 92.571 138.639 97.1944C137.578 98.1887 134.564 100.891 136 100.667C141.57 99.7963 176.169 90.2785 170.611 105.167C168.675 110.352 164.557 114.95 160.972 119C156.092 124.514 150.761 129.475 145 134.056C136.357 140.927 126.546 146.628 118.5 154.222C117.968 154.725 116.559 156.459 117.722 154.889C118.967 153.209 121.173 152.731 123 152"
strokeWidth="5"
strokeLinecap="round"
opacity={0.1}
/>
<motion.path
d="M174 132C173.815 132.208 172.757 133.713 173.611 133.389C178.171 131.659 182.864 127.342 186 123.778C186.868 122.791 194.644 112.018 189.222 112.556C181.335 113.337 174.599 124.248 171.917 130.806C169.482 136.757 174.609 133.892 177.389 131.833C181.16 129.04 184.504 125.819 187.917 122.611C189.03 121.565 192.597 117.222 194.556 117.222C195.129 117.222 193.755 122.34 193.75 122.361C193.198 124.947 192.556 127.643 192.556 130.306C192.556 135.413 204.761 124.772 205 124.611C212.075 119.828 219.432 114.208 227.5 111.167C228.266 110.878 231.481 109.862 230.556 111.944C228.952 115.553 224.812 118.724 224.111 122.667C223.84 124.191 227.411 123.1 227.667 123.056C236.123 121.595 244.515 119.72 252.944 118.111C260.492 116.67 268.093 115.116 275.778 114.611C279.132 114.391 279.557 114.601 276.778 116.639C274.194 118.534 271.504 120.294 269.028 122.333C267.555 123.546 267.079 124.126 269.25 123.667C280.219 121.346 291.099 118.513 302.056 116.111C304.16 115.65 307.758 114.277 310.056 114.583C311.296 114.749 308.965 116.844 308.278 117.889C304.43 123.738 301.391 130.047 298.222 136.278C288.625 155.151 278.432 173.672 266.722 191.333C260.645 200.5 253.944 209.298 246.611 217.5C245.534 218.705 242.845 221.641 241.167 222.833C241.076 222.898 239.955 223.546 239.722 222.944C238.563 219.956 242.721 213.225 243.778 211.167C250.332 198.396 258.116 186.161 265.889 174.111C287.642 140.388 313.152 108.547 331.556 72.7778C334.13 67.7748 337.872 61.4584 339.056 55.7778C339.241 54.8857 338.043 57.3227 337.778 58.1944C336.968 60.8567 338.096 64.1894 338.194 66.8611C338.773 82.4911 335.176 97.9222 327.417 111.528C326.627 112.912 323.134 116.777 323.028 118.583C323.001 119.044 323.933 118.901 324.389 118.833C326.173 118.569 327.639 118.055 329.389 117.472C337.137 114.89 344.79 112.062 352.611 109.694C356.288 108.581 358.982 107.812 362.639 106.972C363.512 106.772 367.195 105.628 368.444 106.111C368.842 106.265 368.035 106.877 367.722 107.167C367.118 107.724 364.735 109.726 364.278 110.111C361.693 112.285 359.014 114.394 356.722 116.889C352.3 121.705 357.27 120.789 361.444 120.278C381.119 117.87 400.925 115.353 420.778 115.222C428.494 115.171 421.961 118.46 424.028 118.694C430.517 119.432 438.084 117.602 444.389 116.75C467.334 113.651 490.228 110.226 513.139 106.889C543.437 102.475 573.787 98.4035 604.333 96.1389C615.32 95.3244 626.398 94.7495 637.417 95.2778C637.651 95.289 644.004 96.625 643 94.7222C641.529 91.9353 638.951 89.8626 636.444 88.0556C629.533 83.0731 623.279 80.3694 615 78.5"
strokeWidth="5"
strokeLinecap="round"
opacity={0.1}
/>
</motion.svg>
)
