Online Tool Store
SVG Animator
Upload an SVG, pick a draw-on, fade, or transform preset, and export CSS-only animated markup that respects reduced-motion — no JavaScript, nothing uploaded.
🔒 This tool runs entirely in your browser. Your files are never uploaded to a server.
Design & Color
SVG Animator
Preview
Draw works best on stroked <path> shapes. This SVG looks fill-only, so the outline may not appear to draw — the original artwork is left intact.
Generated CSS
Everything runs in your browser. Your SVG is never uploaded to a server.
How the SVG Animator works
- Add the SVG and choose the animation type.
- Set duration and easing — draw-on effects read best between one and two seconds.
- Keep the reduced-motion guard, then paste the SVG and its CSS into your page.
The method
A draw-on effect works by setting the stroke's dash pattern to the full path length and animating the offset from that length to zero.
stroke-dasharray: L; stroke-dashoffset: L → 0, where L is the path length
Getting L wrong is why draw-on animations sometimes start part-drawn or finish early — the dash pattern has to match the actual path length.
FAQ
Why does my draw-on animation start halfway?
Because the dasharray value does not match the path's true length. Measure the path with getTotalLength and use that number, rather than estimating it.
Should SVG be animated with CSS or SMIL?
CSS, for anything new. SMIL animation is deprecated in some engines and support is inconsistent; CSS keyframes and transforms are well supported and easier to control.
Why respect prefers-reduced-motion?
Because motion triggers nausea and vestibular symptoms for some people, and the operating system preference is how they ask for less of it. Honouring it is a two-line media query.
Can I animate an SVG without writing JavaScript?
Yes. Every preset here generates CSS keyframes only — the exported SVG has no <script> tag or event handler, so it animates in a plain <img> tag or CSS background just as well as inline markup.
Will the animation still play if I use the SVG as an <img> or background?
Only if the CSS lives inside the SVG file itself, since an <img> or background-image can't read an external stylesheet. This tool embeds the generated keyframes directly in the exported SVG's own <style> block for exactly that reason.
Do I need to upload my SVG file to a server?
No. The file is read locally with FileReader and parsed in your browser — it's never sent anywhere. Scripts and on* handlers are stripped out during that same local parsing step, before you ever see a preview.
How we compare
| Feature | Online Tool Store | A design app | A style guide PDF |
|---|---|---|---|
| Reduced-motion guard included | ✓ | ✗ | Rarely |
| CSS rather than SMIL | ✓ | Varies | ✓ |
| No animation software | ✓ | ✗ | ✗ |
| File stays on your device | ✓ | ✓ | ✗ |
SVG Animator wraps every animation in a reduced-motion query by default, which is the accessibility step hand-written SVG animation almost always skips.