Medal Shockwave

<div class="nuda-cc2-medal-shockwave" role="img" aria-label="Medal stamping in with a shockwave ring">
  <span class="nuda-cc2-medal-shockwave__ring" aria-hidden="true"></span>
  <span class="nuda-cc2-medal-shockwave__medal" aria-hidden="true">
    <svg viewBox="0 0 24 24" fill="#09090b">
      <path d="M12 2l2.9 6.26L22 9.27l-5 4.87L18.2 22 12 18.56 5.8 22 7 14.14l-5-4.87 7.1-1.01L12 2z"/>
    </svg>
  </span>
</div>

.nuda-cc2-medal-shockwave {
  position: relative;
  width: 150px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #09090b;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  overflow: hidden;
}

.nuda-cc2-medal-shockwave__ring {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: 3px solid #e4ff54;
  opacity: 0;
  transform: scale(.3);
  will-change: transform,opacity;
  animation: _nuda-cc2medalring 4s ease-out infinite;
}

.nuda-cc2-medal-shockwave__medal {
  position: relative;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%,#fff6c4,#e4ff54 50%,#b9c93f);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(-70px) scale(.6) rotate(-15deg);
  will-change: transform,opacity;
  animation: _nuda-cc2medaldrop 4s cubic-bezier(.34,1.56,.64,1) infinite;
}

.nuda-cc2-medal-shockwave__medal svg {
  width: 28px;
  height: 28px;
}

.nuda-cc2-medal-shockwave__medal::before,.nuda-cc2-medal-shockwave__medal::after {
  content: "";
  position: absolute;
  top: -14px;
  width: 10px;
  height: 20px;
  background: #ff5db1;
  border-radius: 2px;
}

.nuda-cc2-medal-shockwave__medal::before {
  left: 8px;
  transform: rotate(-18deg);
}

.nuda-cc2-medal-shockwave__medal::after {
  right: 8px;
  transform: rotate(18deg);
}

@keyframes _nuda-cc2medaldrop {
  0% {
    opacity: 0;
    transform: translateY(-70px) scale(.6) rotate(-15deg);
  }
  10% {
    opacity: 1;
  }
  45% {
    transform: translateY(6px) scale(1.08) rotate(4deg);
  }
  58% {
    transform: translateY(-3px) scale(.97) rotate(-2deg);
  }
  70% {
    transform: translateY(0) scale(1) rotate(0deg);
  }
  90% {
    transform: translateY(0) scale(1) rotate(0deg);
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateY(-70px) scale(.6) rotate(-15deg);
  }
}

@keyframes _nuda-cc2medalring {
  0%,42% {
    transform: scale(.3);
    opacity: 0;
  }
  48% {
    opacity: .65;
  }
  68% {
    transform: scale(2.3);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cc2-medal-shockwave__medal {
    animation: none;
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
  }
  .nuda-cc2-medal-shockwave__ring {
    animation: none;
    opacity: 0;
  }
}