How this was made

The concept

Instead of a photo hero or a dark torch-lit cave, the reference object is a hand-inked survey sheet on graph paper. One colour, survey-orange, is spent only on the measured points. The voice is a monospaced survey printout; the colossal depth numbers are set in a condensed grotesque. Everything descends: type, colour, and the reader.

The line-drawing that draws itself

The cave section is a hand-authored SVG: entrance throat, meandering passage, a chamber, a drop, and a flooded sump. Each path carriespathLength="1" and is dashed with a single full-length dash. A single custom property, --p, runs from 0 to 1 across the descent, driven by a native CSS scroll-driven timeline (animation-timeline: view()) on the section wrapper. Every path reads --p for its own draw window and computes itsstroke-dashoffset with a clamp(), so the passage draws first, then the hall, then the sump, in step with your scroll. No scroll library, no per-frame JavaScript.

This is the Expedition sweep's technique 12: scroll-driven CSS for JS-free reveals. The property is animated on a plain div, not on the SVG paths directly, which avoids a known scroll-timeline quirk with SVG geometry.

The paper-to-ink descent

The background is a single tall gradient, from survey-paper at the surface to ink at the bottom. Scrolling reveals the darker part of the sheet, so the descent is literal and continuous. It is also why the drawing can stay legible the whole way down: the upper passage is inked dark on light paper, and where the sheet turns to ink the lower passage and sump switch to light strokes. Text follows the same rule and switches to a paper tone on the dark half, measured to stay at AA contrast.

Accessibility and reduced motion

• With prefers-reduced-motion or without scroll-timeline support, the map is shown fully drawn and correct, never a broken half-state. The draw setup lives entirely inside a@supports and reduced-motion guard.
• Depth markers count up from zero, but only when motion is allowed; otherwise they show their final value immediately.
• One h1, logical headings, a skip link, visible focus rings in survey-orange, and AA contrast on both the paper and ink halves.
• The survey SVG is exposed as a single labelled image, so assistive tech gets one clean description rather than a wall of station labels.

Near-zero JavaScript

The signature runs on CSS alone. The only script is a small IntersectionObserver that reveals notes and counts up the depths, written as a bundled module with no inline handlers, so the site ships under a strict Content-Security-Policy with no inline styles, no inline scripts and no external hosts. Fonts are self-hosted and preloaded.

Type and tools

Voice: Spline Sans Mono Variable. Depth display: Saira Variable at a condensed width. Built with Astro and Tailwind, drawn by hand, no photos.