Contour

Add the contour attribute to any element for an animated topographic background. Move your pointer over it.

Scroll down

Night

Dark background, bright hero lines, drifting up and to the left.

Transparent

Transparent background lets the element's own gradient show through.

Morph only

No drift: the terrain slowly reshapes in place.

Hairline

No hero lines, 0.6px strokes, high density.

Detailed

contour-style="detailed": finer ridges and small islands.

Warped

contour-style="warped": folded, flowing ridges.

Effects

Relief

contour-relief="1": hill shading lit from the top left.

Pointer

contour-pointer="1": hover or touch to push the lines away.

Boil

contour-boil="8": redrawn 8 times a second, like animated sketches.

Tools

Pen

contour-tool="pen": The default: clean, constant-width vector lines.

Pencil

contour-tool="pencil": Graphite: soft grainy edges and uneven pressure.

Charcoal

contour-tool="charcoal": Coarse, broken strokes with a faint smudge.

Ballpoint

contour-tool="ballpoint": Thin and steady, with the odd skip and blob.

Nib

contour-tool="nib": A 45° calligraphy nib: broad or hairline depending on direction.

Marker

contour-tool="marker": Translucent felt tip with darker wicked edges.

Brush

contour-tool="brush": Dry paintbrush: bristle streaks that break up as paint runs low.

Watercolour

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.