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.

Rect · Circle · Polygon · Path · TextVisual TimelinePer-Keyframe EasingSMIL · CSS · React ExportNo RuntimeFree
Open Editor
View Demo
Draw → keyframe → easing → export. Done in minutes, not hours.

Wrong tool for the job

Lottie, GSAP, and Rive
are built for something else.

Those tools are great for interactive game-like experiences and complex scenes. But if you need to animate a loading spinner, a nav icon, or a small SVG logo — you don't need a 250 KB runtime. You need CSS, and a visual editor to write it.

This animation

Same animation. Different results.

ToolJS Runtime
gzip / minified
File size
raw / format
Built for
Lottie77 KB305 KB min16.5 KBJSON fileComplex JSON-driven animation
GSAP27 KB70 KB min—write JS codeJS-controlled rich animation
Rive41 KB143 KB min—.riv binaryInteractive / game-like animation
SVGator13 KB36 KB min51.1 KBSVG + player scriptSubscription editor, proprietary player
CSSVGyou are here0 KBno runtime1.5 KBSMIL SVG · CSS · JSXVisual editor — icon & SVG animation

For icons and small SVG animations, the browser already knows how to run it. CSSVG just 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

Every animation runs in the browser natively — no GSAP, no Lottie, no Rive player. Export SMIL SVG or CSS @keyframes and ship zero bytes of JS. Faster loads, better Core Web Vitals.

0 KBJS shipped to users

3 Export Formats

Export as self-contained SMIL SVG, pure CSS @keyframes, or a React JSX component with inline SMIL. Drop into any stack — no wrappers, no build step, no dependencies.

6 Shape Types

Rectangle, Circle, Line, Polygon, Pen path, and Text. Each shape supports fill, stroke, opacity, border radius, and independent keyframe tracks on the timeline.

Visual Timeline

Drag keyframe diamonds, scrub the playhead, set adjustable duration with an editable M:SS timer, and choose your FPS. Looping, play, pause, and restart controls built in.

Per-Keyframe Easing

Every keyframe interval has its own cubic-bezier curve. Pick from 9 presets (Spring, Bounce, Anticipate…) or drag the interactive bezier graph to dial in the exact feel.

Full Transform Control

Position, rotation, scale X/Y, orbit X/Y, anchor point, and pivot — all animatable per keyframe. Inspect and tweak every property numerically in the inspector panel.

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 — icons, loaders, and small SVGs. Fork any of them and edit 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

Key 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 Free