title: Blend SVG paths together to feel like 1 line
body: <p>I have the following SVG:</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-html lang-html prettyprint-override"><code>&lt;svg viewBox="0 0 100 100" width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"&gt;
    &lt;path d="M56,56 C112,56 28,28 56,56" fill="none" stroke="#0000FF" stroke-width="2px"&gt;&lt;/path&gt;
    &lt;path d="M56,56 C112,56 8,1.5 16,3" fill="none" stroke="#FF7F00" stroke-width="2px"&gt;&lt;/path&gt;
    &lt;path d="M16,3 C32,3 8,24 16,48" fill="none" stroke="#FF7F00" stroke-width="2px"&gt;&lt;/path&gt;
    &lt;path d="M16,48 C32,48 6,2.5 12,5" fill="none" stroke="#FF0000" stroke-width="2px"&gt;&lt;/path&gt;
  &lt;/svg&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>If you look closely, the lines abruptly end. You can see how they square off, like so:</p>
  <p><a href="https://i.stack.imgur.com/8L6EI.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8L6EI.png" alt="enter image description here" /></a></p>
  <p>Is there a way to make paths blend together?</p>
  <p><strong>EDIT</strong>: Ideally, I would want to find a way to automate this. The way I form the <code>d</code> value in the path is with the following:</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-js lang-js prettyprint-override"><code>const points = [
    [56,56],
    [16,3],
    [16,48],
    [12,5],
  ]
  
  const generateLines = (points) =&gt; {
    const lines = [];
  
    for(let i = 0; i &lt; points.length; i++) {
      if(i == 0)
        lines.push({x1: points[i][0], y1: points[i][1], x2: points[i][0], y2: points[i][1]});
      else 
        lines.push({
          x1: lines[i-1].x2, 
          y1: lines[i-1].y2, 
          x2: points[i][0], 
          y2: points[i][1]
        });
    }
  
    return lines;
  }
  
  console.log(generateLines(points));
  
  //&lt;path d=M{x1},{y1} C{x1*2},{y1} {x2/2},{y2/2} {x2},{y2}</code></pre>
  </div>
  </div>
  </p>