---
title: Loopkit — Schema-Driven SVG Animation Engine
url: https://varstatt.com/toolkit/loopkit
description: Schema-driven SVG animation engine. Under 5KB, zero dependencies. Works with React, SSR, and vanilla JS. Also on npm.
section: Developer Toolkit (https://varstatt.com/toolkit)
tags: design
---
# Loopkit

Schema-driven SVG animation engine. Under 5KB, zero dependencies. Works with React, SSR, and vanilla JS. Also on npm.

## How It Works

1. **Install** — npm install loopkit — zero dependencies, under 5KB minified.
2. **Write a schema** — A plain JS object: set width, height, background, then add elements (rect, circle, text, badge) with style and animate properties.
3. **Render** — Call createAnimation(container, schema). In React, use a ref in useEffect and call destroy() in the cleanup. For SSR, use renderToString(schema).

## FAQ

### How does loopkit compare to Lottie?

Lottie renders After Effects animations from JSON exports — powerful but heavy (lottie-web is 250KB+). Loopkit is under 5KB, zero dependencies, and designed for simpler decorative animations: cover art, card graphics, hover effects. You write schemas by hand or generate them programmatically.

### Can I use loopkit with React?

Yes. Create the animation in useEffect, pass a ref as the container, and call destroy() in the cleanup function. The schema should be stable (defined outside the component or memoized) to avoid recreating on every render.

### Does it support server-side rendering?

Yes. renderToString(schema) outputs SVG markup at the final frame with no DOM required. Use it for static site generation, OG images, or no-JS fallbacks.

### What's the difference between autoplay and hover triggers?

Autoplay starts immediately and loops infinitely. Hover renders the final frame on mount, loops while the mouse is over the container, and smoothly settles back to the final frame on mouse leave.

### Can I animate colors?

Yes. Use hex strings in [from, to] pairs — the engine detects colors automatically from the # prefix and interpolates in RGB space. Works for fill, color, bg, and any property that accepts hex values.

## Usage

This tool runs entirely in the browser — visit the URL above to use it.