The Almost-Perfect Circle

I’m going to ruin the circle for you.

But before you blame me, I should tell you someone ruined it for me first.

Years ago, during my internship at Apple, I was happily living in a world where circles were perfect. Pure geometry. The most trustworthy shape you could draw.

A colleague of mine, now a good friend, casually mentioned something that completely shattered that belief.

He said: “Circles on screens are not perfect circles.”

What? WHAT?

“I'm sorry... WHAT DID YOU JUST SAY?“

Surely that couldn’t be true. A circle is the simplest geometric idea imaginable. Every point equally distant from the center. Clean. Precise. Perfect.

But then he explained how vector graphics actually draw circles, and just like that, my perfectly geometric dreams collapsed.

And, of course, I'm now going to do the same to you.

The circle is my favorite shape

Before we continue, you should know: the circle is my favorite shape.

Not because it is trendy or minimal. And not because it can sit nicely on a grid. I love the circle because it’s bold in the simplest possible way. It doesn’t try to be clever. It just exists, complete and confident in its shape. There’s something almost stubborn about it.

Maybe that’s also why it feels so familiar. So many things in nature echo it. The sun, the moon, the pupil of an eye, bubbles, an egg yolk. The circle shows up everywhere.

Maybe that is why learning about its tiny imperfection felt so fascinating. Even the most “perfect” shape has a little drama hiding underneath.

The idea of a perfect circle

Mathematically speaking, a circle is simple. Every point is exactly the same distance from the center. That’s it. No ambiguity. No interpretation. Just geometry doing its thing.

Computers can represent that idea directly. In SVG, for example, you can define a circle like this:

<circle cx="50" cy="50" r="40" />

That describes a true geometric circle.

Except… most of the time that is not actually what Figma or whatever design software you are using is doing. Because drawing circles the “perfect” way is not always the most practical way.

Design tools are pragmatic, and they cheat.

The Bézier trick

Most vector software draws circles using cubic Bézier curves. Not one curve. Four.

With cubic Bézier curves, a circle can only be built one quarter at a time, combining four segments into a full shape. Four anchor points. Eight handles. All carefully placed so the curve bends in a way that closely follows a circular arc.

And this is where a strange number appears.

When designers draw a circular arc using Bézier curves, the handles cannot be placed randomly. Their length determines how tightly the curve bends. Too short and the curve looks flat. Too long and it bulges outward.

So mathematicians asked a very reasonable question:

Since a Bézier curve cannot draw a perfect circle, how can we make it look as close as possible?

After a bit of geometry, the answer turned out to be this: 0.5522847498 × the radius

That number tells you how far the handles should extend from each anchor point when drawing a quarter of a circle.

It comes from matching the curvature of the Bézier curve to the curvature of a real circle as closely as possible at key points along the arc. The result is the handle length that minimizes the difference between the two curves.

The gap between the true circle and the Bézier approximation is so tiny that even if you zoom in dramatically, the difference is almost impossible to see. It’s so small that there’s no point in me trying to draw it for you.

So, in other words, the circle you draw with Bézier curves is not mathematically perfect.

It is just extremely convincing.

Another way: true arcs

One thing I should mention: there is another way to draw circles in vector graphics.

Path commands can define true arcs, which are mathematically accurate segments of an ellipse. Instead of approximating the curve with handles, the computer calculates the exact ellipse that passes through the start and end points and draws the arc directly along that shape.

So, a true arc is the curve itself.

Bézier curves work differently. They are controlled by anchor points and handles, which pull the curve into shape. With the right handle length they can mimic a circle extremely well, but technically they are still approximations.

Bézier curves are incredibly flexible, though. They are easier to manipulate, easier to edit, and they behave nicely within the rest of the vector system. Because of that, most design tools rely heavily on Bézier curves and rarely expose true arcs directly to designers.

Pixels

Even if your circle were mathematically perfect, something else happens the moment it reaches the screen: pixels.

A smooth, continuous curve suddenly has to live inside a grid of tiny squares (something you are very familiar with if you have ever designed an icon!). Instead of an infinitely precise line, the computer now has to decide which pixels should light up and which ones should not. The result is a curve that is technically made of little steps.

Rendering engines try very hard to hide this. Techniques like anti-aliasing soften the edges by blending colors between pixels so the curve appears smoother to our eyes. Instead of a jagged staircase, we perceive something closer to a fluid line.

Screens today have incredibly high resolution, which helps a lot. The pixels are so small that the illusion works beautifully most of the time.

But still... pixels are pixels.

And once again, that perfectly mathematical circle bends just a little to fit inside the square grid of the screen.

The icon designer version of perfect

Here is the real twist. In icon design, we often do not even want a mathematically perfect circle. What we really want is an optically perfect one. At this point, the focus is no longer the geometric purity of the shape itself, but how perfect it appears to the human eye.

A geometrically correct circle next to a square looks slightly small or just a little awkward next to other shapes. Our eyes are incredibly sensitive to proportion and balance, and they do not always agree with pure geometry.

Just like in typeface design, we let circles overshoot the grid so they feel visually aligned with other shapes. This is why in iconography, key shapes usually have the circle slightly overshooting the square. Depending on the pixel size, the amount of overshoot changes to compensate for optical differences.

These adjustments are subtle. Most people would never notice them consciously, but they make a huge difference in how an icon feels.

It may not be mathematically correct, but it is visually correct. And in design, that difference matters.

The circle, again

The more time I spend designing icons, the more I realize shapes live somewhere between math and perception. Geometry gives us the rules, but our eyes quietly edit them.

Maybe that is why the circle still fascinates me. It looks like the simplest shape imaginable, yet even here there are tiny compromises hiding underneath.

Because if you zoom out far enough, perfection is a pretty rare thing in nature anyway. Even the Earth is not a perfect circle. It is slightly squished at the poles. Mathematically speaking, it is something called an oblate spheroid.

So if the planet itself cannot manage to be a perfect circle, I guess we can forgive our Bézier curves for trying their best. After all, we are too.