JSFiddle - React, Tailwind, and code Playground

HTML

Is overlapping: <span>placeholder</span>
<svg>
    <circle r="210.56" fill="#1ABCDB" id="01" priority="4" cx="200" cy="386"></circle>
    <circle r="210.56" fill="#1ADC4A" id="02" priority="4" cx="300" cy="486"></circle>
</svg>

CSS

span {
    font-weight:bold;
}

JavaScript

var circles = $('circle'),
    span = $('span')
;

var distance = function (p1, p2) {
    var _x = Math.pow(Math.abs(p1.x - p2.x), 2),
        _y = Math.pow(Math.abs(p1.y - p2.y), 2)
    ;
    
    return Math.sqrt(_x + _y);
};

var isOverlapping = function (circle1, circle2) {
    var p1 = {
        x : circle1.attr('cx'),
        y : circle1.attr('cy')
    },  p2 = {
        x : circle2.attr('cx'),
        y : circle2.attr('cy')
    };
    
    var d = distance(p1,p2),
        totalRadius = (+circle1.attr('r')) + (+circle2.attr('r'))
    ;
    
    return d < totalRadius;
};

span.text(
    isOverlapping(circles.eq(0), circles.eq(1))
);