JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sun" ></div>
<div id='round' ></div>

CSS

#round {
   width: 20px;
   height: 20px;
   border-radius: 10px;
   background-color: blue;
   position: absolute;
   top: 100px;
   left: 200px;
   z-index: -1;
}

#sun{
   width: 50px;
   height: 50px;
   border-radius: 25px;
   background-color: orange;
   position: absolute;
   top: 80px;
   left: 200px;
}

JavaScript

var PObject = function(x,y,r){

    this.x = x||0;
    this.y = y||0;
    this.r = r||0;
    this.xv = 0;
    this.yv = 0;
    
};
var o1 = new PObject(50,50,50);


var k = 0;

setInterval(function(){
    o1.x+=0.1;
    var sinx = 200+100*Math.sin(o1.x);
    var cosx = 20+10*Math.cos(o1.x);
    var z = +1;
    if(cosx<20){
     z = -1;   
    }
    $("#round").css({left: sinx, width: cosx,height: cosx, borderRadius: 0.5*cosx,zIndex: z});
},100);