JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<div class="spin">
<div class="scalable-div">
	<div class="circle">
	</div>
	<div class="shard-container">
	<img class="svg-img unique-1" id="unique-1" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset1.svg">

	<img class="svg-img" id="unique-2"src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset2.svg">

	<img class="svg-img" id="unique-3" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset3.svg">

	<img class="svg-img" id="unique-4" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset4.svg">
	<img class="svg-img" id="unique-5" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset5.svg">
	<img class="svg-img" id="unique-6" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset6.svg">
	<img class="svg-img" id="unique-7" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset7.svg">
	<img class="svg-img" id="unique-8" src="https://staging.holograph.digital/dyn/_pictures/data-graph/asset8.svg">
	</div>
</div>
</div>

CSS

.shard-container {
	margin: auto;
	position: relative;
	  top: 25%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  width: 500px;
  height: 500px;
  left: 25%;
}

.circle {
	height: 200px;
	width: 200px;
	border-radius: 100px;
	position: relative;
	z-index: 10;
	background: white;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	right: 0;
	margin: auto;
}

.svg-img {
	position: absolute;
	height: 60%;
}

#unique-1 {
	left: 0%;
}

#unique-2 {
	 left: 9.5%;
	 z-index: 2;
}

#unique-3 {
	left: 9.5%;
}

#unique-4 {
	left: 9.5%;
	top: 14.2%;
}

#unique-5 {
	top: 18%;
	z-index: 2;
	left: 9.5%
}

#unique-6 {
	top: 21%;
	left: 10%;
}

#unique-7 {
	top: 21%;
	left: 8%;
}

#unique-8 {
	top: 21%;
	left: 2%;
	z-index: -1;
}

.scalable-div {
    position: absolute;
    margin: auto;
    width: 550px;
	height: 550px;
	/*
	     -webkit-animation: mymove 20s infinite; /* Safari 4.0 - 8.0 */
   animation: mymove 20s infinite;
	     -webkit-animation-timing-function: 20s linear; /* Safari 4.0 - 8.0 */
   animation-timing-function: linear;
	background: white;
}
	/*
}


@-webkit-keyframes mymove {
    25% {transform:scale(0.75);}
    50% {transform:scale(1);}
	 75% {transform:scale(0.75);}
    100% {transform:scale(1);}
}

@keyframes mymove {
    25% {transform:scale(0.75);}
    50% {transform:scale(1);}
	 75% {transform:scale(0.75);}
    100% {transform:scale(1);}
}

*/

.spin {
	width:550px;
	height: 550px;
	position: relative;
	/*
	-webkit-animation:spin 6s linear infinite;
    -moz-animation:spin 6s linear infinite;
    animation:spin 6s linear infinite;
	margin: auto;
	*/
}
/*
@-moz-keyframes spin { 50% { -moz-transform: rotate(90deg); } }
@-webkit-keyframes spin { 50% { -webkit-transform: rotate(90deg); } }
@keyframes spin { 50% { -webkit-transform: rotate(90deg); transform:rotate(90deg); } }
*/

JavaScript

function randomly_animate_object_height(){
	var $objects = $(".svg-img");
	setInterval(function(){
		var random_index = Math.floor(Math.random() * $objects.length);
		var $random_obj = $objects.eq( random_index );
		change_position($random_obj)
	}, 1500);
}

function change_position($random_obj) {
console.log($random_obj);
var id = $random_obj.attr("id");
switch (id) {
    case "unique-1":
  $random_obj.animate({top:"-7%"},1500);
 $random_obj.animate({top:"0%"},2000);
        break;
    case "unique-2":
 $random_obj.animate({top:"-9%", left:"15%"},1500);
 $random_obj.animate({top:"0%",left:"9.5%"},2000);
        break;
    case "unique-3":
  $random_obj.animate({top:"-4%", left:"14.5%"},1500);
 $random_obj.animate({top:"0%",left:"9%"},2000);
       break;
    case "unique-4":
  $random_obj.animate({top:"14.2%%", left:"19.5%"},1500);
 $random_obj.animate({top:"14.2%",left:"9.5%"},2000);
        break;
    case "unique-5":
  $random_obj.animate({top:"18%", left:"19.5%"},1500);
 $random_obj.animate({top:"18%",left:"9.5%"},2000);
         break;
    case "unique-6":
  $random_obj.animate({top:"26%", left:"14%"},1500);
 $random_obj.animate({top:"21%",left:"10%"},2000);
          break;
    case "unique-7":
  $random_obj.animate({top:"28%", left:"12%"},1500);
 $random_obj.animate({top:"21%",left:"8%"},2000);
          break;
    case "unique-8":
  $random_obj.animate({top:"29%", left:"2%"},1500);
 $random_obj.animate({top:"21%",left:"2%"},2000);
 };
}

randomly_animate_object_height();