Night
Dark background, bright hero lines, drifting up and to the left.
Add the contour attribute to any element for an animated topographic background. Move your pointer over it.
Dark background, bright hero lines, drifting up and to the left.
Transparent background lets the element's own gradient show through.
No drift: the terrain slowly reshapes in place.
No hero lines, 0.6px strokes, high density.
contour-style="detailed": finer ridges and small islands.
contour-style="warped": folded, flowing ridges.
contour-relief="1": hill shading lit from the top left.
contour-pointer="1": hover or touch to push the lines away.
contour-boil="8": redrawn 8 times a second, like animated sketches.
contour-tool="pen": The default: clean, constant-width vector lines.
contour-tool="pencil": Graphite: soft grainy edges and uneven pressure.
contour-tool="charcoal": Coarse, broken strokes with a faint smudge.
contour-tool="ballpoint": Thin and steady, with the odd skip and blob.
contour-tool="nib": A 45° calligraphy nib: broad or hairline depending on direction.
contour-tool="marker": Translucent felt tip with darker wicked edges.
contour-tool="brush": Dry paintbrush: bristle streaks that break up as paint runs low.
contour-tool="watercolour": Soft wash with pigment pooling at the edges.
Drag the corner to resize: lines stay the same thickness and the terrain doesn't stretch.