I already knew about the whole “mathematically perfect corners” thing Apple does, so I was super curious how someone implemented that in CSS. I figured it was some sort of new CSS feature involving splines, but then I saw there was a folder called “masks” containing PNG files at 3 resolutions and I was immediately transported back to the mid-2000s.
Especially weird since CSS actually has the clip-path property which allows polygons as masks. I think converting a curve to a polygon is still better than having a literal raster image as a mask.
Not an Apple product user so TIL Apple's rounded corner are different than usual rounded corner using CSS. I'm going to guess this is using CSS's clip-path!
Looks like the derivative of the angle is continuous.
When you drive around a street corner in a car, you start by turning the wheel to turn a little, then more, then less, then you drive straight again. This looks like that kind of curve.
It's subtle. Zoom to the middle of the sample image and compare (the vertical part of) the curve of the two top corners. You will notice like... 5 pixels of difference, then the curve gets aliased in the smooth version. I would like to see it in an actual site though.
Readit News
This https://arun.is/blog/apple-rounded-corners ?
diff: https://github.com/user-attachments/assets/3edb0bbd-4989-442...
When you drive around a street corner in a car, you start by turning the wheel to turn a little, then more, then less, then you drive straight again. This looks like that kind of curve.
https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometri...
https://en.wikipedia.org/wiki/Track_transition_curve
From what I've read, Apple rounded corners are using G^2 or G^3 geometric continuity to generate smoother curves.
It's hard to tell which smoothing function this library uses since it looks like it's based on PNG masking.
Cool plugin idea though!