JSFiddle - React, Tailwind, and code Playground

by sp182

HTML

<div id="apDiv1" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="64" height="64" /></div>
<div id="apDiv2" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="65" height="64" /></div>
<div id="apDiv3" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="64" height="64" /></div>
<div id="apDiv4" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="64" height="64" /></div>
<div id="apDiv5" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="64" height="64" /></div>
<div id="apDiv6" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="65" height="64" /></div>
<div id="apDiv7" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="64" height="64" /></div>
<div id="apDiv8" class="box"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="64" height="64" /></div>
<div id="apDiv9"><img src="http://4.bp.blogspot.com/_UkDBPY_EcP4/TUr43iCI-FI/AAAAAAAADR0/o9rAgCt9d-U/s1600/1242796868203109724Number_1_in_green_rounded_square_svg_med.png" width="100" height="100" /></div>
<div id="apDiv11"></div>

CSS

#apDiv1 {
	position:absolute;
	width:64px;
	height:64px;
	z-index:1;
	left: 553px;
	top: 37px;
}
#apDiv2 {
	position:absolute;
	width:65px;
	height:64px;
	z-index:1;
	left: 696px;
	top: 84px;
}
#apDiv3 {
	position:absolute;
	width:64px;
	height:64px;
	z-index:1;
	left: 737px;
	top: 214px;
}
#apDiv4 {
	position:absolute;
	width:64px;
	height:64px;
	z-index:1;
	left: 686px;
	top: 353px;
}
#apDiv5 {
	position:absolute;
	width:64px;
	height:64px;
	z-index:1;
	left: 552px;
	top: 407px;
}
#apDiv6 {
	position:absolute;
	width:64px;
	height:64px;
	z-index:1;
	left: 411px;
	top: 353px;
}
#apDiv7 {
	position:absolute;
	width:64px;
	height:64px;
	z-index:1;
	left: 368px;
	top: 217px;
}
#apDiv8 {
	position:absolute;
	width:64px;
	height:64px;
	z-index:1;
	left: 414px;
	top: 84px;
}
#apDiv9 {
	position:absolute;
	width:128px;
	height:127px;
	z-index:2;
	left: 520px;
	top: 185px;
}
#apDiv10 {
	position:absolute;
	width:225px;
	height:225px;
	z-index:3;
	left: 457px;
	top: 123px;
}

JavaScript

$(document).ready(function(e) {
    
	$(".box").click(function(){
		var timer = setInterval(animate, 20);
	});
	
	var angles = [90, 45, 315, 270, 225, 135,0,180];
    var unit = 215;
    
    var animate = function(){
        
        $.each($('.box'), function(idx, val){
           
            var rad = angles[idx] * (Math.PI / 180);
			
			$(val).css({
				left: 550 + Math.cos(rad) * unit + 'px',
                top: unit * (1 - Math.sin(rad))  + 'px'
            });
			
            angles[idx]--;
        });
        
    }
    //var timer = setInterval(animate, 20);
	
	
	
});