SVG Blob Generator

Generate smooth, random organic SVG shapes — copy SVG or CSS clip-path.

Last updated May 17, 2026

Points6Randomness50

Gradient

SVG markup

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 400" width="400" height="400">
  <path d="M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z" fill="#7fb2ff"/>
</svg>

CSS clip-path

clip-path: path('M 357.72 200.00 C 355.22 230.41 283.68 256.99 245.15 278.20 C 206.61 299.41 166.70 340.31 126.52 327.27 C 86.33 314.24 8.01 249.30 4.05 200.00 C 0.08 150.70 60.02 48.86 102.71 31.48 C 145.40 14.11 217.68 67.68 260.18 95.77 C 302.68 123.85 360.23 169.59 357.72 200.00 Z');

What is an SVG blob generator?

An SVG blob generator creates closed organic shapes by sampling points around a circle and connecting them with smooth Bézier curves. The result is a soft, fluid silhouette — the kind you see behind a marketing hero, around a profile photo, or as a colorful background blob on a landing page.

Blobs sit on the sweet spot between geometry and randomness. Tweak the number of points to get jellybean (3-4), pebble (5-6), or chaotic (10+) shapes. Tweak the randomness slider to go from near-circular to wildly distorted. Press the dice button to roll a brand-new seed at any time.

Everything runs in your browser. Export as a copy-paste SVG snippet, a downloadable .svg file, or a CSS clip-path value you can apply directly to any HTML element to mask it into the blob shape.

What you'll learn while making blobs

Cubic Bézier curves give the blob its smoothness — each pair of adjacent points has two control handles, computed so the tangent is continuous at every junction.
Catmull-Rom splines (used here) auto-derive those handles from neighboring points, so you don't have to hand-tune control points to keep the curve smooth.
CSS clip-path: path(...) can apply a blob shape to any element — image, div, video — without affecting its layout box.

How to generate a blob step by step

Choose point count
Fewer points (3-5) make jelly-bean blobs. More points (8-12) make pebbled, irregular shapes.
Set randomness
0% is a circle. 50% gives gentle blob-shaped curves. 100% gives wildly distorted, dramatic silhouettes.
Pick a color or gradient
Use a solid fill, or enable Gradient and choose two colors plus an angle. Matches popular hero-section patterns.
Randomize and export
Press the dice to roll a new seed. When you're happy, copy the SVG, copy the CSS clip-path, or download the .svg file.

Where blobs work best

Three common ways to use a blob, and what to watch out for.

Use case	How to apply it	Watch out for
Hero background	Embed the SVG, position absolutely behind content	Keep contrast — text over the blob needs readable color
Image mask	Apply CSS clip-path: path('…') to the <img>	Image source is still downloaded — clip is visual only
Avatar shape	Wrap profile photo in a div with clip-path	Use border-radius alone if circle is enough — clip-path is more expensive to repaint
Section divider	Stretch a wide blob along the bottom of a section	Use viewBox preserveAspectRatio so the shape stays correct on wide screens
Decorative accent	Drop several semi-transparent blobs at different sizes	Animation should be sparing — large repainted paths burn CPU
Brand illustration	Combine a blob with text or an icon on top	Pick one consistent shape style so a brand identity holds

Blob examples to try

Drop a blob into a hero section

HTML

<section class="hero">  <svg class="blob" viewBox="0 0 400 400" aria-hidden="true">    <path d="M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z"          fill="#7fb2ff"/>  </svg>  <h1>Welcome to Coddy</h1></section>

CSS

.hero { position: relative; }.hero .blob { position: absolute; inset: 0; width: 60%; opacity: 0.4; z-index: 0; }.hero h1 { position: relative; z-index: 1; }

An absolutely-positioned SVG sits behind the headline. Lower the opacity so text on top stays readable without a backdrop-filter.

Mask an image into a blob

CSS

.avatar {  width: 240px;  height: 240px;  object-fit: cover;  clip-path: path('M 280 110 C 320 150 340 220 300 280 C 260 330 180 340 130 300 C 80 260 70 180 110 130 C 150 80 240 70 280 110 Z');}

clip-path is supported in all modern browsers. The path coordinates here assume a 400×400 viewBox — scale the image to that box for the clip to align cleanly.

Two soft blobs as a decorative background

HTML

<div class="backdrop">  <svg class="blob blob-a" viewBox="0 0 400 400">…</svg>  <svg class="blob blob-b" viewBox="0 0 400 400">…</svg></div>

CSS

.backdrop .blob { position: absolute; opacity: 0.5; filter: blur(60px); }.blob-a { top: -10%; left: -10%; width: 50%; }.blob-b { bottom: -10%; right: -10%; width: 60%; }

Layering blurred blobs gives a soft "aurora" feel. Keep them outside the visible bounds with negative offsets so only the rounded edges peek into view.

Common SVG blob mistakes

Forgetting viewBox and giving the <svg> a fixed width/height. The shape won't scale responsively — use viewBox plus width/height in CSS.
Animating large filled paths every frame. Path rasterization is expensive; either use transform/opacity or pre-blur with a CSS filter so the GPU handles it.
Copying the inline <svg> into Tailwind/Bootstrap and inheriting display: inline instead of block. The default baseline gap leaves a few pixels under the shape.

SVG Blob Generator FAQ

What is a blob in design?

A blob is an organic, asymmetric closed shape made of smooth curves. They're popular in modern web design — hero backgrounds, badges, avatar masks — because they feel more inviting than circles and more polished than freehand shapes.

Is the generated SVG free to use commercially?

Yes. The output is just SVG markup you generated yourself — there's no license attached and no attribution required. Use it in commercial sites, apps, decks, anywhere.

Can I edit the path after copying it?

Yes — the output is a standard SVG <path d="…">. Open it in Figma, Illustrator, Inkscape, or any vector editor to tweak control points. Or just regenerate here and copy a fresh shape.

How do I use the CSS clip-path output?

Apply clip-path: path('M … Z') to any HTML element. The path coordinates are in the same SVG viewBox space (default 400×400 here), so size the clipped element to that box for the clip to line up — or scale the path coordinates.

Does Math.random give the same shape every visit?

No, but this tool uses a seeded pseudo-random generator. The same seed always produces the same blob — so you can press Randomize until you find a shape you like, and the SVG output will keep that exact shape forever.

Will blobs slow down my page?

A single static SVG blob is essentially free. Multiple animated blobs with blur filters can become expensive on mobile — profile in DevTools and prefer transform/opacity animations over path-attribute animations.