Free SVG Animation Editor — AI Motion Studio

Free SVG Animation Editor — AI Motion Studio · SVGMotion

saved locally

State machine port → connect · click: play · dbl-click canvas: +node · edge: edit

0.00s · 0f

Timelineidledur ms1×

⠿

Inspector Live

Layerrocket.body

Position

Rotation

Scale

Opacity

Clip

Align

Effect

Physics

solid surfacefloors · walls · boxes

Ambient CSS

continuous loops · no transform/opacity on layer ids

Action

Name

Duration

Triggers

Poses

Loopreplay when it ends — keeps rolling / re-drops forever

Inputs

named values the host app sets — player.setInput('armed', true) · transitions gate on them via "when"

Transition

→

Trigger

Duration

Easing

Target

When — guard expression

Interpolates from the current rendered pose, preserving velocity when interrupted.

About the SVG Animation Editor

The SVGMotion editor is a free, local-first vector animation tool. Prompt AI to generate SVG scenes, edit keyframes and transitions, bake physics, and export self-contained .svg files that render anywhere a browser does. Every export ships a tiny player API — player.call('launch'), player.play.hover(), player.setInput('armed', true) — so you can trigger animations from your own code.

Built on vanilla JavaScript with no framework or build step. Physics is simulated once and baked into ordinary keyframes, so the output is small (~3 KB) and requires no runtime. All projects live in IndexedDB on your device — no account, no tracking. BYOK AI support for Ollama, OpenRouter, and OpenAI; an optional WebLLM tier runs Llama-3.2-1B in-browser.

Use the gallery to explore live examples, then remix a template in the editor. See the full documentation for guides, shortcuts, and examples.