Skip to main content

Doodling with the Mac’s command icon

The command key (⌘) has been a ubiquitious part of the Mac for over forty years. It was chosen by legendary icon designer Susan Kare, who picked it from a symbol dictionary – this shape was already being used in Sweden to highlight an interesting feature on a map. It’s an abstract and pleasant shape, and can still be seen today on road signs and keyboards alike.

A large road sign in a forest, with a black symbol that looks like a square with a loop on each corner.
A place of interest sign somewhere in Finland (the first country to use this symbol to mark places of interest). Photographed by Santeri Viinamäki, from Wikimedia Commons, used under CC BY‑SA 4.0.

I spend a lot of time doodling shapes that look like the command icon. The original shape is quite easy to draw, and then I try variations like making the loops bigger or smaller, or changing the number of loops in the shape. While I’ve been bored and had a pen and paper, I’ve drawn dozens of little looped squares.

But part of the beauty of this symbol is the rotational symmetry, and that’s hard to capture that consistency in a free-hand sketch – at least one of my loops or lines would look different to the others. But computers are very good at drawing repetitive, symmetric shapes, so I wanted to see if I could draw the command icon and its variants in SVG.

I started with Susan Kare’s original pixel icon from System 1.0, and I tried to recreate that as an SVG path. I had to re-read the MDN tutorial on SVG arcs several times, but I did manage to write a <path> that reproduces the original icon as a smooth curve:

This was fairly simple, because I can match the coordinates in the pixel version to the curves I’m trying to draw. The 4-way symmetry and right angles make the geometries quite simple.

What if I wanted to do something more complicated, like vary the number of loops or increase the distance between them? That’s harder to write by hand, so I wanted to do that programatically. It required a bit of trigonometry, but I was able to get some working code.

Despite this simple starting point, I was able to get quite a variety of shapes:

Keep reading to find out how I made these pictures, and how you can make your own.

The idea

One way to imagine the macOS Command icon is being made of multiple “looped hooks”.

If you take a collection of these, rotate them around a central point, and join them together, you'd get the complete shape.

There are three variables we can change:

Let’s work out how to draw one of these hooks given these inputs.

Tackling the trigonometry

This next section features a walkthrough of the trigonometry involved in drawing these hook shapes. It’s not 100% rigorous, but it’s the bit I find most interesting and it would feel like cheating if I didn’t even try to explain this – but if trig isn’t your cup of tea, you can skip to the pretty pictures.

Let’s start by considering the straight line, up to the loop. This is the part I’m thinking about:

We know the length of this line (which I'll denote $L$) and the number of sides. Let's assume we also know the centre of rotation, which I'll mark with a blue circle. We need to work out the coordinates of the start and end points of this line, which I'll mark with blue dots.

At last, some pretty pictures

With all the geometry and programming done, I was able to implement this in JavaScript. Drawing inspiration from another bit of Apple history, I made a web app where you can change the variables, and it redraws the shape for you. I also included a colour picker and rotation, which adds a bit more variety and visual interest.

Screenshot of a web app called ‘looped squares’. It shows

Every time you reload the page, it draws a shape with random values. You can also adjust the values manually and it’ll draw the specified shape. Try it here.

I started by drawing a couple of shapes which look like alien versions of the Mac’s command icon:

You can create more interesting shapes when you let the loops start to overlap – by cranking down the length of the straight edges, and cranking up the radius of the loops.

They get particularly fun as you make the length of the straight edge very small:

At some point I tried setting a negative length. This makes no sense mathematically, but the computer is happy to plug it into the formulas and draw a shape anyway. Some of these still bear a resemblance to the original icon, but others are getting further away – in particular the straight edges on the outside are a new feature.

This naturally led me to consider setting a negative radius as well as a negative length. These weren’t quite as interesting – in many cases the two negatives cancelled each other out – but when I made the radius large and negative, I did get a few fun examples where the diagram has negative space in the middle:

What’s actually happening here is that the shape extends beyond the expected boundary of the canvas – there’s still a big circular symbol around it, but we’re only seeing the centre.

And finally, here’s the blooper reel for this post. It took a while to get all the maths right, and make sure I hadn’t flipped a sign somewhere or made a simple logic error. Sometimes the most interesting pictures are the ones I made by mistake:

This variety is one of the things I enjoy about generative art: I can start with a simple idea or doodle, and create a whole variety of shapes and pictures. Many of these I wouldn’t know how to draw if I started from a blank sheet of paper, but here I just stumbled into them.

If you want to create some of these shapes yourself, the web app is available at alexwlchan.net/fun-stuff/looped-squares/. Send me your favourites!

If you like this post, you might want to check out my other generative art.