SVG Pattern Generator

Iso Cube Grid

A city of cubes on a diamond lattice, heights read from noise.

432 shapes · 1000 × 1000 viewBox

Colour

Leaves the backdrop unpainted so the pattern drops onto any surface. Ridgeline and Iso Cube Grid still paint the colour above, because it is what hides the shapes behind them.

Presets
Shape

See it in use

  • Iso Cube GridISOMETRIC · NOISE
    Portrait — inset plate
  • Iso Cube GridISOMETRIC · NOISE
    Portrait — full bleed
  • Iso CubeGridISOMETRIC · NOISE
    Landscape — split
  • Iso Cube GridISOMETRIC · NOISE
    Landscape — band

As a website background

Infrastructure that gets out of the way

A worked example — your pattern, sitting behind real page furniture.

Start building

How it works

Grid coordinates are put through the standard isometric projection — x and y each contribute to both screen axes, one at half rate — and every cell gets a column whose height is a sample of the noise field. Each column is drawn as three rhombi: a lit top, a shaded face, and one left in the background colour. The whole illusion rests on painting order alone; the cells are drawn back to front so a near column covers a far one, and there is no depth buffer, no lighting model, and no third dimension anywhere in the file.