Soundwave Pulse

<div class="nuda-spulse">
  <span class="nuda-spulse__ring"></span>
  <span class="nuda-spulse__ring"></span>
  <span class="nuda-spulse__ring"></span>
  <div class="nuda-spulse__core">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor"
         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
      <path d="M3 12h2M21 12h-2M7 7v10M11 4v16M15 7v10M19 10v4" />
    </svg>
  </div>
</div>

.nuda-spulse {
  position: relative;
  width: 54px;
  height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.nuda-spulse__core {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #e4ff54;
  color: #09090b;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  box-shadow: 0 0 16px rgba(228,255,84,.5);
}

.nuda-spulse__core svg {
  width: 16px;
  height: 16px;
}

.nuda-spulse__ring {
  position: absolute;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #e4ff54;
  opacity: 0;
  animation: _spulseRing 2.4s ease-out infinite;
}

.nuda-spulse__ring:nth-child(2) {
  animation-delay: .8s;
}

.nuda-spulse__ring:nth-child(3) {
  animation-delay: 1.6s;
}

@keyframes _spulseRing {
  0% {
    transform: scale(1);
    opacity: .7;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-spulse__ring {
    animation: none;
  }
}