Grid

Contour Grid

A topographic map floor: contour lines over a drifting landscape, with glowing peaks and an optional real 3D relief.

Settings and defaults

Levels
16
Roughness
0.5
Warp
0.35
Cell Size
14
Line Width
1
Section Size
5
Section Width
2.2
Line Mode
0
Cell Mode
1
Anim Speed
1
Anim Scale
0.5
Anim Intensity
1
Fade Strength
0.7
Displace
0
Size
50
Line Color
#59d9b3
Section Color
#bff299
Cell Color
#1a5c52
Glow Color
#8cffbf
Bg Color
#020a0a
Bg Opacity
0
Reveal
1
Reveal Duration
0

The Contour Grid draws a topographic map: the contour lines of a rolling landscape, with every few lines drawn heavier as index contours, the way survey maps mark them. The land drifts slowly, so the lines swell, merge and split as hills rise and sink.

How it works

An invisible landscape of hills and valleys is generated from layered noise. The grid draws the lines where that landscape crosses each height step, so you are looking at the land from above, read as lines. The fill between them follows height too: low ground stays dark and the peaks glow, so the eye reads the relief without a legend. Turn up Displace and the surface really rises to the height its contours describe, so the map becomes a terrain model.

Settings

  • Levels is the number of contour steps from the lowest point to the highest.
  • Roughness goes from rolling hills around 0.35 to craggy ground around 0.65.
  • Warp bends the contours into ridges and valleys.
  • Cell Size sets how large the landforms are.
  • Line Mode Flow lights a band of contours that climbs through the height range.

Use it for

Outdoor, travel and mapping brands, data and analytics pages, editorial layouts and calm technical backgrounds. Pair it with a terrain for a full landscape, or see the Flow Net Grid for another field drawn as lines.

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