Can I draw a filled logo?

Not with this. DrawSVG is a stroke.

Play once for a small figure. Scrub when the act of drawing is the point.

How slow is too slow?

If the line is still tracing after about a second, people have moved on. Scrubbed drawings can last longer.

What about dashed strokes?

They can look busy while they draw. Test a solid stroke first.

What does reduced motion do?

Show the finished path. No trace.

SVG draw path

An SVG draw path traces a stroke from one end to the other, so a line, a signature or a simple figure appears to draw itself rather than popping in as a finished shape.

TextBuild difficulty: MediumDrawSVGPlugin

Also called Line draw, Stroke draw, Path animation, Draw on scroll, SVG handwriting.

Here it is working.

The stroke traces the curve. Play again to draw it once more.

For designers

You reach for this on one piece of line work: a route, an underline that is actually a path, a diagram that is clearer if the line arrives in order. It is a stroke trick. Fills, photographs and icons with 12 overlapping paths are the wrong material. If the reader needed the shape to know what the section is, show the shape. Keep it to one drawing per view. Tie the start to the figure entering, or scrub it with the section if the drawing is the story.

Use this when

The graphic is a stroke, and the order of the line carries meaning.
The path is simple enough to read while it is still unfinished.
You can live with a still, finished drawing as the design.
Reduced motion can show the complete stroke with no trace.

Reach for something else when

The graphic is a filled icon, a photo or a card. Use Element reveal or Mask reveal.
You wanted words to arrive. Use Text reveal.
You wanted a number. Use Counter.
You wanted named steps with labels. Use Step-by-step timeline.
You wanted the page tint to change. Use Background colour.

How to build it

Draw a real SVG path with a visible stroke and no reliance on fill for the effect. Screen readers need a title or surrounding text that names the figure. DrawSVG animates the visible portion of that stroke. From nothing to the full length is the usual job. Scrub it with ScrollTrigger if the line is a story. Play it once on enter if it is a small underline. Mind the path length. Simplify the drawing, then animate. On reduced motion, set the stroke to its finished state.

Official GSAP

DrawSVGPlugin. Fallback: stroke-dashoffset.

gsap.fromTo('.line', { drawSVG: '0%' }, {
  drawSVG: '100%', duration: 1.6, ease: 'power2.inOut',
});

Every plugin ships in the public GSAP package. Nothing here is copied from a paid pack.

Common questions

Can I draw a filled logo?: Not with this. DrawSVG is a stroke.
Play or scrub?: Play once for a small figure. Scrub when the act of drawing is the point.
How slow is too slow?: If the line is still tracing after about a second, people have moved on. Scrubbed drawings can last longer.
What about dashed strokes?: They can look busy while they draw. Test a solid stroke first.
What does reduced motion do?: Show the finished path. No trace.

Save as skill

A SKILL.md for this one animation: what it is, the official docs link, and a copy-paste block with the reduced-motion branch already in it. Copy gives you the same words.

Use this with your AI

Save the skill, drop it into Cursor, Claude, or whatever you use, and ask for this motion. That is all. The skill tells the agent to open this page, watch the working demo, and match it.

Last reviewed 26 AUG 2026

Next: Infinite marquee