JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<div class="icon circle-animation">
  <svg version="1.1" id="Assess__x26__Prevent" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
       x="0px" y="0px" viewBox="0 0 1200 1200" style="enable-background:new 0 0 1200 1200;"
       xml:space="preserve">
    <g>
      <path style="fill:#083143;" d="M599.1,132c63.9,0,125.8,12.5,184,37.1c56.3,23.8,106.9,57.9,150.3,101.4
                                     c43.5,43.5,77.6,94,101.4,150.3c24.6,58.2,37.1,120.1,37.1,184s-12.5,125.8-37.1,184c-23.8,56.3-57.9,106.9-101.4,150.3
                                     c-43.5,43.5-94,77.6-150.3,101.4c-58.2,24.6-120.1,37.1-184,37.1s-125.8-12.5-184-37.1c-56.3-23.8-106.9-57.9-150.3-101.4
                                     c-43.5-43.5-77.6-94-101.4-150.3c-24.6-58.2-37.1-120.1-37.1-184s12.5-125.8,37.1-184c23.8-56.3,57.9-106.9,101.4-150.3
                                     c43.5-43.5,94-77.6,150.3-101.4C473.3,144.5,535.2,132,599.1,132 M599.1,24C278.3,24,18.3,284,18.3,604.8s260,580.8,580.8,580.8
                                     s580.8-260,580.8-580.8S919.8,24,599.1,24L599.1,24z"/>
    </g>
    <g>
      <path style="fill:#FFFFFF;" d="M601.6,1010.4V702.8c53.5-6,100.1-34.5,130.3-75.8l206.2,84.1l13.3-39.5l-198.5-80.9
                                     c26.9-62.3,18.4-135.4-25.6-190.7l232.6-233.7c-11-8.8-22.5-17-34.2-24.8L697.8,370.4c-90.5-72.7-223-46.3-280,53.7L117.9,295
                                     c-8,11.6-15.5,23.5-22.5,35.7l305.9,131.6c-17.5,57.6-6.6,121.8,33.4,171.5L203.8,864.3c7.7,11.7,16,23.1,24.7,34.2l235.8-235.2
                                     c26.9,21.4,59.7,35.6,95.7,39.6v307.6H601.6z"/>
    </g>
    <g class="circles">
      <circle style="fill:#55B13A;" cx="934.6" cy="683.5" r="84.7"/>
      <circle style="fill:#55B13A;" cx="579.9" cy="988.6" r="84.7"/>
      <circle style="fill:#55B13A;" cx="102" cy="306.9" r="84.7"/>
      <circle style="fill:#55B13A;" cx="934.6" cy="161.3" r="84.7"/>
    </g>
  </svg>
</div>
<div...

CSS

@keyframes circles {
  0%, 100% {
    transform: scale(0.7);
    transform-origin: center center;
  }

  33%, 66% {
    transform: scale(1);
    transform-origin: center center;
  }
}

@keyframes signals {
  0, 100% {
    opacity: 0;
  }

  33%, 66% {
    opacity: 1;
  }
}

@keyframes signals-outer {
  33%, 66% {
    opacity: 0;
  }

  0, 100% {
    opacity: 1;
  }
}

@keyframes dots {
  0, 100% {
    opacity: 0;
  }

  33%, 66% {
    opacity: 1;
  }
}

.icon {
  width: 45vmin;
  display: inline-block;
}

.circle-animation,
.signal-animation,
.dot-animation {
  will-change: transform;
}

.circle-animation circle:nth-child(3) {
  animation: circles 3s infinite;
}

.signal-animation .inner-signal path {
  animation: signals 3s infinite;
}

.signal-animation .outer-signal path {
  animation: signals-outer 3s infinite;
}

.dot-animation .dots rect {
  animation: dots 3s infinite;
}