Pulsar

Attenuation

CSS

A waveform amplitude is gradually reduced as it passes through a series of vertical dampening lines, stabilizing into a steady low-amplitude line.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Dashboards and reporting, Sync and integration
Industries
Manufacturing and industrial, Cross-industry
Style
Technical · light stroke
Set
calibrate
Tags
wavebarslineminimalpulse

Companion assets

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

Animated
CSS tier
Static vector
Attenuation, 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-calibrate-attenuation" data-pulsar="calibrate-attenuation" viewBox="0 0 160 96"><line x1="58" x2="58" y1="20" y2="76" stroke-dasharray="2 3" stroke-width="1.5" opacity=".3"></line><line x1="82" x2="82" y1="20" y2="76" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="2 3" stroke-width="1.5" opacity=".4"></line><line x1="106" x2="106" y1="20" y2="76" stroke-dasharray="2 3" stroke-width="1.5" opacity=".3"></line><line x1="24" x2="136" y1="48" y2="48" stroke-dasharray="3 3" opacity=".25"></line><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M24 48q8-24 16 0t18 0" class="calibrate-atten-w1"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M58 48q6-14 12 0t12 0" class="calibrate-atten-w2"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M82 48q6-8 12 0t12 0" class="calibrate-atten-w3"></path><line x1="106" x2="136" y1="48" y2="48" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="calibrate-atten-out"></line></svg>

animation.css

.pulsar-calibrate-attenuation {
  display: block;
  overflow: visible;
}
.pulsar-calibrate-attenuation .calibrate-atten-w1 {
  animation: calibrate-attenuation-pulse 4000ms ease-in-out infinite;
}
.pulsar-calibrate-attenuation .calibrate-atten-w2 {
  animation: calibrate-attenuation-pulse 4000ms ease-in-out -400ms infinite;
}
.pulsar-calibrate-attenuation .calibrate-atten-w3 {
  animation: calibrate-attenuation-pulse 4000ms ease-in-out -800ms infinite;
}
.pulsar-calibrate-attenuation .calibrate-atten-out {
  animation: calibrate-attenuation-steady 4000ms ease-in-out infinite;
}

@keyframes calibrate-attenuation-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

@keyframes calibrate-attenuation-steady {
  0%,
  100% {
    stroke-width: 1.5;
    opacity: 0.7;
  }
  50% {
    stroke-width: 2.5;
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-calibrate-attenuation .calibrate-atten-w1,
  .pulsar-calibrate-attenuation .calibrate-atten-w2,
  .pulsar-calibrate-attenuation .calibrate-atten-w3,
  .pulsar-calibrate-attenuation .calibrate-atten-out {
    animation: none;
    opacity: 1;
    stroke-width: 2;
  }
}

From this family15 in Calibrate

See the family