JSFiddle - React, Tailwind, and code Playground

by Geoffrey Gazet

HTML

<div id="1" class="item"><img src="https://preschool.byu.edu/Assets/img/red_circle.png" alt="" /></div>

<div id="2" class="item"><img src="https://preschool.byu.edu/Assets/img/green_circle.png" alt="" /></div>

<div id="3" class="item"><img src="https://preschool.byu.edu/Assets/img/red_circle.png" alt="" /></div>

<div id="4" class="item"><img src="https://preschool.byu.edu/Assets/img/green_circle.png" alt="" /></div>

<div id="5" class="item"><img src="https://preschool.byu.edu/Assets/img/red_circle.png" alt="" /></div>

<div id="6" class="item"><img src="https://preschool.byu.edu/Assets/img/green_circle.png" alt="" /></div>

<div id="7" class="item"><img src="https://preschool.byu.edu/Assets/img/red_circle.png" alt="" /></div>

<div id="8" class="item"><img src="https://preschool.byu.edu/Assets/img/green_circle.png" alt="" /></div>

<div id="9" class="item"><img src="https://preschool.byu.edu/Assets/img/red_circle.png" alt="" /></div>

<div id="10" class="item"><img src="https://preschool.byu.edu/Assets/img/green_circle.png" alt="" /></div>

<div id="11" class="item"><img src="https://preschool.byu.edu/Assets/img/red_circle.png" alt="" /></div>

<div id="12" class="item"><img src="https://preschool.byu.edu/Assets/img/green_circle.png" alt="" /></div>

<div id="center"><img src="http://www.library.manchester.ac.uk/firstimpressions/assets/images/make-your-mark/tools/shapes/shape_black_Circle.png" alt="" /></div>

CSS

.item { 
    position:fixed;
}

#center {
    top:150px;
    left:150px;
    width:50px;
    height:50px;
    position:absolute;
}

JavaScript

var p = 0;

function init() {
    var i=1;
    while(i<13) {
        p += .5;
        display(p, i);
        i++;
    }
}

function display(p, elem) {
    var r = 100;
    var xcenter = 150;
    var ycenter = 150;

    var newLeft = Math.floor(xcenter + (r* Math.cos(p)));
    var newTop = Math.floor(ycenter + (r * Math.sin(p)));
   
    $('#'+elem).css({
        top: newTop,
        left: newLeft,
    });
 }

$(document).ready(function() {
    init();    
});