[css-borders-4] Interpolation of corner-shape superellipsis

[noamr]

Follow up on #10993

We are defining corner-shape as different variations on superellipse(exponent), which allows us to animate the exponent.
However, animating the exponent linearly would result in varying velocity - high velocity when concave, and low velocity when convex.
The visual result would be, for example, that a linear animation between notch and straight would start very fast and would seem like it's slowing down towards straight.

Proposing to use the following formula (also used in the draft) to balance this: intersect the superellipse with the given k, with a diagonal straight line that slices the corner. This would make it so that a "linear" animation would be linear from the point of view of the center of the curve.

The formula looks like this (k is the exponent):

// superellipse formula
y=(1 - x^k))^(1 / k)

// straight diagonal line formula
y=x

// combining them together
x=(1 - x^k))^(1 / k)

// solving for k
1 / (2^(1 / k))

This formula conveniently maps a k between 0 and infinity to a number between 0 and 1, and we can decide that 0 always maps for 0 and infinity also maps to 1.