Signature

Component 8

About

An SVG component that draws strokes as if by hand, like a signature, a wordmark outline or a route on a map, triggered on scroll-into-view, by scroll position, or by manual progress.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Signature to your project and fits it to your theme.

Code

How Signature is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import Signature from "@/components/ui/signature";

export default function SignatureDemo() {
  return (
    <div className="flex h-full w-full items-center justify-center bg-background p-10">
      <Signature
        aria-label="Corsair"
        viewBox="0 24 336 104"
        strokeWidth={1}
        className="w-full max-w-md text-foreground"
        paths={[
          "M30.7 121.1L30.7 121.1Q18 121.1 12.3 113.0Q6.6 105 6.6 89.8L6.6 89.8Q6.6 82.4 8.4 74.5Q10.2 66.6 13.6 59.1Q17.0 51.6 21.8 45.6Q26.6 39.6 32.7 36Q38.8 32.4 45.8 32.4L45.8 32.4Q54.2 32.4 61.1 38.0L61.1 38.0Q62.3 39 61.9 40.7L61.9 40.7L58.3 58.8Q58.0 60.7 56.5 60.7L56.5 60.7Q55.1 60.7 55.1 58.8L55.1 58.8L55.0 54.1Q54.7 44.2 52.1 40.0Q49.4 35.8 44.5 35.8L44.5 35.8Q39.8 35.8 35.5 39.5Q31.2 43.3 27.5 49.6Q23.8 55.9 20.9 63.5Q18.1 71.2 16.6 78.8Q15 86.5 15 93.1L15 93.1Q15 103.9 18.3 110.8Q21.6 117.6 29.3 117.6L29.3 117.6Q33.8 117.6 37.4 114.3Q40.9 111 44.6 103.0L44.6 103.0L47.3 97.3Q47.9 95.9 49.1 95.9L49.1 95.9Q51 95.9 50.4 98.2L50.4 98.2L45.6 116.9Q45.1 118.7 43.7 119.0L43.7 119.0Q41.6 119.8 37.8 120.4Q34.0 121.1 30.7 121.1Z",
          "M75.5 121.1L75.5 121.1Q68.0 121.1 63.7 114.9Q59.4 108.7 59.4 98.2L59.4 98.2Q59.4 90.4 61.9 83.2Q64.4 76.0 68.6 70.3Q72.7 64.7 77.8 61.4Q82.9 58.1 88.1 58.1L88.1 58.1Q95.5 58.1 99.8 64.2Q104.2 70.3 104.2 81L104.2 81Q104.2 88.8 101.6 96Q99.1 103.2 95.0 108.8Q90.8 114.5 85.7 117.8Q80.6 121.1 75.5 121.1ZM75.2 118.2L75.2 118.2Q79.1 118.2 82.7 114.5Q86.4 110.8 89.4 104.6Q92.4 98.5 94.2 91.0Q96 83.5 96 76.0L96 76.0Q96 61.0 88.2 61.0L88.2 61.0Q84.5 61.0 80.8 64.6Q77.0 68.3 74.1 74.4Q71.2 80.5 69.4 88.0Q67.6 95.5 67.6 103.1L67.6 103.1Q67.6 118.2 75.2 118.2Z",
          "M119.3 120L114.4 120Q112.7 120 113.0 118.4L113.0 118.4L124.4 70.6Q125.0 67.9 124.6 66.4Q124.2 64.9 122.4 64.9L122.4 64.9Q120.2 64.9 117.7 68.1Q115.1 71.3 111.8 80.2L111.8 80.2Q111.4 81.7 110.2 81.7L110.2 81.7Q108.4 81.7 109.2 79.6L109.2 79.6Q111.8 71.3 114.8 66.6Q117.7 61.9 120.7 60Q123.7 58.1 126.2 58.1L126.2 58.1Q130.2 58.1 131.9 61.0Q133.6 64.0 132 70.7L132 70.7L130.7 76.3Q130.6 77.2 131.0 77.3Q131.5 77.4 131.9 76.7L131.9 76.7Q136.4 66.2 140.2 62.2Q143.9 58.1 148.7 58.1L148.7 58.1Q151.9 58.1 153.5 59.8Q155.2 61.6 155.2 64.6L155.2 64.6Q155.2 67.6 153.7 69.4Q152.3 71.2 150 71.2L150 71.2Q148.1 71.2 147.2 70.2Q146.4 69.2 146.0 68.0Q145.6 66.7 145.1 65.8Q144.6 64.8 143.5 64.8L143.5 64.8Q141.7 64.8 138.8 69.4Q136.0 73.9 132.7 81.7Q129.4 89.4 126.3 99Q123.2 108.6 121.0 118.7L121.0 118.7Q120.6 120 119.3 120L119.3 120Z",
          "M164.8 121.1L164.8 121.1Q160.8 121.1 156.4 119.9Q152.0 118.7 149.8 116.9L149.8 116.9Q148.9 116.2 149.0 114.7L149.0 114.7L151.7 99Q151.9 97.4 153.1 97.4L153.1 97.4Q154.4 97.4 154.4 99.1L154.4 99.1L154.7 104.9Q154.9 111.7 158.0 114.9Q161.0 118.1 165.5 118.1L165.5 118.1Q169.3 118.1 172.1 115.6Q174.8 113.2 174.8 108.4L174.8 108.4Q174.8 105.6 174 103.3Q173.2 100.9 171.4 98.2Q169.6 95.5 166.4 91.7L166.4 91.7Q162.4 86.4 160.4 82.6Q158.4 78.8 158.4 74.8L158.4 74.8Q158.4 67.2 163.1 62.6Q167.9 58.1 175.2 58.1L175.2 58.1Q178.4 58.1 181.5 59.0Q184.6 60 186.6 61.9L186.6 61.9Q187.7 62.8 187.3 64.1L187.3 64.1L184.0 80.2Q183.6 81.7 182.5 81.7L182.5 81.7Q181.4 81.7 181.2 80.0L181.2 80.0L180.8 74.3Q180.4 67.1 179.0 64.0Q177.6 60.8 173.3 60.8L173.3 60.8Q169.4 60.8 167.0 63.5Q164.6 66.1 164.6 69.8L164.6 69.8Q164.6 73.8 166.8 77.1Q169.0 80.4 172.7 85.4L172.7 85.4Q177.6 91.9 179.3 95.8Q181.1 99.6 181.1 103.6L181.1 103.6Q181.1 108.6 178.9 112.6Q176.6 116.5 172.9 118.8Q169.2 121.1 164.8 121.1Z",
          "M197.8 121.1L197.8 121.1Q193.4 121.1 191.0 117.4Q188.6 113.6 188.6 106.4L188.6 106.4Q188.6 99.6 190.6 92.7Q192.5 85.8 195.8 79.6Q199.2 73.3 203.5 68.5Q207.7 63.7 212.5 60.9Q217.2 58.1 221.9 58.1L221.9 58.1Q224.2 58.1 226.2 59.0Q228.2 59.9 229.6 61.8L229.6 61.8Q230.3 62.9 231 62.9L231 62.9Q231.7 62.9 232.4 61.8L232.4 61.8Q233.8 59.9 234.6 59.3Q235.4 58.8 236.2 58.8L236.2 58.8Q237.7 58.8 237.4 60.5L237.4 60.5L226.7 106.4Q224.9 114.2 229.1 114.2L229.1 114.2Q231.8 114.2 234.1 110.5Q236.3 106.8 238.6 99L238.6 99Q238.9 97.7 240.1 97.7L240.1 97.7Q241.0 97.7 241.2 98.4Q241.4 99.1 241.2 100.1L241.2 100.1Q238.9 111.4 235.1 116.2Q231.2 121.1 225.8 121.1L225.8 121.1Q221.2 121.1 219.2 117.1Q217.2 113.2 218.8 106.3L218.8 106.3L220.3 99.7Q220.6 98.9 220.0 98.8Q219.5 98.6 219.1 99.4L219.1 99.4Q212.5 111.5 207.4 116.3Q202.3 121.1 197.8 121.1ZM200.8 115.0L200.8 115.0Q203.6 115.0 207.1 111.5Q210.6 108 214.0 102.5Q217.4 97.0 220.3 90.6Q223.2 84.2 224.9 78.4Q226.7 72.5 226.7 68.4L226.7 68.4Q226.7 61.1 221.5 61.1L221.5 61.1Q218.4 61.1 214.9 63.9Q211.4 66.7 208.3 71.5Q205.1 76.3 202.5 82.4Q199.9 88.4 198.4 95.0Q196.8 101.5 196.8 107.8L196.8 107.8Q196.8 112.0 197.8 113.5Q198.8 115.0 200.8 115.0Z",
          "M268.4 47.4L268.4 47.4Q266.2 47.4 264.7 45.8Q263.2 44.2 263.2 41.9L263.2 41.9Q263.2 38.6 265.1 36.7Q267.1 34.8 269.6 34.8L269.6 34.8Q272.0 34.8 273.7 36.3Q275.3 37.8 275.3 40.2L275.3 40.2Q275.3 43.6 273.2 45.5Q271.2 47.4 268.4 47.4ZM258.6 121.2L258.6 121.2Q254.6 121.2 253.0 118.3Q251.3 115.3 252.8 108.6L252.8 108.6L261.7 70.6Q262.3 67.9 261.9 66.4Q261.5 64.9 259.7 64.9L259.7 64.9Q257.5 64.9 254.9 68.1Q252.4 71.3 249.1 80.2L249.1 80.2Q248.6 81.7 247.4 81.7L247.4 81.7Q245.6 81.7 246.5 79.6L246.5 79.6Q249.1 71.3 252.1 66.6Q255 61.9 258 60Q261 58.1 263.5 58.1L263.5 58.1Q267.7 58.1 269.4 61.0Q271.1 64.0 269.5 70.7L269.5 70.7L260.6 108.7Q260.0 111.4 260.5 112.9Q260.9 114.4 262.7 114.4L262.7 114.4Q264.8 114.4 267.4 111.2Q270 108 273.2 99.1L273.2 99.1Q273.7 97.6 274.9 97.6L274.9 97.6Q276.7 97.6 275.9 99.7L275.9 99.7Q273.4 107.9 270.3 112.6Q267.2 117.4 264.2 119.3Q261.2 121.2 258.6 121.2Z",
          "M291.1 120L286.2 120Q284.5 120 284.9 118.4L284.9 118.4L296.3 70.6Q296.9 67.9 296.5 66.4Q296.0 64.9 294.2 64.9L294.2 64.9Q292.1 64.9 289.5 68.1Q286.9 71.3 283.7 80.2L283.7 80.2Q283.2 81.7 282 81.7L282 81.7Q280.2 81.7 281.0 79.6L281.0 79.6Q283.7 71.3 286.6 66.6Q289.6 61.9 292.6 60Q295.6 58.1 298.1 58.1L298.1 58.1Q302.0 58.1 303.7 61.0Q305.4 64.0 303.8 70.7L303.8 70.7L302.5 76.3Q302.4 77.2 302.9 77.3Q303.4 77.4 303.7 76.7L303.7 76.7Q308.3 66.2 312 62.2Q315.7 58.1 320.5 58.1L320.5 58.1Q323.8 58.1 325.4 59.8Q327 61.6 327 64.6L327 64.6Q327 67.6 325.6 69.4Q324.1 71.2 321.8 71.2L321.8 71.2Q319.9 71.2 319.1 70.2Q318.2 69.2 317.8 68.0Q317.4 66.7 316.9 65.8Q316.4 64.8 315.4 64.8L315.4 64.8Q313.6 64.8 310.7 69.4Q307.8 73.9 304.5 81.7Q301.2 89.4 298.1 99Q295.1 108.6 292.8 118.7L292.8 118.7Q292.4 120 291.1 120L291.1 120Z",
        ]}
      />
    </div>
  );
}