From the Society's Workshop

How this chart was inked

A workshop note for patient readers: the page is built like a Society artifact, with no image files and no borrowed scripts, only HTML, CSS, inline SVG and a little navigation mathematics.

Plate XI: coastlines first, soundings next, routes last. The illusion works because every mark behaves like ink on one old sheet.

The Concept

A learned society, est. 1831

The Cartographer's Society is an invented fellowship of Victorian surveyors whose website pretends to be one of its own documents. The first screen is a charter masthead; the centrepiece is an inline SVG map of the Meridian Archipelago; the lower sections read as ledgers and election papers. The fiction is carried by concrete evidence: vessels, dates, elected Fellows, sworn soundings and marginal corrections.

The Devices

Each technique, and how it works

Scroll-linked routes. buildDashCover() in main.js repeats the dash pattern, appends one path-length gap, and lets setRouteProgress() change stroke-dashoffset. The dashes therefore unroll like wet ink instead of crawling.
Ships and waypoints. getPointAtLength() places each ship, samples a second point for heading, and mirrors the glyph when it sails west. nearestT() pins dated HTML tooltip buttons to the closest route point, keeping them readable on phones.
Compass behavior. buildRose() draws the rose; aimCompass() converts its SVG centre through getScreenCTM() and eases the needle toward the cursor bearing. The animation loop pauses when document.hidden is true and resolves to a static chart for prefers-reduced-motion.
Reader's glass. bindSurveyGlass() in main.js follows pointer position with CSS variables and also responds to waypoint keyboard focus. It reveals the SVG #inspectionLayer: tiny erased coves, second bearings and deep-shelf notes that make the map feel handled by generations of Fellows.
Paper and furniture. The SVG filters #age and #grain use feTurbulence for foxing and tooth. styles.css cuts the deckled sheet with a displacement-map mask-image. drawCurrents(), placeSoundings(), drawRhumbs(), drawGraticule() and buildScale() generate the small marks that make the map feel surveyed rather than decorated.

The Inks & Letters

Palette and type tokens

Token	Value	Duty
`--parchment`	#ede0c4	the paper itself
`--ink`	#4a3521	sepia ink, all drawing & body text
`--oxblood`	#6e1423	corrections, route I, the seal
`--gold`	#c9a227	gold leaf; darkened to #8f7118 when it must read
`--prussian`	#2e4a66	the deep-sounding ink of route III

Cinzel handles engraved headings, Crimson Pro carries the ledgers, and IM Fell English is reserved for captions, mottos and quoted minutes. The palette keeps parchment dominant, then uses oxblood, gold and Prussian blue as route evidence.

Commission the Like

Reproduce this

Prompt an agent roughly so: “Build a coded 19th-century society artifact, not a landing page. Use self-hosted period serif fonts, a dominant parchment field, an inline SVG map with invented coastlines, soundings, rhumb lines, a sea monster, and three scroll-linked dashed expedition routes. Move ship markers with path length math, expose dated waypoints as accessible buttons, make the compass needle ease toward the cursor, age the sheet with SVG turbulence and a deckled CSS mask, then write ledger-quality fictional copy throughout.”