SVGANIM · SVG animation editor

01 Layers

No layers on file. Drop an SVG drawing anywhere on the page.

02 Artboard
03 Inspector
Project
W
H
Dur s
FPS

Select a layer on the sheet or in the layer list. With auto-key on, every change at the playhead is recorded as a keyframe.

04 Timeline
00:00.000 / 00:03.000 F000
Dur s
Layer / property
0s
Keyframes show up here once a layer is animated.
Export Pure SVG and CSS. No runtime required.
Format
Repeat
Direction
Playback
Runs the moment it renders.
Reduced motion
Preview
anim.svg · 0 B 
 
Use it 
<!-- static/anim.svg -->
<img src="/anim.svg" alt="" width="512" height="512" />

<!-- or inline -->
import anim from '$lib/anim.svg?raw';
{@html anim}
 
Shortcuts 
 
Playback
 
Space Play / pause
Home / End Start / end
← / → Previous / next keyframe time
↑ / ↓ Next / previous frame (⇧ ×10)
, / . Previous / next frame (⇧ ×10)
J / K Previous / next keyframe time
Alt + scrub Scrub between frames
Keyframes
 
◆ in inspector Add / remove key at playhead
Click / ⇧ click Select / add to selection
Drag empty track Marquee select
Drag key Retime (snaps to frames)
Double-click key Jump playhead to it
⌘C / ⌘V Copy / paste keys at playhead
⌫ Delete keys (or the layer)
Canvas
 
Drag shape Move (⇧ locks axis)
⌘ while dragging Bypass smart guides (magnet toggles them)
⇧ click Add / remove from selection
Corner / edge Scale around anchor (⇧ uniform)
Group corner / edge Scale from opposite side (alt: center)
Top handle Rotate around anchor / group center (⇧ 15°)
⊕ anchor Move pivot, snaps to any layer (alt: shape follows)
⌥ + arrows Nudge selection 1 px (⇧ 10 px)
Space + drag Pan
⌘ + wheel / pinch Zoom
F · ⌘0 · ⌘1 Fit · fit · 100%
Paths
 
Double-click shape · Enter Edit its path
Drag anchor / handle Reshape (⌥ breaks a smooth handle)
Click the outline Add an anchor
⌥-click / double-click anchor Corner ↔ smooth
⌫ Delete selected anchors
⌥ + arrows Nudge selected anchors
P Pen: click corners, drag curves, Enter to finish
V · Esc Select tool · finish editing
Project
 
⌘Z / ⇧⌘Z Undo / redo
⌘O Import SVG
⌘V (svg markup) Import from clipboard
⌘S Save project file
⌘E Export
⌘D Duplicate layer
⌘[ / ⌘] Move layer down / up
 
Full particulars in the operating manual →