SVGFlow
Open editor

Blob shape generator

Generate random organic blob shapes as clean SVG paths — pick the number of points and how wild the curve gets, shuffle until one looks right, then copy the markup or keep editing it here.

Previewseed 7
SVG
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 480 480" width="480" height="480">
  <path d="M 398.2 250.1 C 401.7 291.6 389.1 324.1 365.2 352.2 C 341.2 380.3 294.4 412.7 254.6 418.5 C 214.8 424.4 161.9 415.3 126.5 387 C 91.1 358.8 44.4 299 42.2 248.9 C 40.1 198.8 77.1 116.8 113.4 86.6 C 149.7 56.4 221.4 64.9 259.8 67.6 C 298.3 70.4 321.1 72.5 344.2 102.9 C 367.2 133.4 394.7 208.6 398.2 250.1 Z" fill="#2f6df6"/>
</svg>
Points — 8
Randomness — 45
Fill

Need it in brand colors later? The Color Replacer swaps the fill in one click.

How it works

Points are placed around a circle, pushed inward by a seeded random amount scaled by the randomness slider, and joined with a closed Catmull-Rom spline expressed as cubic Béziers — which is why the outline is smooth through every point, with no corners. The same seed always draws the same blob; shuffle just picks a new seed, and the current one is printed above the preview so a keeper is reproducible.

When to use it

Decorative section backgrounds, image masks, avatar frames, empty-state art — the places a rectangle is too much rectangle. One path with a fill is cheap to ship, trivial to recolour, and safe to scale to any size.

Common problems

  • It looks spiky rather than organic. High randomness with many points makes noise, not blobs. Push one slider down — more points wants less randomness.
  • Using it as an image mask. Wrap the path in a clipPath and reference it from CSS clip-path: url(#…), or open it in the editor and build the composition there.
  • Morphing between blobs jumps. Path animation interpolates command-by-command, so both shapes need the same point count — generate both at the same Points setting and only change the seed.

Notes

  • The blob is one closed cubic-Bézier path through randomised points on a circle — no clipping, no masks, safe to scale and animate.
  • The same seed always draws the same blob, so a shape you liked is reproducible — the seed is printed under the controls.
  • For a background shape, drop the width and height attributes and let the viewBox scale it to its container.

Related tools