cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv headernumbered-list123split-screen
user profile image

Inspired by this tweet and this article about Apple's "squircle" shape in icon design: a shape that on first glance looks like a rounded rectangle, but is actually a smooth curve, with no sudden shift from straight line to circular corner.

Diagram comparing the two curves, with bars fanning out from each point along the curve representing the "curvature" (aka, the 2nd derivate, or the rate of change of the rate of change of the angle)

I wondered if I could come up with an easy formula to create a "squircle" type curve with SVG bezier curves. It wouldn't be the exact shape, but it could be close. The idea:

The "end points" of the curve segments are the mid-points of each side of the rectangle, where everything should be perfectly straight. The control points then stretch out along the edges until the curvature at the corners is about right.

That worked for shapes with significant rounding, but for slight rounding (the bottom row), the control points ended up farther out than the corners, creating concave curves, with the corners projecting outwards from the sides.

To fix that, I added straight segments along the middle of the rectangle's sides. This, however, re-introduces a sudden change in the curvature. Joining a cubic bezier to a straight line like this only smooths out the tangent angle, not the rate of change of the tangent angle. You'd need a higher-order (quartic?) bezier to be able to create the kind of curvature used in the apple icon.

Next step: figure out a formula & code for automatically generating these curves to an approximate corner radius. Maybe Ana Tudor will do that for me.


Aside: Chrome is really, really bug with the hover effect to remove the clip paths!

Comments

  1. You could layer a rectangle on top of the curves, so the concave bend would be obscured. Or underneath, I guess.

    Makes stroking difficult, but one step at a time, I guess.

  2. Does this help at all? http://stackoverflow.com/questions/5737975/circle-drawing-with-svgs-arc-path/10477334#10477334

    Or this? http://stackoverflow.com/a/27578898/3606700

    I was just trying to make some squircles the other day and came across those.

    Ended up with http://codepen.io/chasebank/pen/RKvxrm

    But it's so fixed... What you're describing would be really useful though! Exactly what I'm looking for

  3. @ChaseBank

    Thanks for the links. Yes, that is essentially the same curve structure I came up with, but with the fixed radius from putting the control points at the corners and the vertices at the mid-points. Not a "perfect" superellipse squircle, but close enough.

    What's missing is a nice formula for converting from a desired border radius to the correct point positions. I made these by trial and error, but the rough approximation is: for a "radius" of x, start and end the curves 2.5*x away from the corner (with the control points right at the corner). If that is more than half the distance of the side, then you need to pull back the control points instead.

  4. There is a method by russian designer Ilya Birman described here (in russian) which he used in his metro map design. He suggests moving connection points little further and make “handles“ little longer. However, there are no exact coefficients.

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...