SVG path animator
Make your SVG draw itself — no JavaScript needed.
Using toolbook means you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your files stay on your device
How to use it
Drop an SVG here to make its lines draw themselves. Preview it live, then download a single SVG file that animates on its own, with no JavaScript.
That cool effect where a logo or drawing sketches itself line by line? Drop your SVG onto the box above and it’s done.
Watch the preview, then adjust the speed and the gap between each shape starting. Set the gap to zero and everything draws at once.
Choose CSS for most uses — it’s easy to tweak later. Choose SMIL if the SVG will go somewhere your styles can’t reach. Either way, you download one self-contained SVG file that animates by itself wherever you use it.
Heads up: only outlines can draw themselves. If your artwork uses filled shapes with no outline, try the Fade style instead.
FAQ
Does the animated SVG need JavaScript?
No. The animation is built into the file, so it plays by itself as an image, a background, or inline code.
Why isn’t anything animating?
Draw animations trace outlines, and filled shapes don’t have one. Use Fade, or add an outline to your shapes first.
CSS or SMIL?
CSS for most uses. SMIL when the SVG will be used somewhere a stylesheet can’t reach.
Can I change the order shapes draw in?
They draw in the order they appear in the file. The stagger setting controls the gap between them.
How it worksFor the curious
The effect is a stroke-dash trick. stroke-dasharray sets the dash pattern and stroke-dashoffset shifts where it starts. Set the dash length to exactly the path length and offset it by the same amount, and the stroke is invisible; animate the offset to zero and the line draws itself.
It only works if the length is exact, so it is measured: each shape is rebuilt as a bare element in an off-screen SVG and the browser’s getTotalLength is called on it — the same number the renderer uses. Circles, rectangles, polylines, and lines are measured too, not just paths.
CSS output puts a style block inside the SVG. SMIL output uses animate elements, the original SVG animation system, still supported in every current browser. Neither contains script, so the preview runs inside an image element exactly as it will as an img src or CSS background.
Shapes animate in document order. Shapes with no stroke have nothing to trace, so they are counted and reported.