Seal

CSS

Concentric plates rotate into alignment and stop as one, sealing a record.

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: loopgeometricuirotate

Companion assets

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

Animated

CSS tier

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-seal-title" class="pulsar pulsar-vault-seal" data-pulsar="vault-seal" role="img" viewBox="0 0 48 48"><title id="vault-seal-title">Seal</title><defs><mask id="vault-seal-notch"><rect width="48" height="48" fill="#fff"></rect><rect width="4" height="24" x="22"></rect></mask></defs><circle id="vault-seal-plate-1" cx="24" cy="24" r="20" fill="currentColor" mask="url(#vault-seal-notch)" opacity=".1"></circle><circle id="vault-seal-plate-2" cx="24" cy="24" r="14" fill="currentColor" mask="url(#vault-seal-notch)" opacity=".2"></circle><circle id="vault-seal-plate-3" cx="24" cy="24" r="8" fill="currentColor" mask="url(#vault-seal-notch)" opacity=".3"></circle></svg>

animation.css

/* Accent: the innermost plate, the one that lands last. */
.pulsar-vault-seal #vault-seal-plate-3 {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-seal [id^='vault-seal-plate-'] {
  transform-origin: 24px 24px;
  transform-box: view-box;
  animation-duration: 4000ms;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
}

.pulsar-vault-seal #vault-seal-plate-1 {
  animation-name: vault-seal-1;
}
.pulsar-vault-seal #vault-seal-plate-2 {
  animation-name: vault-seal-2;
}
.pulsar-vault-seal #vault-seal-plate-3 {
  animation-name: vault-seal-3;
}

@keyframes vault-seal-1 {
  0% {
    transform: rotate(-120deg);
  }
  45% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-120deg);
  }
}

@keyframes vault-seal-2 {
  0% {
    transform: rotate(240deg);
  }
  45% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(240deg);
  }
}

@keyframes vault-seal-3 {
  0% {
    transform: rotate(-480deg);
  }
  45% {
    transform: rotate(0deg);
  }
  80% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-480deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-seal [id^='vault-seal-plate-'] {
    animation: none;
    transform: rotate(0deg);
  }
}