SVG Animation Generator

Animate SVG with CSS and SMIL. Per-element targeting, stroke-draw, path motion, presets. Export inline SVG, split CSS, or React. In-browser.

X LinkedIn

SVG Input

SVG code

Elements to animate

Paste valid SVG to see elements.

Preview

Select elements to animate.

Animation Presets

Customize

Duration: 1s

Delay: 0s

Stagger: 0ms

Timing Function

Iteration

Direction

Fill Mode

Add reduced-motion media query

Generated code

All processing in your browser. No data is sent to any server.

Frequently Asked Questions

Yes, completely free with no sign-up. All processing runs in your browser.

No. All animation generation happens in your browser. Your SVG never leaves your device.

Paste your SVG, select the path element in the element list, then choose "Draw Path" or "Reverse Draw" preset. The tool generates stroke-dasharray/dashoffset CSS for the drawing effect.

You can export as inline SVG (single file with embedded style), split CSS (SVG and CSS separate), or as a React component.

Yes. Enable "Add reduced-motion media query" to wrap animations in @media (prefers-reduced-motion: no-preference), so users who prefer reduced motion see static graphics.

Was this helpful?

Related Tools

SVG Viewer

New

Paste or upload SVG to view and inspect. See dimensions and code. Links to SVG Optimizer. All in your browser.

SVG Optimizer

Minify and optimize SVG files. Remove metadata, trim whitespace, reduce file size. All in your browser.

CSS Animation Generator

Create and customize popular CSS animations with live preview. Export to CSS, Tailwind, or copy-paste classes with full control over duration, timing, and effects.