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

// find our distance between two svg circle edges
function distance(circle1,circle2) {

    // get our specified circles by id
    let c1 = document.getElementById(circle1);
    let c2 = document.getElementById(circle2);
    
    // circle one attributes
    c1 = {
      x: c1.getAttribute("cx"),
      y: c1.getAttribute("cy"),
      r: c1.getAttribute("r")
    };
		
    // circle two attributes
    c2 = {
      x: c2.getAttribute("cx"),   
      y: c2.getAttribute("cy"),
      r: c2.getAttribute("r")
    };
     
    // lets work out each x and y axis distance
    // not too worry about negative values
    let x = c1.x - c2.x;
    let y = c1.y - c2.y;
    
    // lets work out the hypotenuse between x and y using pythagoras
    // negative x or y values become absolute when squared
    let distance = Math.sqrt(x**2 + y**2);
    
    // now minus the radius of both circles from our distance
    // to equal the distance from circle edges
    distance = distance - c1.r - c2.r;
    
    // return the distance
    console.log(distance);
    return distance;
    
}

// check your console for distance :-P
distance('4','3');