Pulsar
Seal

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
Seal
CSS tier
Static vector
Seal, not animated
Download SVG

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);
  }
}

From this family15 in Vault

See the family