Capacity Categorical Usage

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-usage-title" class="pulsar pulsar-capacity-usage" data-pulsar="capacity-usage" role="img" viewBox="0 0 160 96"><title id="capacity-usage-title">Multi-category stacked capacity usage breakdown showing distributed system, app, and cache allocations</title><g fill="currentColor" font-family="monospace"><text x="24" y="20" font-size="3.5" opacity=".4">capacity/breakdown</text><text id="capacity-usage-total" x="136" y="20" font-size="4.5" font-weight="700" opacity=".9" text-anchor="end">88% USED</text></g><rect width="112" height="14" x="24" y="32" fill="none" stroke="currentColor" stroke-width=".8" opacity=".25" rx="2"></rect><rect id="capacity-usage-seg-sys" width="36" height="12" x="25" y="33" fill="currentColor" opacity=".5" rx="1"></rect><rect id="capacity-usage-seg-app" width="44" height="12" x="62" y="33" fill="currentColor" opacity=".3" rx="1"></rect><rect id="capacity-usage-seg-cache" width="20" height="12" x="107" y="33" fill="currentColor" opacity=".2" rx="1"></rect><g id="capacity-usage-leg-sys" fill="currentColor" font-family="monospace" font-size="3.5"><rect width="6" height="6" x="24" y="58" rx="1"></rect><text x="34" y="63" opacity=".8">SYS: 32%</text></g><g id="capacity-usage-leg-app" fill="currentColor" font-family="monospace" font-size="3.5"><rect width="6" height="6" x="68" y="58" opacity=".6" rx="1"></rect><text x="78" y="63" opacity=".7">APP: 38%</text></g><g id="capacity-usage-leg-cache" fill="currentColor" font-family="monospace" font-size="3.5"><rect width="6" height="6" x="110" y="58" opacity=".4" rx="1"></rect><text x="120" y="63" opacity=".6">CACHE: 18%</text></g><text x="24" y="78" fill="currentColor" font-family="monospace" font-size="3.5" opacity=".35">available headroom: 12% (122 GB)</text></svg>

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

.pulsar-capacity-usage #capacity-usage-seg-sys,
.pulsar-capacity-usage #capacity-usage-leg-sys rect,
.pulsar-capacity-usage #capacity-usage-total {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-usage #capacity-usage-seg-sys {
  transform-origin: 25px 39px;
  animation: capacity-usage-sys-grow 5600ms 200ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-usage-sys-grow {
  0% {
    transform: scaleX(0.2);
    opacity: 0.2;
  }
  25%,
  75% {
    transform: scaleX(1);
    opacity: 0.7;
  }
  90%,
  100% {
    transform: scaleX(0.2);
    opacity: 0.2;
  }
}

.pulsar-capacity-usage #capacity-usage-seg-app {
  transform-origin: 62px 39px;
  animation: capacity-usage-app-grow 5600ms 600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-usage-app-grow {
  0% {
    transform: scaleX(0.2);
    opacity: 0.1;
  }
  30%,
  75% {
    transform: scaleX(1);
    opacity: 0.5;
  }
  90%,
  100% {
    transform: scaleX(0.2);
    opacity: 0.1;
  }
}

.pulsar-capacity-usage #capacity-usage-seg-cache {
  transform-origin: 107px 39px;
  animation: capacity-usage-cache-grow 5600ms 1000ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes capacity-usage-cache-grow {
  0% {
    transform: scaleX(0.2);
    opacity: 0.1;
  }
  35%,
  75% {
    transform: scaleX(1);
    opacity: 0.35;
  }
  90%,
  100% {
    transform: scaleX(0.2);
    opacity: 0.1;
  }
}

.pulsar-capacity-usage #capacity-usage-total {
  animation: capacity-usage-pulse 5600ms ease-in-out infinite;
}

@keyframes capacity-usage-pulse {
  0%,
  20% {
    opacity: 0.4;
  }
  40%,
  75% {
    opacity: 1;
  }
  90%,
  100% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-usage * {
    animation: none !important;
  }
  .pulsar-capacity-usage #capacity-usage-seg-sys {
    transform: scaleX(1);
    opacity: 0.7;
  }
  .pulsar-capacity-usage #capacity-usage-seg-app {
    transform: scaleX(1);
    opacity: 0.5;
  }
  .pulsar-capacity-usage #capacity-usage-seg-cache {
    transform: scaleX(1);
    opacity: 0.35;
  }
}