Home▸Geometry▸Superellipse — Lamé Curves & the Squircle

⬛ Superellipse — Lamé Curves & the Squircle

Explore the superellipse |x/a|^n + |y/b|^n = 1 — Lamé's family of curves. Sweep the exponent n to morph from astroid to diamond, to circle, to Piet Hein's squircle, to rectangle. Overlay circle and rounded-rect to see the design-friendly squircle of iOS icons.

Geometry3DEasy60 FPS

About this simulation

A superellipse is the curve |x/a|ⁿ + |y/b|ⁿ = 1, a generalisation of the ordinary ellipse discovered by Gabriel Lamé. Sliding the Exponent n smoothly morphs the shape from a diamond (n=1) through the circle (n=2) into Piet Hein's rounded "squircle" (n≈2.5–4) and toward a near-rectangle at high n, while the Aspect a:b slider stretches it independently.

🔬 What it shows

A single parametric curve, |x/a|ⁿ + |y/b|ⁿ = 1, rendered live as its exponent n and aspect ratio a:b change, with preset shapes and optional circle/rectangle overlays for comparison.

🎮 How to use

Jump to a Preset (Astroid, Diamond, Circle, Squircle, Rectangle, Piet Hein), or drag the Exponent n and Aspect a:b sliders directly, toggle Sweep n animation, switch Outline/Fill style and Color, and enable Circle/Rect overlays or Tile mode.

💡 Did you know?

Piet Hein's squircle (n≈2.5) became the basis for Stockholm's Sergels Torg plaza and countless roundabouts because it fits more usable rectangular space into a given area than a true ellipse, while still looking rounded and organic.

Frequently asked questions

What happens to the shape at the extreme ends of the Exponent n slider?

At n=1 the curve is a perfect diamond (a rotated square with straight edges meeting at sharp corners); as n grows past 2 the corners round out further and further, and at very high n the shape approaches a rectangle with nearly straight sides and only slightly rounded corners.

Why is n=2 special, marked as the "Circle" preset?

Substituting n=2 turns the general formula |x/a|ⁿ+|y/b|ⁿ=1 into the standard ellipse equation (x/a)²+(y/b)²=1 — with equal a and b that's exactly a circle, so n=2 is the one value where the superellipse reduces to the shape everyone already knows.

What makes the "squircle" (Piet Hein preset) different from just a rounded-corner rectangle?

A CSS-style rounded rectangle has straight edges joined by circular-arc corners; the squircle's curvature changes smoothly everywhere along its perimeter with no abrupt transition between "straight" and "curved" sections, which is why designers prefer it for app icons and furniture.

How does the Aspect a:b slider interact with the Exponent n?

Aspect stretches the shape along one axis independently of n's corner-rounding effect — you can have a stretched diamond, a stretched squircle, or a stretched near-rectangle, since the two parameters control fundamentally different aspects of the curve's geometry.

What does the Sweep n animation actually demonstrate?

It continuously animates the exponent from low to high (or back), letting you watch the smooth, continuous morph between diamond, circle, squircle and rectangle in real time — a good way to see that these aren't discrete shape "categories" but one continuous family of curves.

⚙ Under the hood

Sweep the exponent n in |x/a|ⁿ + |y/b|ⁿ = 1 and watch it morph from astroid to diamond, circle, Piet Hein's squircle and rectangle. Overlay a circle and rounded rectangle to compare.

Lamé curvesquirclePiet HeinparametricCanvas 2D

3D · Three.js / WebGL renderer · 60 FPS target · runs fully client-side, no install