Until recently I wasn't aware there was such a thing as a music font, so when I came across SMuFL I immediately wanted to create images incorporating musical notation.

The first challenge was just figuring out how to position notes so that they land at the correct position on a stave at different font sizes.

I then wanted to play around with staves that weren't straight.

Initially I thought of using a circular stave to create a piece of music that loops around on itself forever. I then realised that a spiral would use more of the image space, as well as allowing a longer piece of music to be created. I remembered the circle of fifths and thought that I could use that in some way. In a circle of fifths, starting off in any major key and modulating up or down by a fifth 12 times will take you through all 12 major keys before returning back to the starting key again. (If you're a guitarist, you can learn more about this on Beginner Guitar HQ)

This spiral of fifths starts in C major. Each circuit of the spiral passes through all 12 major keys before returning back to C major again ready for another circuit. The notes in each cycle become fewer and longer as the space becomes more restricted towards the centre of the spiral. After passing through each key 5 times, the piece ends on a single held C. The notes are chosen and arranged for their visual appearance rather than musical quality, but should be musically accurate and playable!

Play it

all text, images and music ©PaintingByCode.com

I had the idea of building a landscape using musical elements to represent trees, clouds, birds etc. but have so far only got as far as creating some background stave-mountains (or are they waves? I'm not really sure yet).