Recovering a 2008 logo & rebuilding it as pixel-art

Somewhere on a dead server lived a logo I drew in 2008 for htmllife.com — a fused WK monogram I'd completely lost the source files for. This is how I pulled it back out of the Wayback Machine, revectorized it, and reduced it to a grid of mint <rect> sprites that render pixel-perfect at any size.

Excavation

The original site is gone — domain expired, host long since recycled. But the Internet Archive had crawled it. I walked the snapshots until I found a capture where the header image still resolved, then pulled the raw asset straight from the archive's web/2008*/im_ path so I'd get the un-rewritten original rather than a re-encoded thumbnail.

What came back was a 240×120 GIF with a 1-pixel JPEG halo around every edge — fifteen years of lossy re-saves had eaten the crispness. Useless as-is, but enough to trace.

• Find a snapshot where the asset 200s, not a soft-404 placeholder.
• Pull the original path, not the Wayback toolbar-wrapped page.
• Treat the recovered bitmap as a reference, never a master.

Revectorization

I dropped the GIF on a background layer at 30% opacity and rebuilt the letter forms as a single clean polygon — the W and K share a stem, so the whole mark is one continuous outline rather than two glued shapes. The trick is the shared diagonal: the W's right leg is the K's spine.

A logo isn't its pixels. It's the smallest set of decisions that survive being redrawn from memory.

note-to-self, while tracing at 2am

Down to a sprite grid

The site this lives on ships zero external requests, so the logo had to be inline and weightless. Instead of embedding the vector, I rasterized it back down — on purpose — into a hand-placed grid of <rect> elements with shape-rendering="crispEdges". No anti-aliasing, no image file, just colored cells.

Why an odd width

The viewBox is 39×20 — and the 39 matters. With an odd horizontal grid there's a true center column, so the monogram's mirror axis lands on a pixel instead of falling between two, which is what smears symmetry on an even grid. Three mint shades carry the depth: a highlight edge, the body fill, and a --dim shadow side.

1. Trace to vector, find the mirror axis.
2. Snap the axis to an odd column so center is a pixel.
3. Paint cells in 3 tones; let crispEdges keep them hard.

<!-- 39-wide viewBox => column 19 is the true center -->
<svg viewBox="0 0 39 20" shape-rendering="crispEdges">
  <!-- highlight edge -->
  <rect x="0"  y="0" width="10" height="1" fill="#98ffe0"/>
  <!-- center spine, on the odd axis -->
  <rect x="19" y="0" width="1"  height="1" fill="#98ffe0"/>
  <!-- body fill -->
  <rect x="2"  y="1" width="8"  height="1" fill="#66ffcc"/>
  <!-- dim shadow side -->
  <rect x="37" y="1" width="1"  height="1" fill="#46a085"/>
</svg>

The result is the same mark from 2008, but now it's ~2 KB of inline markup that stays razor-sharp from a favicon to a billboard — and the scanline mask on this whole page is just a repeating-linear-gradient cutting into the glyphs, not painted over them. The logo recovers; the medium gets to stay a terminal.

EOF