SVG Blob

Simple SVG blob: a minimal organic shape for clean interfaces

A simple blob is the stripped-down sibling of the maximalist organic shapes that dominated the 2018-2020 Memphis revival. Instead of 8-12 anchor points with heavy noise, the simple variant uses just 4 to 6 control points with smooth quadratic or cubic Bézier curves and a small radius deviation (10-20%). The result is minimal yet still organic — perfect for the post-maximalist trend that took hold from 2022 onward, where designers want a hint of fluidity without overwhelming the layout. Apps like Notion, Linear, and Stripe use simple blobs as subtle dashboard accents, login illustrations, and homepage background washes.

The math behind a simple blob

Place n points evenly around a centre on a circle of radius r, then add a small random offset to each radius: r * (1 + (Math.random() - 0.5) * 0.3). Connect the points with cubic Bézier curves whose control handles are tangent to the imaginary circle. Because the deviation is small, the shape stays close to a soft circle — exactly the "simple/clean" look you want for an enterprise UI.

<svg viewBox="0 0 200 200">
  <path d="M100,30 C140,40 170,80 160,120
            C150,160 100,170 60,150
            C30,130 30,70 100,30 Z"
        fill="#3b82f6"/>
</svg>

Tools and SDK alternatives

• Haikei.app — a UI for gradients, blobs, scribbles and isometric backgrounds.
• Blobmaker.app by Z Creative Labs — sliders for complexity and randomness.
• Get Waves — a sibling tool for wave-shaped dividers.
• SVGO — npm package that minifies the generated SVG; Figma and Inkscape exports tend to be bloated and benefit from a pass through it.
• Stable Diffusion / SDXL — recent trend for AI-generated organic backgrounds, but they ship as raster PNG/JPG and cannot scale like SVG.

CSS-only alternative: border-radius with 8 values

It is possible to approximate a simple blob with pure CSS by giving border-radius eight distinct values: border-radius: 47% 53% 50% 50% / 40% 60% 40% 60%. This works for buttons or avatars and avoids loading any SVG, but the result is far less organic than a proper Bézier blob — the curvature is fixed at the four corners.

Performance, colour and accessibility

A simple inline SVG blob is under 1 KB — orders of magnitude lighter than a comparable PNG (5-30 KB). Apply colour with fill for solid backgrounds or with a <linearGradient> defined inside <defs> for a richer look. Since the blob is decorative, mark it with role="presentation" or aria-hidden="true" so screen readers skip it.

Animating between simple blobs

Tools like anime.js and the premium GSAP MorphSVG plugin interpolate between two paths frame by frame, producing a smooth morph. The trick is to keep the number of curve commands identical between the start and end shapes — otherwise the browser falls back to a discrete swap. For pure CSS, a slow rotation (transform: rotate) on a near-circular blob looks remarkably alive.

FAQ

What is the ideal viewBox size? A viewBox between 0 0 200 200 and 0 0 400 400 gives enough resolution for smooth curves while keeping the markup short. The browser scales the SVG to whatever CSS width you set.

How do I apply multiple colours? Define a <linearGradient> or <radialGradient> inside <defs>, give it an id, then set fill="url(#myGradient)" on the path.

Does the SVG work on macOS, Linux and Windows the same way? Yes — SVG is a web standard and renders identically on every modern browser regardless of OS. It also works offline and embeds into PDF, Word and Keynote.

Is the simple blob still on-trend in 2026? Yes — the post-maximalist movement favours minimal blobs over the loud, multi-coloured ones of 2019. A single soft shape behind a hero headline is a safe contemporary choice.