Draw non-overlapping curves between end points
<p>In my application I need to draw some curves between some set of coordinates like this<a href="https://i.stack.imgur.com/k5XLx.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/k5XLx.jpg" alt="enter image description here"></a></p>

<p>Refer this <a href="https://jsfiddle.net/rosw59bh/" rel="nofollow noreferrer">Fiddle</a> for the sample I created by static data. (For. ex: C). I'm using svg and path to construct this. The one I have in the fiddle is just for one end point. Similarly I have around 20 end points. The idea is to draw a non overlapping curve between the end points like the attached picture. The html looks like</p>

<pre><code>&lt;div class="c1"&gt;
    &lt;svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="711px" viewBox="0 0 1000 711"&gt;
        &lt;style type="text/css" &gt;
            &lt;![CDATA[
            path {
                stroke: #17479e;
                fill:   none;
                stroke-width: 3;
                opacity:0.7;
            }
            path.ar4 {
                stroke-width: 3;
            }
            path.ar5 {
                stroke-width: 5;
            }
            path.ar6 {
                stroke-width: 6;
            }
            path.ar7 {
                stroke-width: 7;
            }
            path.ar {
                fill: #17479e;
                stroke-width:0;
                opacity:1;
            }
            ]]&gt;
        &lt;/style&gt;
      &lt;defs&gt;
        &lt;marker id="ah1" orient="auto" markerWidth="2" markerHeight="4" refX="0.1" refY="2"&gt;
          &lt;path class="ar" d="M0,0 V4 L2,2 Z"/&gt;
        &lt;/marker&gt;
      &lt;/defs&gt;
      &lt;path id="map_1_3" d="M570,315 C469,323 343,364 268,422"  marker-end="url(#ah1)" class="ar5"/&gt;
      &lt;path id="map_1_4" d="M256,379 C259,374 226,396 268,422"  marker-end="url(#ah1)" class="ar7"/&gt;
      &lt;path id="map_1_5" d="M285,454 C269,443 269,438 268,422"  marker-end="url(#ah1)" class="ar4"/&gt;
      &lt;path id="map_1_6" d="M387,514 C351,448 299,421 268,422"  marker-end="url(#ah1)" class="ar4"/&gt;
    &lt;/svg&gt;
  &lt;/div&gt;
</code></pre>

<p>So, I feel the way I'm statistically doing is wrong (of course, the time constraint to define for all the coordinates). So I'm thinking of doing this dynamically. If I give the end points in an array, the function should draw the curves.</p>

<p>I'm using PHP. If anyone already know any algorithm to generate this kind of curves please help.</p>