Sticker-bombing a laptop in SVG

A GitHub profile page is a README file and not much else. Mine started as a tidy summary of what I do, and it read like one. So I replaced the middle of it with a picture of my laptop lid, covered in stickers, each one a small joke about the work. It's a single SVG file, drawn in code, and it's the centrepiece of github.com/tomxander.

Pause the animations

The lid is a rounded rectangle with a dark linear gradient, #3b3f47 in the top corner down to #1c1e23. On top of that sits a sheen, white at 12% fading to nothing by 45% of the way across, and a 2px inner edge at 16% white. That's the whole aluminium effect: three shapes and no textures.

The logo in the middle sits in a radial glow and pulses, scaling to 106% and back over three seconds. The trick that makes it pulse in place is transform-box: fill-box with the origin at its centre; without it, SVG scales from the top-left of the whole drawing and the logo wanders off.

Every sticker is the same recipe: a group moved into place and rotated a few degrees, a soft drop shadow, and a thick white stroke around the shape. That 6px white outline is what makes them read as die-cut vinyl rather than flat badges. The shapes are a little zoo of circles, hexagons, a lightning bolt, a starburst, a heart, a coffee cup and a barcode drawn from thirty-two thin rectangles.

<!-- one sticker: place it, tilt it, shadow it -->
<g transform="translate(985,150) rotate(12)">
  <g filter="url(#shadow)">
    <circle r="80" fill="#ff5e5b" stroke="#fff" stroke-width="6"/>
    <circle r="64" fill="none" stroke="#fff" stroke-dasharray="6 6"/>
    <path d="…" fill="#fff"/>  <!-- SHIP IT, as outlines -->
  </g>
</g>

Movement is kept to a minimum. Three stickers float: one drifts up 4px over six seconds, two drift down 3px over seven and a half, so they rarely line up. The steam over the coffee cup blinks on a 2.2 second steps(1, end) loop. An earlier version had a sticker that spun continuously, and I took it out. Something spinning forever in the corner of your eye gets old fast.

Each sticker has its own typeface, from sixteen open-source display fonts. But GitHub shows README images as plain <img> tags, and an SVG loaded that way can't fetch web fonts or anything else outside the file. Any font that isn't already on the viewer's machine silently falls back to something generic.

So every word on every sticker was outlined into vector paths before it went in. There is no <text> element anywhere in the file. That's why the original is 312 KB of mostly path data, and it's why it renders identically in every browser, on every phone, in light mode and dark. The background is transparent for the same reason: the lid has to sit on GitHub's white and GitHub's near-black without a box around it. And the file has been renamed twice (it's on v3), because GitHub caches README images hard and a rename is the quickest way past that.

For this page I ran it through svgo, which took it from 312 KB to 175 KB (about 47 KB over the wire). I had to switch off one of its plugins: it helpfully merged each floating sticker's position into the same group as its animation, and since a CSS transform replaces the SVG one, the floating stickers jumped to the corner of the lid.

Above and below the lid are two rainbow banners with wavy edges and little four-pointed sparkles that twinkle between 15% and full opacity, on two slightly different clocks (2.4s, and 3.1s starting 0.9s late) so they drift in and out of step. They replaced banners from an image service that kept failing to load on the profile.

And at the very top of the README, above everything, there's an HTML comment. GitHub doesn't render comments, so you only see it if you open the raw file:

FIFTEEN YEARS OF · TURNING NOISE · INTO SIGNAL · (you found the hidden message. have a sticker.)

It's the same message that hides in the static on my website, which has its own entry. I like the idea that the two places share a secret.

The peeling and the pause button are new for this page. On GitHub the lid is an image, so nothing there responds to the pointer; here the same file is placed inline, and a few lines of script wrap each sticker in one extra group so it can lift without disturbing its own float.

Built

November 2026

Stack

Hand-written SVG and CSS keyframes

Lives at

github.com/tomxander

Source

github.com/tomxander/tomxander