Pulsar

Voltage Sag

CSS

A stable horizontal voltage line dips into a gentle curve during a momentary fault, then recovers instantly to its original position as voltage regulation settles.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Decorative and illustrative
Use cases
Errors and warnings, Notifications
Industries
Energy and utilities, Cross-industry
Style
Duotone · light stroke
Set
grid
Tags
wavelineminimalpulse

Companion assets

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

Animated
CSS tier
Static vector
Voltage Sag, 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-voltage-sag" data-pulsar="grid-voltage-sag" viewBox="0 0 160 96"><line x1="20" x2="140" y1="36" y2="36" stroke-dasharray="4 4" opacity=".25"></line><line x1="20" x2="140" y1="60" y2="60" stroke-dasharray="2 4" opacity=".2"></line><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M20 36h40q20 28 40 0h40" class="grid-sag-line"></path><circle cx="80" cy="50" r="5" stroke-width="1.5" class="grid-sag-fault"></circle></svg>

animation.css

.pulsar-grid-voltage-sag {
  display: block;
  overflow: visible;
}
.pulsar-grid-voltage-sag .grid-sag-line {
  animation: grid-voltage-sag-anim 4000ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  transform-origin: 80px 36px;
}
.pulsar-grid-voltage-sag .grid-sag-fault {
  animation: grid-voltage-sag-voltage-fault-anim 4000ms ease-out infinite;
}

@keyframes grid-voltage-sag-anim {
  0%,
  30% {
    transform: scaleY(0.1);
  }
  40%,
  65% {
    transform: scaleY(1);
  }
  75%,
  100% {
    transform: scaleY(0.1);
  }
}

@keyframes grid-voltage-sag-voltage-fault-anim {
  0%,
  35% {
    opacity: 0;
    transform: scale(0.5);
  }
  42% {
    opacity: 1;
    transform: scale(1.2);
  }
  60%,
  100% {
    opacity: 0;
    transform: scale(1.5);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-grid-voltage-sag .grid-sag-line,
  .pulsar-grid-voltage-sag .grid-sag-fault {
    animation: none;
    transform: none;
    opacity: 0.8;
  }
}

From this family15 in Grid

See the family