The Perfect SVG Circle

Note: This exercise is based on the 4-interlacing-circles family of Islamic designs that is described by Broug on pp 10-12 of his Patterns book. Full dislosure, I earn no commissions from the sale of that or any other works mentioned in this blog.

SVG circles pattern
Figure 1 – click to view in CodePen , which does not have the weird missing arc problem you see here


“The starting point of every geometric pattern is a perfect circle.”
~Eric Broug

Let’s get started.

The goal of this post is produce a handcoded version of the 4-circle, Islamic “proto-pattern,” that I drew in Inkscape (see above).

As you can see from the generated code, this version is unsatisfactory.  First off, it;s way too big. (You can fix this by zooming out on your browser).

Despite being careful, it was impossible (at least for me) to draw 5 partially superimposed circles with an exact radius of 400 pixels each — Inkscape kept changing the radii around, for reasons that elude me.

Although the changes Inkscape made were only a few pixels off, this version must be rejected: in all humbleness (which is always my goal as a Muslim), my goal is to attempt to produce pixel-perfect Islamic patterns, not flawed approximations — though true perfection can only be achieved by the All Mighty.

I also want the code for the shapes in the SVG library I am building to be as simple as possible — not XML bloatware, much of which you have to get delete to get to the essence of your design, or which tends to favor incomprehensible paths over native SVG geometric  shapes.

Let us start, then, with a perfect SVG circle, coded by hand, with a radius of 100 px.

Here it is.

With that in hand, can you figure out the SVG code needed to produce a pixel-perfect alignment of 4 circles interlacing in complete symmetry?  (hint: add colors, and ditch the stroke.)

Answer here.


#  #  #