SVG Squircle
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 to Article — Permalink
SVG Squircle is a post from CSS-Tricks
