JSFiddle - React, Tailwind, and code Playground

by bakhshi

HTML

<div class="container">
    <div class="main circle"></div>
</div>

CSS

.container{
    width:500px;
    height:500px;
    position:relative;
    border:solid 1px blue;
}
.circle{
    border-radius:50%;
    border: solid 1px black;
}
.main{
    background-color:yellow;
    
}

JavaScript

var circle = (function(){
    var circle = function(a, b, r){
        this.a = a;
        this.b = b;
        this.r = r;
    };
    return circle;
})();

var mainCircle=new circle(200,200,200),
    circles= [
        new circle(0,0,50),
        new circle(0,0,25),
        new circle(0,0,100),
        new circle(0,0,100),
        new circle(0,0,10),
        new circle(0,0,5)
    ];
function setCircleSize(obj, r){
    obj.css({
        width:r*2+'px',
        height:r*2+'px'
    });
}
function setCircleLocation(obj, x, y){
    obj.css({left:x+'px', top:y+'px'});
}

function updateCircle(obj, circle){
    setCircleSize(obj, circle.r);
    setCircleLocation(obj, circle.a, circle.b);
}



/*

 (x-a)^2 + (y-b)^2 = R^2
    (x-c)^2 + (y-d)^2 = r^2

e = c - a                          [difference in x coordinates]
  f = d - b                          [difference in y coordinates]
  p = sqrt(e^2 + f^2)                [distance between centers]
  k = (p^2 + r^2 - s^2)/(2p)         [distance from center 1 to line
                                      joining points of intersection
x = a + ek/p + (f/p)sqrt(r^2 - k^2)
  y = b + fk/p - (e/p)sqrt(r^2 - k^2)
OR
  x = a + ek/p - (f/p)sqrt(r^2 - k^2)
  y = b + fk/p + (e/p)sqrt(r^2 - k^2)\
  
*/

updateCircle($('.main'), mainCircle);
var createCircles = [];
var toBeProcessed = circles.slice(0);
while(toBeProcessed.length){
    var current = toBeProcessed.pop();
}
for(var index = 0; index < circles.length; index++){
    var $current = $('<div class="circle"></div>');
    $('.container').append($current);
    updateCircle($current, circles[index]);
}