Animation: Peter Saville and Factory Records

I was born and bred in Manchester, and I'm very much aware of the musical and artistic history of that city. In recent times, a pinnacle of that cultural heritage was Factory Records, which was the rcord label for such bands as The Happy Mondays, New Order and Joy Division.

Factory Records took a typically Mancunian apporach to being a record label. Tony Wilson threw away the music industry rulebook - writing a contract in his own blood that reads "The musicians own everything. The company owns nothing", opening the Hacienda, and using local artists wherever possible.

One of the graphic artists associated with Factory Records was Peter Saville, who designed record sleeves for many of the bands. The most famous of which is Joy Division's Unknown Pleasures.

Unknown Pleasures

Peter Saville's iconic album cover for Joy Division's Unknown Pleasures.

Orchestral Manoeuvres in the Dark

The inspiration for this animation was another of Peter Saville's record sleeves, this time for the band Orchestral Manoeuvres in the Dark.

Orchestral Manoeuvres In The Dark

The album sleeve design for the band Orchestral Manoeuvres in the Dark's debut self-titled album.

I really love this design, it looks like nothing else. The pattern is very simple and minimalist and yet it makes a strong impact. And the rounded lines remind of the way that buttons are sometimes designed in modern web development.

Peter Saville Album Cover

The pattern was actually created from die cut holes in the blue cover, revealing the bright orange color of the album sleeve below it.

I really like the colour combination. It's bright, neon but not garish. I was able to closely copy this design in JavaScript.


I really wanted this design to be interactive, and so I decided that clicking on the animation would change the colour scheme. Peter Saville created the same pattern in another set of colours.

Peter Saville Pink and Black

The same pattern in a pink and black colour scheme.

So I decided to use this colour scheme as well, and then I added another version in black and white colours to create 3 diffferent colour schemes.

To make the interaction feel smoother, the lines rotate as they change colour, spreading out in a wave. I think that this creates quite a nice effect.

It's Not A Bug, It's A Feature

Finally, after creating this animation I noticed that if the user clicks on the pattern quite rapidly, the pattern sometimes gets mixed up with more than one colour scheme showing at once (you can see most easily on the full screen version, try clicking on the lines as they are rotating). This is not a serious bug - if the user clicks again, all the elements move on to the next colour scheme. And it's actually kind of fun. So I decided to leave it in  -it's not a bug, it's a feature!

Overall I'm very happy with how this animation turned out. I think I've captured the design quite well and I really like the colour scheme transitions.

Read next