JSFiddle - React, Tailwind, and code Playground

by ardeay

HTML

<div id="center"></div>

CSS

.circle{
 
    border-radius:40px;
    height: 0px;
    width: 0px;
    position: absolute;
    z-index:3;
      -webkit-transition: all 2s ease;
  -moz-transition: all 2s ease;
  -o-transition: all 2s ease;
  transition: all 2s ease;
background-image:url(http://zesty.jspangler.x.gozesty.com/ui/images/zesty_loading_transparent.gif);      
    background-size: 100%;
}
#center{
    position: absolute;
    top:0px;
    bottom:0px;
     left:0px;
    right:0px; 
background: #1B202C 50% 60% no-repeat url();    
}

JavaScript

var top;
var left;
var destroyElement = function(){
     this.destroy();            
}
    
var createRandomCircle = function(){
 
    top = Math.round(this.getSize().y / 2);
    left =  Math.round(this.getSize().x / 2);
    var box = new Element('div',{'style':'top: '+top+'px; left:'+left+'px;','class':'circle'}).inject(this);
    
    
    var flydog = fly.delay(1,box);
   
    
            
    
}

function fly(){ 
       
var random_num = Math.floor( ( Math.random() * 4) + 1);   
var randomX;
var randomY;
var playX;
var playY;
var en = 0;

switch(random_num){
    // bottom right
    case 1:
        playX = top;
        playY = left;

        randomX = Math.floor( ( Math.random() * (playX + en) ) + playX );
        randomY =  Math.floor( ( Math.random() * (playY + en) ) + playY );    
     
        break;        
    // top left
    case 2:
        playX = top - (top * 1);
        playY = left - (left * 1);
        
        randomX = Math.floor( ( Math.random() * (top - en) ) + playX );
        randomY =  Math.floor( ( Math.random() * (left - en) ) + playY );
          
        break;
// bottome left            
    case 3:
        playX = top - (top * 1);
        playY = left;
        
        randomX = Math.floor( ( Math.random() * (playX - en) ) + playX );
        randomY =  Math.floor( ( Math.random() * (playY + en) ) + playY );
       
        break; 
        //top right
    case 4:
        playX = top;
        playY = left - (left * 1);
        
        randomX = Math.floor( ( Math.random() * (playX + en) ) + playX );
        randomY =  Math.floor( ( Math.random() * (playY - en) ) + playY );
        break;         
        
}
    
    //console.log(playX+' '+playY+' : '+ randomX + ' ' + randomY);  
        var size = Math.floor( (Math.random() * 200 ) + 20);

        this.setStyle('height', size + 'px' );
        this.setStyle('width', size + 'px' );

        this.setStyle('top', randomX + 'px' );

        this.setStyle('left', randomY + 'px' );
    
   ...