Onda expansiva

<div class="ripple">
  <div class="ripple__circle ripple__circle_base"></div>
  <div class="ripple__circle ripple__circle_wave"></div>
</div>

<style>
.ripple {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(59, 130, 246, 0.08));
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.ripple__circle {
  border-radius: 50%;
  border: 2px solid rgba(59, 130, 246, 0.5);
}

.ripple__circle_base {
  width: 40px;
  height: 40px;
  background: #3b82f6;
  box-shadow: 0 0 18px rgba(59, 130, 246, 0.6);
}

.ripple__circle_wave {
  position: absolute;
  width: 40px;
  height: 40px;
  animation: rippleWave 1.6s ease-out infinite;
}

@keyframes rippleWave {
  0% {
    transform: scale(0.6);
    opacity: 0.6;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}
</style>