title: Drawing multiple circular arcs dynamically using SVG
body: <p>I've got SVG image (code below):</p>
  
  <p><img src="https://i.stack.imgur.com/5Uc8o.png" alt="SVG image"></p>
  
  <pre><code>&lt;svg height="500" width="500"&gt;
  &lt;!-- Inner line --&gt;
  &lt;path d="M100,50 L 100,100 A 45,45 0 1,0 150,150 L 200 150" style="stroke:#000; stroke-width:6; fill:none;" /&gt;
  &lt;!-- Outer line --&gt;
  &lt;path d="M 90,50 L 90,92.5 A 54.5,54.5 0 0,0 90,197.5 L 90, 240.5" style="stroke:#000; stroke-width:1; fill:none;" /&gt;
  &lt;circle cx="105" cy="145" r="35" stroke="black" stroke-width="1" fill="green" /&gt;
  </code></pre>
  
  <p></p>
  
  <p>I cannot see any pattern while drawing curved lines that are separated by the same margin (I've made the image above just by "guessing"). The number of lines is dynamic so I need a formula to count every <code>M L A</code> parameter. E.g. I can take inner line as static (showing just the <strong>d</strong> attribute), </p>
  
  <pre><code>d="M100,50 L 100,100 A 45,45 0 1,0 150,150 L 200 150"
  </code></pre>
  
  <p>but then first outer should be calculated somehow, to get <strong>d</strong>:</p>
  
  <pre><code>d="M 90,50 L 90,92.5 A 54.5,54.5 0 0,0 90,197.5 L 90, 240.5"
  </code></pre>