Pulsar
Audit

Audit

CSS

Log lines stamp into place in sequence, each one squaring up as it lands.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Security and trust, Documents and files
Industries
Finance and fintech, Legal
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricuistagger

Companion assets

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

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-audit-title" class="pulsar pulsar-vault-audit" data-pulsar="vault-audit" role="img" viewBox="0 0 48 48"><title id="vault-audit-title">Audit</title><rect id="vault-audit-line-1" width="32" height="6" x="8" y="6" fill="currentColor" rx="2"></rect><rect id="vault-audit-line-2" width="32" height="6" x="8" y="16" fill="currentColor" rx="2"></rect><rect id="vault-audit-line-3" width="32" height="6" x="8" y="26" fill="currentColor" rx="2"></rect><rect id="vault-audit-line-4" width="32" height="6" x="8" y="36" fill="currentColor" rx="2"></rect></svg>

animation.css

/* Accent: the line landing now, so the sequence has a leading edge. */
.pulsar-vault-audit #vault-audit-line-4 {
  fill: var(--pulsar-accent, currentColor);
}

/*
  One stamp, four phases of it. The negative delays put each line at a
  different point of the same 4000ms cycle, which is the sequence; the
  zero-delay rule is what makes the longest duration plus delay 4000ms.
*/
.pulsar-vault-audit rect {
  transform-box: fill-box;
  transform-origin: center;
  animation: vault-audit-stamp 4000ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.pulsar-vault-audit #vault-audit-line-3 {
  animation-delay: -300ms;
}

.pulsar-vault-audit #vault-audit-line-2 {
  animation-delay: -600ms;
}

.pulsar-vault-audit #vault-audit-line-1 {
  animation-delay: -900ms;
}

@keyframes vault-audit-stamp {
  0% {
    transform: scale(1.5);
    opacity: 0;
  }
  14%,
  88% {
    transform: scale(1);
    opacity: 1;
  }
  96%,
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-audit rect {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }
}

From this family15 in Vault

See the family