88×31 Badge Maker

· Dowdy.dev

3 min read Original article ↗

Utilityruns in your browser

A layer-based editor for animated 88×31 buttons, the format the old web ran on. Draw, animate, and export a GIF without leaving the page.

Status
Live on this page
Output
GIF, PNG, sprite sheet + CSS
Platform
Runs client-side
Format
One portable HTML file
Tags
#88x31 #web-history #tools

Make a badge

The 88×31 button is the smallest unit of personal web design. Somewhere between a business card and a bumper sticker. It’s how sites vouched for each other before anybody thought to build a follower graph: you liked a place, you put their button on your page, and a click on it was a real referral instead of an algorithmic one.

The dimensions weren’t arbitrary either. That’s what fits legibly in a corner without taking over a layout, at a size that came down fast over a modem. Enough people settled on it, the constraint turned into a format, and the format outlived the reason for it.

What this does

It’s a layer-based editor. Stack your elements, give each one motion, set a loop length, and it builds the frames for you instead of you drawing thirty of them by hand.

Layers can be text, shapes, imported images or hand-drawn pixels, each with its own animation. You get the real thing at real size next to a blown-up view, because at 88×31 one wrong pixel is loud and you want to catch it before you ship.

Why it’s one file

The whole editor is one self-contained HTML file. No build step, no dependencies, no server. That’s on purpose. The format survived because it was easy to copy around, and building a tool for it that needs a package manager to run felt wrong.

So you can save the page and keep using it offline forever, which is more than I can say for most web tools. The version embedded above and the download are the same file.

Exporting

Animated GIF by default, because that’s what the format has always been and what every site on earth renders without complaint. Frame rate’s adjustable; 25 is usually the sweet spot between smooth and small.

There’s also a PNG of the current frame, and a sprite sheet with matching CSS that animates via steps(), sharper and smaller than a GIF if you control the page it’s going on.

Projects save as JSON, so a badge stays editable instead of being a one-way trip to a flat image. They autosave locally as you work.

Where to put one

Your own site, obviously. Past that, the button wall on my homepage is the traditional answer: a pile of other people’s buttons, linking out. Make something with this and want it up there? That’s exactly what it’s for.

Download the standalone file

The whole editor is a single HTML file with no dependencies. Save it, open it offline, keep it on a USB stick; it works the same anywhere.

Something broken or wrong? bugs@dowdy.dev