Svg Animation Generator API

POST https://api.findutils.com/api/tools/svg-animation-generator/execute

Return an animated SVG (inline CSS @keyframes) and/or the CSS alone, built from a shape template (rect, circle, star, stick figure, sun…) or custom SVG elements, plus animations from a preset (bounce, pulse, spin, fade, slide, squash-stretch, color-shift, float) or custom keyframes.

Open the tool Try it

Request body

application/json

shape

string optional

Shape template to start from. Ignored when elements is given. One of rect · circle · ellipse · line · text · star · character-head · character-body · character-full · cloud · sun. Default "rect".
elements

array optional

Custom elements: [{ id?, type: rect|circle|ellipse|line|path|text, attrs: { x, y, width, height, cx, cy, r, d, fill, stroke, textContent, … } }].
preset

string optional

Animation preset applied to the first element. Ignored when animations is given. One of bounce · pulse · spin · fade · slide · squash-stretch · color-shift · float.
animations

array optional

Custom animations: [{ element_id, property (x, y, cx, cy, r, opacity, rotate, translateX, translateY, scale, fill, stroke, …), keyframes: [{ offset: 0-100, value }], duration (ms), easing, iteration_count, direction: normal|alternate }].
view_box

string optional

SVG viewBox. Default "0 0 300 300".
background

string optional

Background color (CSS color). Default "#0f172a".
output

string optional

What to return. One of svg · css · both. Default "svg".

Example arguments

Verified

{
  "shape": "rect",
  "preset": "bounce"
}

curl -X POST https://api.findutils.com/api/tools/svg-animation-generator/execute \
  -H "Content-Type: application/json" \
  -d '{
    "shape": "rect",
    "preset": "bounce"
  }'

const response = await fetch('https://api.findutils.com/api/tools/svg-animation-generator/execute', {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({"shape":"rect","preset":"bounce"}),
});
const data = await response.json();

import requests

response = requests.post(
    "https://api.findutils.com/api/tools/svg-animation-generator/execute",
    json={"shape":"rect","preset":"bounce"},
)
data = response.json()

$ch = curl_init('https://api.findutils.com/api/tools/svg-animation-generator/execute');
curl_setopt_array($ch, [
    CURLOPT_POST => true,
    CURLOPT_HTTPHEADER => ['Content-Type: application/json'],
    CURLOPT_POSTFIELDS => '{"shape":"rect","preset":"bounce"}',
    CURLOPT_RETURNTRANSFER => true,
]);
$data = json_decode(curl_exec($ch), true);

Also an MCP tool

Call svg_animation_generator from Claude, Cursor or any MCP client. Same arguments, same output.

https://mcp.findutils.com

MCP reference

Rate limit: 60 a minute, per IP
Auth: None
REST id: svg-animation-generator
MCP name: svg_animation_generator
Category: Generators
Machine-readable: openapi.json · markdown.md

Request body

Example arguments

More Generators tools

More to explore