How this site is built

Every pattern on the site comes out of one TypeScript module with no dependencies and no access to the DOM. It builds an edge-to-edge tiling of regular polygons, then applies Hankin’s polygons-in-contact construction: two lines from every edge midpoint at a fixed contact angle, each running until it meets another line.

The subtlety is in "until they meet". The lines grow at the same time, so a line is stopped only where it runs into ink that is already on the page — not wherever it happens to cross another line’s eventual path. Getting that wrong collapses the pattern into a few marks around each midpoint. The generator resolves it by sweeping candidate stops in distance order.

A full-screen pattern is a few thousand lines and takes about ten milliseconds to generate.

The same module runs in three places. During the build it emits SVG, which is inlined into the HTML — so the pattern is on screen before any JavaScript is requested, and it is there in view-source. In the browser a WebGL2 island takes over for the construction animation and the pointer light. For link previews it is rasterised to PNG, once, by a script here rather than on the deploy machine — a build server has no fonts installed, and a card set in whatever it happened to find is not the card we drew.

If JavaScript never arrives, or WebGL2 is unavailable, or the visitor has asked for reduced motion, the island simply does not load and the SVG stays. Nothing falls back to nothing.

The WebGL2 layer is written by hand — no 3D library. Line segments are drawn as instanced quads and antialiased in the fragment shader against the distance from each pixel to the line’s centre, which stays crisp at any device pixel ratio without multisampling.

Each segment grows outward from the edge midpoint that produced it, so the construction animation is not a decorative wipe: it is the algorithm running at a speed a person can follow.

Newsreader sets the English display, Amiri the Arabic. IBM Plex Sans and IBM Plex Sans Arabic carry the body text in their respective scripts; they are drawn against a shared skeleton, so the two editions of the site have the same proportions rather than merely resembling each other. IBM Plex Mono handles code.

All of it is self-hosted and subset. No request leaves this origin to render a page — no font CDN, no analytics, no tag manager, no embedded third-party anything.

The Arabic edition is a peer of the English one, not a translation layer. Layout is expressed entirely in logical properties, so direction mirrors without a single RTL override, and the page grid reverses because the inline axis reverses.

Two details worth naming, because they are the ones usually missed. Letter-spacing is removed for Arabic — spacing out a cursive script severs the joins between letters. And uppercase transforms are dropped, because Arabic has no letter case; the labels that are set in small caps in English earn their separation from weight and colour instead.

Astro with TypeScript. Hand-written CSS in explicit cascade layers, using custom properties, logical properties and container queries — no utility framework. The interactive pieces are the only JavaScript on the page, and each one loads only when it scrolls into view.

The generator has a preview script that renders contact sheets to PNG, which is how the geometry was checked while it was being written.