Capacity Dynamic Scale

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-scale-title" class="pulsar pulsar-capacity-scale" data-pulsar="capacity-scale" role="img" viewBox="0 0 160 96"><title id="capacity-scale-title">Dynamic axis scaling interval tick markings and expanding graph curve to adjust capacity range</title><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".25"><line x1="36" x2="36" y1="20" y2="76"></line><line x1="36" x2="136" y1="76" y2="76"></line><line x1="36" x2="136" y1="48" y2="48" stroke-dasharray="1 3"></line></g><g fill="currentColor" font-family="monospace"><text x="36" y="16" font-size="3.5" opacity=".4">range/autoscale</text><text id="capacity-scale-badge" x="136" y="16" font-size="4" font-weight="700" opacity=".4" text-anchor="end">SCALE 1x</text></g><g id="capacity-scale-ticks" fill="none" stroke="currentColor" stroke-width=".8" opacity=".4"><line x1="31" x2="36" y1="76" y2="76"></line><line x1="31" x2="36" y1="62" y2="62"></line><line x1="31" x2="36" y1="48" y2="48"></line><line x1="31" x2="36" y1="34" y2="34"></line><line x1="31" x2="36" y1="20" y2="20"></line></g><g fill="currentColor" font-family="monospace" font-size="3.5" opacity=".4" text-anchor="end"><text x="28" y="78">0</text><text id="capacity-scale-lbl-mid" x="28" y="50">50</text><text id="capacity-scale-lbl-top" x="28" y="22">100</text></g><path id="capacity-scale-curve" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M36 68c20-2 34-14 52-20 16-6 32-4 48-12" opacity=".6"></path><circle id="capacity-scale-pip" cx="136" cy="36" r="2.5" fill="currentColor" opacity=".5"></circle></svg>

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

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

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

.pulsar-capacity-scale #capacity-scale-curve {
  transform-origin: 36px 76px;
  animation: capacity-scale-growth 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-scale-growth {
  0%,
  20% {
    transform: scaleY(0.7);
    opacity: 0.5;
  }
  45%,
  75% {
    transform: scaleY(1.35);
    opacity: 1;
  }
  92%,
  100% {
    transform: scaleY(0.7);
    opacity: 0.5;
  }
}

.pulsar-capacity-scale #capacity-scale-pip {
  transform-origin: 36px 76px;
  animation: capacity-scale-pip-move 6000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-scale-pip-move {
  0%,
  20% {
    transform: translateY(12px);
    opacity: 0.4;
  }
  45%,
  75% {
    transform: translateY(-14px);
    opacity: 1;
  }
  92%,
  100% {
    transform: translateY(12px);
    opacity: 0.4;
  }
}

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

@keyframes capacity-scale-txt {
  0%,
  25% {
    opacity: 0.4;
  }
  45%,
  75% {
    opacity: 1;
  }
  92%,
  100% {
    opacity: 0.4;
  }
}

.pulsar-capacity-scale #capacity-scale-ticks {
  animation: capacity-scale-tick-pulse 6000ms ease-in-out infinite;
}

@keyframes capacity-scale-tick-pulse {
  0%,
  25% {
    opacity: 0.35;
  }
  45%,
  75% {
    opacity: 0.8;
  }
  92%,
  100% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-scale * {
    animation: none !important;
  }
  .pulsar-capacity-scale #capacity-scale-curve {
    transform: scaleY(1.35);
    opacity: 1;
  }
  .pulsar-capacity-scale #capacity-scale-badge {
    opacity: 1;
  }
}