Topography

Abstract topographic background field.

No assets yet

…

<section style="position: relative; isolation: isolate">
  <mm-topography seed="3" fade="edges"></mm-topography>
  <h2>No assets yet</h2>
</section>

<!-- Zero JS, from @marmotdata/css: one fixed sheet drawn by the container itself. -->
<section class="mm-topography mm-topography--fade-edges">…</section>

Guidance

Topography is a background field, never an icon or an illustration. It is an unbounded survey sheet: hairline isolines that run off every edge, cropped by the box they sit in, with no closed island, frame, tile or plate. The lines are mixed from --mm-rule, every fifth (index) line only a touch stronger, so text over the field keeps its full contrast in Light and Peat. Use at most one per view, behind a moment that has room for it: an empty or error state, sign-in, a marketing hero or closing band.

The element is absolutely positioned to fill its containing block and sits at z-index: -1, so give the container position: relative; isolation: isolate and put the field first. It is decorative (aria-hidden, pointer-events: none) and deterministic from seed, so it server-renders and never measures. For a zero-JS page use the .mm-topography class from @marmotdata/css, which draws one fixed sheet.

Properties

Property	Attribute	Type	Default	Description
seed	seed	number	1	Ground seed. The same seed always gives the same sheet.
density	density	TopographyDensity	'normal'	sparse carries about ten lines, normal about eighteen.
fade	fade	TopographyFade	'none'	Where the field dissolves: none, edges, start or end (logical, flips in RTL).

CSS parts

Part	Description
field	The SVG.

CSS custom properties

Property	Description
--mm-topography-line	Colour of ordinary isolines. Defaults to --mm-rule at 70%.
--mm-topography-index	Colour of every fifth (index) line. Defaults to --mm-rule.

Examples

Every state of mm-topography in Storybook, with keyboard and screen reader tests.