The Perimeter of a Rounded Square

#webdev #svg #qrcode #technological

A 300,000 Đồng Story About Geometry and Code

Yesterday, I ran into a strange problem — an algorithmic one.

How do you calculate the perimeter of a square with rounded corners, and properly offset the compensation distance so the visual result remains balanced?

It sounds simple — a square is square, and a circle is circle — but somewhere in between, things get oddly interesting.

When Geometry Meets Curiosity

I started the usual way: searching online, reading documentation, even asking a bot for help.

But, as always, the final answer had to come from me.

Let’s recall:

The perimeter of a square is 4 × l (where l is the side length).
The perimeter of a circle is 2πR (where R is the radius). Now, what happens if you round each corner of the square by, say, 1 or 2 cm? What is the new perimeter?

So… I did what any developer lost in thought would do — opened Excel, ran a few tests, even asked the bot again (and again).

Still, no clear answer.

Drawing the Shape That Felt “Right”

Luckily, I’ve had a background in design and SVG, so I decided to draw it myself — a very round square.

After applying a bit of corner radius, it became even rounder.

And then it hit me: the border is the perimeter.

From the visual pattern, the derived formula turned out to be:

``Perimeter = 4 × side − 8 × radius + 2π × radius``

Why This Formula Works

When you round each corner slightly, each corner contributes one-fourth of a circle.

Imagine combining four such corners — you get one complete circle’s worth of curve, while still preserving most of the square’s edges.

So, the formula essentially subtracts the extra straight-line portions replaced by the curves, and adds back the circular sections using 2πr.

Dashes, Offsets, and Beautiful Symmetry

But the journey didn’t stop there.

In SVG, when you split a border into equal parts, you can use stroke-dasharray — creating segments or “dashes” along the perimeter.

When those dashes meet the rounded corners, something interesting happens:

They don’t distribute evenly.

Some corners end up slightly “off.”

To fix this, we apply an offset — shifting the dash pattern so each segment aligns symmetrically around the corners.

This offset ensures every dash appears balanced — both on the flat edges and around the curved corners.

From Geometry to Code

All of this exploration wasn’t just for curiosity’s sake.

I was working on the QR Code SVG generator inside my system, and I wanted users to customize their QR codes — change the shapes, borders, and radii smoothly, without breaking the design.

This formula and the offset logic now power that system, helping each QR code feel alive — perfectly balanced between geometry and aesthetics.

Reflections in the Code

Sometimes, what starts as a small algorithmic question turns into a late-night philosophical journey.

The kind where math meets design, and logic meets art.

Like Xiaomi’s $300,000 logo story — mine just happened to cost a few cups of coffee and an evening of curiosity.

But perhaps, that’s the beauty of being an indie hacker:

You don’t just solve problems — you understand them, shape them, and make them yours.

NOTES

Article originally posted in 2022 and reposted.
AI-powered translation.
Read the original Vietnamese version here: https://hnq.vn/blog/chu-vi-cua-hinh-vuong-bi-bo-tron