Generative backgrounds for GitHub Guides

GitHub Guides is a new site we've started to help explain various topics.

The interesting part of this is that the background images are all procedurally generated. The title is converted into a SHA and the color and pattern is derived from the values in that string. A repeatable tile is created in SVG and it is used as the background-image by using its base64 representation.

With this technique, each guide can have a unique visual element without any custom illustration work.

keyboard shortcuts: previous shot next shot L or F like Z toggle zoom