How to Make a Squircle in SVG

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 decided to make this post for the benefit of others.

My initial experiments in Squircle Land were done in Inkscape, which is a great cross-platform FOSS tool for anything SVG-related. My initial take was to make three large circles whose edges came up to the opposite sides of the page boundaries, then took an intersection and turned the corners of the intersection into curved nodes. Voila! I had something resembling a squircle in Inkscape. The resulting shape in the editor is actually quite simple: you have just four nodes in the path, located halfway along each side of the page, and with curve handles directed along the page edges, stopping a little ways short of the page corners.

Now, my intention was to use this squircle shape in my personal web page, and also colorize it on the fly so I could easily reuse it for all of my buttons. To this end, I decided to crack open the .svg file Inkscape produced in Gedit/Atom and look at the markup. (In case you didn't already know, SVG itself is a subset of XML, and uses tags similar to HTML if you've ever handcoded a website like I did.) When I did, I saw code like that below (64px squircle):

<g
     inkscape:label="Layer 1"
     inkscape:groupmode="layer"
     id="layer1"
     transform="translate(0,-988.36216)">
    <path
       style="fill:#dd4814;fill-opacity:1"
       d="m 32,992.36216 c -24,0 -28,4 -27.9999999,28.00004 -1e-7,24 3.9999999,28 27.9999999,28 24,0 28,-4 28,-28 0,-24.00004 -4,-28.00004 -28,-28.00004 z"
       id="path3338"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccc" />
  </g>


...or this (72px squircle):

<path
     sodipodi:nodetypes="ccccc"
     inkscape:connector-curvature="0"
     id="path3338"
     d="M 36,-3e-5 C 5.1428571,-3e-5 -1.5e-7,5.14283 5.0000003e-8,36.00004 -1.5e-7,66.85724 5.1428571,72.00004 36,72.00004 c 30.857143,0 36,-5.1428 36,-36 C 72,5.14283 66.857143,-3e-5 36,-3e-5 Z"
     style="fill:#dd4814;fill-opacity:1" />


In SVG, a squircle is simply defined by what you see in the tags above. Inkscape and your web browser then parse this text and render the nice rounded shape you see.

But this code looks ugly. I wanted to see if I could simplify it a bit, in case I just wanted to define my own squircles whenever I wanted in a text editor. I followed the path commands on some graph paper, and figured out what was going on here; I also realized that Inkscape was apparently making this more complicated than it needed to be. The joys of autogenerated code!

After some experimenting and editing by hand to comply with the KISS principle, I produced the following SVG code, which produces the same shape but is much, much cleaner (50px squircle here):

<path d="M 25,0 C 5,0 0,5 0,25 0,45 5,50 25,50 45,50 50,45 50,25 50,5 45,0 25,0 Z"/>


That's all it takes to make a squircle in SVG!

So, how do we employ this in a webpage, where we want multiple squircles of different colors? Here's what I did. You can embed SVG directly in a webpage, then use the <defs> and <use> tags to define your path and reuse it wherever you need it again. The first time I use my squircle shape in my webpage, I use the following markup within my HTML:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="72" height="72">
  <defs>
  <path id="squircle" d="M 36,-3e-5 C 5.1428571,-3e-5 -1.5e-7,5.14283 5.0000003e-8,36.00004 -1.5e-7,66.85724 5.1428571,72.00004 36,72.00004 c 30.857143,0 36,-5.1428 36,-36 C 72,5.14283 66.857143,-3e-5 36,-3e-5 Z"/>
  </defs>
  <use xlink:href="#squircle" fill="#3344ee"/>
</svg>


(Yeah, yeah, I didn't bother to clean this one up.)

Then, whenever I need another squircle in a different color, I just use the following markup:

<svg width="72" height="72">
  <use xlink:href="#squircle" fill="#cc0000"/>
</svg>


Hope this helps you out! You can reuse the code I've shown above, with or without giving me credit (though a link back to this blog post and mentioning my name somewhere on your site would be nice).

Popular posts from this blog

Setting up my custom domain with GitHub Pages and Google Domains

Fun Run 2: Tips, Tricks and Strategies

Live sample of an inheritance scam: A dissection