How to Build SVG Signature Animation in React (Motion)

To build an SVG signature animation in React, put each pen stroke in its own motion.path and animate pathLength from 0 to 1, starting each stroke when the previous one ends. This guide takes you from a photo of your signature to a working component in seven steps. Here's what you'll build:

Nothing here needs shadcn/ui. The class names assume Tailwind and a text-foreground color token, which every shadcn project already has. If you're building the rest of the hero from shadcn parts, the guides in our shadcn components hub cover the pieces around it.

What you need

• A React project. The steps use the Next.js App Router, but any React 18 or 19 app works.
• A photo or scan of your signature.
• A vector editor with a pen or pencil tool: Figma, Illustrator or Inkscape.

Step 1: Install Motion

Motion is the library formerly called Framer Motion. You import it from motion/react.

Step 2: Trace your signature as strokes

Don't auto-trace the scan. Auto-trace tools turn ink into filled shapes, so every line becomes a closed outline. Animate that and you get each line drawn twice, once along each edge.

You need a centerline instead: one open path down the middle of each stroke.

1. Place the scan on a canvas in your vector editor and lower its opacity.
2. Trace over it with the pen or pencil tool, in the direction you actually write.
3. Start a new path every time your pen leaves the paper.
4. Delete the scan.

Step 3: Export and clean the paths

1. Export the artboard as SVG.
2. Run it through SVGOMG with "Merge paths" turned off, so your strokes stay separate.
3. Copy each path's d attribute into an array, in writing order: letters first, then dots, then any underline.
4. Keep the viewBox value from the exported file.

Step 4: Create the SignatureDraw component

What each part does:

• pathLength goes from 0 (nothing drawn) to 1 (fully drawn).
• delay: i * step starts each stroke as the previous one finishes.
• opacity hides a stray dot. A round line cap draws a dot even when the stroke has zero length.
• useReducedMotion() shows the finished signature right away for visitors who turned motion off.
• currentColor lets a text class like text-foreground set the color, so dark mode works.

How Motion's SVG path drawing animation works

Motion gives SVG elements three progress values, each from 0 to 1:

They work on path, circle, ellipse, line, polygon, polyline and rect. Under the hood, Motion sets the SVG pathLength="1" attribute and writes stroke-dasharray for you, so you never measure the path.

Step 5: Add it to your page

The page can stay a server component. "use client" in the component file is enough, and the server renders the first frame, so nothing shifts on hydration. If that split is new to you, here's how the App Router renders Server and Client Components.

Step 6: Time each stroke by its length (optional)

Splitting the duration evenly looks mechanical on a long signature, because a dot takes as long as the underline. A real pen moves at a roughly steady speed. Measure each path once after mount, then give it duration = length / speed plus a short pause for each pen lift:

The demo at the top of this guide uses this version. Here's the full file:

Step 7: Test reduced motion

In Chrome DevTools, open the Rendering panel and set "Emulate CSS media feature prefers-reduced-motion" to reduce. Reload. The signature should appear fully drawn with no animation.

Don't rely on <MotionConfig reducedMotion="user"> for this. It turns off transform and layout animations, but other values keep animating. In our test with Motion 14, pathLength still animated with reduced motion on. That's why the component checks useReducedMotion() itself.

Troubleshooting

Most problems with an SVG signature animation in React come from the paths, not the code. Check these first:

• The signature draws as a double line. Your paths are filled outlines. Redo step 2.
• A solid blob flashes in. Add fill="none" to the svg or each path.
• The stroke is too thick or thin. strokeWidth is in viewBox units, so adjust it relative to your viewBox, not in pixels.
• Strokes draw in the wrong order. Reorder the array to match how you write.
• Nothing shows when JavaScript fails. The first frame is hidden by design. If that matters, render a plain static SVG inside <noscript>.

Skip the build

We make Portfoly, a ShadcnDeck template, and its hero already has this self-drawing signature. The signature writes itself stroke by stroke above the name, next to a scrolling name marquee, portrait, experience badge, client avatars and a "Talk to me" button. It's built with Motion on Next.js 16, React 19 and Tailwind v4, with full prefers-reduced-motion support. See the Portfoly shadcn portfolio template.

See the Portfoly demo to watch the signature draw in a full portfolio hero.

Prefer to read a free codebase first? Our ChatDeck free SaaS landing page template is MIT licensed and uses Motion too. For the rest of a page around your hero, see how to build a landing page with Next.js and shadcn/ui.

Related Posts

• Build a landing page with Next.js and shadcn/ui - the navbar, features, testimonials and CTA that sit around a hero like this
• Next.js rendering strategies explained - why the page around this client component can still be prerendered
• shadcn card component guide - animated project cards for the portfolio grid under your hero
• shadcn avatar guide - stacked avatar groups like the client row in Portfoly's hero
• shadcn component libraries - Motion-powered effect libraries you can copy into the same project
• open source shadcn/ui projects - real codebases to study before you build your own portfolio
• free shadcn landing page templates - open-source starters to drop the signature component into

Frequently Asked Questions