Blob Shape Generator

How to Use the Blob Shape Generator

1. Set the complexity slider (3-10). This is the number of control points placed around an invisible circle; more points produce a richer outline, fewer points a cleaner silhouette.
2. Set the randomness slider. At 0, every point lies exactly on the circle and you get a regular polygon after smoothing. At maximum, each point can be pushed up to ~40% of the radius inward or outward.
3. Pick a fill color, or toggle gradient mode to linearly blend between two stops.
4. Hit Randomize to reseed the randomness - the complexity stays the same, but each point gets a fresh offset.
5. Export as SVG (for inline use or a file), CSS background-image (as a data URI), or PNG via the download button.

How the Blob Is Built

The generator places N control points at equal angular intervals around the unit circle (2π/N apart), then perturbs each point\'s radial distance by a random factor in the range [1 - r, 1 + r] where r is the randomness slider value. Each point becomes an anchor in an SVG path. To produce a smooth organic curve rather than a jagged polygon, consecutive anchors are joined with cubic Bezier segments whose tangent vectors are computed using the Catmull-Rom-to-Bezier conversion formula - given four consecutive anchors P[i-1], P[i], P[i+1], P[i+2], the segment from P[i] to P[i+1] has control points at P[i] + (P[i+1]-P[i-1])/6 and P[i+1] - (P[i+2]-P[i])/6. The factor 1/6 is the standard Catmull-Rom tension that produces C1-continuous curves passing exactly through every anchor. The path is then closed and filled, and the randomness seed is stored in component state so Randomize re-rolls only the offsets.

Where Blobs Show Up in Real Design

• SaaS marketing hero backgrounds, where soft organic shapes hint at warmth without being literal illustrations.
• Avatar containers on profile pages, as a visual escape from the standard circle or rounded square.
• Decorative corners around feature sections and pricing tables.
• Illustrations of abstract concepts - "network", "community", "growth" - where a geometric shape would feel too clinical.
• Social graphics and OG cards, because the blob silhouette reads well at thumbnail size and differentiates from competitors who use stock photography.

Pitfalls to Watch For

First, seeded randomness determinism: once you hit Randomize again the previous shape is gone, so copy the SVG immediately if you like it. Second, self-intersection at high randomness: pushing inward aggressively can cross adjacent tangents and produce a visible pinch or loop; the tool clamps to prevent most cases, but regenerate or reduce randomness if you see a self-crossing. Third, viewBox padding: blobs that reach outward can get clipped at the viewBox corners. Fourth, accessibility: a decorative blob must carry aria-hidden="true" and an empty <title> so screen readers skip it - add these at integration time.

About Organic Curves and Path Math

SVG 2 (W3C Candidate Recommendation 2018) defines the cubic Bezier command C x1 y1, x2 y2, x y which draws a curve from the current position to (x, y) influenced by control points (x1, y1) and (x2, y2). Cubic Beziers are the default curve primitive in SVG, PDF, and PostScript because they give C2-parametric continuity with only four points per segment - enough to express any smooth curve an illustrator draws by hand. The Catmull-Rom spline the generator uses is a well-known technique from 1974 (Edwin Catmull and Raphael Rom, "A class of local interpolating splines") that guarantees the curve passes through every control point, unlike B-splines which only approximate them. For a blob this is exactly the right property: you want to place control points on a rough circle and have the outline actually touch each one. The alternative - purely parametric noise fields like Perlin or Simplex noise - would produce more organically varied shapes but at the cost of determinism and a much harder export story.

Comparison to Blobmaker, Haikei, and Figma

Blobmaker.app is the best-known dedicated blob tool; it offers more presets and a slightly smoother curve (it uses a biased random walk rather than Catmull-Rom, which gives subtly different aesthetics). Haikei bundles blobs into a much larger shape generator family and is great if you want to compose blobs with gradients and wave backgrounds in a single file. Figma plugins like "Blobs 2" generate the shape directly inside the design file and let you manipulate the vertices as editable anchors afterward, which is the right workflow if the blob will be iterated multiple times inside a design. This generator\'s advantage is that it produces a minimal, readable SVG path with one d attribute that you can version-control as a string. Its disadvantage is that you cannot edit individual vertices after generation - it is a one-shot output, not a graph editor.