Pulsar
Scan

Scan

CSS

A scan line sweeps a fingerprint, its ridges resolving from faint to solid as it passes.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Security and trust
Industries
Healthcare and life sciences, Security and identity
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricuiwipe

Companion assets

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

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-scan-title" class="pulsar pulsar-vault-scan" data-pulsar="vault-scan" role="img" viewBox="0 0 48 48"><title id="vault-scan-title">Scan</title><defs><mask id="vault-scan-reveal"><rect width="48" height="48"></rect><rect id="vault-scan-mask-rect" width="32" height="40" x="8" y="4" fill="#fff"></rect></mask><g id="vault-scan-fingerprint-geometry"><path d="M8 44V24c0-8.84 7.16-16 16-16s16 7.16 16 16v20h-6V24c0-5.52-4.48-10-10-10s-10 4.48-10 10v20z"></path><path d="M16 44V24c0-4.42 3.58-8 8-8s8 3.58 8 8v20h-6V24c0-1.1-.9-2-2-2s-2 .9-2 2v20z"></path></g></defs><g id="vault-scan-faint"><use fill="currentColor" href="#vault-scan-fingerprint-geometry" opacity=".1"></use></g><g id="vault-scan-solid" mask="url(#vault-scan-reveal)"><use fill="currentColor" href="#vault-scan-fingerprint-geometry"></use></g><rect id="vault-scan-line" width="36" height="2" x="6" y="4" fill="currentColor" rx="1"></rect></svg>

animation.css

/* Accent: the scan line crossing the print. */
.pulsar-vault-scan #vault-scan-line {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-scan #vault-scan-line {
  animation: vault-scan-line 4000ms linear infinite;
}

@keyframes vault-scan-line {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  70% {
    transform: translateY(40px);
    opacity: 1;
  }
  80% {
    transform: translateY(40px);
    opacity: 0;
  }
  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}

.pulsar-vault-scan #vault-scan-mask-rect {
  height: 0;
  animation: vault-scan-mask 4000ms linear infinite;
}

@keyframes vault-scan-mask {
  0% {
    height: 0;
  }
  70% {
    height: 40px;
  }
  80% {
    height: 40px;
  }
  100% {
    height: 40px;
  }
}

.pulsar-vault-scan #vault-scan-faint,
.pulsar-vault-scan #vault-scan-solid {
  animation: vault-scan-fade 4000ms linear infinite;
}

@keyframes vault-scan-fade {
  0% {
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-scan #vault-scan-line {
    animation: none;
    transform: translateY(40px);
  }
  .pulsar-vault-scan #vault-scan-mask-rect {
    animation: none;
    height: 40px;
  }
  .pulsar-vault-scan #vault-scan-faint,
  .pulsar-vault-scan #vault-scan-solid {
    animation: none;
    opacity: 1;
  }
}

From this family15 in Vault

See the family