OneTaskBy Tim King · Updated
SVG Line Drawing Animation Generator
Stroke-Dashoffset Animation for SVG Paths Drawn in Order, With Optional Fill
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the SVG Path Draw works
This SVG line drawing animation generator makes paths draw themselves. Paste the d attribute of any SVG path, or several on separate lines, and watch each one draw
itself from start to finish like pen on paper. Set how long each stroke takes, the gap before
the next begins, and whether the shape fills in once its outline is complete. The output is a
plain inline SVG plus a few lines of CSS; nothing else is needed.
SVG line drawing animation: the dash trick
The line-drawing effect is one of the oldest SVG tricks and it depends entirely on dashes. If a
stroke is dashed with a gap exactly as long as the path itself, and the dash pattern is offset by
that same length, the visible dash sits entirely off the end of the path and nothing shows.
Animating the offset back to zero slides the dash into place, so the line appears to be drawn.
The awkward part has always been knowing the path's length, which used to mean calling
getTotalLength() in JavaScript and writing the number into the CSS.
The generator avoids that with pathLength="1". That attribute tells the browser to treat the
path as if it were one unit long, whatever its real length, so stroke-dasharray: 1 and
stroke-dashoffset: 1 work for every path regardless of shape or size. One rule covers every
line in the drawing, and you can edit the path later without touching the animation.
Multiple paths are drawn in document order. The delay between paths offsets each one's
animation-delay so the second stroke starts after the first has had time to progress; set it
equal to the draw time for strictly sequential strokes, or shorter for an overlapping, hurried
feel. Ease out makes each stroke start quickly and slow into its end point, which reads as
deliberate handwriting; Linear is more mechanical and suits technical diagrams.
Fill after drawing adds a second animation that fades fill-opacity from zero once the
outline has finished, so closed shapes colour in after they are traced. Open strokes such as a
signature should stay unfilled, otherwise the browser will fill the area between the endpoints.
The viewBox controls the coordinate space; paste it from your original SVG so the coordinates in
your path data line up. If you only have a full SVG file, copy the d value of each <path>
and put one per line. Paths that start with a Z in the middle or are made of several
subpaths still work: they are one element and draw as one continuous stroke.
FAQ
Why does nothing draw?
Usually the viewBox does not match the path coordinates, so the path is off-screen. Copy the
viewBox from the original SVG. If the path has no stroke of its own, check that the CSS
sets stroke and that fill is none while drawing.
Why does my signature fill in?
Fill after drawing was on. A signature is an open path, and the browser fills the area between its endpoints. Turn the option off for open strokes.
Can I draw a whole SVG file at once?
Paste each <path>'s d value on its own line and they draw in order. Circles, rects and
lines need converting to paths first, which most editors do with a "convert to outlines" or
"object to path" command.
Why does a long path draw faster than a short one?
pathLength="1" normalises every path to one unit, so each takes the same time regardless of
length. For a constant pen speed, give longer paths a proportionally longer duration by hand.
See also: all Shadows & Motion tools, Layout & Spacing, Shapes & SVG, UI Components, Forms & Inputs, Colour.
Related tools
SVG Path Visualizer
Plot SVG path anchors and bezier control handles live.
Logo Reveal
Animate a wordmark reveal and copy the CSS.
Easing Comparison
Run two CSS easings side by side and copy the winner.
Keyframe Animator
Build and preview a CSS @keyframes animation from three stops.
Animated Banner
Design an animated ad banner and export GIF or WebM.