SVG Blob & CSS Wave Shape Divider Generator
Switch between an organic blob and a horizontal wave divider. Every shape is generated from a locked "seed" so adjusting a slider morphs the current shape smoothly instead of jumping to something unrelated — hit Randomize for a fresh one.
What an SVG blob generator actually draws
The shape starts as points spaced evenly around a circle, each pushed randomly inward or outward, based on a locked random seed. A smooth curve is then drawn through every point so the outline has no sharp corners — the "wave points" slider controls how many of those points exist, and irregularity controls how far each one can drift, without jumping to an unrelated new shape every time you move a slider.
Using blobs and waves as a css wave shape divider
Switch to Wave divider mode for an svg wave generator for website section breaks — a low amplitude gives a gentle wave, a high one a dramatic swell. Either shape can be downloaded as a file, copied as inline SVG, or copied as a ready-to-paste CSS background-image.
Worked example: what the SVG output is made of
The blob is randomised, so your path data will differ from run to run, but the structure is always the same. With the default of 7 points, the output looks like this (coordinates shortened):
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 320"> <path fill="#a78bfa" d="M 273.5,160.0 C … C … C … C … C … C … C … Z" /> </svg>
The path starts with one M (move to) command, then has one C (cubic Bézier curve) segment per point, so 7 points means 7 curves. Each C carries two control points and an end point, and the curves join smoothly into a closed shape. Z closes the path.
Because it's an SVG with a viewBox, the blob scales to any size without getting blurry. Set the width in CSS and the height follows, or use the path as a section divider by stretching it across the page.
The parts of the output
| Part | Meaning |
|---|---|
| viewBox="0 0 320 320" | The internal coordinate space. The blob is drawn inside a 320 by 320 square and scales from there. |
| M x,y | Move to the starting point without drawing. |
| C x1,y1 x2,y2 x,y | Draw a cubic Bézier curve using two control points, ending at x,y. |
| Z | Close the shape back to the starting point. |
| fill | The colour inside the path. Change it in the file or override it with CSS. |
Frequently asked questions
What's the difference between an SVG blob and a CSS border-radius blob?
An SVG blob is a true vector path, so it can have far more organic, asymmetric curves than CSS border-radius allows (which is limited to elliptical corners). SVG blobs also scale perfectly at any size with no quality loss.
Can I use the generated blob as a background shape behind content?
Yes — the SVG can be positioned absolutely behind text or images using z-index, the same way you'd use any decorative background graphic. Many sites use a blob like this behind a hero section or profile photo.
Why does my downloaded blob look different when I resize it?
If you've set a fixed pixel width/height on the SVG element rather than letting its viewBox scale proportionally, the shape can distort. Removing a fixed height (or setting both dimensions from the same ratio as the viewBox) keeps the proportions correct.
Can I animate the blob shape?
Yes — animating the 'd' attribute of the path between two blob shapes with matching point counts creates a smooth morphing effect. The generator's export doesn't include animation by default, but the static path is a valid starting keyframe.
