Topographic pattern backgrounds
Wavy contour lines like a hiking map, behind a hero or on a card. How contour lines come from a height map, a canvas starter that draws them, and a skill that turns them into a living map with a trail.
Free skills to start. Pro is $79 a year for every skill, or $9.99 a month for 10. See pricing
What is a topographic pattern?
A topographic pattern is a set of contour lines, the lines on a map that join points of equal height. Packed lines mean steep ground; wide gaps mean flat. As a background it reads as outdoors, exploration, data or calm precision, and it is quiet enough to sit behind text.
Real maps make every fifth line heavier and label it with its height. Borrowing that detail, plus a soft hillshade, is what turns a squiggle pattern into something that looks surveyed.
How the effect works
Start with a height map: a function that gives a height for any x and y. Smooth noise is the usual choice; a few overlapping sine waves are enough to start. Contour lines are where the height crosses round numbers, say every 10 meters.
The fast way to draw them is per pixel: scale the height by the number of levels, take the distance to the nearest whole number, and ink the pixel when that distance is small. Dividing by the local slope keeps lines the same thickness on steep and gentle ground. The precise way, marching squares, walks a grid and joins the crossings into real vector lines you can stroke and label.
01
Make the land
A smooth height function: layered noise, or sines at a few scales and angles.
02
Choose an interval
Height × levels, then contour wherever that crosses a whole number.
03
Draw even lines
Ink pixels near a level, with the distance divided by the slope so steep ground does not smear.
04
Mark index lines
Every fifth level heavier, with a height label, reads as a real map.
HTML
Contour lines on a canvas
A static pattern from overlapping waves, with slope-corrected lines of even width. Add a time offset to the height function to make it breathe.
<canvas id="topo" width="960" height="540" style="width:100%;height:auto"></canvas>
<script>
const canvas = document.getElementById('topo')
const g = canvas.getContext('2d')
const W = canvas.width, H = canvas.height
const img = g.createImageData(W, H)
const LEVELS = 16
// A few overlapping waves stand in for noise; swap in simplex noise for wilder land.
const height = (x, y) =>
Math.sin(x * 0.008) * Math.cos(y * 0.011) +
0.6 * Math.sin((x + y) * 0.005 + 1.3) +
0.35 * Math.cos(x * 0.017 - y * 0.013)
for (let y = 0; y < H; y++) {
for (let x = 0; x < W; x++) {
const v = height(x, y) * LEVELS
const d = Math.abs(v - Math.round(v)) // distance to the nearest contour
const slope = Math.hypot(height(x + 1, y) - height(x, y), height(x, y + 1) - height(x, y)) * LEVELS
const index = Math.round(v) % 5 === 0 ? 1.8 : 1 // every fifth line heavier
const ink = Math.max(0, 1 - d / Math.max(slope * index, 1e-4))
const i = (y * W + x) * 4
img.data[i] = 244 - ink * 150
img.data[i + 1] = 239 - ink * 140
img.data[i + 2] = 228 - ink * 120
img.data[i + 3] = 255
}
}
g.putImageData(img, 0, 0)
</script>A starting point written for this page, free to use in your own projects. The skills below build the finished version with checks, fallbacks and a recorded video.
What to get right on a real page
01
Keep it low contrast
As a background, lines a few shades off the paper color stay out of the way of the copy.
02
Render once, not every frame
A static pattern can be drawn once to a canvas or exported as an image. Animate only if the motion says something.
03
Seed it
A seeded height map gives the same land on every load and every device, so screenshots and videos match the page.
04
Do not imply real places
Generated terrain is fine for decoration; label it as such if a visitor might mistake it for a map.
Skills that build a topographic pattern
A finished hero that turns contour lines into a living map, with your copy, colors and a 1080p video.
- Topo Contour HeroClaude CodeCodexCursor+3 more agents
Motion Heroes · Pro
Topo Contour Hero
Animated canvas hero · page + embed + 1080p video
Contour lines breathe slowly over a generated landscape, with heavier index lines carrying their elevations, a soft hillshade, lakes and a dotted grid with coordinates. A hiking trail plans its own switchbacks up to a named summit and draws itself on, with a profile card counting distance and climb. Paper map or night survey.
Worth knowing: The terrain is generated, not survey data, and does not pan or zoom.
Needs: Node.js 18+, Chrome (or Chromium/Edge), and ffmpeg for the video
See what Topo Contour Hero makes
Install
Build a topographic pattern with your agent
Each skill is a SKILL.md folder, so it installs the same way in Claude Code, Codex, Cursor and other agents. The example below uses Topo Contour Hero; each skill page has its own prompt.
1. Paste the install prompt
Your agent runs the installer. The first time, it shows a sign-in link so you can approve it in the browser.
Install the "Topo Contour Hero" skill from Lookbk (https://lookbk.dev/skills/topo-contour-hero). 1. Run: curl -fsSL https://lookbk.dev/cli.js | node - add topo-contour-hero 2. If it prints a sign-in link, show it to me. When I say I approved it, run the same command again. 3. When the install finishes, read the SKILL.md it installed and tell me what you need from me to make the first result.
Or run it in a terminal
curl -fsSL https://lookbk.dev/cli.js | node - add topo-contour-hero2. Start a new session
Agents load skills when a session starts. The installer writes the folder where your agent looks:
- Claude Code
- ~/.claude/skills/topo-contour-hero
- Codex
- ~/.agents/skills/topo-contour-hero
- Cursor
- ~/.agents/skills/topo-contour-hero
3. Ask for the result
Describe it in plain words, for example:
Build a Topo Contour hero for Col Guides, our guided hiking app: warm paper map with brown contours and lakes, a red trail switchbacking up to 'Piz Arlenc', headline 'Every switchback, already walked.', a route profile card, and record a 12-second loop for the app launch.
Another agent? Install a skill in any agent
FAQ
Questions
Still stuck? The guides cover installing, agents and licensing in more detail.
Read the guidesHow do I make a topographic pattern?
Make a smooth height map with noise, then draw lines where the height crosses evenly spaced levels. The canvas starter on this page does this per pixel; marching squares gives vector lines.
Can I use a topographic background in CSS?
Export the pattern as an SVG or PNG and set it as a background-image. Generating contours themselves needs code: canvas, SVG from a script, or a shader.
What is marching squares?
An algorithm that walks a grid over the height map, checks which corners of each cell are above a level, and joins the crossing points into line segments. It gives clean vector contours you can stroke and label.
What are index contours?
On real maps every fifth contour line is drawn heavier and labeled with its height, so you can read elevation at a glance. Adding them makes a pattern look surveyed.