JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<svg transform="translate(0, 22)">
  <circle id="1" class="point" cx="121.78235294117647" cy="13.200000000000001" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.047]"></circle>
  <circle id="2" class="point" cx="125.2764705882353" cy="30.28235294117647" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.042]"></circle>
  <circle id="3" class="point" cx="112.8529411764706" cy="30.67058823529412" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.037]"></circle>
  <circle id="4" class="point" cx="103.53529411764706" cy="32.22352941176471" r="3.1058823529411765" stroke="rgb(0, 0, 0)" stroke-width="1" data-values="[0.047]"></circle>
</svg>

JavaScript

function distance(circle1,circle2) {
    let c1 = document.getElementById(circle1);
    let c2 = document.getElementById(circle2);
    c1 = {
      x: c1.getAttribute("cx"),
      y: c1.getAttribute("cy"),
      r: c1.getAttribute("r")
    };
    c2 = {
      x: c2.getAttribute("cx"),   
      y: c2.getAttribute("cy"),
      r: c2.getAttribute("r")
    };  
    let x = c1.x - c2.x;
    let y = c1.y - c2.y;
    let distance = Math.sqrt(x**2 + y**2);
    distance = Math.max(0, distance - c1.r - c2.r);
    return distance;   
}

distance('4','3');