DEV Community

Alansdead
Alansdead

Posted on

Squircle Mathematics Explorer [EN/PT Interactive]

#codepen

Creative Coding for Designers: Understanding the Squircle

You don’t need to be a developer to build with code. If you already think in design systems, you’re closer than you think.

I’m a designer who loves creative coding, and I keep noticing the same pattern:

  • Designers understand code faster when it’s explained like a design system.
  • Developers understand design faster when the intent is made explicit.

In this post, I’ll walk you through a small CodePen I built: Squircle Mathematics Explorer.

What is a squircle?

A squircle is the shape that lives between a circle and a square. You’ve seen it everywhere. One of the most famous examples is the Apple app icon.

Image from Apple Design Resources (icon templates).

The math behind it has a long history: Gabriel Lamé described the superellipse in 1818. Piet Hein later popularized it. Apple made it iconic through the app icon grid.

1) The big idea: one variable controls everything

$$
|x|^n + |y|^n = 1
$$

The only thing that changes is the value of n.

  • When n = 2, you get a perfect circle.
  • When n = 4, you get a squircle.
  • As you move toward n = 10, the shape becomes more square.

When one parameter changes, the entire geometry reacts.

If you’ve ever used design tokens, this will feel familiar. It’s the same mental model: change one variable, and the whole system responds.

2) Canvas: a blank artboard (that redraws itself)

In the browser, the <canvas> element is like a blank artboard. It does not “contain” shapes the way SVG or Figma does. It’s closer to saying:

“Here is a rectangle of pixels. Now draw something onto it.”

Here’s the canvas structure in HTML:

<canvas id="squircle-canvas" width="300" height="300"></canvas>
Enter fullscreen mode Exit fullscreen mode

Now comes the key shift:

  • In Figma, the shape exists immediately, and you tweak its properties.
  • On Canvas, the shape only exists after your function calculates it.

That is why the drawing function clears and redraws the canvas each frame:

function drawSquircle(n) {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    const radius = 120;
    // ... (calculates points and draws the path)
}
Enter fullscreen mode Exit fullscreen mode

In practice, drawSquircle() calculates thousands of points along the curve and connects them into a path.

If you’ve ever edited a vector path, it’s like placing many anchor points and closing the shape. Except here, math generates the points for you.

3) The slider: a live design token

The range slider is the control that changes n.

In HTML, it looks like this:

<input type="range" id="n-slider" min="2" max="10" step="0.1" value="4">
Enter fullscreen mode Exit fullscreen mode

This is delightfully “design-y”:

  • min and max are your constraints.
  • step is your granularity.
  • value is your default token value.

In JavaScript, every slider movement updates a single variable. Everything else in the system reads that value and reacts.

slider.addEventListener('input', (e) => {
    nValue = parseFloat(e.target.value);
});
Enter fullscreen mode Exit fullscreen mode

4) The text system: a content component with variants

The pen also teaches while you explore. There’s an object that holds descriptions for key values of n:

const educationalContent = {
    en: {
        2: "n = 2: The perfect circle...",
        4: "n = 4: The SQUIRCLE! Piet Hein's superellipse, popularized by Apple's app icons...",
        8: "n = 8: Nearly square now...",
    },
};
Enter fullscreen mode Exit fullscreen mode

If you’re a designer, read that as:

  • One component (the education panel)
  • Multiple variants (the copy changes per key value)
  • A prop (the current n)

5) The language toggle: a theme switch for words

The EN/PT buttons at the top switch the whole UI language at once.

There’s a translations object that stores strings in both languages:

const translations = {
    en: { title: "SQUIRCLE MATHEMATICS", sliderLabel: "> SQUIRCLE_EXPONENT:" },
    pt: { title: "MATEMÁTICA DO SQUIRCLE", sliderLabel: "> EXPOENTE_SQUIRCLE:" },
};
Enter fullscreen mode Exit fullscreen mode

When you click a language button, a function updates each UI label:

document.getElementById('main-title').textContent = t.title;
document.getElementById('slider-label').textContent = t.sliderLabel;
// ...and so on
Enter fullscreen mode Exit fullscreen mode

A quick note on the visuals

The CRT scanlines, noise overlay, and background grid are purely visual.

In CSS, the scanline effect is just a repeating gradient layered on top of everything.

The outcome: code is full of familiar design concepts

If you take one thing from this post, let it be this:

  • Variables are tokens.
  • Objects are component props.
  • State changes are variant switches.
  • Animation timing is motion design logic.

I built this project with HTML, CSS, and JS on CodePen.

Once you start seeing code through the lens of systems and design thinking, it stops feeling like a separate skill and starts feeling like another creative tool.

An interactive educational tool that explores the mathematics behind squircles

Top comments (0)