Grid

Fractal Grid

A square grid that splits into finer and finer cells toward its centre, like a zoom into ever smaller detail.

Settings and defaults

Depth
5
Split Radius
3.5
Split Jitter
0.5
Cell Size
4
Line Width
1.6
Section Size
4
Section Width
2.2
Line Mode
0
Cell Mode
2
Anim Speed
1
Anim Scale
0.5
Anim Intensity
1
Fade Strength
0.7
Displace
0
Size
50
Line Color
#59bfff
Section Color
#99e6ff
Cell Color
#1f61a3
Glow Color
#66e6ff
Bg Color
#020810
Bg Opacity
0
Reveal
1
Reveal Duration
0

The Fractal Grid is a square grid that refines itself. Far from the centre the cells are large; closer in, each cell splits into four, and those split again, down to six levels, so the floor reads as a zoom into ever finer detail. Deeper cells take on the accent colour and their lines get thinner and dimmer, so you can see the levels at a glance.

How it works

Each cell asks a single question: is it close enough to the centre to split? The radius in which cells split halves at every level, which is what makes the result self-similar rather than one blurred patch of detail. A little randomness per cell can make the boundary of each level wobble, so the refinement edge looks organic rather than ruled.

Settings

  • Depth is the maximum number of subdivision levels, from 1 to 6.
  • Split Radius sets how far from the centre cells start dividing.
  • Split Jitter makes that boundary irregular.
  • Cell Size is the size of the largest cells.
  • Cell Mode lights the smallest cells: Twinkle, Wave, Ripple or Alternate.

Use it for

Data and analytics visuals, zoom and detail metaphors (resolution, precision, scale), tech product floors and mathematical backgrounds. Compare the Apollonian Grid, where the self-similar detail is circles instead of squares.

Code and API

Ready-to-paste React Three Fiber code and the 3DRise API are included in paid plans, inside the studio.

See plans

More grids

Works well with

Used in