Pulsar

Capacitor Bank

CSS

A bank of six grid cells accumulates duotone charge levels sequentially from left to right, discharging a bright pulse of reactive power back into the system.

Tier
CSS
Dependencies
None
Duration
4.2 s, loops
Categories
Decorative and illustrative
Use cases
Determinate progress, Automation and rules
Industries
Manufacturing and industrial, Energy and utilities
Style
Duotone · light stroke
Set
grid
Tags
barsgeometricpulsegrid

Companion assets

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

Animated
CSS tier
Static vector
Capacitor Bank, 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-capacitor-bank" data-pulsar="grid-capacitor-bank" viewBox="0 0 160 96"><line x1="20" x2="140" y1="20" y2="20" stroke-width="1.5" opacity=".3"></line><line x1="20" x2="140" y1="76" y2="76" stroke-width="1.5" opacity=".3"></line><g transform="translate(24 28)"><rect width="12" height="40" stroke-width="1.5" opacity=".3" rx="2"></rect><rect width="8" height="36" x="2" y="2" fill="var(--pulsar-accent, currentColor)" stroke="none" class="grid-cap-fill grid-cap-f1" rx="1"></rect></g><g transform="translate(44 28)"><rect width="12" height="40" stroke-width="1.5" opacity=".3" rx="2"></rect><rect width="8" height="36" x="2" y="2" fill="var(--pulsar-accent, currentColor)" stroke="none" class="grid-cap-fill grid-cap-f2" rx="1"></rect></g><g transform="translate(64 28)"><rect width="12" height="40" stroke-width="1.5" opacity=".3" rx="2"></rect><rect width="8" height="36" x="2" y="2" fill="var(--pulsar-accent, currentColor)" stroke="none" class="grid-cap-fill grid-cap-f3" rx="1"></rect></g><g transform="translate(84 28)"><rect width="12" height="40" stroke-width="1.5" opacity=".3" rx="2"></rect><rect width="8" height="36" x="2" y="2" fill="var(--pulsar-accent, currentColor)" stroke="none" class="grid-cap-fill grid-cap-f4" rx="1"></rect></g><g transform="translate(104 28)"><rect width="12" height="40" stroke-width="1.5" opacity=".3" rx="2"></rect><rect width="8" height="36" x="2" y="2" fill="var(--pulsar-accent, currentColor)" stroke="none" class="grid-cap-fill grid-cap-f5" rx="1"></rect></g><g transform="translate(124 28)"><rect width="12" height="40" stroke-width="1.5" opacity=".3" rx="2"></rect><rect width="8" height="36" x="2" y="2" fill="var(--pulsar-accent, currentColor)" stroke="none" class="grid-cap-fill grid-cap-f6" rx="1"></rect></g><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M20 76h120" class="grid-cap-discharge"></path></svg>

animation.css

.pulsar-grid-capacitor-bank {
  display: block;
  overflow: visible;
}
.pulsar-grid-capacitor-bank .grid-cap-fill {
  transform-origin: bottom;
}
.pulsar-grid-capacitor-bank .grid-cap-f1 {
  animation: grid-capacitor-bank-capacitor-charge-anim 4200ms ease-in-out infinite;
  animation-delay: 0ms;
}
.pulsar-grid-capacitor-bank .grid-cap-f2 {
  animation: grid-capacitor-bank-capacitor-charge-anim 4200ms ease-in-out infinite;
  animation-delay: -3800ms;
}
.pulsar-grid-capacitor-bank .grid-cap-f3 {
  animation: grid-capacitor-bank-capacitor-charge-anim 4200ms ease-in-out infinite;
  animation-delay: -3600ms;
}
.pulsar-grid-capacitor-bank .grid-cap-f4 {
  animation: grid-capacitor-bank-capacitor-charge-anim 4200ms ease-in-out infinite;
  animation-delay: -3400ms;
}
.pulsar-grid-capacitor-bank .grid-cap-f5 {
  animation: grid-capacitor-bank-capacitor-charge-anim 4200ms ease-in-out infinite;
  animation-delay: -3200ms;
}
.pulsar-grid-capacitor-bank .grid-cap-f6 {
  animation: grid-capacitor-bank-capacitor-charge-anim 4200ms ease-in-out infinite;
  animation-delay: -3000ms;
}

.pulsar-grid-capacitor-bank .grid-cap-discharge {
  stroke-dasharray: 20 120;
  animation: grid-capacitor-bank-capacitor-discharge-anim 4200ms ease-out infinite;
}

@keyframes grid-capacitor-bank-capacitor-charge-anim {
  0%,
  15% {
    transform: scaleY(0.1);
    opacity: 0.2;
  }
  45%,
  70% {
    transform: scaleY(1);
    opacity: 0.9;
  }
  75%,
  100% {
    transform: scaleY(0.1);
    opacity: 0.2;
  }
}

@keyframes grid-capacitor-bank-capacitor-discharge-anim {
  0%,
  70% {
    stroke-dashoffset: 140;
    opacity: 0;
  }
  72% {
    opacity: 1;
  }
  90%,
  100% {
    stroke-dashoffset: -140;
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-grid-capacitor-bank .grid-cap-f1,
  .pulsar-grid-capacitor-bank .grid-cap-f2,
  .pulsar-grid-capacitor-bank .grid-cap-f3,
  .pulsar-grid-capacitor-bank .grid-cap-f4,
  .pulsar-grid-capacitor-bank .grid-cap-f5,
  .pulsar-grid-capacitor-bank .grid-cap-f6,
  .pulsar-grid-capacitor-bank .grid-cap-discharge {
    animation: none;
    transform: none;
    opacity: 0.7;
  }
}

From this family15 in Grid

See the family