Notes on backend engineering, distributed systems, and software.https://rudyorre.com/https://rudyorre.com/writing/procedural-glyphs/https://rudyorre.com/writing/procedural-glyphs/How this site generates zero-runtime geometric thumbnails from post slugs using FNV-1a, Murmur3 avalanche mixing, and SplitMix32.Sun, 08 Nov 2026 00:00:00 GMTimport ProceduralGlyph from '../../components/ProceduralGlyph.astro'; import GlyphWorkbench from '../../components/GlyphWorkbench.astro'; import { familyLabel } from '../../lib/glyph-engine'; Technical blogs have an awkward thumbnail problem: most posts don't have a natural hero photo, and slapping stock art onto a post about a CLI tool or SQL query planning feels wrong. On the other hand, a list of twenty titles and dates with no visual anchor quickly turns into a wall of text. To fix this, every post and project on this site gets a deterministic `64×64` geometric badge (and a `640×140` header banner) compiled into static inline `<svg>` markup during build time. ## Interactive seed tester Type any seed string below (or hit **randomize**) to synthesize both the `64×64` icon badge and the `640×140` header banner in real time: <GlyphWorkbench mode="inline" initialSeed="post:procedural-glyphs" /> ## How a seed becomes a glyph Given a seed string like `"post:rebuilding-this-site"`, the generator runs two tiny, zero-dependency stages: 1. **32-bit FNV-1a + MurmurHash3 finalizer (`hashSeed(seed)`):** Computes an FNV-1a hash over the UTF-16 code units and finishes with a 32-bit Murmur3 avalanche mixer so even a single-character edit cascades across all 32 bits. Independent bit slices select: - **Motif family (`h0 % 10`):** Picks one of **10 geometric motif families** (`orbits`, `ridges`, `mesh`, `iso-stack`, `polar`, `lissajous`, `bus-routing`, `interference`, `hilbert`, or `automata`). - **Dual accent palette (`(h0 >>> 4) % 8`):** Picks primary and secondary technical accents from an 8-color HSL-balanced palette. - **Registration grid (`(h0 >>> 11) % 4`):** Selects between crosshair rings, octagonal target frames, axis ruler ticks, or corner brackets. 2. **SplitMix32 PRNG stream (`makeRng(h0)`):** Produces a repeatable stream of floats in `[0, 1)` from that 32-bit state to drive sub-topologies, orbital eccentricity, Fourier carrier frequencies, Lissajous ratios, and Hamiltonian lattice walks. ```ts export function hashSeed(str: string): number { let h = 2166136261; for (let i = 0; i < str.length; i++) { h ^= str.charCodeAt(i); h = Math.imul(h, 16777619); } // MurmurHash3 32-bit finalizer for full bit avalanche h ^= h >>> 16; h = Math.imul(h, 0x85ebca6b); h ^= h >>> 13; h = Math.imul(h, 0xc2b2ae35); h ^= h >>> 16; return h >>> 0; } ``` ## Specimen gallery Expanding from a handful of rigid templates to parameterized motif families—each with internal sub-modes (e.g., coaxial vs. binary barycenter orbits, Gaussian vs. bimodal Fourier envelopes, annular vs. phyllotaxis spiral meshes)—keeps thumbnails visually distinct across long lists of posts. Here's an assortment of build-time glyphs generated from different post seeds: export const seeds = [ 'post:rebuilding-this-site', 'post:procedural-glyphs', 'post:consensus-notes', 'post:wal-compaction', 'post:zero-copy-io', 'post:raft-leases', 'post:bloom-filters', 'post:lsm-trees', 'post:grpc-backpressure', 'post:query-planner', 'post:clock-drift', 'post:ebpf-tracing', 'post:tail-latency', 'post:simd-parsing', 'post:ring-buffers', 'post:consistent-hashing', 'post:merkle-trees', 'post:b-plus-trees', 'post:vector-clocks', 'post:roaring-bitmaps', ]; <div class="glyph-grid-showcase"> {seeds.map((s) => ( <div class="glyph-specimen"> <ProceduralGlyph seed={s} size="md" /> <div class="glyph-specimen-meta"> <span class="glyph-specimen-seed" title={s}>{s.replace('post:', '')}</span> <span class="glyph-specimen-family">{familyLabel(s)}</span> </div> </div> ))} </div> ## Banner variants (`640×140`) The same engine also synthesizes wide header banners (`size="banner"`) by adapting node counts, wave steps, and aspect ratios across a `640×140` viewBox: <div style="display: flex; flex-direction: column; gap: 0.75rem; margin: 1.25rem 0;"> <ProceduralGlyph seed="post:wal-compaction" size="banner" /> <ProceduralGlyph seed="post:bloom-filters" size="banner" /> <ProceduralGlyph seed="post:merkle-trees" size="banner" /> <ProceduralGlyph seed="post:rebuilding-this-site" size="banner" /> <ProceduralGlyph seed="post:clock-drift" size="banner" /> </div> To inspect the extracted PRNG stream, pin specific motif families or palettes, and export raw SVGs, open the [**Procedural SVG Glyph Workbench (`/lab/glyphs`)**](/lab/glyphs).https://rudyorre.com/writing/rebuilding-this-site/https://rudyorre.com/writing/rebuilding-this-site/Why I stripped out the client-side React runtime, six themes, and animation libraries in favor of plain HTML, CSS, and markdown.Sun, 08 Nov 2026 00:00:00 GMTEvery once in a while I look at my personal site and realize it has accumulated far too many dependencies for a simple, static site. The previous iteration shipped a full React runtime, two component libraries, an animation engine, and six color themes just to render a single page of text. We really don't need all that. ## What matters for a site like this As an engineer, the qualities I care about in software are pretty simple: 1. **Predictable latency.** Static text over the wire should arrive and paint in a single round-trip. 2. **Few moving parts.** Every dependency is a future build failure when you come back six months later just to publish a blog post. 3. **Clear failure modes.** Plain `<a href>` links, semantic HTML, and zero required client JavaScript mean the page works everywhere. ```go // Keep the critical path boring. func serve(w http.ResponseWriter, r *http.Request) { w.Header().Set("Cache-Control", "public, max-age=3600") http.ServeFile(w, r, "index.html") } ``` ## The new setup This version is built with [Astro](https://astro.build), authored in Markdown, and styled with a single CSS file using custom properties. Search runs against a small precomputed JSON index that only loads when you press `⌘K` or `/`. Now there is nothing left to configure—just a folder of `.md` files to write in.