Pulsar

Frequency Drift

CSS

A horizontal centerline and two floating signal waves drift apart in frequency before converging back onto the reference line as frequency correction activates.

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

Companion assets

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

Animated
CSS tier
Static vector
Frequency Drift, 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-frequency-drift" data-pulsar="grid-frequency-drift" viewBox="0 0 160 96"><line x1="16" x2="144" y1="48" y2="48" stroke-dasharray="3 3" opacity=".4"></line><line x1="16" x2="144" y1="26" y2="26" opacity=".2"></line><line x1="16" x2="144" y1="70" y2="70" opacity=".2"></line><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M16 48q16-20 32 0t32 0 32 0 32 0" class="grid-freq-wave1"></path><path stroke-width="1.5" d="M16 48q16-10 32 0t32 0 32 0 32 0" class="grid-freq-wave2" opacity=".4"></path></svg>

animation.css

.pulsar-grid-frequency-drift {
  display: block;
  overflow: visible;
}
.pulsar-grid-frequency-drift .grid-freq-wave1 {
  animation: grid-frequency-drift-freq-drift-w1-anim 4600ms ease-in-out infinite;
  transform-origin: 80px 48px;
}
.pulsar-grid-frequency-drift .grid-freq-wave2 {
  animation: grid-frequency-drift-freq-drift-w2-anim 4600ms ease-in-out infinite;
  transform-origin: 80px 48px;
}

@keyframes grid-frequency-drift-freq-drift-w1-anim {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.9;
  }
  35% {
    transform: scaleY(1.7) translateY(-2px);
    opacity: 1;
  }
  70% {
    transform: scaleY(0.7) translateY(2px);
    opacity: 0.7;
  }
}

@keyframes grid-frequency-drift-freq-drift-w2-anim {
  0%,
  100% {
    transform: scaleY(1);
    opacity: 0.4;
  }
  40% {
    transform: scaleY(1.5) translateY(2px);
    opacity: 0.6;
  }
  75% {
    transform: scaleY(0.8) translateY(-2px);
    opacity: 0.3;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-grid-frequency-drift .grid-freq-wave1,
  .pulsar-grid-frequency-drift .grid-freq-wave2 {
    animation: none;
    transform: none;
  }
}

From this family15 in Grid

See the family