Pulsar
Encrypt

Encrypt

CSS

Ordered blocks scramble into an even, unreadable field.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Security and trust
Industries
Finance and fintech, Security and identity
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
Encrypt
CSS tier
Static vector
Encrypt, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-encrypt-title" class="pulsar pulsar-vault-encrypt" data-pulsar="vault-encrypt" role="img" viewBox="0 0 48 48"><title id="vault-encrypt-title">Encrypt</title><rect id="vault-encrypt-c1" width="10" height="10" x="5" y="5" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c2" width="10" height="10" x="19" y="5" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c3" width="10" height="10" x="33" y="5" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c4" width="10" height="10" x="5" y="19" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c5" width="10" height="10" x="19" y="19" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c6" width="10" height="10" x="33" y="19" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c7" width="10" height="10" x="5" y="33" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c8" width="10" height="10" x="19" y="33" fill="currentColor" rx="2"></rect><rect id="vault-encrypt-c9" width="10" height="10" x="33" y="33" fill="currentColor" rx="2"></rect></svg>

animation.css

/* Accent: the diagonal, so the ordered grid losing its order stays readable. */
.pulsar-vault-encrypt #vault-encrypt-c1,
.pulsar-vault-encrypt #vault-encrypt-c5,
.pulsar-vault-encrypt #vault-encrypt-c9 {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-encrypt rect {
  transform-box: view-box;
  animation-duration: 4000ms;
  animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  animation-iteration-count: infinite;
}

/*
  Three scramble paths shared across nine cells. Each cell leaves the grid
  and comes back to it, so 0% and 100% are the same ordered field and the
  loop has no seam.
*/
.pulsar-vault-encrypt #vault-encrypt-c1,
.pulsar-vault-encrypt #vault-encrypt-c4,
.pulsar-vault-encrypt #vault-encrypt-c8 {
  animation-name: vault-encrypt-a;
}

.pulsar-vault-encrypt #vault-encrypt-c2,
.pulsar-vault-encrypt #vault-encrypt-c6,
.pulsar-vault-encrypt #vault-encrypt-c7 {
  animation-name: vault-encrypt-b;
}

.pulsar-vault-encrypt #vault-encrypt-c3,
.pulsar-vault-encrypt #vault-encrypt-c5,
.pulsar-vault-encrypt #vault-encrypt-c9 {
  animation-name: vault-encrypt-c;
}

.pulsar-vault-encrypt #vault-encrypt-c4,
.pulsar-vault-encrypt #vault-encrypt-c5,
.pulsar-vault-encrypt #vault-encrypt-c6 {
  animation-delay: -240ms;
}

.pulsar-vault-encrypt #vault-encrypt-c7,
.pulsar-vault-encrypt #vault-encrypt-c8,
.pulsar-vault-encrypt #vault-encrypt-c9 {
  animation-delay: -480ms;
}

@keyframes vault-encrypt-a {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  45%,
  70% {
    transform: translate(14px, 14px);
    opacity: 0.45;
  }
}

@keyframes vault-encrypt-b {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  45%,
  70% {
    transform: translate(-14px, 14px);
    opacity: 0.45;
  }
}

@keyframes vault-encrypt-c {
  0%,
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
  45%,
  70% {
    transform: translate(0, -14px);
    opacity: 0.45;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-encrypt rect {
    animation: none;
    transform: translate(0, 0);
    opacity: 1;
  }
}

From this family15 in Vault

See the family