SVG Motion Builder

Turn solid SVG artwork into an editable vector animation.

Try an example: A checkmark with a gentle pulse · A rotating blue square

How it works

Animate solid SVG shapes with pulse, reveal, slide or spin presets. Download Lottie JSON, sampled animated SVG and an editable Flipline Motion Desk project with vector layers and keyframes.

SVG paths, arcs, rectangles, ellipses, lines, polygons and presentation transforms become cubic vector contours. Artwork and curve handles must fit the viewBox. Solid fill and stroke colors, alpha, compound paths and fill rules are preserved. Unsupported content rejects the whole import.
Artwork fits within 80% of the stage and shares a common transform origin. Presets create transform keys, leaving geometry editable. Frames = round(duration × FPS), from 2 to 360. The actual duration is frames / FPS; stages allow 2 million pixels and 24 layers.
Lottie exports conventional 2D shape layers and cubic easing. The end frame is exclusive and Lottie layer order is top-first. Animated SVG samples transforms at composition frames using discrete SMIL steps. Preview backgrounds are excluded from exports; author a rectangle layer to include a background.
The same bounded engine runs in the editor, API and MCP. Imported SVG is parsed as data; scripts, references and remote assets are never executed or loaded. Project files are the fallback when a generated editor link exceeds 1 million characters.

Supports solid paths and basic shapes. Text, gradients, masks, clipping, effects and external references are rejected. This is an independent workflow inspired by Lottielab.

Sources

Lottielab: vector design, keyframes and Lottie workflows (Lottielab)
Lottie specification: animated properties (Lottie Animation Community)

Part of Flipline

Flipline Drawing, storyboards & animation

A few drawings. A little life. Make a flipbook in your browser.

Open Flipline

Animate a solid SVG with editable vector keys

Build a small Lottie animation from SVG artwork and continue editing it in Flipline Motion Desk.

What it is for

SVG Motion Builder turns a small vector mark into a reusable animation. Use it for a loading symbol, confirmation badge, simple interface illustration or a short motion study. The tool creates an editable project alongside Lottie JSON, an animated SVG and a still SVG. Each drawable becomes a separate vector layer with transform keys.

The importer handles solid paths, curves, arcs and basic shapes. It preserves supported fill and stroke colors, opacity and compound contours. It rejects text, gradients, clipping, masks, effects and external references. Convert lettering to paths and simplify unsupported effects in your vector editor before importing.

Worked example

Keep the supplied checkmark SVG, choose Pulse, a 480 by 360 pixel stage, thirty FPS and three seconds. Run the tool. The result has ninety composition frames, numbered zero through eighty-nine. The artwork fits within eighty percent of the stage, leaving room for movement.

Download the Lottie file for a compatible player. Open the editable result in Motion Desk to select a layer, move the playhead and change position, scale, rotation or opacity. A transform change adds a key at the playhead. Choose the outgoing key's easing to control its transition toward the following key.

Try Spin with a two-second duration at twenty-four FPS. That creates forty-eight frames. A full rotation is stored as numeric rotation keys; it does not turn the source SVG into a raster image.

How to read the result

The report lists layers, path points, keys, frame count, FPS, actual duration and Lottie byte size. Actual duration is rounded frame count divided by FPS. The exclusive end frame is a boundary, so the final visible frame is one less than the frame count.

The animated SVG samples the animation on that frame grid using discrete SMIL values. The Lottie file retains transform keyframes and easing. A current-frame SVG contains no animation. The editable project preserves geometry, layer names, visibility ranges and all keys.

Tips and common mistakes

The preview background is a workspace aid. Exports remain transparent unless you add a filled background rectangle as a real layer. Keep curve handles and artwork inside the source viewBox because import cannot preserve arbitrary clipping.

Use two to 360 frames, up to sixty FPS and sixty seconds. Stage dimensions range from sixteen to 1600 pixels per side, with a two-million-pixel total limit. Projects support twenty-four layers, 4096 path points and two megabytes of JSON.

Review exports in the intended player. A valid supported shape animation does not imply every player implements every Lottie feature identically.

FAQ

Can I animate text or gradients directly?

These features are rejected. Outline text into supported paths and replace gradients with solid artwork before import. Unsupported content is reported instead of silently disappearing.

Does the editor link contain my project?

Yes, it includes an encoded editable project in the URL fragment. Very large projects receive a downloadable file instead of an oversized link. Use a file when sharing through services that truncate long URLs.

Can an agent use this workflow?

Use the JSON API or MCP tool flipline_svg_motion. Supply SVG source, preset, stage dimensions, FPS, duration and a name. The same engine creates the editor project and export artifacts.

Guide last updated: October 27, 2026

For scripts and AI agents

JSON API: POST https://fliplinesvgmotion.usefulweb.app/api/v1/calculate (same calculation as this page)
Interface description: OpenAPI 3.1 · AI guide: llms.txt
MCP server (Streamable HTTP): https://fliplinesvgmotion.usefulweb.app/mcp · tool name flipline_svg_motion

Example request

curl -s -X POST https://fliplinesvgmotion.usefulweb.app/api/v1/calculate \
  -H 'content-type: application/json' \
  -d '{}'

Feedback · ideas & bug reports welcome