Capacity Memory Pressure

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-pressure-title" class="pulsar pulsar-capacity-pressure" data-pulsar="capacity-pressure" role="img" viewBox="0 0 160 96"><title id="capacity-pressure-title">Central memory bubble expanding under pressure against rigid boundary walls to indicate memory constraint</title><g fill="currentColor" font-family="monospace"><text x="24" y="16" font-size="3.5" opacity=".4">mem/cgroup-pressure</text><text id="capacity-pressure-badge" x="136" y="16" font-size="4" font-weight="700" opacity=".9" text-anchor="end">PRESSURE: 98%</text></g><rect id="capacity-pressure-box" width="48" height="48" x="56" y="24" fill="none" stroke="currentColor" stroke-width="1.2" rx="2"></rect><g fill="none" stroke="currentColor" stroke-width=".6" opacity=".35"><path d="M52 32V20h12"></path><path d="M108 20h12v12"></path><path d="M52 64v12h12"></path><path d="M108 76h12V64"></path></g><circle id="capacity-pressure-bubble" cx="80" cy="48" r="14" fill="currentColor" opacity=".35"></circle><circle id="capacity-pressure-rim" cx="80" cy="48" r="14" fill="none" stroke="currentColor" stroke-width="1"></circle><circle id="capacity-pressure-wave" cx="80" cy="48" r="23" fill="none" stroke="currentColor" stroke-width="1" opacity="0"></circle><text x="80" y="86" fill="currentColor" font-family="monospace" font-size="3.5" opacity=".4" text-anchor="middle">limit: 16.0 GB / usage: 15.7 GB</text></svg>

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

.pulsar-capacity-pressure #capacity-pressure-box,
.pulsar-capacity-pressure #capacity-pressure-rim,
.pulsar-capacity-pressure #capacity-pressure-wave {
  stroke: var(--pulsar-accent, currentColor);
}

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

.pulsar-capacity-pressure #capacity-pressure-bubble,
.pulsar-capacity-pressure #capacity-pressure-rim {
  transform-origin: 80px 48px;
  animation: capacity-pressure-swell 5600ms cubic-bezier(0.2, 0.9, 0.3, 1) infinite;
}

@keyframes capacity-pressure-swell {
  0%,
  15% {
    transform: scale(1);
    opacity: 0.35;
  }
  42%,
  72% {
    transform: scale(1.64);
    opacity: 0.75;
  }
  90%,
  100% {
    transform: scale(1);
    opacity: 0.35;
  }
}

.pulsar-capacity-pressure #capacity-pressure-box {
  animation: capacity-pressure-impact 5600ms ease-in-out infinite;
}

@keyframes capacity-pressure-impact {
  0%,
  35% {
    stroke-width: 1.2;
    opacity: 0.4;
  }
  42%,
  72% {
    stroke-width: 2;
    opacity: 1;
  }
  85%,
  100% {
    stroke-width: 1.2;
    opacity: 0.4;
  }
}

.pulsar-capacity-pressure #capacity-pressure-wave {
  transform-origin: 80px 48px;
  animation: capacity-pressure-ring 5600ms 1800ms ease-out infinite;
}

@keyframes capacity-pressure-ring {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  12% {
    opacity: 0.8;
  }
  38% {
    opacity: 0;
    transform: scale(2.2);
  }
  100% {
    opacity: 0;
  }
}

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

@keyframes capacity-pressure-txt {
  0%,
  35% {
    opacity: 0.4;
  }
  42%,
  72% {
    opacity: 1;
  }
  85%,
  100% {
    opacity: 0.4;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-pressure * {
    animation: none !important;
  }
  .pulsar-capacity-pressure #capacity-pressure-bubble,
  .pulsar-capacity-pressure #capacity-pressure-rim {
    transform: scale(1.64);
    opacity: 0.75;
  }
  .pulsar-capacity-pressure #capacity-pressure-box {
    opacity: 1;
    stroke-width: 1.8;
  }
}