Topographic contour lines
Map style contour lines that drift slowly across the screen like living terrain, drawn on canvas.
Settings
Code
<div class="pt-topo"><canvas></canvas></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Backgrounds
See all BackgroundsWhere to use it
A full screen background inspired by topographic maps. A smooth height field changes over time and a marching squares pass turns it into contour lines, so hills and valleys swell, merge and split while you watch. Every fourth line is thicker and tinted with the third color, like the index contours of a printed map.
Density sets how many height levels are drawn, speed controls how fast the terrain shifts, and the three colors blend from low to high ground. It suits outdoor brands, travel sites, data products and calm landing pages.