SVG Blob Shape Generator

Blob shapes in SVG: organic decoration for modern interfaces

A blob is an irregular, fluid, organic shape that became one of the signature visual elements of the 2018-2020 Memphis revival in web design. It surfaces everywhere — hero backgrounds, card decorations, section dividers, mascot silhouettes — because it brings a hand-drawn warmth that geometric shapes (circles, rectangles, polygons) simply cannot. Almost every blob you see on the web is a single SVG <path> generated procedurally and then exported as inline markup or a data URI.

How the algorithm works

The recipe is short. Pick 6 to 10 anchor points at uniform angles around a centre, perturb each radius with noise, then connect the anchors with cubic Bézier curves whose control points are tangent to a circle of that radius. The rule of thumb is to place each control point at roughly radius * 0.33 along the tangent direction — that gives the smoothest fillet without flattening the curvature. Repeat with a new random seed and you get a fresh blob every time.

<svg viewBox="0 0 200 200">
  <path d="M120,30 C160,40 180,90 170,130
            C160,170 100,180 60,160
            C20,140 10,90 30,60 C50,30 90,20 120,30 Z"
        fill="#3b82f6"/>
</svg>

Tools and libraries

• Blobmaker by Z Creative Labs — sliders for complexity and randomness.
• getwaves.io — focused on wave/divider shapes between sections.
• Haikei — combines blobs, gradients, scribbles, and isometric grids.
• LottieFiles — thousands of animated blob mascots ready to drop in.

SVG vs CSS vs PNG

A blob is an irregular curve and therefore impossible to draw with CSS shape functions alone — you need either an SVG path or a raster. SVG wins on file size and scalability: a 200x200 blob is around 200 bytes; the same blob as a PNG is 5-20 KB. SVG also accepts <linearGradient> and <radialGradient>, dramatically improving aesthetics. Tailwind v3+ lets you drop a blob straight into a class: bg-[url('data:image/svg+xml;...')].

Animating blobs

Two well-supported approaches: animate the d attribute with CSS @keyframes (Chromium and Firefox 100+ support discrete d interpolation when both paths share the same command structure) or use JavaScript to regenerate the path on each requestAnimationFrame tick. For cross-platform animations, exporting a Lottie JSON from After Effects gives you the best fidelity. The legacy SMIL <animate> approach still works but is deprecated in Chromium.

FAQ

Why are blobs everywhere now? They emerged as part of the Memphis design revival of 2018 and stuck because they bring organic warmth to otherwise geometric UIs. They are easy to layer behind text, work in any colour palette, and reproduce on print and dark mode without artefacts.

How does SVG compare to PNG performance-wise? An inline SVG blob is typically 5 to 30x smaller than the equivalent PNG, vector-crisp at any resolution and parses in microseconds. The only PNG advantage is intricate filter effects that SVG would need expensive feGaussianBlur passes for.

Can I animate a blob? Yes — CSS keyframes on the d attribute, JavaScript regenerating the path each frame, or Lottie JSON for designer-driven motion. Keep the curve command list identical between states so the browser interpolates smoothly.

Should blobs be accessible? Purely decorative blobs should be marked aria-hidden="true" so screen readers skip them. If the blob conveys meaning (a logo, an interactive button), wrap it with appropriate ARIA labels.