Create svg arcs between two points

Question

I want to connect two SVG points (e.g. the centers of two circles) using arcs. If there is only one connection, the line () will be straight. I

Answer 1

For drawing SVG path's arc you need 2 points and radius, there are 2 points and you just need to calculate radius for given distances.

Formula for radius:

let r = (d, x) => 0.125*d*d/x + x/2;

where:

d - distance between points

x - distance between arcs

it derived from Pythagorean theorem:

a here is a half of distance between points

---

let r = (d, x) => !x?1e10:0.125*d*d/x + x/2; 

upd();

function upd() {
  let n = +count.value;
  let s = +step.value/10;
  let x1 = c1.getAttribute('cx'), y1 = c1.getAttribute('cy');
  let x2 = c2.getAttribute('cx'), y2 = c2.getAttribute('cy');
  let dx = Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
  paths.innerHTML = [...Array(n)].map((_, i) => [
    n%2&&i===n-1?0:1+parseInt(i/2),
    i%2
  ]).map(i => ``).join('');
}