SVG Squircle

Avatar of Chris Coyier
Chris Coyier on

DigitalOcean joining forces with CSS-Tricks! Special welcome offer: get $100 of free credit.

Amelia Bellamy-Royds:

I wondered if I could come up with an easy formula to create a “squircle” type curve with SVG bezier curves. It wouldn’t be the exact shape, but it could be close. The idea:

The “end points” of the curve segments are the mid-points of each side of the rectangle, where everything should be perfectly straight. The control points then stretch out along the edges until the curvature at the corners is about right.

Rogie took a crack at it with CSS a few years ago, as well.

Direct Link →