# SVG Motion Builder

> Turn solid SVG artwork into an editable vector animation. 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.

Part of usefulweb.site (https://usefulweb.site/). Results are deterministic calculations from the inputs and the listed assumptions; the API returns exactly what the web page shows.

## Use it
- Human interface: https://fliplinesvgmotion.usefulweb.site/ (interactive tool at https://fliplinesvgmotion.usefulweb.site/tool)
- JSON API: POST https://fliplinesvgmotion.usefulweb.site/api/v1/calculate with a JSON object of inputs (schema: https://fliplinesvgmotion.usefulweb.site/api/v1/tool)
- OpenAPI: https://fliplinesvgmotion.usefulweb.site/openapi.json
- MCP (Streamable HTTP): https://fliplinesvgmotion.usefulweb.site/mcp - tool `flipline_svg_motion`

## Inputs
- svg (textarea): SVG source
- preset (select): Motion preset
- name (text): Motion name
- width (integer): Stage width (px)
- height (integer): Stage height (px)
- fps (integer): Frame rate (FPS)
- duration (number): Duration (seconds)

## Method
- 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.

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