Capacity Burst Usage

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-burst-title" class="pulsar pulsar-capacity-burst" data-pulsar="capacity-burst" role="img" viewBox="0 0 160 96"><title id="capacity-burst-title">Steady metric trend line suddenly surging into burst capacity headroom and illuminating active burst telemetry</title><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="24" x2="24" y1="24" y2="76"></line><line x1="24" x2="136" y1="76" y2="76"></line></g><line x1="24" x2="136" y1="48" y2="48" fill="none" stroke="currentColor" stroke-dasharray="2 3" stroke-width=".8" opacity=".35"></line><line x1="24" x2="136" y1="28" y2="28" fill="none" stroke="currentColor" stroke-dasharray="1 3" stroke-width=".5" opacity=".2"></line><g fill="currentColor" font-family="monospace"><text x="24" y="18" font-size="3.5" opacity=".4">iops/quota</text><text id="capacity-burst-badge" x="136" y="18" font-size="4" font-weight="700" opacity=".4" text-anchor="end">BASE 1000</text></g><path fill="none" stroke="currentColor" stroke-width="1.2" d="M24 56c16 0 22-4 36-2 12 2 20-2 34 0 12 2 26-1 42 0" opacity=".4"></path><path id="capacity-burst-curve" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M24 56c16 0 30-3 40-8 8-16 14-20 20-20 8 0 14 16 24 24 12 2 18 1 28 2" opacity="0"></path><circle id="capacity-burst-dot" cx="84" cy="28" r="3" fill="currentColor" opacity="0"></circle><circle id="capacity-burst-ring" cx="84" cy="28" r="6" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><polygon id="capacity-burst-fill" fill="currentColor" points="64,48 74,32 84,28 94,32 104,48 64,48" opacity="0"></polygon></svg>

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

.pulsar-capacity-burst #capacity-burst-curve,
.pulsar-capacity-burst #capacity-burst-ring {
  stroke: var(--pulsar-accent, currentColor);
}

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

.pulsar-capacity-burst #capacity-burst-curve {
  animation: capacity-burst-surge 5600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-burst-surge {
  0%,
  22% {
    opacity: 0;
  }
  32%,
  68% {
    opacity: 1;
  }
  80%,
  100% {
    opacity: 0;
  }
}

.pulsar-capacity-burst #capacity-burst-fill {
  animation: capacity-burst-area 5600ms ease-out infinite;
}

@keyframes capacity-burst-area {
  0%,
  25% {
    opacity: 0;
  }
  35%,
  65% {
    opacity: 0.35;
  }
  78%,
  100% {
    opacity: 0;
  }
}

.pulsar-capacity-burst #capacity-burst-dot {
  animation: capacity-burst-point 5600ms ease-out infinite;
}

@keyframes capacity-burst-point {
  0%,
  28% {
    opacity: 0;
    transform: scale(0.4);
  }
  35%,
  65% {
    opacity: 1;
    transform: scale(1);
  }
  75%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

.pulsar-capacity-burst #capacity-burst-ring {
  transform-origin: 84px 28px;
  animation: capacity-burst-pulse-wave 5600ms 1800ms ease-out infinite;
}

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

.pulsar-capacity-burst #capacity-burst-badge {
  animation: capacity-burst-txt 5600ms ease-in-out infinite;
}

@keyframes capacity-burst-txt {
  0%,
  25% {
    opacity: 0.4;
  }
  35%,
  65% {
    opacity: 1;
  }
  78%,
  100% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-burst * {
    animation: none !important;
  }
  .pulsar-capacity-burst #capacity-burst-curve,
  .pulsar-capacity-burst #capacity-burst-dot {
    opacity: 1;
  }
  .pulsar-capacity-burst #capacity-burst-fill {
    opacity: 0.35;
  }
  .pulsar-capacity-burst #capacity-burst-badge {
    opacity: 1;
  }
}