[csswg-drafts] [css-borders-4] Interpolation of `corner-shape exponent (#11608)

noamr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-borders-4] Interpolation of `corner-shape exponent ==
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.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11608 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 30 January 2025 15:27:51 UTC