Capacity Threshold Alert

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-threshold-title" class="pulsar pulsar-capacity-threshold" data-pulsar="capacity-threshold" role="img" viewBox="0 0 160 96"><title id="capacity-threshold-title">System capacity level rising towards a strict threshold limit line and triggering a breach warning alert</title><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="28" x2="28" y1="20" y2="76"></line><line x1="28" x2="136" y1="76" y2="76"></line><line x1="28" x2="136" y1="56" y2="56" stroke-dasharray="1 3"></line></g><g fill="currentColor" font-family="monospace" font-size="3.5" opacity=".35" text-anchor="end"><text x="24" y="38">85%</text><text x="24" y="58">50%</text><text x="24" y="78">0</text></g><line id="capacity-threshold-line" x1="28" x2="136" y1="36" y2="36" fill="none" stroke="currentColor" stroke-dasharray="3 3" stroke-width="1"></line><g fill="currentColor" font-family="monospace"><text id="capacity-threshold-lbl" x="136" y="32" font-size="4" font-weight="700" opacity=".5" text-anchor="end">LIMIT: 85%</text><text id="capacity-threshold-badge" x="136" y="22" font-size="4.5" font-weight="700" opacity="0" text-anchor="end">BREACH 92%</text></g><rect id="capacity-threshold-fill" width="108" height="18" x="28" y="58" fill="currentColor" opacity=".25"></rect><line id="capacity-threshold-bar" x1="28" x2="136" y1="58" y2="58" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.4"></line><circle id="capacity-threshold-beacon" cx="82" cy="36" r="4.5" fill="currentColor" opacity="0"></circle><circle id="capacity-threshold-ring" cx="82" cy="36" r="7" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>

.pulsar-capacity-threshold {
  --pulsar-accent: currentColor;
}

.pulsar-capacity-threshold #capacity-threshold-line,
.pulsar-capacity-threshold #capacity-threshold-bar,
.pulsar-capacity-threshold #capacity-threshold-ring {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-threshold #capacity-threshold-fill,
.pulsar-capacity-threshold #capacity-threshold-beacon,
.pulsar-capacity-threshold #capacity-threshold-badge {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-threshold #capacity-threshold-bar {
  animation: capacity-threshold-rise 6000ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}

@keyframes capacity-threshold-rise {
  0%,
  15% {
    transform: translateY(0);
  }
  42%,
  72% {
    transform: translateY(-28px);
  }
  90%,
  100% {
    transform: translateY(0);
  }
}

.pulsar-capacity-threshold #capacity-threshold-fill {
  transform-origin: 28px 76px;
  animation: capacity-threshold-fill-grow 6000ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}

@keyframes capacity-threshold-fill-grow {
  0%,
  15% {
    transform: scaleY(1);
    opacity: 0.25;
  }
  42%,
  72% {
    transform: scaleY(2.55);
    opacity: 0.55;
  }
  90%,
  100% {
    transform: scaleY(1);
    opacity: 0.25;
  }
}

.pulsar-capacity-threshold #capacity-threshold-line {
  animation: capacity-threshold-line-flash 6000ms ease-in-out infinite;
}

@keyframes capacity-threshold-line-flash {
  0%,
  35% {
    opacity: 0.4;
    stroke-width: 1;
  }
  45%,
  70% {
    opacity: 1;
    stroke-width: 1.8;
  }
  80%,
  100% {
    opacity: 0.4;
    stroke-width: 1;
  }
}

.pulsar-capacity-threshold #capacity-threshold-badge {
  animation: capacity-threshold-alert 6000ms ease-out infinite;
}

@keyframes capacity-threshold-alert {
  0%,
  38% {
    opacity: 0;
  }
  44%,
  70% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}

.pulsar-capacity-threshold #capacity-threshold-beacon {
  animation: capacity-threshold-dot 6000ms ease-in-out infinite;
}

@keyframes capacity-threshold-dot {
  0%,
  38% {
    opacity: 0;
    transform: scale(0.5);
  }
  44%,
  70% {
    opacity: 0.9;
    transform: scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(0.5);
  }
}

.pulsar-capacity-threshold #capacity-threshold-ring {
  transform-origin: 82px 36px;
  animation: capacity-threshold-wave 6000ms 2400ms ease-out infinite;
}

@keyframes capacity-threshold-wave {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  15% {
    opacity: 0.8;
  }
  40% {
    opacity: 0;
    transform: scale(2.6);
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-threshold * {
    animation: none !important;
  }
  .pulsar-capacity-threshold #capacity-threshold-bar {
    transform: translateY(-28px);
  }
  .pulsar-capacity-threshold #capacity-threshold-fill {
    transform: scaleY(2.55);
    opacity: 0.55;
  }
  .pulsar-capacity-threshold #capacity-threshold-badge {
    opacity: 1;
  }
}