title: How to create a curved SVG path between two points?
body: <p>I need to draw a <strong>symmetrically curved line between the centers of two circles</strong>.</p>
  
  <pre><code>&lt;svg&gt;
      &lt;circle class="spot" id="au" cx="1680" cy="700" r="0"&gt;&lt;/circle&gt;
      &lt;circle class="spot" id="sl" cx="1425" cy="525" r="0"&gt;&lt;/circle&gt;
  
      &lt;line id="line1" stroke-width="2" stroke="red"/&gt;
  &lt;/svg&gt;
  </code></pre>
  
  <p>This is the code I wrote so far. <strong>&lt; line > element should be replaced with a curved path</strong>.</p>
  
  <pre><code>function drawNow() {
      let point1X = document.getElementById("au").getAttribute("cx");
      let point1Y = document.getElementById("au").getAttribute("cy");
      let point2X = document.getElementById("sl").getAttribute("cx");
      let point2Y = document.getElementById("sl").getAttribute("cy");
  
      let line1 = document.getElementById("line1");
      line1.setAttribute("x1", point1X);
      line1.setAttribute("y1", point1Y);
      line1.setAttribute("x2", point2X);
      line1.setAttribute("y2", point2Y);
  }
  </code></pre>