Cracking the iOS 7 icon superellipse formula

Cracking the iOS 7 icon super-ellipse formula

Not only does iOS 7 seem to ever-so-slightly increase the size of iPhone icons, it seems to move away from the more common rounded-rectangle shape to the more complex superellipse. Hopefully Apple will provide tools to make generating curves of this type easier for developers and designers, but in the meantime Marc Edwards of Bjango has been doing a lot of maths (his spelling, not mine!) and has come up with something that seems to match up very well. From Twitter:

The formula for the iOS 7 icon superellipse.

He's also working on Bjango's own interface design tool, Skala and I'd be shocked -- shocked, I say -- if he's not already got superellipses, and likely tesseracts and other geometric wonders, well under way.

Check out the formula and the image proof via the link below.

Source: Marc Edwards

Have something to say about this story? Share your comments below! Need help with something else? Submit your question!

Rene Ritchie

Editor-in-Chief of iMore, co-host of Iterate, Debug, Review, Vector, and MacBreak Weekly podcasts. Cook, grappler, photon wrangler. Follow him on Twitter and Google+.

More Posts

 

6
loading...
0
loading...
32
loading...
0
loading...

← Previously

Chatology: Blindingly fast search for Mac Messages that actually works!

Next up →

Watch the WWDC 2013 Keynote on YouTube

Reader comments

Cracking the iOS 7 icon superellipse formula

19 Comments

I've been thinking that by the final release Apple will have switched to circular icons actually. The circular theme is so heavily ingrained and plays off the iconic home button nicely, plus many of the new icons themselves seem designed with this in mind.

I was thinking that also. iOS 7 clearly adopted circles into its system and I wouldn't be surprised if it has circular app icons. However, all other apps will need to update to the new icons

finally someone that understands. Circular icons offer less space for design and less ways for a dev to express himself because he/she now has to make said icon circle friendly.

Currently you supply square icons and just have to allow for the fact that iOS will round the corners off for you. Will be the same with iOS 7.

Nothing really, corners are a little more rounded. Both old and new icon shapes can be drawn with the superellipse formula, but it is very basic math, nothing to it.

I'm not seeing any difference with the new icons. They look like rounded squares… just like the current ones. Am I missing something?

The old icons were rounded rects. The new ones are super-ellipses. The flat sides of the icons are no longer flat, they're slightly curved. The old icons had flat sides.

Thanks for the response. I'll have to take your & Renee's word for it. I just went to apple.com and looked really, really closely at the icons. They look the same to me... rounded squares. I even zoomed in on the page. I believe you but I'm just not seeing it.

Rene, you're a smart guy so let's be clear about this superellipse thing.

1) All rectangles are special cases of superellipses.
2) Squares are special cases of rectangles, so all squares are also superellipses.
3) All rectangles with symetrical rounded corners are superellipses.
4) All ellipses are special cases of superellipses.
5) All circles are special cases of ellipses, so all circles are also superellipses.
6) Diamonds are also superellipses.

So Apple used, and continues to use superellipses in all versions of iOS, even if we can only guess at their specific formulas.

"1) All rectangles are special cases of superellipses.".....
"2) Squares are special cases of rectangles, so all squares are also superellipses.".....
"5) All circles are special cases of ellipses, so all circles are also superellipses.".....

THEREFORE...

All squares are actually circles! :-)

All