gsap-blobs

The problem

Organic shapes make a page feel alive, but hand-drawn SVG blobs rarely share a point count, so morphing between them looks like a glitch instead of a breath.

What I built

A small TypeScript function that turns a seed number into a smooth closed blob. Every shape it produces has the same structure, so any two of them tween cleanly. The blobs on this portfolio come straight out of it.

How

Seeded random radii are placed around a circle, then joined with Catmull-Rom curves converted to cubic Béziers. A radial gradient offset toward the top left fakes a light source, which is enough to read as soft 3D without a single image or shadow.

Result

Each blob costs a few hundred bytes of markup. The generator is under forty lines, has no dependencies and runs at build time, so visitors download shapes instead of code.