Hacker News Reader

Comment by grenoire | Hacker News Reader

Fun fact: iOS app icons are not rounded rectangles (rectangles with 90 degree arc corners) but squircles, which are roughly superellipses with n=5. The linked Wikipedia articles also remark this.

View on HN

Same thing with the rounded corner of the iPhone X series. One time I was trying to make one of he UIView match the corner radius of the screen and it wasn’t matching until I learnt that the rounded corners of the screen/device is a 38.5 squircle (not sure if that’s the real term). Basically instead of having a sharp curve, it starts much earlier.

If you compute the curvature it starts flat, does a few bump and then flattens again (this curvature is not a very smooth function however). An n-ellipse is not quite the right curve. Apple used a bunch of Bezier curves. I think their design could be made a little more aesthetic if you used some smoothed piecewise bump (like a Gaussian nearly). You can numerically solve for the curve given the curvature and then approximate it.

That’s a slightly different curve, and I believe the corner radius for that is defined to be 39.

This is where I originally learnt about it. Seems like it's called a continuous corner, or “squircle”:

https://kylebashour.com/posts/finding-the-real-iphone-x-corn...

The corner radius is 39; you can find it by peeking inside iOS. CALayer has "continuous corners", which are very similar to but just slightly different than the app icon shape, which is a 16-part Bézier curve generated inside of the MobileIcons framework. This curve is as far as I can tell identical to the one that UIBezierPath.init(roundedRect:cornerRadius:) will give you when the corner radius is 22.5% of the side length. (Note that the app icon on the home screen, being of a constant size, is actually generated via an image mask rather than dynamic clipping.)

Raph also linked to https://www.figma.com/blog/desperately-seeking-squircles/

https://en.wikipedia.org/wiki/Squircle Please don't vote this up ;)

Fun fact: physical controls on the second generation Zune (released 2008) were squircles.

It reminds me of the techniques used in railways to smooth the transition from straights to bends.

https://en.m.wikipedia.org/wiki/Track_transition_curve

Not a coincidence. I talk about that a bit in my thesis on curves: https://levien.com/phd/phd.html

Actually, iOS app icons are not superellipses but a 16-part Bézier curve.

Reply on news.ycombinator.com