[css-shapes-2] corner-shape support for superellipsis

[fserb]

I worked a bit on trying to find an option for corner-shape on the new API that supported squircles and had inner/outer symmetry.

After a bit of work I'm proposing we add a value se(x) (name TBD) that exposes a superellipse:

$$ \left|\frac{x}{a}\right|^n + \left|\frac{y}{b}\right|^n = 1 $$

Where $a$ and $b$ are the width and height of the shape. And the default parameter $n$ works in the interval $[0,\infty)$ where:

• $n=0$ is a inwards square
• $n=0.5$ is a inwards circle
• $n=1$ is bevel
• $n=2$ is a circular border (like rounded corner)
• $n=4$ is a squircle
• $n\rightarrow\infty$ is a rectangle

My proposal would be to use $x$ as a parameter where $n=2^x$. This leads to a function that is symmetrical on $0$ where positive values are outside the bevel and negative values are inside, such as:

• $n\rightarrow-\infty$ is a inwards square
• $n=-1$ is a inwards circle
• $n=0$ is bevel
• $n=1$ is a circular border (like rounded corner)
• $n=2$ is a squircle
• $n\rightarrow\infty$ is a rectangle

I've wrote a small demo with this function here.

The superellipse is very easily parameterizable (both angular and $[0,1]$), so I'm guessing it shouldn't be a problem to implement it in an efficient way. There's a small issue where if we are "inside the bevel" the corners can sometimes overlap. For those cases, we will have to do some math and limit the size of the corners to prevent it from happening (the demo currently doesn't handle those cases).

There are other available squircle formulations (like the Fernandez-Guasti squircles) where the parameter is more intuitive ($0$ means circle, $0.5$ is squircle, and $1$ is square). Unfortunately, those formulations don't extend to inwards the bevel, so we would lose some expressiveness.

We could, together with this, also provide certain easy-to-use values (like squircle meaning se(2), or bevel meaning se(0), etc...). And they could also contain parameters (i.e. squircle(y) mapping $[0,1]$ to $[1,\infty) $).

Highlights:

• squircles!
• the symmetry on the bevel and around $0$ is very nice.
• It's very expressive of a lot of shapes that people care about.

Lowlights:

• "superellipsis" is an awful name and very non-descriptive of the intent of the shape.
• All parameter values (for example, $2$ meaning squircle) are not intuitive or really meaningful.