JSFiddle - React, Tailwind, and code Playground
HTML
<img src="https://img.clipartfest.com/bdaa48cee45dde7a22d715ece7f549c0_free-man-flying-a-rocket-rocket-man-clipart_2000-1778.png" height="82" width="82"
id="friends"/>
CSS
#friends { position: absolute; }
JavaScript
var t = 0;
var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
function moveit() {
t += 0.01;
var r = 100;
var xcenter = width*0.5;
var ycenter = 100;
var newLeft = (Math.floor(xcenter + ( 1*r*Math.tan(t))));
var newTop = (Math.floor(ycenter + (r*Math.sin(t))));
if(newLeft < xcenter && newTop<r ){newTop=2*r-newTop}
if(newLeft > xcenter && newTop>r ){newTop=2*r-newTop}
$('#friends').animate({
top: newTop,
left: newLeft,
}, 1, function() {
moveit();
});
}
moveit();