Pulsar

Carbon Offset

CSS

A minimal line-art leaf sprout slowly grows upward inside the outline of a circular carbon coin to represent carbon offset validation.

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

Companion assets

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

Animated
CSS tier
Static vector
Carbon Offset, 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-carbon-offset" data-pulsar="emission-carbon-offset" viewBox="0 0 160 96"><circle cx="80" cy="48" r="34" stroke-width="1.5" opacity=".3"></circle><circle cx="80" cy="48" r="28" stroke-dasharray="2 4" opacity=".4"></circle><path stroke-dasharray="3 3" stroke-width="1.5" d="M88 36a14 14 0 1 0 0 24" opacity=".2"></path><g class="emission-offset-sprout"><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M80 66V34" class="emission-offset-stem"></path><path fill="currentColor" fill-opacity=".08" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M80 52q-12-4-10-14 8 6 10 10" class="emission-offset-leaf-left"></path><path fill="currentColor" fill-opacity=".08" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M80 44q12-4 10-14-8 6-10 10" class="emission-offset-leaf-right"></path><circle cx="80" cy="34" r="2" fill="var(--pulsar-accent, currentColor)" stroke="var(--pulsar-accent, currentColor)" class="emission-offset-tip"></circle></g><circle cx="80" cy="48" r="34" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="emission-offset-pulse"></circle></svg>

animation.css

.pulsar-emission-carbon-offset {
  display: block;
  overflow: visible;
}
.pulsar-emission-carbon-offset .emission-offset-stem {
  stroke-dasharray: 40;
  stroke-dashoffset: 40;
  animation: emission-carbon-offset-stem-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-emission-carbon-offset .emission-offset-leaf-left {
  transform-origin: 80px 52px;
  animation: emission-carbon-offset-leaf-l-anim 4000ms cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}
.pulsar-emission-carbon-offset .emission-offset-leaf-right {
  transform-origin: 80px 44px;
  animation: emission-carbon-offset-leaf-r-anim 4000ms cubic-bezier(0.34, 1.3, 0.64, 1) infinite;
}
.pulsar-emission-carbon-offset .emission-offset-tip {
  transform-origin: 80px 34px;
  animation: emission-carbon-offset-tip-anim 4000ms ease-out infinite;
}
.pulsar-emission-carbon-offset .emission-offset-pulse {
  transform-origin: 80px 48px;
  animation: emission-carbon-offset-pulse-anim 4000ms cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
}

@keyframes emission-carbon-offset-stem-anim {
  0% {
    stroke-dashoffset: 40;
    opacity: 0.2;
  }
  25%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92%,
  100% {
    stroke-dashoffset: 0;
    opacity: 0.3;
  }
}

@keyframes emission-carbon-offset-leaf-l-anim {
  0%,
  15% {
    transform: scale(0) rotate(-20deg);
    opacity: 0;
  }
  35%,
  80% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  92%,
  100% {
    transform: scale(0.85);
    opacity: 0.3;
  }
}

@keyframes emission-carbon-offset-leaf-r-anim {
  0%,
  22% {
    transform: scale(0) rotate(20deg);
    opacity: 0;
  }
  42%,
  80% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
  92%,
  100% {
    transform: scale(0.85);
    opacity: 0.3;
  }
}

@keyframes emission-carbon-offset-tip-anim {
  0%,
  25% {
    transform: scale(0);
    opacity: 0;
  }
  35% {
    transform: scale(1.6);
    opacity: 1;
  }
  45%,
  80% {
    transform: scale(1);
    opacity: 0.8;
  }
  92%,
  100% {
    transform: scale(0);
    opacity: 0;
  }
}

@keyframes emission-carbon-offset-pulse-anim {
  0%,
  45% {
    transform: scale(0.96);
    opacity: 0;
  }
  55% {
    opacity: 0.7;
  }
  75%,
  100% {
    transform: scale(1.08);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-emission-carbon-offset .emission-offset-stem,
  .pulsar-emission-carbon-offset .emission-offset-leaf-left,
  .pulsar-emission-carbon-offset .emission-offset-leaf-right,
  .pulsar-emission-carbon-offset .emission-offset-tip,
  .pulsar-emission-carbon-offset .emission-offset-pulse {
    animation: none;
    stroke-dashoffset: 0;
    transform: none;
    opacity: 1;
  }
  .pulsar-emission-carbon-offset .emission-offset-pulse {
    opacity: 0;
  }
}

From this family15 in Emission

See the family