Pulsar

Methane Leak Detection

CSS

A pipeline elbow joint has a tiny pulsing alert circle at its seam that blinks in red-alert cadence to warn of a localized gas leak.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Notifications
Industries
Manufacturing and industrial, Energy and utilities
Style
Minimal line · light stroke
Set
emission
Tags
ringpulselineminimalglow

Companion assets

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

Animated
CSS tier
Static vector
Methane Leak Detection, 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-emission-gas-leak" data-pulsar="emission-gas-leak" viewBox="0 0 160 96"><path stroke-width="2" d="M28 36h48q28 0 28 28v20" opacity=".4"></path><path stroke-width="2" d="M28 56h40q16 0 16 16v12" opacity=".4"></path><rect width="6" height="28" x="74" y="32" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" rx="1.5"></rect><g class="emission-gas-whisp"><path stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="2 3" stroke-width="1.5" d="M77 30q-5-10 3-16"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="2 2" stroke-width="1.2" d="M80 30q6-12 0-18"></path></g><circle cx="77" cy="32" r="3" fill="var(--pulsar-accent, currentColor)" stroke-width="0" class="emission-gas-beacon"></circle><circle cx="77" cy="32" r="10" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="emission-gas-ring ring-1"></circle><circle cx="77" cy="32" r="18" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.2" class="emission-gas-ring ring-2"></circle><line x1="124" x2="124" y1="36" y2="44" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="emission-gas-tick"></line><circle cx="124" cy="49" r="1.5" fill="var(--pulsar-accent, currentColor)" stroke-width="0" class="emission-gas-tick"></circle></svg>

animation.css

.pulsar-emission-gas-leak {
  display: block;
  overflow: visible;
}
.pulsar-emission-gas-leak .emission-gas-whisp {
  animation: emission-gas-leak-whisp-rise 4000ms ease-out infinite;
}
.pulsar-emission-gas-leak .emission-gas-beacon {
  animation: emission-gas-leak-beacon-blink 4000ms steps(1, end) infinite;
}
.pulsar-emission-gas-leak .ring-1 {
  transform-origin: 77px 32px;
  animation: emission-gas-leak-ripple-wave 4000ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}
.pulsar-emission-gas-leak .ring-2 {
  transform-origin: 77px 32px;
  animation: emission-gas-leak-ripple-wave 4000ms cubic-bezier(0.2, 0.8, 0.2, 1) -2000ms infinite;
}
.pulsar-emission-gas-leak .emission-gas-tick {
  animation: emission-gas-leak-tick-flash 4000ms ease-in-out infinite;
}

@keyframes emission-gas-leak-whisp-rise {
  0% {
    transform: translateY(4px);
    opacity: 0;
  }
  25% {
    opacity: 0.9;
  }
  60% {
    transform: translateY(-8px);
    opacity: 0.2;
  }
  80%,
  100% {
    transform: translateY(-12px);
    opacity: 0;
  }
}

@keyframes emission-gas-leak-beacon-blink {
  0%,
  15%,
  30%,
  45%,
  60%,
  75% {
    opacity: 1;
  }
  8%,
  23%,
  38%,
  53%,
  68% {
    opacity: 0.3;
  }
  85%,
  100% {
    opacity: 1;
  }
}

@keyframes emission-gas-leak-ripple-wave {
  0% {
    transform: scale(0.3);
    opacity: 0.9;
  }
  50%,
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@keyframes emission-gas-leak-tick-flash {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-emission-gas-leak .emission-gas-whisp,
  .pulsar-emission-gas-leak .emission-gas-beacon,
  .pulsar-emission-gas-leak .ring-1,
  .pulsar-emission-gas-leak .ring-2,
  .pulsar-emission-gas-leak .emission-gas-tick {
    animation: none;
    transform: none;
    opacity: 1;
  }
  .pulsar-emission-gas-leak .ring-1,
  .pulsar-emission-gas-leak .ring-2 {
    opacity: 0;
  }
}

From this family15 in Emission

See the family