SVG — Generative Patterns & Backgrounds

SVG makes tiny, resolution-independent textures and shapes from a few numbers. Generate a repeating <pattern> tile or a random organic blob, and copy the markup.

1 · repeating pattern tiles

22
#c8ff00
the <pattern>

        

One small tile in <defs> fills any area at any size — a 200-byte texture instead of a PNG. Great for hero backgrounds and section dividers.

2 · organic blob generator

A blob is a closed path of points placed around a circle at randomized radii, joined by smooth cubic curves. Re-roll for a new one.

6
24
generated path

        

This is the same technique behind those "blob" hero shapes — deterministic enough to control, random enough to feel hand-drawn.