SVG Blob Generator

Generating smooth, natural-looking vector blobs programmatically involves trigonometry, pseudo-random point distribution, and Cubic Bezier curve interpolation.

Algorithmic Workflow

1. Circle Segmentation & Point Generation

The generator divides a $360^\circ$ circle ($2\pi$ radians) into $N$ equal angular segments, where $N$ represents the chosen number of anchor points:

$$\theta_i = \frac{2\pi \cdot i}{N} \quad \text{for } i = 0, 1, \dots, N-1$$

For each angle $\theta_i$, a radial offset $r_i$ is calculated by applying random variance to a base radius $R$:

$$r_i = R \pm (\text{Randomness Factor} \times \text{Variance})$$

Using polar-to-cartesian conversion, the generator computes the $(x_i, y_i)$ coordinate for each point relative to the center $(cx, cy)$:

$$x_i = cx + r_i \cdot \cos(\theta_i)$$ $$y_i = cy + r_i \cdot \sin(\theta_i)$$

2. Smooth Spline Path Fitting (Bezier Curves)

Connecting raw points with straight lines creates jagged polygons. To create organic "blob" curves, the generator computes control points for Cubic Bezier Splines (C or Q SVG path commands) between consecutive coordinates:

Path String: M x0 y0 C cp1x cp1y, cp2x cp2y, x1 y1 ... Z

The smoothing algorithm calculates tangent control handles that guarantee $C^1$ continuity (smooth transitions across point boundaries without sharp angles).

3. SVG Output Generation

Once the closed path string (d="...") is assembled, it is wrapped in an SVG element with your chosen styling properties:

<svg viewBox="0 0 500 500" xmlns="[http://www.w3.org/2000/svg](http://www.w3.org/2000/svg)">
<path fill="#6366F1" d="M 250 50 C 350 50 ... Z" />
</svg>