JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.staticfile.org/snap.svg/0.3.0/snap.svg-min.js"></script>
<svg version="1.1" id="muzzik-logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="-1200 -1200 3600 3600" enable-background="new 0 0 1200 1200" xml:space="preserve">
<filter  height="130%" id="dropshadow">
	<feGaussianBlur  stdDeviation="5" in="SourceGraphic" result="the-shadow"></feGaussianBlur>
	<!--  stdDeviation is how much to blur  -->
	<feOffset  dy="7" dx="0" in="the-shadow" result="the-shadow"></feOffset>
	<!--  how much to offset  -->
		<feColorMatrix  type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .6 0" in="the-shadow" result="the-shadow">
		</feColorMatrix>
	<feMerge>
		<feMergeNode  in="the-shadow"></feMergeNode>
		<!--  this contains the offset blurred image  -->
		<feMergeNode  in="SourceGraphic"></feMergeNode>
		<!--  this contains the element that the filter is applied to  -->
	</feMerge>
</filter>
<g>
	<defs>
		<circle id="SVGID_1_" cx="600" cy="600" r="600"/>
	</defs>
	<clipPath id="SVGID_2_">
		<use xlink:href="#SVGID_1_"  overflow="visible"/>
	</clipPath>
	<g clip-path="url(#SVGID_2_)">
		<g transform="scale(1.06066017) translate(-36.396102,-36.396102) rotate(45 600 600) ">
			<g class="row">
				<rect x="0" y="0" fill="#F1811E" width="200" height="200"/>
				<rect x="200" y="0" fill="#EE5221" width="200" height="200"/>
				<rect x="400" y="0" fill="#ED4E24" width="200" height="200"/>
				<polygon fill="#ED5026" points="600,0 800,0 600,200 				"/>
				<polygon fill="#DC3729" points="600,200 800,200 800,0 				"/>
				<rect x="800" y="0" fill="#E13A2E" width="200" height="200"/>
				<rect x="1000" y="0" fill="#D53A23" width="200" height="200"/>
			</g>
			<g class="row">
				<rect x="0" y="200" fill="#F18B1A" width="200" height="200"/>
				<rect x="200" y="200" fill="#F1851B" width="200" height="200"/>
				<polygon fill="#F1811E" points="400,200 600,200 400,400 				"/>
				<polygon fill="#DB541E"...

CSS

svg{
		
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%,-50%);
	}
	button{
		font-size: 20px;
		background: #000;
		color: #FFF;
		border: 0;
		width: 100px;
		height: 100px;
		border-radius: 50%;
		outline:none;
		position: relative;
		z-index: 100;
		cursor: pointer;
	}

JavaScript

var svg=$('svg')[0];
	svg=Snap(svg);

	var button=$('button');

	button.click(play);

	function play(){
		var rows=svg.selectAll('.row'),
			timmingFunc=mina.elastic,
			duration=3000;

		rows.forEach(function(row,index){
			for(var i =0;i<row.node.children.length;i++){
				var child=row.node.children[i];
				child=Snap(child);
				if(i<[4,3,5,4,5,3][index]){
					move(child,-500);
				}else{
					move(child,500);
				}
			}
		});

		var circle=svg.select('#SVGID_1_');
		circle.attr({r:2000});
		circle.animate({
			r:600
		},duration,mina.easein);

		function moveRect(child,valuex,valuey){
			var box=child.getBBox(),
				x=box.x,
				y=box.y;

			child.attr('x',x+valuex);
			child.attr('y',y+valuey);
			child.animate({
				x:x,
				y:y
			},duration,timmingFunc)
		};

		function movePolygon(child,valuex,valuey){
			var originPoints=child.attr('points');
			originPoints.splice(6,1);
			var points=originPoints.map(function(point,index){
				if(!(index%2)){
					point=Number(point)+valuex;
				}else{
					point=Number(point)+valuey;
				}
				return point;
			});
			child.attr('points',points);
			child.animate({
				points:originPoints
			},duration,timmingFunc);
		};
		var count=0;
		function move(child,valuex){
				var valuey=valuex*Math.random();
				if(child.type=='rect'){
					moveRect(child,valuex,valuey);
				}else{
					movePolygon(child,valuex,valuey);
				}
		}
	}