Animate SVGs Visually.
Export Pure CSS.
Draw shapes, set keyframes on a timeline, tweak easing curves — export clean CSS keyframes, SMIL SVG, or a React component. No runtime needed.
Built for icons, loaders, logos, and UI micro-animations.
What you can animate
Loaders
Spinning progress rings
Charts
Live bar animations
Alerts
Swinging bell icons
UI Icons
Rotating gear settings
Actions
Refresh & reload loops
Accents
Spinning star badges
Triggers
Download bounce cues
Status
Verified checkmarks
Wrong tool for the job
Lottie, GSAP, and Rive
are built for something else.
Those tools shine for interactive, complex scenes. But animating an icon or loader doesn't need a 300 KB runtime — it needs CSS, and a visual editor to write it.
Bringing these to an icon animation:
Lottie
JSON format + lottie-web player
gzipped runtime
GSAP
Powerful but requires writing JS
gzipped runtime
Rive
Binary .riv format + canvas runtime
gzipped runtime
SVGator
Proprietary player + paid subscription
gzipped runtime
average overhead just to run 1 icon
~40 KBCSSVG exports this instead:
Same animation.
Spinning at 60 fps. No runtime loaded.
JS runtime shipped to users
works in any browser, email, img tag
For icons and small SVG animations, the browser already knows how to run it. CSSVG makes it visual — export SMIL SVG, CSS @keyframes, or React JSX.
Features
Built for the job.
Every control you need to animate an icon or loader. Nothing you don't.
No JavaScript Runtime
Ship animations without a JavaScript tax. Export SMIL SVG or CSS @keyframes — pure browser-native, zero runtime, better Core Web Vitals.
3 Export Formats
CSS @keyframes, self-contained SMIL SVG, or a React JSX component. One animation, any stack.
Visual Timeline
Drag keyframe diamonds, scrub the playhead, set FPS and duration. Play, pause, loop — all built in.
Per-Keyframe Easing
Every keyframe interval has its own cubic-bezier. Pick from 9 presets — Spring, Bounce, Anticipate — or drag the interactive graph to dial in the exact feel.
6 Shape Types
Rect, circle, line, polygon, pen path, and text — each with independent fill, stroke, opacity, and keyframe tracks.
Full Transform Control
Position, rotation, scale X/Y, orbit, anchor point — all animatable per keyframe, all editable numerically.
Cloud Save & Unlimited Undo
Projects sync to your account automatically. Full undo/redo history so you can explore freely — nothing is ever lost.
How it works
Four steps.
From blank canvas to animated export in minutes.
Draw
Add shapes to the canvas — rectangle, circle, polygon, line, pen path, or text. Paste an existing SVG or build from scratch. Drag to position, resize handles to fit.
Rect · Circle · Polygon · Line · Path · TextKeyframe
Scrub the playhead to any point in time and set a keyframe. Move, rotate, scale, change fill or opacity — each property is interpolated automatically between keyframes. Adjust duration from 0.5s to any length.
Position · Rotation · Scale · Opacity · Fill · OrbitEase
Click the curve preview on any keyframe to open the bezier easing editor. Drag the two control handles to shape the feel — or pick from 9 presets: Linear, Spring, Bounce, Anticipate, Snap, and more.
9 presets · Interactive bezier graph · Per-keyframeExport
Export as a self-contained SMIL SVG, a CSS @keyframes file, or a React JSX component. Copy and paste directly into your project — no runtime, no build step, no dependencies.
SMIL SVG · CSS @keyframes · React JSXExamples
See what it makes.
Real animations built with CSSVG. Fork any of them and edit right in the editor.
My First Animation
An SVG animation created with CSSVG
Beach scene
A serene beach scene rendered in SVG
Keyframe Animations
A collection of keyframe animations in SVG
Loading Animations
A set of loading spinner animations created with CSSVG
Loading wave Animations
A set of loading wave animations created with CSSVG
My First Animation
An SVG animation created with CSSVG