SVG Weave. A node graph editor that animates SVGs with AI

Hacker News

Share card

SVG Weave. A node graph editor that animates SVGs with AI

Hey HN, I'm a solo dev and I kept wasting hours hand-writing CSS @keyframes to animate SVGs. Write a keyframe, preview, tweak the timing, preview again, repeat. For anything beyond a simple fade it turns into dozens of rules across multiple elements. I wanted something where I could just describe the motion and get working animations back. SVG Weave is a visual node graph editor for this. You place nodes on a canvas (SVG input, prompt, render) and connect them with wires. Type what you want the animation to do, hit render, and the AI streams CSS @keyframes back in real time. You see the SVG come alive as tokens arrive. Things that might be interesting technically: - Style-inject mode: when only animations are needed, the AI outputs just a <style> block instead of rewriting the full SVG. Faster and avoids corrupting path data. - Overlap detection: the system prompt makes the model analyze element layering and restrict partially-covered elements to opacity/scale only, preventing hidden edges from being revealed during translation. - State transitions: connect two SVGs (start and end) and AI generates a single animated SVG that morphs between them using CSS transforms, opacity, and clip-path. - Chaining: output of one render feeds as input to the next prompt, so you can build complex animations step by step. - Shadow DOM isolation in the preview modal so SVG styles don't leak into the host page. You can also generate SVGs from text descriptions or vectorize raster images in the editor. Stack: Next.js, React Flow, Convex, Gemini via OpenRouter. Free signup gets you 20 credits (one render costs about 10). Requires an account to save projects but you can see the full editor immediately. svgweave.com