Free & private

SVG Stroke Animation Generator

Paste an SVG, and this tool measures every path with getTotalLength() to build a smooth CSS draw-on animation — with a live looping preview and copy-ready code.

SVG

Add your SVG

Paste markup, upload a file, or try a sample.

2.2s
0.15s
3px
▶

Live preview

Watch your SVG draw itself in.

Your animated SVG preview will appear here once you generate an animation.

Generate an animation to see the code.
⚡

Real path measurement

Every shape is measured with the browser's own getTotalLength(), so the dash length always matches exactly.

🎨

Tune it visually

Adjust duration, easing, stagger delay, color and stroke width, and watch the preview update live.

🔒

Private by design

Your SVG markup is parsed and animated locally. Nothing is uploaded to a server.

How to use the SVG stroke animation generator

Turn any line-based SVG icon, logo or illustration into a self-drawing animation without writing keyframes by hand.

  1. Add your SVGPaste markup, upload an .svg file, or start from a built-in sample shape.
  2. Tune the animationSet the draw duration, easing curve, delay between paths, color and loop behavior.
  3. Copy the codeGrab the generated CSS keyframes or the full annotated SVG snippet and drop it into your project.

How the SVG draw-on effect works

The classic "line drawing" animation relies on two CSS properties: stroke-dasharray and stroke-dashoffset. Setting both to a path's exact length hides the entire stroke behind one giant dash, then animating the offset down to zero reveals it gradually, as if it were being drawn by hand.

Exact, not estimated, length

Guessing a dash length leads to gaps or overshoot. This tool calls the SVG DOM's native getTotalLength() on every path so the animation always matches the real geometry.

Works on more than paths

Lines, polylines, polygons, circles, ellipses and rects are all supported, since they implement the same SVG geometry interface as paths.

Staggered multi-path reveals

When an SVG has several shapes, a small delay between each one creates a natural sequential drawing order instead of everything animating at once.

Pure CSS output

The exported animation needs no JavaScript to run. Paste the SVG with its inline custom properties and the generated CSS keyframes into any page.

SVG stroke animation FAQ

How does the SVG stroke draw-on animation work?

The tool measures each path's exact length with the browser's getTotalLength method, then sets stroke-dasharray and stroke-dashoffset to that length so a CSS animation can reveal the line from 0 to its full length, creating a hand-drawn effect.

Can I paste my own SVG?

Yes. Paste any SVG markup or upload an .svg file. The tool automatically finds every path, line, polyline, polygon, circle, ellipse and rect and prepares it for animation.

Do I need JavaScript to run the final animation?

No. The generated animation is pure CSS. You only need the exported SVG markup with its inline style attributes and the generated CSS keyframes.

Why doesn't a filled shape animate correctly?

The draw-on effect only affects the stroke outline. Shapes that rely entirely on fill with no visible stroke will not show a visible line-drawing effect, though the fill itself still renders normally.

Is my SVG uploaded anywhere?

No. Parsing, measuring and animating all happen locally in your browser. Your SVG markup never leaves your device.

Explore more free tools: SVG Pattern CreatorSVG OptimizerCSS Clip-Path Generator