Posts

Showing posts from May, 2015

How to Make a Squircle in SVG

Image
It seems squircles are pretty popular nowadays. Both iOS and Ubuntu make use of this shape, which also appeared in some other places. If you don't feel like following my Wikipedia link, a squircle is defined geometrically by the equation x4+y4=r4. And if you don't feel like parsing that, it's basically a cross between a circle and a square, hence the name "squircle".

Rounded rectangles are NOT squircles. Rather, a squircle's "corners" are not mere circular arcs, and the edges are more rounded.

Rounded rectangle (left) vs. squircle (right).
My personal website was recently updated to replace the rounded rectangle shape it used for buttons with a squircle shape instead, and it looks much better for it IMO. But the challenge for me was trying to define this shape in SVG (Scalable Vector Graphics), so I can get a nice squircle which can tweaked and scaled to my heart's content. Sadly, a Google search did not turn up anything particularly useful, so I …