JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 173 200" style="enable-background:new 0 0 173 200;" xml:space="preserve" fill="#341f7c">
		<path class="st1" d="M111.8,60L111.8,60l-7.8,4.5l-11.7,6.7l11.7,6.7l7.8,4.5l19.5,11.2V71.2L111.8,60z"/>
		<path class="st1" d="M84.5,44.2L65.1,55.4l0,0v22.5l11.7-6.7l7.8-4.5l0,0L104,55.4L84.5,44.2z"/>
		<path class="st1" d="M37.8,71.2v22.5l0,0l7.8,4.5l11.7,6.7V60L37.8,71.2z"/>
		<path class="st1" d="M65.2,118.4l-7.8-4.5l-19.5-11.2v22.5l19.5,11.2l0,0l7.8-4.5l11.7-6.7L65.2,118.4z"/>
		<path class="st1" d="M92.3,125.2l-7.8,4.5l-19.4,11.2l19.5,11.2l19.5-11.2l0,0v-22.5L92.3,125.2z"/>
		<path class="st1" d="M123.6,98.2l-11.7-6.7v44.9l19.5-11.2v-22.5l0,0L123.6,98.2z"/>
		<path class="st1" d="M94.4,115l9.8-5.6V86.9L84.6,75.7L65.2,86.9v22.5l19.5,11.2L94.4,115z"/>
</svg>

SCSS

@keyframes fade {
  75% { transform: var(--transform); opacity: 0; }
  100% { opacity: 0; }
  0% { transform: translate(0, 0); opacity: 1; }
}

.st1:nth-child(1) {
  --transform: translate(14px, 8px);
}

.st1:nth-child(2) {
  --transform: translate(14px, -8px);
}

.st1:nth-child(3) {
  --transform: translate(0, -16px);
}

.st1:nth-child(4) {
  --transform: translate(-14px, -8px);
}

.st1:nth-child(5) {
  --transform: translate(-14px, 8px);
}

.st1:nth-child(6) {
  --transform: translate(0, 16px);
}

@for $i from 1 through 6 {
  .st1:nth-child(#{$i}) {
    animation: fade .9s cubic-bezier(0.5, 0, 0.75, 0) infinite;
    animation-delay: #{$i * -150ms};
  }
}