Animate vectors. Ship one small file.
svgmo is a vector animation editor that runs in your browser. Draw, set keyframes, and export a self-playing SVG or a svgmo JSON file with an 11 KB player.
No account. Nothing to install. Your work stays in your browser.
Small files
Most of the animations on this page are under 2 KB.
No player needed
Animated SVG plays by itself, even in an image tag.
Interactive
Play on hover, on click, or when scrolled into view.
Developer ready
One tag to embed, and a script API to drive it.
Every tile here is a live file
Each one was built with the same tools you get in the editor and is playing through the player right now.
Curve and rider4.3 KB Bars2.2 KB Like1.4 KB Orbit1.7 KB Download1.4 KB Morph1.6 KB Radar1.6 KB Switch1.1 KB Wave1.3 KB Done1.2 KB Tumble1.1 KB Typing1.3 KB Loader1.1 KB
File sizes are the svgmo JSON files as served, before compression.
119 free animations, ready to use
Illustrated scenes, characters, loaders, status icons, charts and more. Download one, or open it in the editor and change it.
One document, from first shape to live page
An editor to make it, a player to run it, and five export formats. Pick a tab and try each part.
The editor
Menus on top, tools on the left, properties on the right, a timeline underneath. Draw with the pen, key any property, and shape the motion with easing curves.
The timeline here is live. Drag it.
Start creatingThe motion tools you expect, in a browser tab
Everything below is in the editor today.
Keyframes and easing
Key any property, then shape the move with a curve editor and thirteen easing presets.
Motion paths
Draw a route and drop a layer on it. It follows, and can turn to face the way it travels.
Shape morphing
Keyframe the outline itself and one shape becomes another.
Draw-on strokes
Trim a stroke from 0 to 100% and a line writes itself.
Parenting
Attach one layer to another so it inherits position, rotation and scale.
33 motion presets
Fade, pop, spin, shake, float and more. Watch each one on your layer before you apply it.
Image to vector
Bring in a PNG or JPG and trace it into clean shapes, with control over colours and detail.
Split into shapes
Break an imported word or icon into separate layers, then animate each letter on its own.
Light on the page, quick on every frame
The player builds the drawing once, then changes only what moved. Layers that stand still cost nothing.
- 11 KBplayer script, gzipped, no dependencies
- 0.04 msper frame on a 36,000-point scene, measured in Chromium
- 1 tagto embed, with triggers as attributes
<script src="svgmo-player.js"></script>
<svg-mo
src="done.json"
trigger="visible"
loop="false"
style="width: 72px">
</svg-mo>Three steps from blank page to live site
Draw or import
Use the pen and shape tools, open an SVG, or trace a picture into vectors.
Animate
Move the playhead, change a value, and a keyframe appears. Or pick a preset and preview it first.
Export
Name the file and choose a format. Paste one tag, or the SVG itself, into your page.
Questions, answered plainly
Do I need an account?
No. The editor opens straight away. There is nothing to sign up for and nothing to install.
Where is my work kept?
In this browser's own storage, on your device. Nothing is uploaded. Clearing the browser's site data removes it, so use File > Save to keep a project file.
Do I have to use the player?
No. Animated SVG export gives one file that plays by itself, with no script. Use the player when the page has to control the animation: hover, click, scroll, pause or seek.
What can animated SVG not do?
It cannot be paused or scrubbed from code, and email clients and some site builders strip SVG animation. For those cases export svgmo JSON or a video.
Can I open Lottie files?
Not yet. The editor exports Lottie JSON and dotLottie but cannot open them. It opens SVG files, PNG and JPG images (traced to vectors), project files and svgmo JSON files.
Which browsers does the player support?
It uses standard SVG and custom elements, which every current browser has. It has been tested in Chromium; Safari and Firefox have not been run yet. The player is for the web only.
Your first animation is one tab away
Open the editor and start with a blank artboard.