Interactive SVG Animation Builder

SVG animates two ways and they behave nothing alike. CSS keyframes treat the SVG's elements as ordinary boxes you can transform, fade and recolour, which is fast, hardware-accelerated and debuggable in devtools. SMIL — the animate elements written inside the SVG file itself — can do things CSS cannot, notably animating path geometry, but it does not run when the SVG is used as an img src or a CSS background, which is where most icons end up.

The draw-on effect is the one people come here for. It works by turning the outline into a dashed stroke whose single dash is exactly as long as the path, then animating the dash offset from that length down to zero, so the line appears to be drawn. The critical number is the path length, and getting it wrong is why the effect so often starts with a visible chunk already drawn or finishes early. This builder measures each path with getTotalLength and writes the real figure into the keyframes rather than the usual guessed round number.

Paste your own SVG or start from one of the samples. The preview runs the animation live, so timing, easing and stagger can be judged rather than calculated — a stroke draw that reads well at 1.2 seconds looks broken at 400 milliseconds no matter what the numbers say.

The output includes a prefers-reduced-motion block. Looping animation is a genuine accessibility problem for people with vestibular disorders, and an icon that draws itself once on load is fine while the same icon looping forever is not.