Convert a Lottie animation to paste-ready <style> +
<svg> with no runtime JS. Drop a
.json and the tool samples the rendered animation at 11
timepoints, emits one @keyframes rule per layer, and clones
the original path data verbatim — typically shipping 80–90% smaller
than bundling the lottie_light player.
Works for translate, scale, rotate, and skew animations.
Doesn't capture path morphing, masks, gradients, or
color/opacity tweens — keep using lottie_light for those.
Drop to convert
waiting for file…
Lottie preview (reference — plays from loaded JSON)
CSS preview (what the generated output actually renders)
Generated CSS + SVG
drop a JSON to begin
How it works & what it can't do
Path fidelity: Clones the exact <path> data lottie renders at frame 0 — rectangles stay rectangles, circles stay circles, custom shapes keep their geometry. No bounding-box approximation.
Timing fidelity: Samples the animation at 11 evenly-spaced timepoints (0%, 10%, ..., 100%) and emits one @keyframes rule per layer with linear interpolation between samples. The output duration matches lottie's actual duration.
Handles: Any 2D affine transform tween — translate, scale, rotate, skew, and combinations. Works regardless of how the JSON was exported (Jitter, After Effects, LottieFiles, etc.).
Doesn't capture: Path morphing (shape key tweens), masks and mattes, gradient animations, opacity or color tweens, expressions, time remapping, or layer appear/disappear across the timeline. For any of those, keep using lottie_light.
Output size: Scales with layer count. A 20-layer ring animation runs ~10–15 KB raw (~3–5 KB gzipped) — comfortably under the ~45 KB gz of the lottie_light player alone.