Design
Motion you can judge
The preview runs the real loop at the real duration, so you are choosing a rhythm rather than guessing at one from a slider value.
Animated blob generator
Blob shapes that morph in a loop.
Pick two to eight shapes that share a node count and the generator tweens the path between them. Take the loop as CSS keyframes, as an SVG that animates on its own, or as a GSAP tween.
@keyframes blobMorph {
0% { d: path("M408.5,351Q367,452,261.5,433Q156,414,127,332Q98,250,133.5,180Q169,110,257,98Q345,86,397.5,168Q450,250,408.5,351Z"); }
25% { d: path("M409,358Q375,466,264,442.5Q153,419,123.5,334.5Q94,250,111.5,145.5Q129,41,250.5,40Q372,39,407.5,144.5Q443,250,409,358Z"); }
50% { d: path("M394.5,316.5Q327,383,238,404.5Q149,426,124,338Q99,250,115.5,147.5Q132,45,253,40Q374,35,418,142.5Q462,250,394.5,316.5Z"); }
75% { d: path("M413,318.5Q329,387,250.5,386Q172,385,99,317.5Q26,250,77.5,145.5Q129,41,246.5,47Q364,53,430.5,151.5Q497,250,413,318.5Z"); }
100% { d: path("M408.5,351Q367,452,261.5,433Q156,414,127,332Q98,250,133.5,180Q169,110,257,98Q345,86,397.5,168Q450,250,408.5,351Z"); }
}
.blob path {
animation: blobMorph 8s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) {
.blob path { animation: none; }
}
Animates the CSS d property, which Chrome, Edge and Firefox support. Safari does not yet; use the Animated SVG export there.
Overview
One path, several shapes.
A morphing blob is a single path element whose outline is redrawn between frames. The generator builds every frame at the same node count, so each point in one shape has a partner in the next and the browser can move between them in a straight line.
Frames sets how many shapes the loop visits, from two to eight. Duration spreads them evenly across two to thirty seconds, and Easing decides whether each leg accelerates and settles or holds one speed the whole way.
Code
Three targets, one shape
The same frames become CSS keyframes, an SMIL block inside the SVG, or a GSAP tween. Nothing is rewritten by hand between them.
Performance
Small, self-contained output
One path element and a list of path strings. No runtime library is required for the CSS and SMIL routes, and no images are loaded.
Export
Six ways to take the loop with you.
Every export carries the same frames in the same order. Pick the one that matches where the blob is going.
CSS keyframes
A @keyframes block that animates the path's d property, plus a rule that starts it and a reduced-motion query that stops it.
SVG with SMIL
An SVG file with an animate element inside the path. The motion travels with the file, so it still runs from an img tag.
GSAP snippet
A tween that moves the d attribute through the frames, ready to drop into a timeline next to the rest of your motion.
Still frames
Any frame of the loop as SVG, or as PNG at 512, 1024 or 2048 pixels, for places that cannot take motion at all.
A link that rebuilds it
Frames, duration and easing ride in the query string with the seed, so the URL reopens the identical animation.
React and Flutter
The component and the CustomPainter take the same frame list, so the shape stays identical across web and app code.
How it works
Four steps to a running loop.
The controls sit on top of the ordinary generator, so a shape you already like can become an animation without starting again.
- 01
Shape the first frame
Set Complexity between 3 and 20 nodes and Randomness between 2 and 9, then shuffle until the outline looks right. This node count now applies to every frame.
- 02
Add frames
Raise Frames from 2 to as many as 8. Each new frame is a fresh seed at the same node count, and shuffling swaps one frame without touching the others.
- 03
Set the timing
Duration runs from 2 to 30 seconds and covers the whole loop, not one leg. Choose ease for a soft pulse or linear for a background shape that should not pull focus.
- 04
Export
Take CSS keyframes, the SVG with SMIL, or the GSAP snippet. Copy the URL as well if you want to reopen the exact loop later.
Examples
Four loops to start from.
Each link opens the generator with the frames, duration and easing already set, so you can change the color and export straight away.
Four-frame hero pulse
Six nodes, a mid Randomness value and four frames. A slow, even breath for a shape sitting behind a headline.
Six-frame gradient drift
Eight nodes, a lime-to-sky gradient at 135 degrees and twelve seconds across six frames, for a full-bleed background.
Linear outline tick
Five nodes, outline only, three frames over six seconds with linear easing. Steady enough to read as a loading state.
Eight-frame slow wander
Seven nodes, a gradient running left to right and twenty-four seconds across eight frames. Long enough that the movement stays peripheral.
In depth
How blob morphing works, and what it costs.
What a morph actually is
A morphing blob is not one shape moving around the screen. It is one path element whose d value is recalculated on every frame, interpolated between a start shape and an end shape. The generator builds each frame from the same node count, so the first point of frame one has a partner in frame two, the second point has a partner, and so on to the end of the list. The browser walks a straight line between each pair of coordinates, and the outline appears to breathe.
That pairing is the whole rule. Two blobs with the same Complexity value produce path strings with the same commands in the same order, which is exactly what every method below needs. Change the node count between frames and there is nothing to line up: the path either snaps from one shape to the next or refuses to animate. It is why the Frames control keeps every frame at the node count you started with, and why it is the seed, not the complexity, that changes from frame to frame.
Duration spreads the frames evenly across the loop. Four frames over twelve seconds gives each leg three seconds, and the last frame returns to the first so the loop closes without a jump. Easing governs what happens inside a leg: ease slows the beginning and end of each transition, which reads as a pulse; linear holds one speed throughout, which suits a slow background shape whose rhythm should stay unnoticed.
CSS, SMIL or GSAP
CSS keyframes animate the d property directly, which is the shortest route when the blob is decoration in an ordinary page. Browser support decides whether it is the right route: MDN lists the d property as limited availability, and caniuse records support in Chrome from version 52, Edge from 79, Firefox from 97 and Opera from 60, with Safari not supporting it on desktop or iOS at the time of writing. A CSS morph therefore runs in Chromium and Firefox and shows a still path in Safari, which is a reasonable outcome for a decorative shape and a poor one for anything load-bearing.
SMIL puts the animation inside the file. An animate element with attributeName set to d steps through the same frames, and MDN records the element as widely available across browsers since January 2020, with caniuse putting SVG SMIL coverage near 97 percent of tracked traffic, Safari 6 and later included. Because the motion is part of the SVG, the file keeps moving inside an img tag, a CSS background, or on its own in a browser tab. The trade-off is control: SMIL runs on its own clock, and starting, pausing or reversing it means calling methods on the element rather than driving a timeline.
GSAP tweens the d attribute from JavaScript. Both path strings share a command structure, so the library interpolates the numbers between them. Reach for it when the blob belongs to a larger sequence, when scroll position or a user action should drive the shape, or when you need the same motion in Safari as everywhere else. GSAP's pricing page states that the whole library, plugin set included, is now available to everyone at no cost, so the morphing plugin is also on the table for paths that do not share a node count.
What a path animation costs
Animating d is a different kind of work from animating transform. A transform or an opacity change can usually be handed to the compositor and replayed without touching layout or paint. A path animation changes geometry, so the shape is rasterized again on every frame. That is affordable for one or two blobs on a page and expensive for a dozen.
Three habits keep it cheap. Keep the animated element at the size it is displayed rather than scaling a huge one down. Prefer longer durations, because a twenty-second loop asks for far less visible precision than a two-second one. Avoid stacking a blur or a heavy filter on top of a morphing path, since the filter is recomputed with the geometry. When you want more movement than the morph provides, add a slow transform drift to the container instead of more frames.
Motion preferences and accessibility
The CSS export ships with a prefers-reduced-motion query that stops the animation and leaves the first frame standing. SMIL does not read CSS media queries, so in a page you control, check the query in JavaScript and call pauseAnimations on the SVG root; where the file is dropped in as a standalone asset, export a still frame instead. The GSAP snippet guards the tween with the same query before it is created.
Treat the blob as decoration in the markup: aria-hidden on inline SVG, an empty alt on an image. Never carry meaning in the motion alone, and never place text that has to be read on top of a shape whose outline is moving under it. Keep the loop calm enough that nothing flashes more than three times a second, and remember that moving content which starts on its own and runs for more than five seconds alongside other content should be stoppable by the visitor.
Questions
Animation questions, answered.
Why do all the frames have to share a node count?
Interpolation pairs the points of one path with the points of the next. Equal node counts mean equal numbers of curve commands in the same order, so every coordinate has a partner to travel toward. Paths with different node counts have nothing to pair, and the shape jumps instead of morphing.
Which export works in Safari?
SMIL and GSAP. Caniuse lists SVG SMIL animation as supported from Safari 6 onward, and GSAP drives the attribute from JavaScript, so it runs wherever scripts run. The CSS route animates the d property, which caniuse records as unsupported in Safari on desktop and iOS, so that export renders a still shape there.
How long should a loop be?
For a background shape, somewhere between twelve and thirty seconds. Anything under about six seconds reads as an animation rather than as ambience and competes with the content in front of it. Short durations suit a loading indicator, where the movement is the message.
Does the animation slow the page down?
A path animation changes geometry, so the browser repaints the shape each frame rather than compositing it. One or two blobs at a sensible size are inexpensive. Many large morphing shapes, or a blur layered on top of one, are not.
Can I reopen the same animation later?
Yes. Frames, duration and easing travel in the URL as a, ad and ae, next to the seed and the fill settings. Bookmark the link or save the blob and it reopens with the identical loop.
Get started
Give a shape a second frame.
Set the node count, add frames, choose a duration, and take the export that suits the page it is going on.