title: Create svg arcs between two points
body: <p>I want to <em>connect</em> two SVG points (e.g. the centers of two circles) using arcs. If there is only one connection, the line (<code>&lt;path&gt;</code>) will be straight. If there are two connections, both will be rounded and will be symmetrical, this way:</p>
  
  <p><a href="https://i.stack.imgur.com/4XkE6.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4XkE6.png" alt=""></a></p>
  
  <p>So, in fact, there are few rules:</p>
  
  <ol>
  <li>Everything should be symmetrical to to the imaginary line that connects the two points.</li>
  <li><p>From 1, it's obvious that if the number of connections is:</p>
  
  <ul>
  <li>odd: we do not display the straight line</li>
  <li>even: we display the straight line</li>
  </ul></li>
  <li><p>There should be a value <code>k</code> which defines the distance between two connections between same points.</p></li>
  <li><p>The tangent that goes through the middle of the elliptical arc should be parallel with the straight line that connects the two points. And obviously, the middle of the line will be perpendicular to the tangent.</p>
  
  <p><a href="https://i.stack.imgur.com/4aOgd.png" rel="noreferrer"><img src="https://i.stack.imgur.com/4aOgd.png" alt=""></a></p></li>
  </ol>
  
  <p>I'm struggling to get a formula to calculate the <code>A</code> parameters in the <code>&lt;path&gt;</code> element.</p>
  
  <p>What I did until now is:</p>
  
  <pre><code>&lt;path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent"/&gt;
  </code></pre>
  
  <ul>
  <li><code>M100 100</code> is clear: that's the starting point (<em>move to 100,100</em>)</li>
  <li>Last two numbers are also clear. The path ends in <code>300,100</code></li>
  <li>I also saw that if I put <code>0</code> instead of <code>20</code>, I obtain a straight line.</li>
  <li>If I replace <code>1,0</code> with <code>1,1</code>, the path is flipped.</li>
  </ul>
  
  <p>What I don't know is how to calculate the A parameters. I read <a href="http://www.w3.org/TR/SVG/paths.html#PathDataEllipticalArcCommands" rel="noreferrer">the docs</a>, but the imagine is still unclear to me. How to calculate these values?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>svg {
    width: 100%;
    height: 100%;
    position: absolute;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;?xml version="1.0" standalone="no" ?&gt;
  
      &lt;svg version="1.1" xmlns="http://www.w3.org/2000/svg"&gt;
        &lt;!-- Connect A(100,100) with B(300, 100) --&gt;
        &lt;path d="M100 100, A50,0 0 1,0 300,100" stroke="black" fill="transparent" /&gt;
        &lt;path d="M100 100, A50,20 0 1,0 300,100" stroke="black" fill="transparent" /&gt;
        &lt;path d="M100 100, A50,20 0 1,1 300,100" stroke="black" fill="transparent" /&gt;
        &lt;path d="M100 100, A50,30 0 1,0 300,100" stroke="black" fill="transparent" /&gt;
        &lt;path d="M100 100, A50,30 0 1,1 300,100" stroke="black" fill="transparent" /&gt;
        
        &lt;!-- A(100, 100) B(300, 400) --&gt;
        &lt;path d="M100 100, A50,0 57 1,0 300,400" stroke="black" fill="transparent" /&gt;
        &lt;path d="M100 100, A50,20 57 1,0 300,400" stroke="black" fill="transparent" /&gt;
        &lt;path d="M100 100, A50,20 57 1,1 300,400" stroke="black" fill="transparent" /&gt;
    &lt;/svg&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I'm using SVG.js to create the paths.</p>