back

In early 2021, I stumbled across a news story that left me scratching my head - Xiaomi had dropped $300K on a logo redesign that was essentially a rounded square. My first thought was "seriously?" But that simple question sent me tumbling down one of the most fascinating rabbit holes I've ever encountered.

Turns out, there's this whole universe of shapes that live between the familiar geometric forms we know. They're called superellipses and supershapes, and they're mind-bendingly beautiful. I had no clue I was about to dive headfirst into a world where design meets mathematics in the most unexpected ways.

The Journey Into the Unknown

What started as curiosity about a fancy rounded square quickly evolved into an obsession with these mathematical marvels. Each tweak of a parameter would birth entirely new forms - some organic, others architectural, all mesmerizing. I found myself lost in the works of Johan Gielis, whose Superformula felt like a key to unlocking an infinite design universe.

The more I dug, the more I discovered. While tools like Andrew Marsh's 3D Supershapes existed, they felt a bit overwhelming for my design-focused brain. I wanted something simpler, more intuitive - a playground for experimenting with these shapes.

Building the Thing

My first attempts were pretty humble. Armed with Daniel Shiffman's Coding Train tutorials and zero knowledge of what I was getting into, I started playing with p5.js.

The math was... interesting (read: occasionally terrifying). But watching these shapes emerge from pure equations was addictive. I moved on to Observable notebooks, which helped me break down the complexity and really understand what was happening under the hood.

Making it Real

The final form came together as a web app that lets anyone play with these mathematical wonders. No PhD required - just sliders and a color picker (thanks to iro.js and its creator James for the debugging help!).

You can tweak parameters, watch shapes morph in real-time, and export them as clean SVGs. It's basically a playground for anyone curious about these fascinating forms.

Looking Back

This project introduced me to some incredible people and ideas. Amelia Wattenberger's work on combining React with D3.js opened my eyes to new possibilities in interactive visualization. And while tools like Figma have their own sophisticated corner smoothing, there's something special about creating these shapes from first principles.

What started as a "wait, what?" moment with a logo turned into a deep dive into the intersection of math, design, and code. And honestly? I wouldn't have it any other way.