title: How to draw a piecewise cubic spline in SVG
body: <p>I receive a list of points from my layout engine (<a href="https://www.eclipse.org/elk" rel="nofollow noreferrer">ELK</a>) which I would like to convert to a SVG path.</p>
  <p>I've got the following:</p>
  <ul>
  <li>A start point</li>
  <li>An end point</li>
  <li>A list of bend points that &quot;<a href="https://www.eclipse.org/elk/reference/options/org-eclipse-elk-edgeRouting.html" rel="nofollow noreferrer">must be interpreted as control points for a piecewise cubic spline</a>&quot;</li>
  </ul>
  <p>When I receive exactly two bend points, I am able to convert this to a <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths#b%C3%A9zier_curves" rel="nofollow noreferrer">cubic Bezier curve with two control points in SVG</a>:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="400" height="100"&gt;
    &lt;g stroke="black" fill="black"&gt;
      &lt;!--Start point--&gt;
      &lt;circle cx="10" cy="10" r="2" /&gt;
      &lt;!--Bend points--&gt;
      &lt;circle cx="90" cy="60" r="1" /&gt;
      &lt;circle cx="210" cy="60" r="1" /&gt;
      &lt;!--End point--&gt;
      &lt;circle cx="290" cy="10" r="2" /&gt;  
    &lt;/g&gt;
    &lt;!--Resulting path--&gt;
    &lt;path d="M 10 10 C 90 60, 210 60, 290 10" stroke="blue" fill="none" /&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>But when I receive more than 2 control points, I struggle to understand what should be the resulting path. Eg with 4 control points:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;svg width="400" height="100"&gt;
    &lt;g stroke="black" fill="black"&gt;
      &lt;!--Start point--&gt;
      &lt;circle cx="10" cy="10" r="2" /&gt;
      &lt;!--Bend points--&gt;
      &lt;circle cx="50" cy="60" r="1" /&gt;
      &lt;circle cx="90" cy="60" r="1" /&gt;
      &lt;circle cx="210" cy="60" r="1" /&gt;
      &lt;circle cx="250" cy="60" r="1" /&gt;
      &lt;!--End point--&gt;
      &lt;circle cx="290" cy="10" r="2" /&gt;  
    &lt;/g&gt;
    &lt;!--Resulting path?--&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>So how can I convert a &quot;piecewise cubic spline&quot; with a variable amount control points to a SVG path?</p>