Sparkler Fountain

<div class="nuda-cc2-sparkler-fountain" role="img" aria-label="Sparkler fountain of sparks">
  <span class="nuda-cc2-sparkler-fountain__stick" aria-hidden="true">
    <span class="nuda-cc2-sparkler-fountain__tip" aria-hidden="true"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:-18px; --ty:-22px; --dur:.8s; --d:0s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:4px;   --ty:-28px; --dur:1s;  --d:.15s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:20px;  --ty:-14px; --dur:.7s; --d:.3s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:22px;  --ty:6px;   --dur:.9s; --d:.45s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:-6px;  --ty:20px;  --dur:1.1s;--d:.6s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:-22px; --ty:4px;   --dur:.8s; --d:.75s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:-10px; --ty:-30px; --dur:1s;  --d:.9s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:14px;  --ty:-34px; --dur:.7s; --d:1.05s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:28px;  --ty:-4px;  --dur:.9s; --d:1.2s"></span>
    <span class="nuda-cc2-sparkler-fountain__spark" aria-hidden="true" style="--tx:-2px;  --ty:26px;  --dur:.8s; --d:1.35s"></span>
  </span>
</div>

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

.nuda-cc2-sparkler-fountain__stick {
  position: relative;
  width: 4px;
  height: 86px;
  border-radius: 2px;
  background: linear-gradient(180deg,#d8d8d8,#8a8a8a);
  transform: rotate(14deg);
}

.nuda-cc2-sparkler-fountain__tip {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  border-radius: 50%;
  background: #fff6c4;
  box-shadow: 0 0 10px 4px rgba(228,255,84,.8),0 0 22px 8px rgba(228,255,84,.35);
}

.nuda-cc2-sparkler-fountain__spark {
  position: absolute;
  top: -6px;
  left: 50%;
  width: 3px;
  height: 3px;
  margin-left: -1.5px;
  border-radius: 50%;
  background: #fff2a8;
  box-shadow: 0 0 5px 1px rgba(255,220,120,.9);
  opacity: 0;
  will-change: transform,opacity;
  animation: _nuda-cc2sparklershoot var(--dur) linear var(--d) infinite;
}

@keyframes _nuda-cc2sparklershoot {
  0% {
    opacity: 0;
    transform: translate(0,0) scale(1);
  }
  6% {
    opacity: 1;
  }
  60% {
    opacity: .6;
  }
  100% {
    opacity: 0;
    transform: translate(var(--tx),var(--ty)) scale(.3);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-cc2-sparkler-fountain__spark {
    animation: none;
    opacity: 0;
  }
}