About

Organic blob shapes appear deceptively simple. They require smooth cubic Bézier interpolation across N control points distributed along a polar coordinate grid. Getting this wrong produces jagged polygons or shapes that self-intersect. This generator uses a seeded pseudo-random number generator (mulberry32 PRNG) to place N radial vertices at angles 2πkN, then perturbs each radius by a contrast factor c ∈ [0, 1]. A cubic spline pass converts raw vertices into smooth Bézier curves that form a closed SVG path. The output is deterministic per seed value, meaning identical parameters always reproduce the same blob.

Export formats include raw SVG markup, a CSS border-radius approximation for simple UI elements, and lossless PNG at the specified resolution. Note: the CSS border-radius export is an approximation. It cannot represent high-complexity blobs (where N > 8) with full fidelity. For precise shapes, use the SVG path output. Gradient fills use linear interpolation between two user-defined stops. All rendering happens on an HTML Canvas at native device pixel ratio for crisp output on Retina displays.

Formulas

Each blob is constructed by distributing N points in polar coordinates, then smoothing them with cubic Bézier curves.

Angle of vertex k:

α_k = 2πkN

Radius of vertex k:

r_k = R ⋅ (1 − c + 2c ⋅ prng(seed, k))

Cartesian conversion:

x_k = r_k ⋅ cos(α_k + θ)
y_k = r_k ⋅ sin(α_k + θ)

Bézier control point tangent length:

t = 43 ⋅ tan(πN)

where N = number of control points (complexity), R = base radius (half of size), c = contrast factor normalized to [0, 0.5], θ = rotation angle in radians, and prng is the mulberry32 seeded PRNG returning values in [0, 1]. The tangent length t determines how far Bézier control handles extend perpendicular to each radial spoke, producing smooth curvature between vertices. The CSS border-radius approximation uses eight percentage values derived from the normalized radii of the first 4 vertices mapped to the four corners.

Reference Data

Parameter	Range	Default	Effect
Complexity (N)	3 - 20	6	Number of control points. Higher = more intricate edges
Contrast (c)	0 - 100%	50%	Radial variation amplitude. 0 = circle, 100 = maximum distortion
Size	100 - 800px	400px	Canvas and export dimensions
Rotation (θ)	0 - 360°	0°	Rotates the entire blob around its center
Seed	1 - 999999	Random	Deterministic PRNG seed for reproducibility
Fill Type	Solid / Gradient	Solid	Switches between single color and linear gradient
Color 1	Any hex	#7C6FEB	Primary fill color or gradient start
Color 2	Any hex	#F472B6	Gradient end (ignored in solid mode)
Gradient Angle	0 - 360°	135°	Direction of linear gradient sweep
Stroke	On / Off	Off	Adds outline stroke to blob perimeter
Stroke Width	1 - 10px	2px	Thickness of outline
Stroke Color	Any hex	#4338CA	Color of outline stroke
Export SVG	-	-	Copies clean SVG markup to clipboard
Export CSS	-	-	Copies border-radius approximation
Export PNG	-	-	Downloads lossless PNG at specified size

Frequently Asked Questions

The PRNG sequence is deterministic for a given seed, but the number of values consumed changes with complexity N. At N = 6, six random radii are drawn. At N = 10, ten are drawn. The first six values remain identical, but the additional four alter the overall shape perception. To preserve visual similarity, keep complexity constant and only change the seed.

CSS border-radius supports at most eight values (four horizontal, four vertical radii), which can only approximate elliptical corners. For blobs with complexity N ≤ 5, the approximation is visually close. Above N = 8, fine-grained undulations are lost entirely. For pixel-accurate reproduction, always use the SVG path output.

At contrast c = 0, all radii equal R, producing a perfect circle regardless of complexity or seed. At c = 100, radii vary between 0.5R and 1.5R, which can create extreme concavities. Values above 70 may produce shapes that visually self-overlap at high complexity, though the path itself remains mathematically valid.

Yes. The generated SVG is pure mathematical output with no embedded fonts, trademarks, or copyrighted assets. The path data is algorithmically produced from your chosen parameters. You own the output. No attribution required.

The PNG is exported at the exact pixel dimensions you specify. On a 2x Retina display, a 200px image occupies 400 physical pixels, causing upscaling blur. Set the size to 2× your intended CSS display size (e.g., 400px for a 200px element) to ensure crispness.

They are independent. Rotation (θ) rotates the blob geometry around its center. Gradient angle rotates the linear color sweep within the canvas coordinate system. A blob rotated 45° with a 0° gradient will have the gradient running left-to-right regardless of shape orientation. To make the gradient follow the blob, set both angles to the same value.