Хвильова сфера

<div class="wave-orb">
  <span class="wave-orb__ring"></span>
  <span class="wave-orb__core"></span>
</div>

<style>
.wave-orb{position:relative;width:110px;height:110px;display:grid;place-items:center;}
.wave-orb__ring{
  position:absolute;width:100%;height:100%;border-radius:50%;
  border:2px solid rgba(91,141,239,0.25);animation:wave-orb 2.4s ease-out infinite;
}
.wave-orb__core{
  width:32px;height:32px;border-radius:50%;
  background:radial-gradient(circle at 30% 30%,#5b8def,#9a6bff);
  box-shadow:0 0 20px rgba(91,141,239,.25),0 0 0 6px rgba(91,141,239,.12);
  animation:wave-core 1.6s ease-in-out infinite;
}
@keyframes wave-orb{0%{transform:scale(.65);opacity:.7;}70%{transform:scale(1.2);opacity:0;}100%{opacity:0;}}
@keyframes wave-core{0%,100%{transform:scale(1);}50%{transform:scale(1.12);}}
</style>