The SVG Animation Editor
Built for Icons,
Not Films.

Timeline editor, per-keyframe easing, 3 export formats — CSS, SMIL, JSX. Output is a 1.5 KB self-contained file. No runtime needed.

Built for icons, loaders, logos, and UI micro-animations.

Open Editor
View Demo

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:

frozen

Lottie

JSON format + lottie-web player

77 KB

gzipped runtime

frozen

GSAP

Powerful but requires writing JS

27 KB

gzipped runtime

frozen

Rive

Binary .riv format + canvas runtime

41 KB

gzipped runtime

frozen

SVGator

Proprietary player + paid subscription

13 KB

gzipped runtime

average overhead just to run 1 icon

~40 KB

CSSVG exports this instead:

Same animation.

Spinning at 60 fps. No runtime loaded.

@keyframes spin {
  to { transform: rotate(360deg) }
}
.icon {
  transform-origin: 50% 50%;
  animation: spin 2s linear infinite;
}
SVG + CSS total size1.5 KB

JS runtime shipped to users

works in any browser, email, img tag

0 KB
Works in emails & img tags
Others✗
CSSVG✓
No subscription required
Others✗
CSSVG✓
Hand-editable output
Others✗
CSSVG✓

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.

0 KB
0 KB shipped

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 · Text

Keyframe

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 · Orbit

Ease

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-keyframe

Export

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 JSX

Examples

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

Fork & Edit

Beach scene

A serene beach scene rendered in SVG

Fork & Edit

Keyframe Animations

A collection of keyframe animations in SVG

Fork & Edit

Loading Animations

A set of loading spinner animations created with CSSVG

Fork & Edit

Loading wave Animations

A set of loading wave animations created with CSSVG

Fork & Edit

My First Animation

An SVG animation created with CSSVG

Fork & Edit

Beach scene

A serene beach scene rendered in SVG

Fork & Edit

Keyframe Animations

A collection of keyframe animations in SVG

Fork & Edit

Loading Animations

A set of loading spinner animations created with CSSVG

Fork & Edit

Loading wave Animations

A set of loading wave animations created with CSSVG

Fork & Edit
Browse all animations in the showcase →

What you get

Clean code.
Every time.

CSSVG exports readable, minimal SVG and CSS — no minification tricks, no opaque JSON blobs. Drop it straight into your project.

animation.css
.anim-0 {  animation: anim-0 2000ms linear 0s infinite;}.anim-1 {  animation: anim-1 2000ms linear 0s infinite;}.anim-2 {  animation: anim-2 2000ms linear 0s infinite;}.anim-3 {  animation: anim-3 2000ms linear 0s infinite;}@keyframes anim-0 {  0%   { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  25%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  50%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  75%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  100% { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }}@keyframes anim-1 {  0%   { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  25%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  50%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  75%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  100% { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }}@keyframes anim-2 {  0%   { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  25%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  50%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  75%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  100% { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }}@keyframes anim-3 {  0%   { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  25%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  50%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  75%  { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }  100% { opacity: 1; fill: #bcbcbc; stroke: #bcbcbc; }}
output.svg
<svg xmlns="http://www.w3.org/2000/svg"
  viewBox="0 0 800 600">
  <g transform="translate(116.96,329.93)">
    <animateTransform attributeName="transform"
      type="translate" additive="replace"
      values="116.96,329.93;116.72,330.11;
        116.96,329.93;117.04,330.03;116.96,329.93"
      dur="2s" repeatCount="indefinite"
      calcMode="spline"
      keyTimes="0;0.25;0.5;0.75;1"
      keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1"/>
    <rect class="anim-0" fill="#bcbcbc"
      stroke="#bcbcbc" x="-33.9" y="-183.5"
      width="67.8" height="367.01" rx="15">
      <animate attributeName="height"
        values="367.01;29.82;367.01;37.29;367.01"
        dur="2s" repeatCount="indefinite"
        calcMode="spline"
        keyTimes="0;0.25;0.5;0.75;1"
        keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1"/>
      <animate attributeName="y"
        values="-183.5;-14.91;-183.5;-18.64;-183.5"
        dur="2s" repeatCount="indefinite"
        calcMode="spline"
        keyTimes="0;0.25;0.5;0.75;1"
        keySplines="0 0 1 1;0 0 1 1;0 0 1 1;0 0 1 1"/>
    </rect>
  </g>
  <!-- bars 2–4: same pattern, staggered -->
</svg>
preview
✓ Copy-paste into any project✓ Works in every browser✓ No build step required✓ Readable by humans

Draw it. Keyframe it.
Ship it.

SMIL SVG · CSS @keyframes · React JSX

A visual editor for SVG animation. Set keyframes, shape easing curves, export clean code — no JavaScript runtime, no subscriptions, no proprietary player.

Open Editor — It's FreeView showcase

No sign-up · No credit card · Export unlimited animations