Organic shapes, reproducible from a seed

The same seed always gives the same blob, so a shape you like can be rebuilt rather than hunted for again.

HomeProfessionsDesign › Blob

Organic shapes, reproducible from a seed

The same seed always gives the same blob, so a shape you like can be saved and rebuilt rather than hunted for again.

Local tool — nothing you make here is uploaded

Why the seed matters more than the shape

Random shape generators are easy; reproducible ones are useful. Because the same seed always produces the same blob here, the shape becomes a value you can write down. You can put it in a commit message, send it to somebody, come back in six months and get the identical curve, or generate a consistent family by varying one parameter while holding the seed still.

Without that, a shape you liked exists only as the file you exported, and the next person who wants a matching one has to click until something looks close. The seed turns a picture into a recipe.

Using one without wrecking the page

Organic shapes almost always belong behind content rather than beside it, and that puts them in the path of everything readable. Two things follow. Contrast is measured against whatever sits directly behind the text, so if a blob passes under a heading, the heading has to clear the ratio against the blob's colour and not the page background — the safest arrangement keeps text off the shape entirely. And the shape is decoration with no informational content, so it should be hidden from assistive technology rather than announced.

If you animate one, respect prefers-reduced-motion. A slowly morphing background is exactly the kind of continuous peripheral movement that causes trouble for people who have asked the system for less of it, and it is the easiest possible thing to switch off.

Nothing here leaves this browser. Colours, images, SVG and generated code are processed on your own device. No file is uploaded, nothing you enter is stored on a server, and none of it is passed to the analytics or advertising scripts on this page.
Two outputs, two different shapes

The SVG path is the shape you see: points placed at varying radii around a circle, joined by a smooth closed curve.

The border-radius form is the CSS trick — eight percentages describing four elliptical corners. It cannot express the same outline. It is included because it needs no SVG and animates cheaply, but it is a different, simpler shape and the page does not pretend otherwise.

A smoothed curve bulges past its own control points by an amount that depends on how uneven the radii are, so the shape is measured after it is built and scaled to fit its frame. Without that, a blob clips against its own viewBox — invisible in a preview, obvious in an export.

Why a seed rather than a shuffle

Most blob generators give you a new random shape and no way back to the one before. Recording the seed means the shape is a value you can store, share and regenerate exactly — and it means an export and a preview cannot disagree.