Pulsar
Disputed

Disputed

CSS

Two opposing marks alternate emphasis, neither resolving over the other.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Notifications, Compliance and audit
Industries
Legal, Insurance
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
Disputed
CSS tier
Static vector
Disputed, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="verdict-disputed-title" class="pulsar pulsar-verdict-disputed" data-pulsar="verdict-disputed" role="img" viewBox="0 0 40 40"><title id="verdict-disputed-title">Disputed</title><path id="verdict-disputed-for" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="m4 20 4 4 7-9"></path><path id="verdict-disputed-pivot" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="M20 14v12" opacity=".25"></path><path id="verdict-disputed-against" fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="3" d="m25 15 11 10m0-10L25 25"></path></svg>

animation.css

/* Accent: the opposing mark, so emphasis moving between the two is a change of colour and not only of weight. */
.pulsar-verdict-disputed #verdict-disputed-against {
  stroke: var(--pulsar-accent, currentColor);
}

/*
  Neither side wins. The two marks trade emphasis in antiphase over one
  cycle and both pass through the same middling weight, so no frame reads
  as a resolution -- and the resting state sits exactly at that balance.
*/
.pulsar-verdict-disputed #verdict-disputed-for,
.pulsar-verdict-disputed #verdict-disputed-against {
  transform-box: fill-box;
  transform-origin: center;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.pulsar-verdict-disputed #verdict-disputed-for {
  animation-name: verdict-disputed-swing;
}

.pulsar-verdict-disputed #verdict-disputed-against {
  animation-name: verdict-disputed-swing;
  animation-delay: -2000ms;
}

@keyframes verdict-disputed-swing {
  0%,
  100% {
    opacity: 1;
    transform: scale(1.12);
  }
  50% {
    opacity: 0.3;
    transform: scale(0.88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-verdict-disputed #verdict-disputed-for,
  .pulsar-verdict-disputed #verdict-disputed-against {
    animation: none;
    opacity: 0.65;
    transform: scale(1);
  }
}

From this family15 in Verdict

See the family