GENERATIVE SVG · ZERO DEPENDENCIES

Give every interface
a soul.

A generative SVG engine that sculpts infinite, unique micro-graphic backgrounds — living hero art, bento tiles, and logo backdrops. Pure vector. Never the same twice.

21gSOUL dynamically sculpts complex, high-resolution SVG compositions on the fly using a mathematically driven procedural layout engine. It is designed to act as an endless source of inspiration or background assets for sci-fi, cyberpunk, editorial, and abstract design workflows.

SIGNATURE
SEED—
LAYOUT—
PALETTE—
ELEMENTS—
STYLE—
Space / G to reroll
21gSOUL · SVG · VECTOR
DESIGN MOTIFS
Hover any shape to inspect it · click to recolour · toggle motifs to reshape
WHY 21gSOUL

A UI design tool, not a stock library

Generate the exact background you need, on the spot. No scrolling marketplaces, no licensing, no duplicates — every roll is a one-of-a-kind vector signature.

Infinite & unique

A procedural engine combines grid skeletons with mutators to generate thousands of unique macro-architectures. Never the same twice.

Pure vector

Every composition is real SVG DOM — crisp at any size, tiny in bytes, editable by hand or by script. Export clean SVG or 2× PNG.

It's alive

Because it's DOM, shapes draw themselves in, hover to inspect, and recolour on click through a 50-colour spectrum.

8 design motifs

FUI & tech, CJK type, Ensō, Adinkra, data viz, topography, isometric CAD, and 50+ sacred-geometry figures. Mix any combination.

Backgrounds that hold text

Purpose-built for logo backdrops, hero sections, bento tiles, cards, empty states, and loading screens.

Zero dependencies

Vanilla JavaScript in a single engine. No build step, no NPM, no external libraries. Drop it in anywhere.

Features
Procedural Layout Engine
Combines base grid skeletons (Binary Space Partitioning, Concentric Rings, Cellular Automata) with radical mutators (Sparsify, Explode, Greeble, Frame) to mathematically generate thousands of unique macro-architectures.
FUI & Tech Elements
HUD crosshairs, broken targeting rings, data waveforms, circuit traces, parallel hatch shading, and perspective wireframes.
Cultural Aesthetics
Ensō (円相) — procedural sumi-e brush strokes and ink wash. Adinkra (Gyaman) — traditional West African symbols and geometry. CJK (中日韓) — generative kanji, katakana, and hanko (red seal) compositions.
Zero Dependencies
Everything runs in vanilla JavaScript. No build steps, no external libraries, no NPM packages.
Architecture

Three phases per composition:

  1. Palette Selection — chooses from a curated set of monochrome, high-contrast, or accented colour palettes.
  2. Macro Layout — the layoutProcedural() engine mathematically divides the canvas into a series of structural cells using recursive algorithms.
  3. Micro Generation — every cell independently picks a drawing instruction from a flat pool of 30+ generators (barcodes to mountain landscapes) and renders it with raw SVG DOM elements.
DROP IT ANYWHERE

Made for real interfaces

Logo backdrops Hero sections Bento tiles Cards Empty states Loading screens Social & OG art