How an SVG Blob Adds Organic Shapes to Modern Web Design
Learn how an SVG blob is built from randomized bezier curves, where to use organic blob shapes in hero accents, avatars and dividers, and why SVG stays crisp.
How an SVG Blob Adds Organic Shapes to Modern Web Design
Open any landing page from the last two years and you will find it: a soft, lopsided splotch of color sitting behind a headline, masking an avatar, or floating between sections. The industry calls it a blob. It is the design world's polite rebellion against the hard rectangle, and it has quietly become the default way to make a flat page feel a little more alive.
Blobs look freehand, like someone spilled paint and called it a day. They are not. A blob is a precise piece of geometry, and once you understand how the curve is built you can place one anywhere with confidence instead of trusting luck. This post walks through what a blob actually is, how randomized points become a smooth outline, where to use one, and why doing it in SVG keeps everything sharp at any size.
What a blob really is under the hood
Here is the one concrete idea that makes everything else click: a blob is an SVG path made of smooth bezier curves wrapped around a center point, where the distance from the center to each edge point is randomized. That is the whole trick.
Picture a circle. Now imagine placing six dots evenly around its edge, like numbers on a clock face. If you connect those dots with a smooth curve, you get something close to a circle. But if you nudge each dot slightly inward or outward by a random amount before connecting them, the outline starts to wobble. One side bulges, another caves in, and suddenly you have an organic shape that no longer looks machine-made. Each new set of random offsets produces a different blob, which is why every one looks hand-drawn even though a function generated it.
The reason the result stays smooth rather than turning into a jagged polygon is the curve type. The points are joined with a closed spline that passes through every dot and matches the slope on both sides of each one. Translated into the cubic bezier curves that SVG understands, the outline has no corners and no crossing segments. It always loops back to where it started. So you get the wobble of randomness with the softness of a curve, and the two never fight each other.
How randomized points draw the outline
Step through it as the math does it. First, decide how many edge points you want; this is the complexity. Fewer points (four or five) give you a soft, rounded triangle or square. More points (eight or ten) give the outline more places to bend, so the silhouette can get spikier and more intricate.
Second, each point gets pushed in or out by a random radius. The size of that push is the randomness control. Low randomness keeps every point close to the base circle, so the blob stays nearly round. High randomness lets points swing far in and far out, producing dramatic lumps. For the classic soft hero blob, five to seven points with medium randomness is the sweet spot.
Third, a seed feeds the random number generator. This matters more than it sounds. A seed is just a number, but the same seed plus the same complexity plus the same randomness always produces the identical blob, on any device, every time. That reproducibility is what makes a share link round-trip perfectly and what lets you document a shape in a tokens file and regenerate it months later. The SVG Blob Generator exposes all three controls and rolls a fresh seed whenever you hit randomize, so you can explore shapes without ever losing one you liked.
A worked example: from path to page
Say you want a soft accent behind a headline. You set complexity to six, randomness to about 0.4, and the tool hands you an SVG path that looks roughly like this:
<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<path d="M156 50 C172 78 168 118 142 150 C116 182 72 188 44 162 C16 136 24 88 48 58 C72 28 140 22 156 50 Z" fill="#7c5cff" />
</svg>That single d attribute is the entire blob: a string of bezier curve commands that begins at one edge point, sweeps through the others, and closes with Z. To use it, drop the SVG into your hero section as an absolutely positioned element with a low z-index, add opacity: 0.6 and a heavy filter: blur(40px), and the hard shape melts into an ambient glow behind your text. The whole effect is one element and a few lines of CSS. No image file, no asset pipeline.
If instead you want to clip an existing element to the shape, copy the clip-path: path(...) export and apply it to a photo or a div. The element gets trimmed to the blob silhouette with zero extra DOM. One caution worth remembering: those clip-path coordinates are absolute pixels, not percentages, so size the clipped element to match the blob or the clip will not line up.
Where blobs actually earn their place
Three uses cover most of what you will reach for. The first is the hero accent described above, where a blurred gradient blob sits behind or beside the headline to add depth without competing for attention.
The second is avatars. A round avatar is fine, but a blob-masked avatar instantly looks more considered. Generate a blob with low randomness so it stays roughly circular, then clip the avatar image to it. Use the same seed across a whole team for a consistent house style, or hand each person a different seed for playful variety.
The third is structure: section dividers and decorative stickers. Instead of a flat horizontal rule between two sections, scatter a couple of translucent blobs at the boundary. Behind feature cards, a faint blob in a brand color gives the card something to sit against. Because each export is a standalone shape, you can fill it with a gradient from the Gradient Generator and hand it straight to a designer or drop it into a design file as an asset.
Why SVG keeps it crisp
Here is the part that decides whether you do this in SVG or reach for an image editor. A blob saved as a PNG is a grid of pixels. Blow it up to fill a 4K hero and the edges turn soft and blurry, because there is no more detail to show than the pixels you captured. An SVG blob is not pixels at all. It is the math of the curve, so the browser redraws those bezier segments fresh at whatever size you render them. A blob at 80 pixels and the same blob at 1600 pixels are equally sharp, on a phone screen and on a retina display alike.
That vector nature pays off twice more. The file is tiny, often a few hundred bytes of path data rather than a multi-kilobyte image, and it stays editable; you can recolor it with a single fill attribute or animate it by tweening one path into another. The only housekeeping is to keep the markup lean, which is what a pass through the SVG Optimizer is for before you ship.
I redesigned a side project's landing page last month and replaced three exported PNG blobs with inline SVG. The page weight for those decorations dropped from roughly 240 KB to under 2 KB, and for the first time the accents looked correct on a large external monitor instead of faintly fuzzy. That single swap convinced me to never export a decorative blob as a raster image again.
Blobs are a small thing, but they are the kind of small thing that separates a page that feels designed from one that feels assembled from a template. Understanding that the shape is just randomized points joined by smooth bezier curves takes the mystery out of it, and keeping it in SVG keeps it sharp forever. Generate one, tune the seed until it feels right, write the seed down, and move on.
Made by Toolora · Updated 2026-06-13