Pulsar
Void

Void

CSS

A stamp lands across a record and rules it out in one stroke.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Documents and files, Compliance and audit
Industries
Finance and fintech, Legal
Style
Bold line · regular stroke
Set
verdict
Tags
loopminimalui

Companion assets

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

Animated
Void
CSS tier
Static vector
Void, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-void-title" class="pulsar pulsar-verdict-void" data-pulsar="verdict-void" role="img" viewBox="0 0 40 40"><title id="verdict-void-title">Void</title><path id="verdict-void-record-1" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M9 14h22" opacity=".35"></path><path id="verdict-void-record-2" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M9 21h22" opacity=".35"></path><path id="verdict-void-record-3" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M9 28h14" opacity=".35"></path><path id="verdict-void-stamp" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M7 32 33 9"></path></svg>

animation.css

/* Accent: the stamp, against the record it rules out. */
.pulsar-verdict-void #verdict-void-stamp {
  stroke: var(--pulsar-accent, currentColor);
}

/* One decisive stroke: fast across, then held for most of the cycle. */
.pulsar-verdict-void #verdict-void-stamp {
  stroke-dasharray: 35;
  stroke-dashoffset: 35;
  animation: verdict-void-stamp 4000ms cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes verdict-void-stamp {
  0%,
  28% {
    stroke-dashoffset: 35;
  }
  46%,
  88% {
    stroke-dashoffset: 0;
  }
  98%,
  100% {
    stroke-dashoffset: 35;
  }
}

.pulsar-verdict-void #verdict-void-record-1,
.pulsar-verdict-void #verdict-void-record-2,
.pulsar-verdict-void #verdict-void-record-3 {
  animation: verdict-void-record 4000ms ease-in-out infinite;
}

@keyframes verdict-void-record {
  0%,
  40% {
    opacity: 0.35;
  }
  58%,
  88% {
    opacity: 0.18;
  }
  98%,
  100% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-void #verdict-void-stamp {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pulsar-verdict-void #verdict-void-record-1,
  .pulsar-verdict-void #verdict-void-record-2,
  .pulsar-verdict-void #verdict-void-record-3 {
    animation: none;
    opacity: 0.18;
  }
}

From this family15 in Verdict

See the family