JSFiddle - React, Tailwind, and code Playground

by Vasilii Chugunov

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 768 360" style="enable-background:new 0 0 768 360;" xml:space="preserve">
<g id="Слой_1">
</g>
<g id="Слой_5">
	<g id="ushko">
		<path class="st0" d="M506,202.7c-0.3-0.1-0.6-0.2-0.8-0.3c-2.4-3,16.6-26,17.6-28.4s-1-0.2-3.4,1.2c12-24,2.6-36.8-7.4-41.2
			s-24.8,9.6-27,13.2c0-3,2.2-4.6-2-2.2s-3.6,8.6-24.8,10c-4,0.3-7-0.2-9.7-0.6c-2.2,3.3-10.7,9.7-10.4,19.2c0.3,9.4,0.2,23,17,31
			s40.6,7.1,43.3,3.6c2.7-3.6,6.1-5.5,6.8-5.7L506,202.7z"/>
		<path class="st1"...

CSS

#ushko {
  /* transition:all 1s; */
  animation: shake  3s infinite ease-in-out;
  transform-origin:30% 70%;  
}
@keyframes shake {
  0% {transform: rotate(0deg);}
  75% {transform: rotate(0deg);}
  80% {transform: rotate(20deg);}
  90% {transform: rotate(0deg);}
  95% {transform: rotate(20deg);}
  100% {transform: rotate(0deg);}
}
#nouse {
   /* transition:all 1s; */
  animation: shake2 1.5s infinite ease-in-out;
  transform-origin:50% 50%;  
}
@keyframes shake2 {
  0% {transform: rotate(0deg);}
  75% {transform: rotate(0deg);}
  80% {transform: rotate(5deg);}
  90% {transform: rotate(0deg);}
  95% {transform: rotate(-5deg);}
  100% {transform: rotate(0deg);}
}
#bee {
   /* transition:all 1s; */
  animation: shake3 1.5s infinite ease-in-out;
  transform-origin:50% 50%;  
}
@keyframes shake3 {
  0% {transform: translate(-100px,-100px);}
  75% {transform: translate(0px,0px);}
  100% {transform: translate(-100px,-100px);}
}
 ...