Re: [csswg-drafts] [css-backgrounds] The shape of box-shadow should be a circle for a box with border-radius:50% and big spread (#7103)

I'd like to make new proposals consisting of two weakly related parts:

 - a spread-adjustment formula based on geometric means;
 - two variants of formulae for better appoximating the actual shape of the spread of an elliptic border.

Here's the demo based on Loirooriol's with two more test cases added: [algos.zip](https://github.com/w3c/csswg-drafts/files/10851960/algos.zip)

---

Summary for the spread-adjustment formula:

If the spread is less than the radius, the spread is not adjusted. Otherwise the adjusted spread satisfies:
````
radius + adjusted_spread = C * (radius + spread) ^ coverage * radius ^ (1 - coverage),
````
where
````
coverage = min(radius * 2 / side_length, 1),
````
and the constant `C = 2 ^ (1 - coverage)` guarantees that the formula is continuous at `radius = spread`.

---

Summary for the elliptic correction formulae:

For an elliptic border, both variants ensure that the approximate spread passes through a particular point on the actual spread. But to fix the radii of the approximate spread: 

 - the first variant makes a requirement on the aspect ratio of the approximate spread;
 - the second variant requires that the longer axis of the approximate spread “take as much length as possible.”

Personally I find the second elliptic correction formula esthetically better.

---

If the WG is interested, I could also write a mathematical note explaining the derivations of the two correction formulae.

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


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

Received on Tuesday, 28 February 2023 15:35:44 UTC