Pulsar
Storage block fluctuating at the baseline with dynamic dimension caliper measuring headroom to fixed ceilingceiling100.0%free headroom35%margin: 560 GB

Capacity Margin Headroom

CSS

A baseline storage block fluctuates dynamically within a resource tank, with dimension calipers measuring safe margin headroom to a fixed ceiling.

Tier
CSS
Dependencies
None
Duration
5.6 s, loops
Categories
Data and progress
Use cases
Dashboards and reporting, Compliance and audit
Industries
SaaS and software, IT services and infrastructure
Style
Data mark · regular stroke
Set
capacity
Tags
loopbarslineui

Companion assets

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

Animated
Storage block fluctuating at the baseline with dynamic dimension caliper measuring headroom to fixed ceilingceiling100.0%free headroom35%margin: 560 GB
CSS tier
Static vector
Capacity Margin Headroom, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="capacity-headroom-title" class="pulsar pulsar-capacity-headroom" data-pulsar="capacity-headroom" role="img" viewBox="0 0 160 96"><title id="capacity-headroom-title">Storage block fluctuating at the baseline with dynamic dimension caliper measuring headroom to fixed ceiling</title><rect width="56" height="56" x="32" y="20" fill="none" stroke="currentColor" stroke-width=".8" opacity=".25" rx="2"></rect><line x1="28" x2="92" y1="20" y2="20" fill="none" stroke="currentColor" stroke-width="1.2" opacity=".4"></line><rect id="capacity-headroom-block" width="54" height="35" x="33" y="40" fill="currentColor" opacity=".35" rx="1"></rect><line id="capacity-headroom-waterline" x1="33" x2="87" y1="40" y2="40" fill="none" stroke="currentColor" stroke-width="1.2"></line><g id="capacity-headroom-caliper"><line id="capacity-headroom-arrow" x1="60" x2="60" y1="22" y2="38" fill="none" stroke="currentColor" stroke-dasharray="2 2" stroke-width=".8"></line><polygon fill="currentColor" points="60,20 57,25 63,25"></polygon><polygon fill="currentColor" points="60,40 57,35 63,35"></polygon></g><g fill="currentColor" font-family="monospace"><text x="100" y="26" font-size="3.5" opacity=".4">ceiling</text><text x="100" y="33" font-size="4" font-weight="700" opacity=".7">100.0%</text><text x="100" y="45" font-size="3.5" opacity=".4">free headroom</text><text id="capacity-headroom-val" x="100" y="53" font-size="5" font-weight="700" opacity=".9">35%</text><text x="100" y="65" font-size="3.5" opacity=".4">margin: 560 GB</text></g></svg>

animation.css

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

.pulsar-capacity-headroom #capacity-headroom-waterline,
.pulsar-capacity-headroom #capacity-headroom-caliper line {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-headroom #capacity-headroom-caliper polygon,
.pulsar-capacity-headroom #capacity-headroom-block,
.pulsar-capacity-headroom #capacity-headroom-val {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-capacity-headroom #capacity-headroom-block {
  transform-origin: 60px 75px;
  animation: capacity-headroom-tide 5600ms ease-in-out infinite;
}

@keyframes capacity-headroom-tide {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.35;
  }
  45% {
    transform: scaleY(1.24);
    opacity: 0.5;
  }
  75% {
    transform: scaleY(0.85);
    opacity: 0.28;
  }
}

.pulsar-capacity-headroom #capacity-headroom-waterline {
  animation: capacity-headroom-surf 5600ms ease-in-out infinite;
}

@keyframes capacity-headroom-surf {
  0%,
  100% {
    transform: translateY(0);
  }
  45% {
    transform: translateY(-8px);
  }
  75% {
    transform: translateY(5px);
  }
}

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

@keyframes capacity-headroom-txt {
  0%,
  100% {
    opacity: 0.7;
  }
  45% {
    opacity: 1;
  }
  75% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-capacity-headroom * {
    animation: none !important;
  }
  .pulsar-capacity-headroom #capacity-headroom-block {
    transform: scaleY(1);
    opacity: 0.35;
  }
  .pulsar-capacity-headroom #capacity-headroom-val {
    opacity: 1;
  }
}

From this family15 in Capacity

See the family