JSFiddle - React, Tailwind, and code Playground

by Sebastian Kay

HTML

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg class="shadow" version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 600 380" style="enable-background:new 0 0 600 380;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#221E20;fill-opacity:0.2;}
	.st1{
background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 50%,rgba(128,186,232,0) 99%,rgba(125,185,232,0) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff',
endColorstr='#007db9e8',GradientType=1 ); 
}
	.st2{fill:#2A313A;fill-opacity:0.1;}
	.st3{fill:#C75D5C;}
	.st4{opacity:0.2;}
	.st5{fill:#221E20;}
	.st6{fill:#FFFFFF;}
	.st7{opacity:0.3;}
	.st8{fill:#505D73;}
	.st9{fill:#221E20;stroke:#221E20;stroke-miterlimit:10;}
	.st10{fill:none;}
	.st11{display:none;fill:#221E20;}
	.st12{opacity:0.2;fill:#221E20;}
	.st13{fill:#DF985E;}
	.st14{fill:#F5CE86;}
	.st15{fill:#DFDFD0;}
  
</style>
<g id="Ebene_2">
	<g>
		<g id="KREISE">
			<g>
				<path class="st0"...

CSS

.RAKETE {
animation: myOrbit 2.5s linear infinite;
-webkit-filter: drop-shadow( 4px 4px 9px rgba(0, 0, 0, 1.9));
  filter: drop-shadow( 6px 6px 8px rgba(0, 0, 0, 1.9));
}



@keyframes myOrbit {
    from { transform: rotate(0deg) translateX(5px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(5px) rotate(-360deg); }
}


  @keyframes yAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
      animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
  }

  @-webkit-keyframes yAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
      animation-timing-function: cubic-bezier(0.02, 0.01, 0.21, 1);
      -webkit-transform: translateY(-10px);
      transform: translateY(-10px);
    }
  }

  @keyframes xAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
      animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
  }

  @-webkit-keyframes xAxis {
    50% {
      -webkit-animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
      animation-timing-function: cubic-bezier(0.3, 0.27, 0.07, 1.64);
      -webkit-transform: translateX(10px);
      transform: translateX(10px);
    }
  }
  
  .shadow {
  -webkit-filter: drop-shadow( 4px 4px 12px rgba(0, 0, 0, .6));
  filter: drop-shadow( 6px 6px 12px rgba(0, 0, 0, .6));
}