[HN Gopher] Show HN: Apple-like smooth corners for Tailwind CSS
       ___________________________________________________________________
        
       Show HN: Apple-like smooth corners for Tailwind CSS
        
       Author : instagary
       Score  : 16 points
       Date   : 2025-01-25 20:34 UTC (2 hours ago)
        
 (HTM) web link (github.com)
 (TXT) w3m dump (github.com)
        
       | Uehreka wrote:
       | 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.
        
         | echoangle wrote:
         | 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.
        
         | Alifatisk wrote:
         | > I already knew about the whole "mathematically perfect
         | corners" thing Apple does
         | 
         | This https://arun.is/blog/apple-rounded-corners ?
        
       | burgerrito wrote:
       | 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!
        
       | _aleph2c_ wrote:
       | Is this a joke, I can't see a difference.
        
         | baggy_trough wrote:
         | PNG masks to achieve this effect is definitely a cure that is
         | worse than the disease.
        
         | phoronixrly wrote:
         | 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.
        
         | Arnt wrote:
         | 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.
        
           | echoangle wrote:
           | Some links on this with regards to roads/tracks:
           | 
           | https://en.wikipedia.org/wiki/Jerk_(physics)#In_the_geometri.
           | ..
           | 
           | https://en.wikipedia.org/wiki/Track_transition_curve
        
         | instagary wrote:
         | It's pretty subtle, but hard to unsee after using it a lot.
         | 
         | diff: https://github.com/user-
         | attachments/assets/3edb0bbd-4989-442...
        
       | phoronixrly wrote:
       | Cool hack, can I see it in action anywhere, OP?
        
         | instagary wrote:
         | Our website: https://candle.fi !
        
       | weswilson wrote:
       | Obligatory video on splines:
       | https://www.youtube.com/watch?v=jvPPXbo87ds
       | 
       | 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.
        
       ___________________________________________________________________
       (page generated 2025-01-25 23:01 UTC)