GitHub's contribution graph is instantly recognizable — and under the hood it's just a grid of colored squares. Here's a faithful, interactive rebuild you can paint on, in plain CSS Grid + a little JS.
🟩 Try it (click-drag to paint): https://dev48v.infy.uk/design/day13-github-contributions.html
It's a date-indexed grid
53 weeks × 7 days. The trick is CSS Grid with grid-auto-flow: column so cells fill top-to-bottom, then wrap into the next week — exactly how GitHub lays out a year.
Color = a bucketed count
Each day has a commit count. You don't map count→color directly; you bucket it into 5 levels (0, 1–3, 4–6, 7–9, 10+) and each level gets one of GitHub's green shades. Buckets keep the scale readable.
The details that sell it
Month labels aligned to week columns, Mon/Wed/Fri weekday labels, a hover tooltip ("N contributions on "), and a "Less → More" legend. Add a randomizer and you've got a believable year.
🔨 Full build (grid layout → level→color map → render from data → tooltip) on the page: https://dev48v.infy.uk/design/day13-github-contributions.html
Part of DesignFromZero. 🌐 https://dev48v.infy.uk
Top comments (0)