[css-shapes-2][css-borders-4] corner-shape support for superellipses #10993
Description
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:
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
-
$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
There are other available squircle formulations (like the Fernandez-Guasti squircles) where the parameter is more intuitive (
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
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.