Pulsar

Integrity Check

CSS

A vertical column of data blocks is scanned from bottom to top, with any misaligned blocks shifting horizontally into perfect alignment.

Tier
CSS
Dependencies
None
Duration
4.2 s, loops
Categories
Data and progress
Use cases
Security and trust, Compliance and audit
Industries
Security and identity, Cross-industry
Style
Geometric solid · light stroke
Set
enclave
Tags
barsprogressgeometricminimalui

Companion assets

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

Animated
CSS tier
Static vector
Integrity Check, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-enclave-integrity" data-pulsar="enclave-integrity" viewBox="0 0 160 96"><rect width="56" height="64" x="52" y="16" stroke="currentColor" stroke-width="1.5" opacity=".35" rx="4"></rect><rect width="44" height="10" x="58" y="22" stroke="currentColor" stroke-width="1.5" class="enclave-int-b1" opacity=".7" rx="2"></rect><rect width="44" height="10" x="58" y="36" fill="var(--pulsar-accent, currentColor)" fill-opacity=".2" stroke="var(--pulsar-accent, currentColor)" stroke-width="2" class="enclave-int-b2" rx="2"></rect><rect width="44" height="10" x="58" y="50" stroke="currentColor" stroke-width="1.5" class="enclave-int-b3" opacity=".7" rx="2"></rect><rect width="44" height="10" x="58" y="64" stroke="currentColor" stroke-width="1.5" class="enclave-int-b4" opacity=".7" rx="2"></rect><line x1="48" x2="112" y1="76" y2="76" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="enclave-int-scan"></line></svg>

animation.css

.pulsar-enclave-integrity {
  display: block;
  overflow: visible;
}
.pulsar-enclave-integrity .enclave-int-scan {
  animation: enclave-integrity-scan-anim 4200ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-enclave-integrity .enclave-int-b2 {
  animation: enclave-integrity-b2-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}

@keyframes enclave-integrity-scan-anim {
  0%,
  15% {
    transform: translateY(0);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  58% {
    transform: translateY(-56px);
    opacity: 1;
  }
  65%,
  100% {
    transform: translateY(-56px);
    opacity: 0;
  }
}

@keyframes enclave-integrity-b2-anim {
  0%,
  28% {
    transform: translateX(12px);
  }
  42%,
  80% {
    transform: translateX(0);
  }
  92%,
  100% {
    transform: translateX(12px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-enclave-integrity * {
    animation: none !important;
  }
}

From this family15 in Enclave

See the family