JSFiddle - React, Tailwind, and code Playground

by kthornbloom

HTML

<div class="wrap">


<svg version="1.1" id="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="250px" height="250px" viewBox="0 0 250 250" enable-background="new 0 0 250 250" xml:space="preserve">
<g>
	<path id="border" fill="none" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" d="M124.5,246.5c-31.733,0-63.916-3.977-95.654-11.82c-5.948-1.51-12.514-8.076-14.034-14.048
		C-0.864,157.183-0.864,92.817,14.818,29.346c1.516-5.953,8.082-12.52,14.045-14.031C60.585,7.477,92.768,3.5,124.5,3.5
		s63.918,3.977,95.661,11.818c5.943,1.508,12.505,8.073,14.023,14.047c15.681,63.453,15.681,127.817-0.005,191.287
		c-1.515,5.951-8.076,12.518-14.037,14.032C188.419,242.523,156.233,246.5,124.5,246.5z"/>
</g>
<g>
	<polygon class="logo-middle" fill="#6E984C" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="62.605,166.236 84.998,156.601 113.057,168.72 62.605,190.516 	"/>
</g>
<g>
	<polygon class="logo-middle" fill="#6E984C" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="62.605,137.798 62.605,113.704 84.964,104.045 112.878,116.11 95.293,123.662 95.293,127.587 
		97.072,128.434 160.167,155.701 186.397,166.995 186.397,191.275 	"/>
</g>
<g>
	<polygon class="logo-middle" fill="#6E984C" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="136.107,135.408 153.706,127.852 153.706,123.9 151.892,123.059 88.833,95.803 62.605,84.508 
		62.605,60.225 186.397,113.704 186.397,137.798 164.013,147.468 	"/>
</g>
<g>
	<polygon class="logo-middle" fill="#6E984C" stroke="#fff" stroke-width="3" stroke-linecap="round" stroke-miterlimit="10" points="135.919,82.031 186.397,60.225 186.397,84.508 163.987,94.159 	"/>
</g>
</svg>
<div id="shadow">
</div>
</div>

CSS

body {
  background: radial-gradient(#659548, #8CAB46);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  -webkit-perspective:1200;
}
.wrap {
  text-align:center;
  margin-bottom:-200px;
}
#logo {
  animation: rotate 8s linear infinite;
}

#border {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: dash 3s ease-in alternate infinite;
  animation-fill-mode: forwards;
}

.logo-middle {
  stroke-dasharray: 500;
  stroke-dashoffset: 500;
  animation: dash2 4s ease-in alternate infinite;
  animation-fill-mode: forwards;
}

@keyframes dash {
  from {
    stroke-dashoffset: 1000;
    fill:#6E984C;
  }
  to {
    stroke-dashoffset: 0;
    fill:#2A2E32;
    box-shadow: 0 0 20px #fff;
  }
}

@keyframes dash2 {
  from {
    stroke-dashoffset: 500;
  }
  to {
    stroke-dashoffset: 0;
    box-shadow: 0 0 20px #fff;
  }
}

@keyframes rotate {
    0%   {transform: rotateY(0deg)}
    25% {transform: rotateY(30deg)}
    50% {transform: rotateY(0deg)}
    75% {transform: rotateY(-30deg)}
    100% {transform: rotateY(0deg)}
}

#shadow {
  width:200px;
  height:200px;
  background:radial-gradient(rgba(0,0,0,.3), transparent 70%);
  border-radius:50%;
  transform-origin:top;
  transform:rotateX(-80deg);
  margin:0 auto;
}