The Houndstooth
The story behind The Houndstooth
Inspired by Houndstooth on Wikipedia
Built with Canvas 2D
Techniques Algorithmic 2/2 twill tessellation · Cursor proximity dissolution · Thread separation animation · Cascade spreading · Per-cell drift physics
Direction Shepherd’s check — a pattern born from camouflage, elevated into luxury, deconstructed back to its threads
Result A full-screen houndstooth fabric that your cursor unravels, revealing the hidden warp and weft beneath the pattern
The Story
The houndstooth pattern begins on a loom. Two sets of threads — warp running lengthwise, weft running crosswise — interlace in a specific rhythm called a 2/2 twill: each thread passes over two, then under two, staggered by one on each row. When you alternate groups of four dark threads with four light ones in both warp and weft, the interlacing produces the broken checks and jagged tooth shapes that give the pattern its name.
It first appeared in the Scottish Lowlands, where shepherds wore it as shepherd’s check. The purpose was camouflage — the small-scale alternation of dark and light broke up the wearer’s outline against heath and hillside. A pattern designed, quite literally, to make people disappear.
Then Coco Chanel got hold of it. In the 1930s she scaled it up, cut it into boxy jackets, and draped it on women who had no intention of disappearing. The shepherd’s camouflage became a Parisian power symbol. The same interlacing, the same broken checks, but now the pattern’s job was the opposite: to be seen.
What never changed was the construction. Whether on a highland loom or a couture workbench, houndstooth is still two sets of threads, crossing at right angles, following a rule. The tooth shapes are not drawn — they emerge from the intersection of warp and weft, an optical consequence of which thread sits on top at each crossing point.
The Take
A cream field fills the screen. Across it, a full-viewport houndstooth tessellation renders in black and white — every cell computed algorithmically from the 2/2 twill formula. The pattern is tight, 12 pixels per cell on desktop, crisp and dense the way real cloth reads at arm’s length. A faint hint in DM Mono at the bottom reads move to unravel.
Your cursor is an unmaking. As it passes over the fabric, cells within a 120-pixel radius begin to dissolve. The composite pattern breaks apart: each cell splits into its constituent warp thread and weft thread, separating vertically and drifting apart with gentle rotation. Dark warp threads pull in one direction, light weft threads in another. What was a single pixel of pattern becomes two visible threads floating away from each other, still tinted with the warm browns and tans of raw fibre.
The dissolution is semi-permanent. Move your cursor elsewhere and the damage stays — a very slow recovery rate (0.004 per frame) means the cloth heals far slower than it tears. Revisit an area and it unravels further. The fabric remembers.
At 30% dissolution, the cascade begins. The more you destroy, the faster the remaining fabric comes apart — a multiplier that scales with the total damage. At 50%, the cloth starts to unravel on its own. Cells that are partially dissolved spread their damage to neighbors, a creeping autonomous dissolution that mimics the way a pulled thread in real fabric takes others with it. You started the process. Now the fabric finishes it.
There is no narrative text. No poetic overlay, no timed fade, no bottom-left caption. The unraveling is the story. The visual progression from intact tessellation to floating threads tells you everything: this pattern was always two things held together by tension, and your touch released it.
The Tech
Twill Weave as Algorithm
The houndstooth pattern is computed per-cell from three rules. First, the warp thread color: columns 0-3 are dark, columns 4-7 are light, repeating. Second, the weft thread color: rows 0-3 are dark, rows 4-7 are light, repeating. Third, the interlacing: ((c - r) % 4) < 2 determines whether the warp or weft thread sits on top at each crossing. The visible color of each cell is whichever thread is on top. These three Uint8Array lookups — warpDark, weftDark, cellDark — produce the full houndstooth tessellation without any pre-drawn tile or image.
Two-Pass Rendering
Pristine cells (dissolution < 0.01) are batched into a single ctx.beginPath() / ctx.fill() call — one path for all dark cells, drawn as rectangles. This avoids per-cell state changes for the majority of the screen. Only dissolving cells enter the second pass, where each cell is drawn as two separate thread rectangles with individual save()/translate()/rotate()/restore() calls. This split keeps the frame budget manageable even at 100+ columns by 80+ rows.
Thread Separation Physics
Each dissolving cell renders two threads: a warp thread (roughly horizontal, displaced upward) and a weft thread (roughly vertical, displaced rightward). The separation distance scales linearly with the dissolution value — d * CELL * 0.7 — so threads drift apart smoothly as the cell unravels. Each cell has a pre-computed random rotation seed (threadRot, range -0.2 to +0.2 radians) that gives every thread pair a slightly different angle, preventing the dissolution from looking uniform. At high dissolution (> 0.5), a sinusoidal drift adds gentle floating motion to the separated threads.
Cascade and Autonomous Spread
The dissolution model has three regimes. Below 30% total dissolution, your cursor is the only source of damage. Between 30% and 50%, a cascade multiplier (1 + (total - 0.3) * 3) accelerates cursor-driven dissolution — the weakened fabric tears faster. Above 50%, a neighbor-spreading algorithm activates: any partially dissolved cell increments its four cardinal neighbors by 0.001 * cascadeMultiplier, creating a slow autonomous unraveling that radiates outward from existing damage. The threshold structure means early interaction feels precise and controlled, but sustained interaction triggers a phase transition into irreversible collapse.
Mobile and Input Handling
Touch input uses both touchmove (with preventDefault to suppress scroll) and touchstart to capture the first contact. Cell size increases from 12px to 16px on mobile viewports, and the interaction radius shrinks from 120px to 90px to match finger-sized touch areas. The hint text swaps from “move to unravel” to “touch to unravel” on mobile detection.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.