JSFiddle - React, Tailwind, and code Playground

by libinvbabu

HTML

<div id="friends"><img src="http://www.dionc.org/images/person.png" alt="" /></div>

<div id="friends2"><img src="http://www.my-calorie-counter.com/images/female_avatar.gif" alt="" /></div>

<div id="love"><img src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/41803_126516517418569_1074073715_q.jpg" alt="" /></div>

CSS

#friends,#friends2 { 
    position:fixed;
}

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

JavaScript

var p = 0;

function moveit() {
    p += .02;

    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)));
    var newLeft1 = Math.floor(xcenter + -(r* Math.cos(p)));
    var newTop1 = Math.floor(ycenter + -(r * Math.sin(p)));
    
    $('#friends').animate({
            top: newTop,
            left: newLeft,
        }, 10, function() {
            moveit()
                });
    $('#friends2').animate({
        top: newTop1,
        left: newLeft1,
    },10, function() {
        moveit();
    });
 }
$(document).ready(function() {
    moveit();    
});