Capacity Peak Watermark

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-peak-title" class="pulsar pulsar-capacity-peak" data-pulsar="capacity-peak" role="img" viewBox="0 0 160 96"><title id="capacity-peak-title">Fluctuating telemetry wave recording a persistent horizontal dashed high-water mark at peak historical capacity</title><g fill="none" stroke="currentColor" stroke-width=".5" opacity=".2"><line x1="24" x2="24" y1="20" y2="76"></line><line x1="24" x2="136" y1="76" y2="76"></line><line x1="24" x2="136" y1="52" y2="52" stroke-dasharray="1 3"></line></g><line id="capacity-peak-mark" x1="24" x2="136" y1="26" y2="26" fill="none" stroke="currentColor" stroke-dasharray="3 3" stroke-width="1.2" opacity="0"></line><g fill="currentColor" font-family="monospace"><text x="24" y="16" font-size="3.5" opacity=".4">workload/history</text><text id="capacity-peak-tag" x="136" y="20" font-size="4" font-weight="700" opacity="0" text-anchor="end">PEAK: 96.4%</text></g><path id="capacity-peak-wave" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.4" d="M24 62c16 2 30-14 40-26 6-8 14-10 20-10 8 0 14 20 24 32 12 6 18-2 28 2"></path><circle id="capacity-peak-dot" cx="84" cy="26" r="3" fill="currentColor" opacity="0"></circle><circle id="capacity-peak-ring" cx="84" cy="26" r="6" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle></svg>

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

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

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

.pulsar-capacity-peak #capacity-peak-wave {
  transform-origin: 24px 76px;
  animation: capacity-peak-wave-surge 6000ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}

@keyframes capacity-peak-wave-surge {
  0% {
    transform: scaleY(0.7);
    opacity: 0.5;
  }
  25%,
  35% {
    transform: scaleY(1);
    opacity: 1;
  }
  60%,
  85% {
    transform: scaleY(0.65);
    opacity: 0.6;
  }
  100% {
    transform: scaleY(0.7);
    opacity: 0.5;
  }
}

.pulsar-capacity-peak #capacity-peak-mark {
  animation: capacity-peak-mark-hold 6000ms 1500ms ease-in-out infinite;
}

@keyframes capacity-peak-mark-hold {
  0% {
    opacity: 0;
  }
  10%,
  70% {
    opacity: 0.9;
  }
  85%,
  100% {
    opacity: 0;
  }
}

.pulsar-capacity-peak #capacity-peak-tag {
  animation: capacity-peak-tag-hold 6000ms 1500ms ease-in-out infinite;
}

@keyframes capacity-peak-tag-hold {
  0% {
    opacity: 0;
  }
  10%,
  70% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0;
  }
}

.pulsar-capacity-peak #capacity-peak-dot {
  animation: capacity-peak-dot-flash 6000ms 1500ms ease-out infinite;
}

@keyframes capacity-peak-dot-flash {
  0% {
    opacity: 0;
    transform: scale(0.4);
  }
  10%,
  65% {
    opacity: 1;
    transform: scale(1);
  }
  80%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

.pulsar-capacity-peak #capacity-peak-ring {
  transform-origin: 84px 26px;
  animation: capacity-peak-pulse 6000ms 1500ms ease-out infinite;
}

@keyframes capacity-peak-pulse {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  12% {
    opacity: 0.85;
  }
  35% {
    opacity: 0;
    transform: scale(2.6);
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-peak * {
    animation: none !important;
  }
  .pulsar-capacity-peak #capacity-peak-mark,
  .pulsar-capacity-peak #capacity-peak-tag {
    opacity: 1;
  }
}