Blob Generator
Generate smooth blob shapes for backgrounds and decoration, then export the SVG or the CSS that morphs the path itself. Every shape comes from a seed carried in the URL, so the one you are looking at is a link.
Fewer points give sharper lobes; more of them settle towards a circle.
Animates the path itself.
Seed 8412 — the URL carries it, so this exact shape is a link.
SVG
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"> <path d="M 183.71 100 C 185.04 122.4, 163.1 163.08, 142.78 174.1 C 122.47 185.13, 80.67 178.52, 61.8 166.16 C 42.93 153.81, 30.67 123.99, 29.56 100 C 28.44 76.01, 37.56 32.28, 55.1 22.23 C 72.64 12.19, 113.36 26.77, 134.8 39.73 C 156.23 52.69, 182.38 77.6, 183.71 100 Z" fill="#7c5cff" /> </svg>
Morph CSS
@supports (d: path("M0 0")) {
.blob {
animation: blob-morph 8s ease-in-out infinite alternate;
}
@keyframes blob-morph {
0% { d: path("M 183.71 100 C 185.04 122.4, 163.1 163.08, 142.78 174.1 C 122.47 185.13, 80.67 178.52, 61.8 166.16 C 42.93 153.81, 30.67 123.99, 29.56 100 C 28.44 76.01, 37.56 32.28, 55.1 22.23 C 72.64 12.19, 113.36 26.77, 134.8 39.73 C 156.23 52.69, 182.38 77.6, 183.71 100 Z"); }
25% { d: path("M 162.64 100 C 163.87 119.45, 155.71 151.1, 137.38 164.75 C 119.06 178.4, 70.76 192.7, 52.71 181.91 C 34.66 171.12, 28.78 126.78, 29.08 100 C 29.38 73.22, 37.69 29.87, 54.51 21.21 C 71.33 12.54, 111.99 34.89, 130.01 48.02 C 148.03 61.15, 161.41 80.55, 162.64 100 Z"); }
50% { d: path("M 168.11 100 C 169.67 123.15, 160.92 169.27, 144.78 177.57 C 128.64 185.86, 93.87 162.68, 71.28 149.75 C 48.68 136.82, 9.87 117.73, 9.21 100 C 8.54 82.27, 46.26 53.57, 67.29 43.35 C 88.32 33.13, 118.59 29.25, 135.4 38.69 C 152.2 48.13, 166.54 76.85, 168.11 100 Z"); }
75% { d: path("M 160.31 100 C 158.79 123.86, 154.22 150.85, 136.77 163.68 C 119.31 176.51, 75.77 187.59, 55.56 176.98 C 35.34 166.37, 14.05 123.15, 15.5 100 C 16.95 76.85, 42.52 51.32, 64.25 38.08 C 85.98 24.84, 129.87 10.22, 145.88 20.54 C 161.89 30.86, 161.83 76.14, 160.31 100 Z"); }
100% { d: path("M 183.71 100 C 185.04 122.4, 163.1 163.08, 142.78 174.1 C 122.47 185.13, 80.67 178.52, 61.8 166.16 C 42.93 153.81, 30.67 123.99, 29.56 100 C 28.44 76.01, 37.56 32.28, 55.1 22.23 C 72.64 12.19, 113.36 26.77, 134.8 39.73 C 156.23 52.69, 182.38 77.6, 183.71 100 Z"); }
}
}
@media (prefers-reduced-motion: reduce) {
.blob { animation: none; }
}Frequently asked
Why is the shape the same every time I reload?
Because it comes from a seed, not from Math.random. The seed lives in the URL, which means the shape you picked is something you can bookmark, share, or paste into a ticket. A shape that changed on every reload would be impossible to hand to anyone.
How does the morph animation work?
It animates the SVG path's d property directly in CSS keyframes. That is a real CSS feature, not a JavaScript loop — but it is only implemented in Chromium and Safari. The exported CSS wraps it in @supports so browsers without it simply show the first shape rather than breaking.
Why does the animation not run in Firefox?
Firefox has not shipped animating the d property yet. The tool detects this and says so rather than showing you a preview that will not match what your visitors get. The shape itself renders everywhere — only the morphing is gated.
Can I use this as a clip-path?
Yes. Take the path out of the exported SVG and use it with clip-path: path(...). Bear in mind that clip-path coordinates are not responsive on their own — the path is in the 200-unit space of the viewBox, so scale it or wrap it in an SVG if the element resizes.
Why do the shapes stay smooth however I drag the sliders?
The points sit on a circle with their radius nudged by the seed, and the curve through them is built with Catmull-Rom tangents converted to cubic béziers. That keeps the joins continuous, so raising the irregularity makes the shape wilder without ever producing a corner.