SVG path animator
Generate a line-drawing animation — CSS or SMIL, self-contained in the file.
By opening this website or using its tools, you agree to our Terms and Privacy Policy.
or drag it here
SVG file
Your file never leaves your browser during processing
How it works
To animate an SVG path drawing itself, drop the file onto this page — each shape’s outline length is measured, and a stroke-dash animation is written into the file as CSS or SMIL, so the downloaded SVG animates on its own with no JavaScript.
The self-drawing line effect is one trick applied carefully. A stroke can be drawn as a dashed line, and stroke-dasharray sets the dash pattern while stroke-dashoffset shifts where it starts. Set the dash length to exactly the length of the path, and the whole stroke becomes a single dash. Offset it by that same length and the dash sits entirely off the end of the path, invisible. Animate the offset back to zero and the line appears to draw itself.
It only works if the length is exact. Too short and the stroke never quite closes; too long and it starts partly drawn or finishes early. This is why the length is measured rather than estimated: each shape is rebuilt as a bare geometry element in an off-screen SVG and the browser is asked for its real path length through getTotalLength — the same number the renderer itself uses. Circles, rectangles, polylines, and lines are all measured the same way, not just path elements.
Two outputs are offered because they fail differently. CSS puts a style block inside the SVG: it is the modern default, respects the browser’s animation handling, and is easy to edit afterwards. SMIL uses animate elements — the original SVG animation system, still supported in every current browser, and useful in the specific contexts where an external or injected stylesheet would not apply.
Either way the result is a self-contained file with no script in it, which is what makes the preview honest: the animation runs inside an image element, exactly as it will when used as a CSS background, an img src, or inline markup. Shapes with no stroke cannot show a draw animation — there is no outline to trace — so those are counted and reported, with fade offered as the alternative.
FAQ
Does the animated SVG need JavaScript?
No. Both outputs are declarative — a CSS style block or SMIL animate elements inside the file — so the SVG animates on its own as a standalone file, an img src, or a CSS background.
Why does nothing appear to animate?
A draw animation animates a stroke, so shapes that are filled rather than stroked have no outline to trace. The tool counts those and says so; use fade for filled artwork, or give the shapes a stroke first.
Should I choose CSS or SMIL?
CSS in most cases — it is easier to edit and integrates with the rest of your styles. Choose SMIL when the SVG will be used somewhere a stylesheet cannot reach it, or when you want the animation defined purely in SVG markup.
How is the path length calculated?
It is measured, not guessed: each shape is rebuilt off-screen and the browser’s own getTotalLength is called on it, which is the same geometry the renderer uses. A guessed length leaves a visible gap at the end of the stroke.
Can I control the order shapes animate in?
Indirectly. Shapes animate in document order, and the stagger control sets the gap between each one starting. Set stagger to zero to have everything animate at once.