Pulsar

Offset Ledger Sync

CSS

Two stylized database cylinders exchange a horizontal data-sync loop representing carbon offset retirement and double-counting prevention.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Sync and integration, Compliance and audit
Industries
Finance and fintech, Energy and utilities
Style
Minimal line · light stroke
Set
emission
Tags
circlelineminimallooppulse

Companion assets

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

Animated
CSS tier
Static vector
Offset Ledger Sync, 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-offset-ledger" data-pulsar="emission-offset-ledger" viewBox="0 0 160 96"><ellipse cx="48" cy="36" stroke-width="1.5" rx="16" ry="6"></ellipse><path stroke-width="1.5" d="M32 36v28c0 4 32 4 32 0V36"></path><path stroke-width="1.2" d="M32 50c0 4 32 4 32 0" opacity=".4"></path><ellipse cx="112" cy="36" stroke-width="1.5" rx="16" ry="6"></ellipse><path stroke-width="1.5" d="M96 36v28c0 4 32 4 32 0V36"></path><path stroke-width="1.2" d="M96 50c0 4 32 4 32 0" opacity=".4"></path><path stroke-dasharray="2 3" stroke-width="1.2" d="M64 42q16-8 32 0" opacity=".4"></path><path stroke-dasharray="2 3" stroke-width="1.2" d="M96 58q-16 8-32 0" opacity=".4"></path><g class="emission-ledger-packet-1"><circle r="3" fill="var(--pulsar-accent, currentColor)" stroke="var(--pulsar-accent, currentColor)"></circle></g><g class="emission-ledger-packet-2"><circle r="3" fill="var(--pulsar-accent, currentColor)" stroke="var(--pulsar-accent, currentColor)"></circle></g><circle cx="80" cy="50" r="7" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="emission-ledger-badge"></circle><polyline stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" points="77 50, 79 52, 83 48" class="emission-ledger-badge-check"></polyline></svg>

animation.css

.pulsar-emission-offset-ledger {
  display: block;
  overflow: visible;
}
.pulsar-emission-offset-ledger .emission-ledger-packet-1 {
  offset-path: path('M 64 42 Q 80 34 96 42');
  animation: emission-offset-ledger-flow-1 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-emission-offset-ledger .emission-ledger-packet-2 {
  offset-path: path('M 96 58 Q 80 66 64 58');
  animation: emission-offset-ledger-flow-2 4000ms cubic-bezier(0.4, 0, 0.2, 1) -2000ms infinite;
}
.pulsar-emission-offset-ledger .emission-ledger-badge {
  transform-origin: 80px 50px;
  animation: emission-offset-ledger-reconcile 4000ms ease-in-out infinite;
}
.pulsar-emission-offset-ledger .emission-ledger-badge-check {
  animation: emission-offset-ledger-check-flash 4000ms ease-in-out infinite;
}

@keyframes emission-offset-ledger-flow-1 {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes emission-offset-ledger-flow-2 {
  0% {
    offset-distance: 0%;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    offset-distance: 100%;
    opacity: 0;
  }
}

@keyframes emission-offset-ledger-reconcile {
  0%,
  100% {
    transform: scale(0.9);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}

@keyframes emission-offset-ledger-check-flash {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-emission-offset-ledger .emission-ledger-packet-1,
  .pulsar-emission-offset-ledger .emission-ledger-packet-2,
  .pulsar-emission-offset-ledger .emission-ledger-badge,
  .pulsar-emission-offset-ledger .emission-ledger-badge-check {
    animation: none;
    transform: none;
    opacity: 1;
    offset-distance: 50%;
  }
}

From this family15 in Emission

See the family