Animated
Motion with no runtime.
Animated icons, mascots and backgrounds that animate on their own. One 2 KB file — no Lottie player, no dependency, no build step. Paste it in; it works.
See them running ↓Live — these are the files, not videos of them
Every one below is a single .svg pasted straight into this page. No player, no JSON, no build step. Move your cursor across them.
Pip
A mascot that blinks, sways, and follows the cursor. 3.6 KB.
Magnet
Leans toward the pointer; on a phone it answers a tap. 2.4 KB.
Confirm
A success mark that strokes itself in. Add one class when your app succeeds. 1.8 KB.
Pulse
A loader that needs no JavaScript to spin. 1.8 KB.
Strata
Layered hero art with parallax off the cursor. 3.2 KB.
Aurora
An ambient background that drifts forever. 2.6 KB.
Why it is smaller
No player
A Lottie file needs 30–100 KB of JavaScript before it draws anything. These need nothing — the browser already knows how to animate.
One file
Motion, artwork and theming all live in the same .svg. Nothing to install, nothing to version, nothing to break on upgrade.
Still yours
Real vector paths. Open it in any editor, change any shape, set two CSS variables to recolour it.
Formats
SVG is the product. The other formats exist for the places CSS cannot reach.
| Format | Best for | Trade-off |
|---|---|---|
| SVG | Web. Scalable, editable, themeable, cursor-reactive. | Does not animate in native apps. |
| Animated WebP | Native apps, social, CMS embeds — anywhere CSS will not run. | Raster: fixed size, no theming, no reactivity. |
| Lottie | iOS, Android, Flutter, React Native. | Needs a player. |
| MP4 / GIF | Social posts and previews. | Largest files, lowest fidelity. |
SVG ships today. WebP, Lottie and video exports are in progress — see the roadmap before relying on them.
Frequently asked
Is an animated SVG just an SVG file?
Yes. It is a single .svg — the motion is CSS carried inside the file itself. There is no JSON, no player library and no build step. Drop it in and it animates.
How is this different from Lottie?
Lottie is animation data plus a player you have to ship — typically 30–100 KB of JavaScript before any content. These files are 2–4 KB and animate on their own, because the browser already knows how. The trade is that Lottie has native runtimes for iOS, Android and Flutter, and CSS does not.
Will it work in a React Native or iOS app?
It will render, but it will not animate. No mainstream native SVG renderer executes CSS, so the artwork draws as a still. For native, use an animated WebP or Lottie export instead — SVG is the web format.
What happens on mobile?
The animation runs. What does not exist on touch is hover and cursor tracking — there is no pointer — so cursor-reactive assets rest in their neutral pose. Every file is designed to look finished without any input at all.
Can I recolour them?
Yes. Each file exposes four theme tokens, so setting --cma-accent and --cma-ink on any ancestor restyles the artwork without opening it.