SVG line drawing
Also called path drawing animation, stroke animation, or self-drawing SVG
An animation that makes an SVG outline look like it is being drawn by hand, by revealing its stroke from start to end.
import { motion, useReducedMotion } from 'motion/react';
const DRAW = 1.2; // seconds per stroke
const STAGGER = 0.15; // seconds between strokes
export function DrawnLogo() {
const reduceMotion = useReducedMotion();
// pathLength runs from 0 (nothing drawn) to 1 (the whole stroke).
const draw = (index: number) =>
({
initial: reduceMotion ? false : { pathLength: 0, fillOpacity: 0 },
animate: { pathLength: 1, fillOpacity: 1 },
transition: {
pathLength: {
duration: DRAW,
ease: 'easeInOut',
delay: index * STAGGER
},
// Fill in only after every stroke has finished.
fillOpacity: { duration: 0.4, delay: DRAW + STAGGER }
}
}) as const;
return (
<svg
viewBox='0 0 64 64'
role='img'
aria-label='Summit logo'
strokeWidth={2}
strokeLinejoin='round'
className='size-24 fill-blue-500/20 stroke-blue-600'
>
<motion.path d='M6 52 26 18l10 16 6-9 16 27Z' {...draw(0)} />
<motion.circle cx='46' cy='14' r='6' {...draw(1)} />
</svg>
);
}Animate the logo outline so it draws itself on page load: give each SVG path pathLength="1", stroke-dasharray: 1, and animate stroke-dashoffset from 1 to 0 over 1.2s with ease-in-out, staggering the paths by 150ms. Fade in the fill after the strokes finish, and show the finished logo immediately when prefers-reduced-motion is set.
Paste into Layerwise or any AI coding tool.
What is SVG line drawing?
Line drawing animates the stroke of an SVG path. The trick uses a dashed stroke: make one dash as long as the whole path with stroke-dasharray, then animate stroke-dashoffset from that length down to 0, and the visible part of the line grows along the path. Adding pathLength="1" to the path lets you use 1 instead of measuring its real length.
Use it for logos and signatures on a portfolio, icons that confirm an action, a route on a map, or a chart line that draws in when data loads. It only works on strokes, so filled icons need an outlined version.
Motion for React wraps the trick in a pathLength value that animates from 0 to 1. Keep draws short, usually 0.6 to 1.5 seconds, and show the finished drawing right away when someone prefers reduced motion.
Related terms
All termsLottie animation
A vector animation saved as a JSON file, usually exported from After Effects, that plays in apps and websites through a Lottie player.
Keyframes
Snapshots that define how an element looks at set points in an animation. The browser fills in the motion between them.
Morph
A transition where one shape smoothly changes its size, corners, and contents into another, like a small pill growing into a full card.
Reveal animation
An entrance where a moving edge uncovers an element, as if a curtain slides away, usually built with an animated clip-path.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.