Pulsar
Dynamic axis scaling interval tick markings and expanding graph curve to adjust capacity rangerange/autoscaleSCALE 1x050100

Capacity Dynamic Scale

CSS

An instrumentation axis with graduated interval ticks dynamically rescales its coordinate range as a system capacity data curve expands upward.

Tier
CSS
Dependencies
None
Duration
6 s, loops
Categories
Data and progress
Use cases
Determinate progress, Dashboards and reporting
Industries
IT services and infrastructure, Cross-industry
Style
Data mark · regular stroke
Set
capacity
Tags
loopscalechartline

Companion assets

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

Animated
Dynamic axis scaling interval tick markings and expanding graph curve to adjust capacity rangerange/autoscaleSCALE 1x050100
CSS tier
Static vector
Capacity Dynamic Scale, not animated
Download SVG

Code

animation.svg

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

animation.css

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

From this family15 in Capacity

See the family