SVG Blob Generator
Generate random organic SVG blobs: set points, contrast and colour or fill it with a photo, then copy or download the SVG — 100% in your browser, no upload
Centred and cropped to fill the blob — never stretched — and written into the SVG itself, so the file needs nothing from the web.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" width="200" height="200"><path fill="#6366f1" d="M 156.26 100 C 156.6 117.97 145.13 149.51 132.17 155.71 C 119.21 161.92 92.65 146.51 78.51 137.23 C 64.38 127.95 50.34 117.58 47.36 100 C 44.38 82.43 46.83 40.47 60.62 31.78 C 74.41 23.09 114.16 36.5 130.1 47.87 C 146.04 59.24 155.92 82.03 156.26 100 Z"/></svg>
🔒 Generated in your browser — nothing is uploaded.
What is an SVG blob generator?
A blob generator creates smooth, organic "blob" shapes — the soft, rounded, slightly irregular forms popular in modern web design as backgrounds, section dividers, image masks and decorative accents. This tool places points around a circle, jitters each one by a seeded random amount, and smooths them into a flowing closed curve, then exports the result as a clean, self-contained SVG you can drop straight into your markup or CSS.
How do I use it?
Drag the Points slider to set how many lobes the blob has, and the Contrast slider to control how irregular it looks — low contrast stays nearly circular, high contrast turns spiky and dramatic. Pick a fill colour — or use Fill with a picture, which centre-crops your photo and writes it into the SVG itself — then press Randomize to roll a brand-new shape (each click reseeds the generator). When you like the result, copy the SVG or download it as blob.svg. Everything runs locally in your browser.
Frequently asked questions
Are the blobs random or repeatable?
Each shape is produced by a seeded pseudo-random generator, so a given combination of points, contrast and seed always yields the exact same blob. Pressing Randomize picks a new seed, giving you a fresh shape you can then keep, tweak or export.
What format is the download?
The blob is exported as an SVG file (blob.svg, image/svg+xml). SVG is a resolution-independent vector format, so the shape stays razor-sharp at any size and the file is tiny. You can also copy the raw <svg> markup and paste it directly into HTML, React/JSX or a CSS background.
How do I use a blob as a background or image mask?
Save or copy the SVG, then use it as an <img>, an inline <svg>, or a CSS background-image via a data URI. To put a photo inside the blob, use Fill with a picture: it is centre-cropped and embedded in the SVG, so the one file needs nothing from the web. To mask an image you host yourself, reference the path in an SVG clipPath or use CSS clip-path or mask with the shape. Because it is pure vector, it scales to any container without blurring.