Pulsar

Audit Check

CSS

A vertical inspection probe cursor traces downward across four manifest line items, verifying each with an illuminated checkmark.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Workflow and approvals, Compliance and audit
Industries
Logistics and supply chain, Cross-industry
Style
Data mark · light stroke
Set
manifest
Tags
linedotsprogress

Companion assets

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

Animated
CSS tier
Static vector
Audit Check, 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-manifest-audit" data-pulsar="manifest-audit" viewBox="0 0 160 96"><line x1="38" x2="38" y1="24" y2="72" stroke-dasharray="2 2" opacity=".25"></line><circle cx="38" cy="28" r="4" fill="var(--pulsar-accent, currentColor)" fill-opacity=".3" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="probe"></circle><g class="item i1"><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="m50 32 2 2 4-4" class="chk"></path><line x1="62" x2="124" y1="32" y2="32" stroke-width="1.5" opacity=".4"></line></g><g class="item i2"><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="m50 44 2 2 4-4" class="chk"></path><line x1="62" x2="114" y1="44" y2="44" stroke-width="1.5" opacity=".4"></line></g><g class="item i3"><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="M50 56h2l4-2" class="chk"></path><line x1="62" x2="120" y1="56" y2="56" stroke-width="1.5" opacity=".4"></line></g><g class="item i4"><path stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" d="m50 68 2 2 4-4" class="chk"></path><line x1="62" x2="108" y1="68" y2="68" stroke-width="1.5" opacity=".4"></line></g></svg>

animation.css

.pulsar-manifest-audit {
  display: block;
  overflow: visible;
}
.pulsar-manifest-audit .probe {
  animation: manifest-audit-probe 4000ms ease-in-out infinite;
}
.pulsar-manifest-audit .item.i1 .chk {
  animation: manifest-audit-c1 4000ms ease-in-out infinite;
}
.pulsar-manifest-audit .item.i2 .chk {
  animation: manifest-audit-c2 4000ms ease-in-out infinite;
}
.pulsar-manifest-audit .item.i3 .chk {
  animation: manifest-audit-c3 4000ms ease-in-out infinite;
}
.pulsar-manifest-audit .item.i4 .chk {
  animation: manifest-audit-c4 4000ms ease-in-out infinite;
}

@keyframes manifest-audit-probe {
  0%,
  15% {
    transform: translateY(0);
  }
  30% {
    transform: translateY(12px);
  }
  50% {
    transform: translateY(24px);
  }
  70%,
  85% {
    transform: translateY(36px);
  }
  95%,
  100% {
    transform: translateY(0);
  }
}

@keyframes manifest-audit-c1 {
  0%,
  10% {
    opacity: 0.1;
  }
  20%,
  85% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.1;
  }
}
@keyframes manifest-audit-c2 {
  0%,
  25% {
    opacity: 0.1;
  }
  35%,
  85% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.1;
  }
}
@keyframes manifest-audit-c3 {
  0%,
  45% {
    opacity: 0.1;
  }
  55%,
  85% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.1;
  }
}
@keyframes manifest-audit-c4 {
  0%,
  65% {
    opacity: 0.1;
  }
  75%,
  85% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-manifest-audit .probe,
  .pulsar-manifest-audit .item.i1 .chk,
  .pulsar-manifest-audit .item.i2 .chk,
  .pulsar-manifest-audit .item.i3 .chk,
  .pulsar-manifest-audit .item.i4 .chk {
    animation: none;
    transform: none;
    opacity: 1;
    stroke-dashoffset: 0;
  }
}

From this family15 in Manifest

See the family