Notes 5 notes
How I design and build the small things on this site, in simple words.
Every note starts with the thing itself. Play with it, then read how it was made.
All notes
A Yu-Gi-Oh! card binder that folds open in CSS
How I built a black zip case with 72 cards in clear sleeves. The pages turn in 3D and every card opens in a holographic close-up. No canvas, only HTML and CSS. · 6 min read
What happens when a slider goes past Max
An effort slider has five steps: Low, Medium, High, Extra, Max. I added a secret sixth step and made nine things that can happen there. Each one is below, live, with how I built it. · 13 min read
An isometric street where the road loops
How I built Donut Patrol, a small isometric city block in SVG: a bank, a donut shop and a police precinct on a street that wraps around. Rob the bank and two officers drop their donuts to chase you. · 4 min read
A drawbridge you can operate, drawn in lines
How I built Dusk Drawbridge, an isometric canal crossing in SVG. Raise the span, send a boat through, switch the lamps, and watch the cars queue at the gates. · 4 min read