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.

  • 3,020 views
  • Icon shotstat like
  • Icon shotstat drop

More from Jason Long

  1. tmux logo
  2. Navigating branches on GitHub mobile
  3. iTerm Replacement Icon
  4. Vim Yosemite icon

Tags

keyboard shortcuts: L or F like Z toggle zoom post comment