Inspired by this tweet and this article about Apple's "squircle" shape in icon design: a shape that on first glance looks like a rounded rectangle, but is actually a smooth curve, with no sudden shift from straight line to circular corner.
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.
That worked for shapes with significant rounding, but for slight rounding (the bottom row), the control points ended up farther out than the corners, creating concave curves, with the corners projecting outwards from the sides.
To fix that, I added straight segments along the middle of the rectangle's sides. This, however, re-introduces a sudden change in the curvature. Joining a cubic bezier to a straight line like this only smooths out the tangent angle, not the rate of change of the tangent angle. You'd need a higher-order (quartic?) bezier to be able to create the kind of curvature used in the apple icon.
Next step: figure out a formula & code for automatically generating these curves to an approximate corner radius. Maybe Ana Tudor will do that for me.
Aside: Chrome is really, really bug with the hover effect to remove the clip paths!