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

I've compared the squircle rendering using the superellipse function with the Apple native "continuous rounded rects", and they are different enough that I question whether web devs won't find the native continuous rounded rects more appealing. Here's a zoomed-in view of the difference (for `k=-0.85`). Red line = superelljpse, grey line = continuous rounded rect.

![superellipse-vs-c-rounded-rect](https://github.com/user-attachments/assets/2674f10a-a5f7-4806-bf84-7e185045f979)

The superellipse still has the property that there is a sharp corner between the flat edge and the start of the curve, which is the primary reason people want squircles. This is much smoother with continuous rounded rects. The continuous rounded rect is a Bézier curve with four points per corner:

![c-rounded-rect-bezier](https://github.com/user-attachments/assets/d133a0e9-34bd-4f76-b66f-39a77c4607a4)

(this is not quite to scale relative to the first image).

Something to note is that continuous rounded rects affect the "flat" part of the edges; their influence on the flat sides extents about 1.5x of the corner radius. That means that it's tricky to convert them to a circle for `border-radius: 50%`, but we could probably come up with some kind of blending heuristic.


-- 
GitHub Notification of comment by smfr
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/10993#issuecomment-2424305155 using your GitHub account


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

Received on Sunday, 20 October 2024 00:09:15 UTC