[csswg-drafts] [css-shapes-2] corner-shape support for superellipsis (#10993)

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

== [css-shapes-2] corner-shape support for superellipsis ==
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](https://en.wikipedia.org/wiki/Superellipse):

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

The default parameter $n$ for a superellipse 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](https://fserb.com/css/squircles).

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 to the $[0,1]$ to $[1,\infty)$ interval).

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.


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


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

Received on Wednesday, 2 October 2024 18:46:07 UTC