Blob Gen

When to use Blob Gen

• Clipping images into organic shapes: Apply the clip-path output to a profile photo or product image to break away from the default rectangle or circle without any image editing software.
• Decorative background accents: Place semi-transparent blobs behind content sections to add visual interest and guide the eye without competing with the main content.
• Illustration and icon backgrounds: Use a blob as a backing shape for icons in feature sections - it provides a contained, brand-coloured area without the rigidity of a circle or square.
• Animated UI elements: Generate two similar blobs and morph between them using CSS or GSAP for a fluid animation that feels alive. The SVG path structure supports SMIL and JS-based morphing libraries directly.

How blob shapes are generated using cubic Bézier curves

The Blob Generator creates organic, amoeba-like shapes by distributing a set of anchor points evenly around a circle and then randomising each point's distance from the centre within a controlled range. The number of anchor points you choose (typically 4 to 12) determines the shape's complexity - fewer points produce simpler, rounder blobs; more points allow for more intricate, irregular contours.

Between each pair of adjacent anchor points, the tool generates a cubic Bézier curve. Rather than calculating control points mathematically, it uses a smooth-curve algorithm that positions each control point at a fraction of the distance to the neighbouring anchor, automatically producing tangent-matching curves that look organic. The randomness slider controls the maximum deviation each anchor point can have from its default radius position - low randomness stays close to a circle, high randomness produces dramatic spikes and indentations.

The output SVG uses a single <path> element with an M (moveto) command and a sequence of C (cubic Bézier) commands, making the file extremely small - typically under 500 bytes. The CSS clip-path output uses the polygon() or path() function, allowing you to apply the shape directly to any HTML element, including images and videos, without embedding an SVG in the markup. The tool regenerates a new shape on each click of the randomise button, so finding a shape you like takes seconds.