freesewing/markdown/dev/howtos/code/drawing-circles/en.md

title
Drawing circles

Real circles are rarely used in pattern design, and they are not part of the SVG path specification, but rather a different SVG element.

Still, if you want a circle, you can draw one by setting a Point's data-circle attribute to the radius of the circle you want to draw.

In addition, all attributes that have a data-circle- prefix will apply to the circle, rather than the point.

Practically, you will probably want to use the Point.addCircle() which does all of this for you behind the scenes:

Examples of circles drawn on a pattern ##### How multiple circles are implemented

When you add the same attribute multiple times, they are typically joined together when rendering. For example multiple calls to add a class attribute will end up being rendered as class="class1 class2 class3 which makes a lot of sense.

But when we're placing multiple circles on the same point, that raises a bit of a problem. For example in this code:

point.a = new Point(0,0)
  .addCircle(10, 'lining')
  .addCircle(20, 'fabric')

Based on the rules of attributes, this would render a single circle with r="10 20" class="lining fabric". Which does not make a lot of sense and is invalid SVG as r only takes one value.

So the render engine will do some extra work here to check that there are multiple circles added, and will render a circle element for each, with the r and class values of their respective calls.

While this is probably what you'd intuitively expect, it is somewhat inconsistent with how other attributes are rendered, so I felt it was best to point it out explicitly.