Pattern Generator

The pattern generator was originally some code I wrote to add patterns to graphs.

1 in 12 men and 1 in 200 women are color blind. So it was important the graphs used patterns instead of colors to contrast elements.

At first it was stripes of varying width, then dots, grids, and hexagons. It quickly became its own project, and one I thought other web devs would find useful.

svg patterns also have the advantage of being smaller in size compared to raster images. They allow for expressive design without sacrificing load times.

The typical pattern produced by the pattern generator is around 600 bytes. (and there are some opportunities for further optimisation) #

The pattern generator was fun to make, and got a lot of positive feedback from developers. So, I decided to make more tools with the goal of making the web faster, more accessible, and more expressive. I'll host all these tools on

5 Oct 20
5 Oct 20
post project