Stuff & Nonsense product and website design

Blog and all that malarkey

Kerfuffle on the Planet of the Apes (part 1)

Kingdom of the Planet of the Apes is out, and I’m so excited that I decided to celebrate by updating another of my responsive easter egg headers—Kerfuffle on the Planet of the Apes—with more efficient, modern code. I’ll explain how I did it, starting with the new optimised SVG images.

When Josh Cleland illustrated my original homage to Conquest of the Planet of the Apes, he gave me PNG images, which I delivered in 1x and 2x sizes for the (then) relatively new retina displays. The file size of those high-resolution images was pretty considerable, so my first challenge for this update was to redraw each of Josh’s apes for output as SVG.

Redrawn ape characters

When optimising SVG illustrations today, I split the task into two parts: making outlines with as few path points as possible and blocking in with solid colours. So, I manually traced each ape’s outlines with the pen tool, keeping the number of points to a minimum. Then, with the width of each stroke set, I blocked out between the lines with solid colours and then combined blocks of the same colour into a single path. This keeps the size of the final SVG as low as possible.

Redrawn ape characters

Josh’s original background image didn’t suit my new design, so I decided to discard it and create an entirely new version. I based my new background on stills of Century City, the filming location for Conquest of the Planet of the Apes.

New Century City background

As I knew this more complex background would be delivered as an SVG, I kept the shapes primitive, the colours flat, and used only one gradient for the sky behind the city.

Century City background plate

Some elements in the background images of the Kerfuffle on the Planet of the Apes are animated. I exported them as separate SVGs and recombined them in code to make animating them easier. I’ll explain why that matters in part three.

SVG layers for animation

Redrawing Josh’s apes and designing a new background was fairly time-consuming but not technically challenging. I’m pleased with how close this new, more optimised version turned out to Josh’s original artwork.

Kerfuffle on the Planet of the Apes

Far more challenging was implementing the new, simpler layout and CSS I had in mind. But more about that next time.


Written by Andy Clarke who tagged this with svg


More from Stuff & Nonsense

Andy Clarke demonstrates how to take your product and website designs to the next level.

Take your Squarespace designs to the next level with our premium Squarespace templates.

The popular web design contract template trusted by thousands of web designers and developers.

Andy is an experienced mentor who can help you improve your design skills and develop your career.


Hire me. I’m available now to work on product and website design projects.