Building a 3D contribution graph in pure SVG

GitHub profile READMEs are a strange place to draw anything. Your image is served through GitHub's image proxy and embedded with an tag. That means no JavaScript, no web fonts, no external stylesheets, and no idea whether the viewer uses the light or the dark theme. On top of that, I wanted the image regenerated every day by a GitHub Action without changing a single byte when the data hadn't changed.

Within those limits, I wanted a 3D contribution graph: every day of the last year as a little isometric bar, its height and colour growing with the work done, rising into place when the page loads.

This post walks through how the 3D card in Profilescape works. Profilescape is an open-source GitHub Action that renders profile cards from your own token. The whole card is plain SVG paths and one