JSFiddle - React, Tailwind, and code Playground

by Adam Kinnucane

HTML

<div class="spin">
<div class="scalable-div">
	<div class="circle">
	</div>
	<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>

CSS

.circle {
	height: 200px;
	width: 200px;
	border-radius: 100px;
	position: absolute;
	z-index: 10;
	background: white;
	top: 10%
}

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

#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;
}

JavaScript

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

function get_random_int (min, max, unit) {
    return Math.floor(Math.random() * (max - min + 1)) + min + unit;
}

function change_position(new$) {
console.log(new$);
var id = new$.attr("id");
switch (id) {
    case "unique-1":
        console.log("I AM 1");
        break;
    case 6:
        text = "Today is Saturday";
        break;
    case 0:
        text = "Today is Sunday";
}
}

randomly_animate_object_height();