JSFiddle - React, Tailwind, and code Playground

by libinvbabu

HTML

<div id="friends">bob</div>
<div id="friends2">amy</div>
<div id="friends3">jaise</div>
<div id="friends4">libin</div>

CSS

#friends,#friends2,#friends3,#friends4 { position:fixed }

JavaScript

var p = 0;

function moveit() {
    p += 0.02;

    var r = 100;
    var xcenter = 150;
    var ycenter = 150;

    
    var newLeft = Math.floor(xcenter + (r* Math.cos(p+90)));
    var newTop = Math.floor(ycenter + (r * Math.sin(p+90)));
    var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p+90)));
    var newTop1 = Math.floor(ycenter + -(r * Math.sin(p+90)));
     var newLeft2 = Math.floor(ycenter + (r* Math.cos(p+170)));
    var newTop2 = Math.floor(xcenter + (r* Math.sin(p+170)));
     var newLeft3 = Math.floor(ycenter + -(r* Math.cos(p+170)));
    var newTop3 = Math.floor(xcenter + -(r* Math.sin(p+170)));
    
    
    $('#friends').animate({
            top: newTop,
            left: newLeft,
        }, 10, function() {
            moveit()
                });
    $('#friends2').animate({
        top: newTop1,
        left: newLeft1,
    },10, function() {
        moveit();
    });
    $('#friends3').animate({
        top: newTop2,
        left: newLeft2,
    },10, function() {
        moveit();
    });
    $('#friends4').animate({
        top: newTop3,
        left: newLeft3,
    },10, function() {
        moveit();
    });
 }
$(document).ready(function() {
    moveit();    
});