Animate any image with SVG.new and Claude

Each of these started as a picture and is now a single SVG file with no JavaScript. To make one, trace a picture with SVG.new and tell Claude in a sentence what should move. Claude reads the SVG as text, finds the shapes that make the sails or the steam, and writes the CSS that moves them. How well that goes depends on what the tracer drew underneath each shape.

Stacked or cut out

A trace is a pile of flat shapes, and there are two ways to pile them. Here is the same coffee cup traced both ways, with the same animation on top. The checkerboard shows where the file has nothing.

Stacked

Cut out

Stacked is SVG.new's default for an opaque picture. The background is a whole square and the cup sits on top, so moving the cup shows more background. Cut out, each shape has holes where the shapes in front of it sit, and nothing hides under anything. That is how Cutting mode traces for vinyl and lasers, and for animation it leaves a hole behind anything that moves.

A shape is drawn whole underneath only when the one on top sits entirely inside it. A windmill sail overlaps sky and tower, and this astronaut stands on sky and ground, so nothing is under them in either mode. Claude paints those gaps in before anything moves, in colors sampled from the picture.

Trace

Animated SVG

Eight flat pictures

We generated these with OpenAI and Gemini in a flat style, traced each one once and gave Claude one sentence about what should move.

Coffee cup

Three wisps of steam, each rising and fading a third of a cycle after the last.

PNG

SVG

Animated SVG

Night owl

The picture had no eyelids. Claude drew them in the owl’s brown and blinks them at uneven intervals, once or twice.

PNG

SVG

Animated SVG

Hot air balloon

The basket swings on its own beat, out of step with the envelope above it.

PNG

SVG

Animated SVG

Lighthouse

The beam, the stars and three rows of waves each keep their own time, and every timing divides 24 seconds.

PNG

SVG

Animated SVG

Rocket launch

The flame stretches from the nozzle. The inner flame flickers half a beat after the outer one.

PNG

SVG

Animated SVG

Goldfish bowl

Four bubbles share one track from the fish’s mouth to the surface and take turns on it.

PNG

SVG

Animated SVG

Windmill

The sails are a lattice. Claude made the 162 scraps of sky inside them into a mask that turns with them.

PNG

SVG

Animated SVG

Ferris wheel

Each cab turns back against the wheel as it rides, keeping upright with a slight swing.

PNG

SVG

Animated SVG

A picture that isn't flat

The same works on a painted picture. This trace was already on this site.

Watercolor pelican

The trace has 1,451 paths of soft washes. Both wheels turn every 1.5 seconds and the pelican bobs twice per turn.

PNG

SVG

Animated SVG

One step further: Lottie

An animated SVG plays anywhere a web page shows an image. For an iOS or Android app, or to hand the animation to a designer, you want Lottie: a JSON animation format with players for the web, iOS and Android, which opens in LottieFiles. Claude wrote a short script that turns the trace into one. Here the cup draws itself in, then the steam bends as it rises.

Download the JSON (93 KB).

Try it

With SVG.new connected to Claude, attach a picture and ask in one message:

Trace the picture I attached with SVG.new, then animate it: the boat rocks on the waves, the waves roll at two speeds and the flag flutters. Keep it one SVG with no JavaScript.

Or convert your picture on the converter and paste the SVG into a chat with Claude. Give moving parts their own color: our first Ferris wheel had a white stand in front of white spokes, the two traced as one shape, and the wheel couldn't turn without the stand.

The eight flat pictures were generated, traced by SVG.new with default settings and animated by Claude on 18 October 2026. The watercolor pelican reuses a trace already on this site.