SVG Blob Generator
Generate smooth organic blobs from a seed, fill them, and animate one blob into another.
Preview
Seed 12 · 6 points · 400 × 400 px
Shape
Fill
background-size: cover. It is embedded in the SVG, scaled to at most 1,600 px. Morph animation
The animation morphs your blob into a second blob with the same number of points and back. Choose that second shape with its own seed.
Your device asks for reduced motion, so the preview does not play by itself. The CSS turns the animation off for visitors with that setting too.
Presets
Code
About the SVG Blob Generator
Make soft, organic blob shapes for backgrounds, avatars and illustrations. Each blob starts as points around a circle — you choose how many points, how much their distance from the center (and a little their angle) varies with randomness, and how rounded the outline is with smoothness. The points come from a random seed, so a seed always gives back the same blob; select New blob for another one.
Fill the blob with a solid color, a gradient, an outline or your own image, which is clipped to the shape and never leaves your device. Then copy the SVG or its path, download an SVG or a transparent PNG, or animate it: the CSS morph moves clip-path: path() between your blob and a second blob and stops for visitors who prefer reduced motion, and the animated SVG does the same with SMIL inside the file (SMIL cannot follow that setting, so offer those visitors the static SVG).
How to use it
- Drag Points, Randomness and Smoothness until the shape feels right, and select New blob (or type a seed) for other shapes with the same settings.
- Under Fill, choose Solid, Gradient, Outline or Image, and set the colors, the gradient direction, the outline width or the picture.
- Set the Size — the width and height of the SVG in pixels.
- To animate it, pick a Second blob seed and a duration under Morph animation, and select Play morph to preview.
- Copy the SVG, path, CSS morph or animated SVG, or download an SVG, an animated SVG or a PNG.
Examples
Seed 12 · 6 points · randomness 45% · smoothness 100% · gradient
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">…<path d="M… C… Z" fill="url(#blob-fill)"></path></svg>
Six points give six cubic Bézier segments (C commands).
CSS morph · second seed 29 · 8 s
.blob {
width: 400px;
height: 400px;
background: linear-gradient(135deg, #8b5cf6, #f472b6);
clip-path: path("M …");
animation: blob-morph 8s cubic-bezier(0.45, 0, 0.55, 1) infinite alternate;
}Both blobs have the same number of points and the same commands, which is what lets browsers interpolate the path.
Common uses
- Decorative background shapes behind hero images, cards and testimonials.
- Avatar and photo frames: put a portrait inside an organic shape.
- Slowly morphing “lava lamp” accents for landing pages.
- Unique shapes for illustrations, stickers, slides and social graphics.
How the blobs are made
The tool places the points evenly around a circle, then a seeded random generator moves each one closer to the center (up to 55% at full randomness) and nudges its angle a little. A closed Catmull–Rom spline — the interpolating curve Catmull and Rom described in 1974 — passes through every point, and each piece of it is written as a cubic Bézier C command with control points P1 + τ(P2 − P0)/6 and P2 − τ(P3 − P1)/6 (SVG 2 path data). Smoothness is the tension τ: at 100% the outline is a smooth Catmull–Rom curve, at 0% the control points sit on the points and you get a polygon with sharp corners. Finally the exact bounding box of the curve is measured and the blob is scaled and centered to fill the canvas.
Morphing between two blobs
Browsers can only morph one path into another when both have the same commands in the same order; then every number moves from its first to its second value (CSS Shapes §3.1.1.2). Every blob here is M followed by one C per point and Z, so any two blobs with the same number of points morph smoothly. The CSS morph animates clip-path: path(), which current Chrome, Edge, Firefox and Safari interpolate; its coordinates are pixels, so the element must be exactly the blob’s size. The animated SVG uses an <animate attributeName="d"> element instead, which also plays when the SVG is shown with an <img> tag.
The CSS morph includes a prefers-reduced-motion media query, so it stops for visitors who ask their device for less motion. SMIL animations ignore that setting, so serve those visitors the static SVG instead — for example <picture><source srcset="blob.svg" media="(prefers-reduced-motion: reduce)"><img src="blob-animated.svg" alt=""></picture>.
Limitations
- Outlines cannot be morphed with clip-path (it clips a background, which has no stroke); use the animated SVG for them.
- The CSS morph uses px coordinates: to change its size, change the Size here and copy again rather than scaling the element.
- Image fills are embedded in the SVG as data, scaled to at most 1,600 px, which makes the file much larger; the share link does not include your image.
- PNG downloads are at most 4,096 × 4,096 px.
- The animated SVG has no reduced-motion switch of its own: SMIL ignores that setting, so offer a static version where it matters.
Privacy
Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.
Frequently asked questions
Can I get the same blob again?
Yes. The same seed with the same points, randomness and smoothness always gives the same blob. Copy link stores all the settings in the address.
How do I put a photo inside a blob?
Choose Image under Fill and pick a photo. It covers the blob like background-size: cover and is clipped to the shape. Download the SVG or PNG — or copy the CSS morph and replace your-image.jpg with your file.
How do I animate the blob?
Pick a second seed under Morph animation, then copy CSS morph for a clip-path animation or download Animated SVG. Play morph previews it here.
Why can’t two blobs with different point counts morph?
Path interpolation needs the same commands in both paths. A 6-point blob has six curves and an 8-point blob eight, so the browser cannot pair them up — it would jump instead of morphing. The second blob therefore always uses your point count.
Can I use the blob as a CSS background?
Yes: download the SVG and use it with background-image: url(blob.svg), or use the CSS morph rule without the animation line for a static clip-path shape.
Is my image uploaded?
No. The image is read and scaled in your browser and only ends up in files you download. The page works offline once loaded.