Pulsar

Wind Abatement

CSS

A minimalist wind turbine rotates its blades slowly while a horizontal wind vector line sweeps past, highlighting renewable displacement.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Success and confirmation, Dashboards and reporting
Industries
Energy and utilities, Cross-industry
Style
Minimal line · light stroke
Set
emission
Tags
rotatelineminimalloopstroke

Companion assets

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

Animated
CSS tier
Static vector
Wind Abatement, 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-wind-abatement" data-pulsar="emission-wind-abatement" viewBox="0 0 160 96"><path stroke-width="1.5" d="M28 82q52-4 104 0" opacity=".35"></path><line x1="80" x2="80" y1="42" y2="80" stroke-width="2"></line><line x1="75" x2="85" y1="80" y2="80" stroke-width="2"></line><circle cx="80" cy="42" r="3" fill="currentColor"></circle><g class="emission-wind-rotor"><line x1="80" x2="80" y1="42" y2="16" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></line><line x1="80" x2="102" y1="42" y2="55" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></line><line x1="80" x2="58" y1="42" y2="55" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></line></g><path stroke-dasharray="3 3" stroke-width="1.5" d="M24 28q26-2 46 2" class="emission-wind-stream s1" opacity=".5"></path><path stroke-dasharray="3 3" stroke-width="1.5" d="M94 36q22 2 44-2" class="emission-wind-stream s2" opacity=".5"></path><path stroke-dasharray="2 3" stroke-width="1.2" d="M32 62q22-2 40 2" class="emission-wind-stream s3" opacity=".3"></path></svg>

animation.css

.pulsar-emission-wind-abatement {
  display: block;
  overflow: visible;
}
.pulsar-emission-wind-abatement .emission-wind-rotor {
  transform-origin: 80px 42px;
  animation: emission-wind-abatement-rotate 4000ms linear infinite;
}
.pulsar-emission-wind-abatement .s1 {
  animation: emission-wind-abatement-breeze 4000ms ease-in-out infinite;
}
.pulsar-emission-wind-abatement .s2 {
  animation: emission-wind-abatement-breeze 4000ms ease-in-out -1500ms infinite;
}
.pulsar-emission-wind-abatement .s3 {
  animation: emission-wind-abatement-breeze 4000ms ease-in-out -3000ms infinite;
}

@keyframes emission-wind-abatement-rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

@keyframes emission-wind-abatement-breeze {
  0% {
    stroke-dashoffset: 24;
    opacity: 0.1;
  }
  50% {
    opacity: 0.8;
  }
  100% {
    stroke-dashoffset: -24;
    opacity: 0.1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-emission-wind-abatement .emission-wind-rotor,
  .pulsar-emission-wind-abatement .s1,
  .pulsar-emission-wind-abatement .s2,
  .pulsar-emission-wind-abatement .s3 {
    animation: none;
    transform: rotate(30deg);
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

From this family15 in Emission

See the family