Rainbow After Rain

<!-- Rainbow After Rain (concentric arcs, a moving sheen, and fading drops) -->
<div class="nuda-wa2-rainbow" role="img" aria-label="Rainbow arcing over fading rain">
  <span class="nuda-wa2-rainbow__sun"></span>
  <span class="nuda-wa2-rainbow__arc nuda-wa2-rainbow__arc--1"></span>
  <span class="nuda-wa2-rainbow__arc nuda-wa2-rainbow__arc--2"></span>
  <span class="nuda-wa2-rainbow__arc nuda-wa2-rainbow__arc--3"></span>
  <span class="nuda-wa2-rainbow__arc nuda-wa2-rainbow__arc--4"></span>
  <span class="nuda-wa2-rainbow__arc nuda-wa2-rainbow__arc--5"></span>
  <span class="nuda-wa2-rainbow__arc nuda-wa2-rainbow__arc--6"></span>
  <span class="nuda-wa2-rainbow__shine"></span>
  <span class="nuda-wa2-rainbow__drop" style="left:8%;  --rb-d:0s"></span>
  <span class="nuda-wa2-rainbow__drop" style="left:16%; --rb-d:.3s"></span>
  <span class="nuda-wa2-rainbow__drop" style="left:24%; --rb-d:.6s"></span>
  <span class="nuda-wa2-rainbow__drop" style="left:32%; --rb-d:.9s"></span>
  <span class="nuda-wa2-rainbow__drop" style="left:40%; --rb-d:1.2s"></span>
</div>

.nuda-wa2-rainbow {
  position: relative;
  width: 100%;
  max-width: 220px;
  height: 130px;
  border-radius: 14px;
  overflow: hidden;
  background: linear-gradient(180deg,#101418,#09090b);
}

.nuda-wa2-rainbow__sun {
  position: absolute;
  top: 10px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle,#fafafa,#e4ff54 70%,transparent 80%);
  opacity: .9;
}

.nuda-wa2-rainbow__arc {
  position: absolute;
  left: 50%;
  bottom: -60px;
  border-radius: 50%;
  border-style: solid;
  border-color: transparent;
  transform: translateX(-50%);
}

.nuda-wa2-rainbow__arc--1 {
  width: 260px;
  height: 260px;
  bottom: -150px;
  border-top-width: 10px;
  border-top-color: rgba(168,85,247,.55);
}

.nuda-wa2-rainbow__arc--2 {
  width: 236px;
  height: 236px;
  bottom: -136px;
  border-top-width: 10px;
  border-top-color: rgba(59,130,246,.55);
}

.nuda-wa2-rainbow__arc--3 {
  width: 212px;
  height: 212px;
  bottom: -122px;
  border-top-width: 10px;
  border-top-color: rgba(34,211,238,.55);
}

.nuda-wa2-rainbow__arc--4 {
  width: 188px;
  height: 188px;
  bottom: -108px;
  border-top-width: 10px;
  border-top-color: rgba(34,197,94,.55);
}

.nuda-wa2-rainbow__arc--5 {
  width: 164px;
  height: 164px;
  bottom: -94px;
  border-top-width: 10px;
  border-top-color: rgba(228,255,84,.65);
}

.nuda-wa2-rainbow__arc--6 {
  width: 140px;
  height: 140px;
  bottom: -80px;
  border-top-width: 10px;
  border-top-color: rgba(239,68,68,.55);
}

.nuda-wa2-rainbow__shine {
  position: absolute;
  top: 0;
  left: -40%;
  width: 40%;
  height: 100%;
  background: linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent);
  will-change: transform;
  animation: _nuda-wa2rainbowShine 6s ease-in-out infinite;
}

.nuda-wa2-rainbow__drop {
  position: absolute;
  top: 0;
  width: 1px;
  height: 14px;
  background: linear-gradient(180deg,transparent,rgba(255,255,255,.35));
  opacity: .5;
  will-change: transform,opacity;
  animation: _nuda-wa2rainbowDrop 1.6s linear var(--rb-d,0s) infinite;
}

@keyframes _nuda-wa2rainbowShine {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(340%);
  }
}

@keyframes _nuda-wa2rainbowDrop {
  0% {
    transform: translateY(-14px);
    opacity: 0;
  }
  20% {
    opacity: .5;
  }
  100% {
    transform: translateY(90px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-wa2-rainbow__shine,.nuda-wa2-rainbow__drop {
    animation: none;
    opacity: .15;
  }
}