DEV Community

Cover image for Why I Built an SVG Animation Tool That Ships Zero JavaScript
Hari
Hari

Posted on

Why I Built an SVG Animation Tool That Ships Zero JavaScript

#webdev #css #tooling #animation

I'm Hari, a software developer from India, and I want to tell you about a problem that kept annoying me until I finally did something about it.

The problem

Every few weeks, I'd be working on a landing page or a product site and need a simple SVG animation. A sliding icon. A fading shape. A logo that draws itself in.

And every time, the solution looked something like this:

npm install gsap
# or
npm install lottie-web
Enter fullscreen mode Exit fullscreen mode

GSAP is 100KB+. Lottie is 239KB. That's a lot of JavaScript just to move a rectangle from point A to point B.

Here's the thing — browsers already know how to do this. CSS @keyframes can animate SVG elements beautifully. It's a native feature. Zero dependencies. Zero runtime. It just works.

But writing keyframe CSS by hand for SVG elements? That's painful. You're tweaking translate() values blindly, refreshing the browser, adjusting, refreshing again. It's slow, tedious, and error-prone.

I wanted something in between — the simplicity of CSS animations with a visual editor that doesn't ship any JavaScript to end users.

So I built CSSVG

landing page

CSSVG is a visual editor for SVG + CSS keyframe animations. The workflow is dead simple:

  1. Paste your SVG or build shapes on the canvas
  2. Drag elements on a timeline to set keyframes
  3. Export clean SVG + CSS files

editor page

That's it. The output is readable, minimal code you can paste into any project — React, Vue, plain HTML, whatever.

export dialog

No wrapper divs. No data attributes. No runtime classes. Just SVG and CSS.

Why not just use GSAP or Lottie?

They're great tools. Seriously. But they're overkill for most of what I was doing.

Tool Runtime Size Requires
GSAP 100KB+ JS JS runtime on every page load
Lottie 239KB JS After Effects + Bodymovin
CSS Animations 0KB Writing keyframes by hand
CSSVG 0KB Visual editor, exports clean code

If you're building complex, physics-based, interactive animations — use GSAP. It's built for that.

But if you need a hover effect, a loading animation, or a subtle entrance transition on SVG elements, you don't need to ship a JavaScript library to every user who visits your page.

What CSSVG does well

  • Visual canvas editor — move, resize, and arrange SVG elements directly. No hand-editing coordinates.
  • Timeline-based keyframes — drag elements across a 2-second timeline. CSSVG generates the CSS automatically.
  • Clean, readable output — no minification tricks, no opaque JSON blobs. You can read and modify the exported code.
  • Zero runtime — your users download nothing extra. The browser handles everything.

What it doesn't do (yet)

I want to be upfront about the limitations:

  • No custom easing curves (currently linear only)
  • Timeline is fixed at 2 seconds
  • No path morphing or complex path animations
  • No direct After Effects import

These are on the roadmap. But I wanted to ship something useful first rather than wait for perfection.

Try it

The editor is free to use: cssvg.com/editor

If you've ever spent 30 minutes tweaking translateX values by hand, give it a try. It takes about 60 seconds to go from a blank canvas to an exported animation.

I'd love to hear your feedback — what's missing, what's broken, what would make this actually useful for your workflow.

Find me on X: @cssvg_

Built solo, out of frustration, from India.

Top comments (0)