Engraving type with a canvas

The BuildHatch wordmark at the top of the front page isn't an image. It's typed into a canvas when the page loads and redrawn the way an engraver shades a copper plate. There's no grey anywhere: darker areas get thicker lines, then a second set of lines across the first, then a third.

Everything is drawn from one idea. Each little dash of ink knows which way its bit of the letter is facing, and the pointer is a lamp held above the page.

Start with a mask

First the word is drawn once, in Archivo at its heaviest weight, onto a canvas that's never shown. Reading the pixels back gives a grid of ones and zeros: inside a letter, or not. Every step after this asks that grid a question.

Cut lines into dashes

Next, parallel lines are walked across the whole canvas at 45 degrees. Wherever a line passes through a letter it's kept, and the kept runs are cut into short dashes, 7 pixels long. The dashes are the real unit here. Because each one is shaded on its own, a single line can be hair-thin where the light hits and heavy where it doesn't.

That's the first pass. The second runs the other way across it, and the third is horizontal. Step through them here, and move your pointer over the letters to move the lamp.

Give the letters a slope

Flat letters would all come out the same tone, so they need some shape. Blurring the mask turns its hard edges into soft ramps, and the steepness of a ramp at any point gives a direction the surface is facing. Inside a stroke the surface faces straight up. Near an edge it tilts outward, like a bevel.

The brightness of a dash is then the old rule from every 3D renderer: how directly its surface faces the lamp. The lamp sits where your pointer is, raised above the page by about twice the height of the letters. Move it left and the left-hand bevels catch the light while the right-hand ones fall into shade.

The blur is a box blur run twice in each direction. It's cheap, and two passes are close enough to a proper Gaussian that you can't tell the difference in the result.

Turn tone into ink

Each dash ends up with a tone between light and dark. The first pass appears as soon as there's any shade at all and thickens as it darkens. The second pass only joins past 70 percent and the third past 90, which is roughly how an engraver builds up a shadow.

Drawing thousands of dashes every frame would be slow, so line widths are rounded to six fixed sizes. All the dashes of one width go into a single path, and a whole frame is six strokes. That's what keeps the lamp smooth on a phone.

Cast a shadow

The shadow is its own set of horizontal dashes, laid just outside the letters. For each one, the code takes a few steps toward the lamp and checks whether a letter is in the way. If one is, the dash is in shadow and gets drawn faintly. The further away the lamp, the longer the shadow, up to a limit so it never smears across the page.

The last pass

When the page loads, the dashes appear from left to right with a little randomness, and the outline of each letter fades in at the very end, like an engraver's final pass. If your device asks for reduced motion, you get the finished plate straight away. It redraws when the window changes size or the system switches between light and dark.

The same code draws the 404 page, with one change: the letters sit in the dark, and the lamp becomes a torch you sweep around to find them.