SVG Animation Generator — CSS, SMIL & GSAP Online Tool

What's included

Features

Step by step

How to Use

1. 1
   Add a shape or upload your SVGStart by either adding a built-in shape — click any shape button at the top of the canvas to add a circle, rectangle, ellipse, star, heart, arrow, triangle, line, or text element — or click Upload SVG to load an existing SVG file. When you upload an SVG, the tool parses the markup and extracts each child element (path, circle, rect, g, etc.) as a separate, independently animatable layer in the layers panel. You can also draw freehand shapes directly on the canvas using the draw mode. Import a raster image first with the Image to SVG converter, then bring it here to animate.
2. 2
   Choose an animation engineSelect your animation engine from the three tabs above the presets panel. Choose CSS for zero-dependency animated SVG — @keyframes are embedded inside a <style> block in the SVG, so the file works as an <img> src, inline SVG, or CSS background-image with no JavaScript. Choose SMIL for native SVG animation elements (<animate>, <animateTransform>) baked into the markup — maximum portability across SVG renderers including email clients and some desktop apps. Choose GSAP for the most sophisticated animations: elastic easing, Orbit via MotionPathPlugin, Figure-8 motion paths — output is a self-contained HTML file.
3. 3
   Click a preset to apply itBrowse the preset list on the left and click any preset name — the canvas preview plays the animation immediately. For CSS and SMIL: Rotate, Spin CCW, Pulse, Zoom In, Bounce, Float, Move Right, Shake, Wiggle, Skew, Fade, Blink, Color Cycle, Rainbow, Draw Stroke (the stroke-dashoffset draw-on effect), Write On, and Erase. For GSAP: all CSS presets plus Elastic, Orbit (circular path via MotionPathPlugin), and Figure-8. The Draw Stroke preset is especially popular — it progressively reveals a stroked path as if drawing itself, used for logo reveals, signature animations, and diagram walkthroughs.
4. 4
   Fine-tune duration, delay, easing, and repeatUse the animation controls panel to adjust the parameters. Set Duration in seconds — shorter for snappy micro-animations, longer for flowing motion. Set Delay to stagger multiple layers. Choose an Easing function from the dropdown: ease, linear, ease-in, ease-out, ease-in-out, bounce, or elastic (GSAP only). Set Repeat count — use "infinite" for a looping icon, or "1" for a play-once animation that holds the end state with animation-fill-mode: forwards. Click the Replay button at any time to restart the animation from the beginning and preview the result.
5. 5
   Animate multiple layers independentlySelect any layer in the layers panel to animate it separately from other elements. Each layer can have its own preset, duration, delay, and easing — allowing complex multi-part animations like a logo where the background fades in, then the wordmark draws itself, then an icon bounces. Reorder layers with drag-and-drop, duplicate a layer to copy its animation settings as a starting point, or delete unused elements. Undo and redo are available throughout the session.
6. 6
   Export the animated fileClick Export SVG to download an animated .svg file for CSS and SMIL animations — this is a single portable file with all animation code embedded. Click Export HTML for GSAP animations — the HTML file includes GSAP and MotionPathPlugin loaded from the GreenSock CDN plus all timeline code, ready to open in any browser. Click Copy Code to copy just the animation block (the CSS @keyframes rules, SMIL elements, or GSAP script) if you want to manually integrate the animation into an existing SVG or HTML file.

Real-world uses

Common Use Cases

Got questions?

Frequently Asked Questions