{"slug": "i-built-a-free-svg-animation-editor-that-exports-self-contained-callable-svg-no", "title": "I built a free SVG animation editor that exports self-contained, callable .svg files — no runtime, no proprietary format", "summary": "A developer built SVGMotion, a free, local-first SVG motion studio that exports self-contained, callable .svg files with no proprietary runtime. The tool bakes physics into keyframes at export time, producing roughly 3 KB of markup, and exposes a JavaScript player API for calling actions and setting inputs. It is built with vanilla ES modules and no build step, uses bring-your-own-key AI providers with an optional in-browser WebLLM tier, and is hosted on Cloudflare Workers.", "body_md": "Every vector animation tool makes the same trade: nice editor, but output locked to its runtime. Rive needs `.riv`, Lottie needs `lottie-web`. I wanted the opposite — an editor whose export is a **plain `.svg` file** that renders anywhere, yet stays interactive and callable from code.\n\nSo I built **SVGMotion** — a free, local-first, AI-assisted SVG motion studio, split into three editors that build on each other:\n\n**🎨 Vector Editor — [https://app.svgmotion.workers.dev/vectoreditor](https://app.svgmotion.workers.dev/vectoreditor)**\n\nThe core. Prompt → editable SVG layers → actions, keyframes, state machine. Physics (bounce, roll, tumble, pendulum) is baked into keyframes at export time, so the file ships ~3 KB of markup — not a solver. Every export is callable:\n\n``` js\njs\nconst player = SVGMotionPlayer(mount, scene);\nplayer.call('launch');\nplayer.setInput('armed', true);\n🤖 Character Studio — https://app.svgmotion.workers.dev/characterstudio\nSame editor engine, wearing a character hat: skeleton roles, micro-actions, named macros, a multi-entity world stage, and an AI director that composes motion at runtime. Builds directly on the Vector Editor's action/state model.\n\n📱 Asset Studio — https://app.svgmotion.workers.dev/assetstudio\nThe downstream consumer: draw or prompt one SVG, preview it inside real OS masks/safe zones, export ready-made Xcode, Android & PWA bundles. Reuses the same scene format and layer pipeline.\n\nStack: vanilla ES modules, no framework, no build step. AI is BYOK (Ollama/OpenRouter/OpenAI — keys stay in the browser), with an optional WebLLM tier running Llama-3.2-1B in-browser. Cloudflare Workers for hosting. Free, no sign-up, no ads, no watermarks.\n\nGallery of live exports — every item is a real callable .svg: https://app.svgmotion.workers.dev/gallery\nSource: https://github.com/saidevac/svgmotion\n```\n\n", "url": "https://wpnews.pro/news/i-built-a-free-svg-animation-editor-that-exports-self-contained-callable-svg-no", "canonical_source": "https://dev.to/saidev_ac_69c0816924a7676/i-built-a-free-svg-animation-editor-that-exports-self-contained-callable-svg-files-no-runtime-2a5i", "published_at": "2026-10-02 04:41:30+00:00", "updated_at": "2026-10-02 04:44:58.610058+00:00", "lang": "en", "topics": ["ai-tools", "generative-ai", "developer-tools", "ai-products"], "entities": ["SVGMotion", "Cloudflare Workers", "Ollama", "OpenRouter", "OpenAI", "WebLLM", "Llama-3.2-1B", "GitHub"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/i-built-a-free-svg-animation-editor-that-exports-self-contained-callable-svg-no", "markdown": "https://wpnews.pro/news/i-built-a-free-svg-animation-editor-that-exports-self-contained-callable-svg-no.md", "text": "https://wpnews.pro/news/i-built-a-free-svg-animation-editor-that-exports-self-contained-callable-svg-no.txt", "jsonld": "https://wpnews.pro/news/i-built-a-free-svg-animation-editor-that-exports-self-contained-callable-svg-no.jsonld"}}