Take an SVG you already have, or generate one, then describe the motion you want. The AI returns a looping SVG with CSS @keyframes that you can paste into a site or app.
Updated .
SVG AnimationGenerator
An SVG animation generator takes a static SVG and adds motion to it. In SVG Weave you bring an SVG (upload, paste, or generate one), write a prompt such as "make the rocket float and the flames flicker", and the AI returns the same SVG with @keyframes animations in a style block. The result is a single self-contained .svg file with no JavaScript, so it plays in any browser that renders SVG.
From static SVG to looping animation
Bring an SVG
Upload an .svg file, paste code, pick one from your earlier projects, or generate one from text or an image in the same editor.
Describe the motion
Write a prompt like "rotate the gear slowly" or "float the rocket and flicker the flames", then connect the SVG node to a Render node. Pick a canvas size preset if you are starting from scratch.
Copy or export
The SVG streams in as the AI writes it. Copy the code, download the .svg, or export a PNG or GIF. Chain another prompt to keep refining.
What the animation step gives you
- Style-only edits
- For CSS-only motion the AI returns just a style block, merged into your original SVG. Your artwork stays byte-for-byte intact.
- Streaming preview
- Partial output is saved about once per second while the model writes, so the preview updates as the animation takes shape.
- Chained renders
- Feed one render into the next prompt to build motion in layers instead of describing everything at once.
- Transition between two SVGs
- Connect a start SVG and an end SVG and prompt the style of the transition. The output morphs from A to B using CSS and keeps the final state.
What the AI changes in your SVG
When your SVG already exists, the animation step has two modes. If the motion can be done with CSS alone, it returns only a style block and SVG Weave merges that block into your original file, so your paths are never redrawn or approximated. If the request needs new shapes or structural changes, it returns a full SVG and is told to copy every existing path exactly.
Animations target elements by id, which is why the editor adds ids to every element and group. The timeline inspector in the editor labels its tracks with those ids, so you can see which element each animation belongs to.
Rules the generated animation follows
Every animation loops forever with iteration-count: infinite, so the file works as an ambient graphic without any script. The generator avoids linear easing for organic motion, staggers delays across similar elements, and keeps timing at 0.3 seconds or longer to avoid jitter. It is limited to about 15 independently animated elements per file, and the output is meant to stay under 50KB.
The background is kept transparent. The generator does not add background rectangles, so the animation sits on whatever page or slide you place it on.
Protecting overlapping shapes
A common failure in AI-made SVG animation is moving a shape that is partly hidden behind another one, which exposes its hidden edge. The animation prompt tells the model to detect layered elements and, for those, use only opacity, color, small scale, glow, or stroke effects, unless it wraps the element in a clip path first. Fully visible top-layer shapes can move freely.
Refining, chaining, and exporting
Each render node can feed the next prompt, so you can add a float first, then a color pulse, then adjust the timing. You can also select a single element in the preview and ask for a change to just that element. When you are done, download the SVG, export a PNG, or export a GIF. GIF export samples the animation at 15 frames per second for up to 10 seconds.
Made with SVG Weave
Lighthouse with a sweeping beam and rolling waves
Drawn by the text-to-SVG step from "A lighthouse on a small rocky island at dusk, flat vector illustration, bold simple shapes, warm coral and deep navy palette, sea waves in front, a few seagulls, no background rectangle", then animated by this step with "Sweep the lighthouse beam slowly left and right, make the lamp glow pulse, roll the waves gently side to side at different speeds, and have the seagulls glide and bob". Unedited output of the product pipeline.
Sailboat rocking on the waves
Drawn by the text-to-SVG step from "A small sailboat with one tall triangular sail and a pennant on the mast, riding rolling sea waves at dusk, a few seagulls" with the lighthouse drawing passed as a style reference, then animated by this step with "Rock the boat gently on the waves with a slight tilt, roll the waves side to side at different speeds, flutter the pennant, and have the seagulls glide and bob". Unedited output of the product pipeline.
Questions
How do I animate an SVG with AI?
Add an SVG to the editor (upload, paste, or generate), connect it to a Render node, and describe the motion in a prompt. The AI writes CSS @keyframes into the SVG and streams the result back.
Does the animated SVG need JavaScript?
No. The animation is CSS in a style block inside the SVG. Paste it into HTML, an img tag, or a design tool that supports animated SVG. Some tools, such as certain design apps and email clients, do not play SVG animation at all.
Will it change my original artwork?
For CSS-only motion the AI returns a style block that is merged into your SVG, so paths are untouched. If the request needs new or restructured shapes, the AI outputs a full SVG and is instructed to copy existing paths exactly. Check the preview either way.
Does the animation loop?
Yes. The generator is instructed to use an infinite iteration count so the graphic loops without a visible jump. You can ask for a one-time effect in the prompt, and you can edit the code afterwards.
Can I export a GIF or PNG?
Yes. Besides downloading the SVG, the editor exports a PNG and a GIF. GIF export records up to 10 seconds at 15 frames per second.
Can I animate just one part of the SVG?
Yes. Select an element in the preview and prompt a change for that element only, or mention the element id in your prompt. Elements are identified by their id attributes.
How many credits does an animation cost?
An average render costs about 18 credits, billed from actual usage. A credit pack is required: packs start at 150 credits for $5.
How is this different from text to SVG?
Text to SVG creates a new static drawing from a description. This tool adds motion to an SVG that already exists. They can be chained in one project: generate the drawing, then animate it.
Related tools
CSS @keyframes Generator
Generate CSS @keyframes for SVG elements from a plain-English description: ready-to-paste keyframes with timing, easing and staggered delays, in the SVG.
Text to SVG Generator
Generate a static SVG illustration or icon from a text description, with an optional reference SVG for style. 50 credits per generation. Clean vector code.
Image to SVG Converter
Convert a PNG, JPG or WebP into an editable SVG with AI vectorization, then animate it. Best for logos, icons and flat artwork. 50 credits per conversion.