JSFiddle - React, Tailwind, and code Playground

by Noreh AD

HTML

<div id="circle"></div>
<div id="origin"></div>
<div id="point"></div>

CSS

#circle {
    width: 300px;
    height: 300px;
    position: absolute;
    top: 50px;
    left: 50px;
    background: yellow;
    border-radius: 150px;
    border: 1px solid green;
}
#origin {
    width: 4px;
    height: 4px;
    background: red;
    box-shadow: 0 0 4px red;
}
#point {
    width: 8px;
    height: 8px;
    background: blue;
    border-radius: 4px;
}

JavaScript

function markCircleCenter(circ, orig) {
    if (typeof circ == "string") {
        var elm = document.getElementById(circ);
    } else { var circle = circ; }
    if (typeof orig == "string") {
        var mark = document.getElementById(orig);
    } else { var elm = orig; }
    var width		= parseInt(window.getComputedStyle(elm).width, 10);
    var height		= parseInt(window.getComputedStyle(elm).height, 10);
    var top			= parseInt(window.getComputedStyle(elm).top, 10);
    var left		= parseInt(window.getComputedStyle(elm).left, 10);
    var markWidth	= parseInt(window.getComputedStyle(mark).width, 10);
    var markHeight	= parseInt(window.getComputedStyle(mark).height, 10);
    var circle = {
        circle: elm,
        x: width/2 + left,
        y: height/2 + top,
    };
    mark.style.position	= "absolute";
    mark.style.top		= circle.y - markWidth/2 + "px";
    mark.style.left		= circle.x - markHeight/2 + "px";
    document.body.insertBefore(mark, elm.nextSibling);
    return circle;
}

function placeObjIntoOrbit(obj) {
    if (typeof obj == "string") {
        var obj = document.getElementById(obj);
    } else { var obj = obj; }
    var objPos = {
        obj: obj,
        x: origin.x,
        y: parseInt(window.getComputedStyle(origin.circle).top, 10) - parseInt(window.getComputedStyle(obj).width, 10) / 2,
    };
    obj.style.position	= "absolute";
    obj.style.top		= objPos.y  + "px";
    obj.style.left		= objPos.x  + "px";
    return objPos;
}

function rotateObj(pointX, pointY, originX, originY, angle) {
    var angle = angle * Math.PI / 180.0;
    return {
        x: Math.cos(angle) * (pointX-originX) - Math.sin(angle) * (pointY-originY) + originX,
        y: Math.sin(angle) * (pointX-originX) + Math.cos(angle) * (pointY-originY) + originY,
    };
}

var angle	= 0;
var origin	= markCircleCenter("circle", "origin");
var point	= placeObjIntoOrbit("point");

function spin() {
    if (angle >= 360) { angle = 0; }
    angle += 2;
    var newCoor =...