Making Markov.

A tiny weather chain — Clear, Cloud, Rain, Fog — drawn as a weighted directed graph. A token hops state to state by transition probability alone, and a live histogram of its visits climbs onto the stationary distribution: the long-run climate the chain reaches no matter where it began.

Concept the brief

The subject of Wave 7 is luck becoming structure. Markov's version is the most quietly astonishing: a process with no memory — tomorrow depends only on today — nonetheless converges to a fixed, knowable equilibrium. The page's single job is to make that convergence watchable: to show a path, which is pure chance, becoming a distribution, which is law. The token forgets its origin; the bars do not.

Palette four states, one accent

Slate

#161A20

The bench. Cool, near-black, low chroma so every stroke and glow carries.

Edge blue

#7CA8D6

Line/mark accent — the arrows and graph. Reserved for strokes, never body text.

Active amber

#E0B24A

The token, the chosen edge, the stationary markers. The one warm note — where the eye goes.

Mist ink

#D6DEE6

Body ink — the derived light tone that clears 4.5:1 on slate for all copy.

Clear

#AAC9E6

Lightest of four tinted bar/ring hues — a single blue family, no rainbow.

Rain

#4F79A8

Deepest blue, weather made colour. Fog sits grey-blue between.

The states are told apart by a single blue family lightened and deepened — a weather logic, not a colour wheel — so the amber accent stays the only true event on screen. Body copy uses mist ink; the bright edge-blue is confined to lines and marks per the ink/line split.

Type Archivo · IBM Plex Mono

Archivo

Display & body. A grotesque with slightly condensed proportions and a mechanical, drafting-table feel — right for a diagram, and heavy enough at 800 for a wordmark that behaves like a title, not decoration.

IBM Plex Mono

Data & labels. Every number — the matrix, the visit percentages, the drift readout, the state names — is monospaced so columns align and the readouts feel instrument-grade rather than typeset.

Techniques SVG graph · canvas histogram

Weighted graphFour nodes on a diamond, every non-zero transition drawn as a quadratic Bézier in SVG. Opposite directions bow apart; stroke width and opacity encode probability, so strong transitions read bold and rare ones fall to hairlines. Self-loops arc outward from each node.
ArrowheadsEach head is placed by walking the path with getPointAtLength until it clears the target node's radius, then aiming a triangle down the local tangent — geometry, not guesswork, so heads sit right on every curve.
The hopFrom the current state the token reads that matrix row as odds and throws one weighted coin. It travels the chosen edge by sampling getPointAtLength with a cubic ease; the traversed edge lights amber and the target node fires a pulse ring on arrival.
HistogramCanvas 2D bars for empirical visit-frequency, each easing toward its true value every frame, with the analytic stationary π drawn as a bright marker the bar rises to meet.
Stationary πComputed honestly by power iteration on P (πP = π). It sets the markers, sizes each node by its long-run weight, and feeds the drift readout — the total-variation distance between where the token has been and where it belongs.
Resting stateThe tally is silently seeded with ~1,600 hops at load, so the page opens mid-convergence — bars near-stationary, drift already small — and reads instantly on a static thumbnail. No library: pure SVG, canvas, and arithmetic.

The signature. A stationary distribution assembling itself from a memoryless walk. The graph shows chance; the bars show law. Press Reset tally and the bars empty, then climb straight back to the same markers — proof the equilibrium is a property of P, not of history.

Iteration log three passes

Pass 1 — Craft

Balanced the diamond and the type scale; confirmed body copy runs in mist ink (not the edge-blue accent) for contrast. Caught the render bug that mattered: Rain's self-loop reached below the stage and clipped against the bottom edge. Pulled the top and bottom nodes inward to a symmetric diamond and shortened the self-loop reach so all four loops sit clear inside the frame.

Pass 2 — Depth

Enriched the signature so the choice is visible: the edge the token is currently traversing lights amber while it travels, and each arrival fires an expanding pulse ring at the node — you see the weighted coin being spent, not just the token sliding. Nodes are sized by their stationary weight (a second-read detail — Clear and Cloud are visibly larger than Fog), and the drift readout ties the graph to the histogram. Hover any state to trace only its outgoing weather.

Pass 3 — Hardening

Verified the 375px stack (graph, console, matrix, and footer all reflow with no overflow), the reduced-motion path (rAF cancelled, token parked on the heaviest state, bars set to π — a settled static frame), and focus-visible outlines on the keyboard-reachable nodes. Applied the Chanel rule: removed the per-node live percentage, which cramped the small circles and merely repeated the histogram — the labels now breathe and the readout lives in one place. DPR capped at 2, canvas resizes, rAF pauses on hidden tabs.

Designed & built by Sapience Analytics — part of the Generative Assets collection. A stationary distribution, drawn out of a memoryless walk.

View site Index