JSFiddle - React, Tailwind, and code Playground

by Callum Barclay

HTML

<div class="box">
    <div class="circle c1" id="c1">
        <span class="text" id ="agariotext">agar.io</span>
    </div>
    <div class="circle c2" id="c2"></div>
    <div class="circle c3" id="c3"></div>
</div>

CSS

.box{
    width:100%;
    height:100%;
    background-image:url(http://a.thumbs.redditmedia.com/Qhd1HvOkIcWlfItpkuEhMT-pN6oYcnefu1GAtjpi2c4.png);
    position:absolute;
    display:block;
}

.c1{
    width:150px;
    height:150px;
    
    -moz-border-radius: 75px;
	-webkit-border-radius: 75px;
	border-radius: 75px;
    
    border: 5px solid #85E70B;
    background-color:#91FF0D;
    
    text-align: center;
    vertical-align: middle;
    line-height: 150px;
    
    font-size:50px;
    
    position:relative;
}

.c2{
    width:100px;
    height:100px;
    
    -moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	border-radius: 50px;
    
    border: 5px solid #9E4909;
    background-color:#D9732C;

    position:relative;
}

.c3{
    width:80px;
    height:80px;
    
    -moz-border-radius: 40px;
	-webkit-border-radius: 40px;
	border-radius: 40px;
    
    border: 5px solid #295199;
    background-color:#D9732C;
    
    background-size:80px 80px;
    
    position:relative;
    
    top: -100px;
    left:120px;
}

JavaScript

function getRandomImage(){
    var c3 = document.getElementById("c3");    
    var skinsStr = "poland;usa;china;russia;canada;australia;spain;brazil;germany;ukraine;france;sweden;hitler;north korea;south korea;japan;united kingdom;earth;greece;latvia;lithuania;estonia;finland;norway;cia;maldivas;austria;nigeria;reddit;yaranaika;confederate;9gag;indiana;4chan;italy;ussr;bulgaria;tumblr;2ch.hk;hong kong;portugal;jamaica;german empire;mexico;sanik;switzerland;croatia;chile;indonesia;bangladesh;thailand;iran;iraq;peru;moon;botswana;bosnia;netherlands;european union;taiwan;pakistan;hungary;satanist;qing dynasty;matriarchy;patriarchy;feminism;ireland;texas;facepunch;prodota;cambodia;steam;piccolo;ea;india;kc;denmark;quebec;ayy lmao;sealand;bait;tsarist russia;origin;vinesauce;stalin;belgium;luxembourg;stussy;prussia;8ch;argentina;scotland;sir;romania;belarus;wojak;doge;nasa;byzantium;imperial japan;french kingdom;somalia;turkey;mars;pokerface;8";
    var skinsArr = skinsStr.split(";");
    var skin = skinsArr[Math.floor(Math.random()*skinsArr.length)];
    var skinPath = "http://agar.io/skins/" + skin.toString() + ".png";

    c3.style.backgroundImage = "url(" + skinPath + ")";
}


function makeNewPosition(){
    var r1 = Math.floor(Math.random() * ($(window).height()-150));
    var r2 = Math.floor(Math.random() * ($(window).width()-150));
    var r3 = Math.floor(Math.random() * ($(window).height()-100));
    var r4 = Math.floor(Math.random() * ($(window).width()-100));
    var r5 = Math.floor(Math.random() * ($(window).height()-80));
    var r6 = Math.floor(Math.random() * ($(window).width()-80));
    return [r1, r2, r3, r4, r5, r6];
}



function animateDiv(){
    var pos = makeNewPosition();
    $('#c1').animate({ top: pos[0], left: pos[1] }, 5000, function(){
        $('#c2').animate({ top: pos[2], left: pos[3] }, 5000);
        $('#c3').animate({ top: pos[4], left: pos[5] }, 5000);
        animateDiv();        
    });
    
};

getRandomImage();
animateDiv();