Pulsar
Central memory bubble expanding under pressure against rigid boundary walls to indicate memory constraintmem/cgroup-pressurePRESSURE: 98%limit: 16.0 GB / usage: 15.7 GB

Capacity Memory Pressure

CSS

A central memory allocation bubble expands dynamically under system pressure against a rigid bounding perimeter, triggering contact alert waves.

Tier
CSS
Dependencies
None
Duration
7.4 s, loops
Categories
Data and progress
Use cases
Errors and warnings, Dashboards and reporting
Industries
SaaS and software, IT services and infrastructure
Style
Data mark · regular stroke
Set
capacity
Tags
loopgeometricpulseui

Companion assets

The same artwork, not animated. Derived from the entry’s own resting state, so it matches exactly.

Animated
Central memory bubble expanding under pressure against rigid boundary walls to indicate memory constraintmem/cgroup-pressurePRESSURE: 98%limit: 16.0 GB / usage: 15.7 GB
CSS tier
Static vector
Capacity Memory Pressure, not animated
Download SVG

Code

animation.svg

<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>

animation.css

.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;
  }
}

From this family15 in Capacity

See the family