SVG Animator

What is this?

The Animated SVG Builder is a free, browser-only alternative to tools like SVGator and Lottie Editor. You import any SVG — paste the code directly or drop a file — and then animate individual elements using a keyframe timeline. When you're done, you export production-ready CSS @keyframes that you can drop straight into your stylesheet. Nothing is uploaded anywhere; all processing happens locally in your browser.

It's aimed at web designers, WordPress developers, and front-end hobbyists who need lightweight SVG animations without paying for a subscription or learning a complex animation platform. The exported CSS works in all modern browsers and can be pasted into WordPress, Webflow, Squarespace custom CSS boxes, or any HTML file.

How to use it

1. Import your SVG: Paste SVG code into the text area, drag and drop an .svg file onto the app, or pick one of the four starter SVGs to experiment with right away.
2. Select an element: Click any row in the Layers panel on the left, groups are collapsed by default. The element is highlighted with a dashed green outline in the preview. Paths, circles, rectangles, and groups all appear as separate layers. Double click to rename a layer
3. Set a property value: In the Properties panel on the right, adjust translate, rotate, scale, opacity, fill colour, stroke colour, stroke width, wipe, or stroke-dashoffset to the value you want at a specific moment.
4. Add a keyframe: Move the playhead to the desired time on the timeline, then change any property. A diamond appears on the timeline track for that element and property.
5. Repeat for other moments: Move the playhead to another time, change the property value to add another keyframe. The tool interpolates smoothly between keyframes.
6. Preview the animation: Click Play to watch the animation loop in the preview panel. Drag the playhead scrubber to inspect any moment manually.
7. Export: Click Export → CSS @keyframes to generate the animation code along with the SVG with all the classes added. Paste it where it needs to go!

The three approaches to animating SVG

There are three main ways to animate SVG elements, and each has its place:

CSS @keyframes is the most portable and performant option. You write animation rules in a stylesheet, the browser handles interpolation on the GPU, and you don't need any JavaScript. It's the approach this tool exports. The main limitation is that CSS can't easily animate along a path or respond to scroll position without extra work.

SMIL (Synchronised Multimedia Integration Language) is SVG's built-in animation system, using elements like <animate> and <animateTransform> inside the SVG itself. It's declarative and self-contained, but browser support has historically been inconsistent — Chrome once announced it was removing SMIL, then reversed the decision. For production, CSS or JS is generally safer.

JavaScript (GSAP, anime.js, or vanilla) gives you the most control: scroll-triggered animations, physics, staggering, and complex sequencing. GSAP in particular is the industry standard for high-fidelity SVG animation. The trade-off is an extra HTTP request and the need for JavaScript to be enabled. For simple decorative animations, CSS @keyframes is usually the right call.

The draw-on effect

One of the most popular SVG animation techniques is the "draw-on" or "stroke draw" effect, where a path appears to be drawn onto the screen in real time. It works entirely with two CSS properties: stroke-dasharray and stroke-dashoffset.

Set stroke-dasharray equal to the total length of the path — you can find this by calling path.getTotalLength() in JavaScript, or by clicking the "Set dasharray to path length" button in the Path section of the Properties panel. This turns the stroke into a single dash the exact length of the path, with a gap of equal size. Then, animating stroke-dashoffset from that length down to zero "reveals" the stroke progressively, creating the draw-on illusion.

To prep your SVG for this effect: make sure the shape you want to animate has a stroke set and fill: none. Thick strokes work best visually. The checkmark starter SVG in this tool is pre-configured for exactly this demo — select it, open the Path properties, and click "Set dasharray to path length" to get started.

Privacy

Everything this tool does happens inside your browser — no SVG code, no animation data, and no exported files are ever sent to a server. When you import an SVG, it is parsed and sanitised locally using DOMPurify, which strips any scripts, event handlers, or potentially malicious attributes before the SVG is rendered. Your project auto-saves to localStorage in your browser only. The share link feature base64-encodes your project data directly into the URL — there is no server-side storage involved.