Shape morphing
Morph any path into another. SVGcinema splits and matches the nodes so the in-between frames stay clean.
Meet the design agent: describe it, watch it animate
Draw it.Key it.Ship one SVG.
SVGcinema is a free animation editor in your browser. Draw or import, animate on a keyframe timeline, or just ask the built-in agent. Then export one self-contained .svg that plays anywhere, or a video, GIF or image of it.
No account, no install, no watermark.
This is the editor’s sample scene, exported from SVGcinema as one 65.6 KB file and playing live on this page. Drag across the timeline to scrub it.
65.6 KB
the whole sample scene, as one SVG with its player inside
4 kinds
of export: animated SVG, image, video, and GIF or animated WebP
0
runtime dependencies in what you ship, and no accounts or watermarks
100%
in your browser: projects and API keys stay on your machine
0:03.00
From blank canvas to a file in three moves.
Keep scrolling. The playhead below follows you, the same way it follows your edits in the editor.
sunrise-badge.svgOne file, player included. Plays anywhere.
LAYERS0:00.00
HillTrim end
SunPosition
SunFill
0.00s
1
Draw or bring in artwork
Use the pen, pencil and shape tools, or bring in what you already have. Imported SVG keeps its groups as layers.
- PPen: click for a corner, drag for a curve
- Ctrl VPaste Figma’s “Copy as SVG” straight onto the canvas
- DropSVG and images: PNG, JPG, GIF, WebP, AVIF, BMP, ICO, TIFF and HEIC
2
Animate on the timeline
Click the diamond beside a property to start animating it. Move the playhead, change the value, and a keyframe appears. Or describe the motion and let the agent key it.
- Shift PAdd a position keyframe at the playhead
- Shift OOpacity. Also Shift R rotate and Shift S scale
- Alt AOpen the design agent
3
Export one file
Out comes a single SVG with your images embedded and a tiny player built in, plus the embed code for HTML, React, Next.js, Vue, Angular or Svelte. Or the same animation as a video, a GIF or a still.
- Ctrl EOpen the Export window
-
Ctrl SSave the project as a
.SVGcinemafile
DESIGN AGENT
Describe it. It draws, keys and checks its own work.
Ask for “a cartoon rocket that launches” and the agent works in your project with the editor’s own tools: shapes, layers, presets, keyframes and shape morphs. You watch every step on the canvas.
- One request, one undo step. Roll back the whole request, or stop it half-way and keep what’s done.
- It looks at its work. Models that can see take a snapshot of the canvas and fix what’s off.
- It asks first. Before deleting layers, and before paying for an image, with the price.
- No middleman. Keys stay in your browser and go straight to your provider.
Your own API keyOpenRouter, OpenAI, Anthropic, Gemini, Groq or any compatible service
Your AI assistantNo key: Claude in Chrome or another assistant in your browser
0:06.00
Every property gets its own track.
Color and opacity, a gradient’s angle, a blur’s radius, a star’s corner radius. If you can set it in the inspector, you can put a keyframe on it.
Motion paths
Set any path as a motion path. The layer follows it at an even speed and can turn along the curve.
Trim path Shift D
Start, end and offset are all animatable, for lines that draw themselves on and dashes that travel.
Bones and IK B
Rig a stalk, an arm or a tail with bones. Pose it with forward or inverse kinematics, squash and stretch it, and key the whole rig in one go.
Pins and mesh warp W
Pin a path, an image, text or a whole group, then drag the pins to bend it. Pins can follow bones, so a rig bends a sleeve or a vine.
Filters
Blur, shadows and glows, color adjustments and outlines. Stack them on any layer, drag to reorder, and every setting has its own track.
Animation presets
Entrances, exits, emphasis, strokes, color and filters in one click, staggered across layers. They slot into the keyframes you already have.
Graph editor
Open any number track into a value graph: drag keys for value and time, shape the easing with handles.
See all features →
Plus masks, gradients, dash patterns, symbols, onion skin, easing, triggers, hyperlinks and more.
0:09.00
Ship it anywhere.
One self-contained animated SVG is the headline. Where SVG can’t play, export the same animation as a video, a GIF or a still.
Animated SVG
With a tiny JS player or pure CSS. Plays on load, hover, click, when scrolled into view, or from your code; with the JS player it can even follow the page’s scroll, forwards and back.
Video
MP4, WebM or PNG frames, encoded in your browser.
GIF & Animated WebP
For email and chat, with the real file size as you tune it.
Image
Any frame as PNG, JPEG, WebP, AVIF or JPEG XL.
0:12.00
Fits the way you already work.
Bring in work from other tools and keep editing it. Keys where your hands expect them.
Opens any SVG, even animated ones
Figma, Illustrator and Inkscape files keep their layers. JS-player and CSS animations come in as keyframes you can edit.
Import →Every tool is one key away
V P R T B W, on any keyboard layout. Snapping, guides, align, booleans, and numbers you can drag or nudge with the arrows.
Tools and keys →FREE, AND IT STAYS ON YOUR MACHINE
No account
Open the editor and start. Your work saves itself in the browser.
Projects are files
Save, share and back them up like any document.
Your exports are yours
Use and sell what you make, commercially too, player included.
Light or dark
The editor and this site share your choice.
Roll the first frame.
The sample scene opens with the editor, so you can take it apart layer by layer and see how each effect is made.