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="LOGO" 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{opacity:0;fill:#FFFFFF;}
	.st1{fill:#221E20;fill-opacity:0.2;}
	.st2{fill:#384251;}
	.st3{fill:#2A313A;fill-opacity:0.1;}
	.st4{fill:#C75D5C;}
	.st5{opacity:0.2;}
	.st6{fill:#221E20;}
	.st7{fill:#FFFFFF;}
	.st8{opacity:0.3;}
	.st9{fill:#505D73;}
	.st10{fill:#221E20;stroke:#221E20;stroke-miterlimit:10;}
	.st11{display:none;fill:#221E20;}
	.st12{opacity:0.2;fill:#221E20;enable-background:new    ;}
	.st13{fill:#DF985E;}
	.st14{fill:#F5CE86;}
	.st15{fill:#DFDFD0;}
</style>
<path id="UNTERGRUND" class="st0 shadow"...

CSS

.shadow {
  -webkit-filter: drop-shadow( 4px 4px 12px rgba(0, 0, 0, 0.8));
  filter: drop-shadow( 4px 4px 12px rgba(0, 0, 0, 0.8));
  
  -webkit-animation: pulsar 4.5s ease-in-out infinite alternate;
    animation: pulsar 4.5s ease-in-out infinite alternate;
}

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

@-webkit-keyframes pulsar {
    0% {
        -webkit-transform: scale(1.0);
    }
    100% {
        -webkit-transform: scale(1.1);
    }
}

@keyframes pulsar {
    0% {
        transform: scale(1.0);
    }
    100% {
        transform: scale(1.1);
    }
}