SVG Animation Studio

A composable SVG animation system driven by Claude Code. Describe an animation in natural language. Get a production-ready .svg file.

GitHub → README Architecture v0.1.0 Release

The 30-second demo

Open the repo in Claude Code. Type a sentence. Watch it animate.

"做一个会跳的紫色机器人" (make me a jumping purple robot)

/svg-animate auto-triggers
  → forks the closest existing preset (claude-jumping)
  → reuses 4 motion primitives + 2 shape primitives
  → writes output/purple-robot-jumping.svg
  → /svg-verify dispatches a subagent, returns ≤100-word verdict
  → iterates once on the feedback
  → offers /svg-export to ship

No SVG hand-written. No keyframe manually computed. The 5th preset below (purple-robot-jumping) was generated entirely from that single sentence in a real field test.

Five working presets

Each preset is a working file (~30–50 lines) that composes motion, shape, and filter primitives. Click to view source.

claude-jumping

Squash-stretch jump + ear bounce stagger + synced shadow

claude-speaking

Idle bob + mouth talk + sound waves + floating music notes

codex-jumping

Gradient cloud body + filter depth + same kinematics

codex-speaking

Voice rings + glow filters + ellipse mouth

purple-robot-jumping

Grown entirely from one natural-language sentence

Quick start

git clone https://github.com/ChanMeng666/svg-animation-studio.git
cd svg-animation-studio
npm install

npm run dev                              # preview grid at localhost:3030
node lib/render-cli.js claude-jumping    # render a preset to output/
npm test                                 # snapshot test suite