Pulsar

Load Balancing

CSS

A central node dynamically balances power supply by splitting incoming energy pulses into three load branches that glow or dim to maintain equilibrium.

Tier
CSS
Dependencies
None
Duration
4.2 s, loops
Categories
Decorative and illustrative
Use cases
Dashboards and reporting, Automation and rules
Industries
Energy and utilities, Cross-industry
Style
Duotone · light stroke
Set
grid
Tags
gridpulsegeometriccircle

Companion assets

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

Animated
CSS tier
Static vector
Load Balancing, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="pulsar pulsar-grid-load-balance" data-pulsar="grid-load-balance" viewBox="0 0 160 96"><line x1="20" x2="60" y1="48" y2="48" stroke-width="2" opacity=".4"></line><circle cx="60" cy="48" r="8" stroke-width="1.5"></circle><circle cx="60" cy="48" r="4" fill="currentColor" class="grid-load-core" opacity=".8"></circle><path stroke-width="1.5" d="m60 48 30-24h50" opacity=".3"></path><path stroke-width="1.5" d="M60 48h80" opacity=".3"></path><path stroke-width="1.5" d="m60 48 30 24h50" opacity=".3"></path><circle cx="140" cy="24" r="5" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="grid-load-term grid-load-term-1"></circle><circle cx="140" cy="48" r="5" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="grid-load-term grid-load-term-2"></circle><circle cx="140" cy="72" r="5" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="grid-load-term grid-load-term-3"></circle><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="m60 48 30-24h50" class="grid-load-pulse grid-load-pulse-1"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M60 48h80" class="grid-load-pulse grid-load-pulse-2"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="m60 48 30 24h50" class="grid-load-pulse grid-load-pulse-3"></path></svg>

animation.css

.pulsar-grid-load-balance {
  display: block;
  overflow: visible;
}
.pulsar-grid-load-balance .grid-load-core {
  animation: grid-load-balance-core-anim 4200ms ease-in-out infinite;
}
.pulsar-grid-load-balance .grid-load-pulse-1 {
  stroke-dasharray: 12 90;
  animation: grid-load-balance-p1-anim 4200ms linear infinite;
}
.pulsar-grid-load-balance .grid-load-pulse-2 {
  stroke-dasharray: 12 90;
  animation: grid-load-balance-p2-anim 4200ms linear infinite;
}
.pulsar-grid-load-balance .grid-load-pulse-3 {
  stroke-dasharray: 12 90;
  animation: grid-load-balance-p3-anim 4200ms linear infinite;
}
.pulsar-grid-load-balance .grid-load-term-1 {
  animation: grid-load-balance-t1-anim 4200ms ease-in-out infinite;
}
.pulsar-grid-load-balance .grid-load-term-2 {
  animation: grid-load-balance-t2-anim 4200ms ease-in-out infinite;
}
.pulsar-grid-load-balance .grid-load-term-3 {
  animation: grid-load-balance-t3-anim 4200ms ease-in-out infinite;
}

@keyframes grid-load-balance-core-anim {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
}

@keyframes grid-load-balance-p1-anim {
  0% {
    stroke-dashoffset: 102;
    opacity: 0;
  }
  20%,
  60% {
    opacity: 1;
  }
  80%,
  100% {
    stroke-dashoffset: -102;
    opacity: 0;
  }
}

@keyframes grid-load-balance-p2-anim {
  0%,
  15% {
    stroke-dashoffset: 102;
    opacity: 0;
  }
  35%,
  75% {
    opacity: 1;
  }
  95%,
  100% {
    stroke-dashoffset: -102;
    opacity: 0;
  }
}

@keyframes grid-load-balance-p3-anim {
  0%,
  30% {
    stroke-dashoffset: 102;
    opacity: 0;
  }
  50%,
  90% {
    opacity: 1;
  }
  100% {
    stroke-dashoffset: -102;
    opacity: 0;
  }
}

@keyframes grid-load-balance-t1-anim {
  0%,
  100% {
    opacity: 0.4;
  }
  40% {
    opacity: 1;
  }
}
@keyframes grid-load-balance-t2-anim {
  0%,
  100% {
    opacity: 0.4;
  }
  55% {
    opacity: 1;
  }
}
@keyframes grid-load-balance-t3-anim {
  0%,
  100% {
    opacity: 0.4;
  }
  70% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-grid-load-balance .grid-load-core,
  .pulsar-grid-load-balance .grid-load-pulse-1,
  .pulsar-grid-load-balance .grid-load-pulse-2,
  .pulsar-grid-load-balance .grid-load-pulse-3,
  .pulsar-grid-load-balance .grid-load-term-1,
  .pulsar-grid-load-balance .grid-load-term-2,
  .pulsar-grid-load-balance .grid-load-term-3 {
    animation: none;
    opacity: 0.8;
  }
}

From this family15 in Grid

See the family