JSFiddle - React, Tailwind, and code Playground

by Trina Lu

HTML

<svg class="flash-burst flash-burst--1 poa" xmlns="http://www.w3.org/2000/svg" width="176.4" height="176.4" viewBox="0 0 176.4 121.3">
  <path class="st0 flash-burst-path" d="M66.5,69.3c-1.4,0-2.5-1.1-2.5-2.5v-8c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5v8C69,68.2,67.9,69.3,66.5,69.3z M90.5,69.3c-0.6,0-1.3-0.2-1.8-0.7l-16-16c-1-1-1-2.6,0-3.5s2.6-1,3.5,0l16,16c1,1,1,2.6,0,3.5C91.8,69.1,91.2,69.3,90.5,69.3z M42.5,69.3c-0.6,0-1.3-0.2-1.8-0.7c-1-1-1-2.6,0-3.5l16-16c1-1,2.6-1,3.5,0c1,1,1,2.6,0,3.5l-16,16C43.8,69.1,43.2,69.3,42.5,69.3z M90.5,45.3h-8c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5h8c1.4,0,2.5,1.1,2.5,2.5S91.9,45.3,90.5,45.3z M50.5,45.3h-8c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5h8c1.4,0,2.5,1.1,2.5,2.5S51.9,45.3,50.5,45.3z M74.5,37.3c-0.6,0-1.3-0.2-1.8-0.7c-1-1-1-2.6,0-3.5l16-16c1-1,2.6-1,3.5,0c1,1,1,2.6,0,3.5l-16,16C75.8,37.1,75.2,37.3,74.5,37.3z M58.5,37.3c-0.6,0-1.3-0.2-1.8-0.7l-16-16c-1-1-1-2.6,0-3.5c1-1,2.6-1,3.5,0l16,16c1,1,1,2.6,0,3.5C59.8,37.1,59.2,37.3,58.5,37.3z M66.5,29.3c-1.4,0-2.5-1.1-2.5-2.5v-8c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5v8C69,28.2,67.9,29.3,66.5,29.3z"></path>
  <circle class="st0 flash-burst-path" cx="148.7" cy="101" r="4"></circle>
</svg>
<svg class="flash-burst flash-burst--1 poa" xmlns="http://www.w3.org/2000/svg" width="176.4" height="176.4" viewBox="0 0 176.4 121.3">
  <path class="st1 flash-burst-path" d="M66.5,69.3c-1.4,0-2.5-1.1-2.5-2.5v-8c0-1.4,1.1-2.5,2.5-2.5s2.5,1.1,2.5,2.5v8C69,68.2,67.9,69.3,66.5,69.3z M90.5,69.3c-0.6,0-1.3-0.2-1.8-0.7l-16-16c-1-1-1-2.6,0-3.5s2.6-1,3.5,0l16,16c1,1,1,2.6,0,3.5C91.8,69.1,91.2,69.3,90.5,69.3z M42.5,69.3c-0.6,0-1.3-0.2-1.8-0.7c-1-1-1-2.6,0-3.5l16-16c1-1,2.6-1,3.5,0c1,1,1,2.6,0,3.5l-16,16C43.8,69.1,43.2,69.3,42.5,69.3z M90.5,45.3h-8c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5h8c1.4,0,2.5,1.1,2.5,2.5S91.9,45.3,90.5,45.3z M50.5,45.3h-8c-1.4,0-2.5-1.1-2.5-2.5s1.1-2.5,2.5-2.5h8c1.4,0,2.5,1.1,2.5,2.5S51.9,45.3,50.5,45.3z...

CSS

.st0 {
   fill: currentColor;
   stroke: none;
   stroke-width: 5;
   stroke-linecap: round;
   stroke-miterlimit: 10;
   animation: twinkle 0.6s linear infinite;
   opacity:0;
 }
  .st1 {
   fill: currentColor;
   stroke: none;
   stroke-width: 5;
   stroke-linecap: round;
   stroke-miterlimit: 10;
   animation: twinkle 0.6s linear 0.3s infinite;
   opacity:0;
 }
 
 @keyframes twinkle {
   0% {
     opacity: 0;
   }
   50% {
     opacity: 1;
   }
   100% {
     opacity: 0;
   }
 }