Pulsar
Mask

Mask

CSS

Characters in a field redact one at a time from the right until none remain readable.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Security and trust
Industries
Healthcare and life sciences, Security and identity
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricuifade

Companion assets

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

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-mask-title" class="pulsar pulsar-vault-mask" data-pulsar="vault-mask" role="img" viewBox="0 0 48 48"><title id="vault-mask-title">Mask</title><rect id="vault-mask-unit-0" width="6" height="6" x="1" y="21" fill="currentColor" rx="2"></rect><rect id="vault-mask-unit-1" width="6" height="6" x="9" y="21" fill="currentColor" rx="2"></rect><rect id="vault-mask-unit-2" width="6" height="6" x="17" y="21" fill="currentColor" rx="2"></rect><rect id="vault-mask-unit-3" width="6" height="6" x="25" y="21" fill="currentColor" rx="2"></rect><rect id="vault-mask-unit-4" width="6" height="6" x="33" y="21" fill="currentColor" rx="2"></rect><rect id="vault-mask-unit-5" width="6" height="6" x="41" y="21" fill="currentColor" rx="2"></rect></svg>

animation.css

/* Accent: the units, which rise from 0.2 opacity as they are revealed. */
.pulsar-vault-mask [id^='vault-mask-unit-'] {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-mask [id^='vault-mask-unit-'] {
  opacity: 0.2;
  animation-duration: 4000ms;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}

.pulsar-vault-mask #vault-mask-unit-5 {
  animation-name: vault-mask-5;
}
.pulsar-vault-mask #vault-mask-unit-4 {
  animation-name: vault-mask-4;
}
.pulsar-vault-mask #vault-mask-unit-3 {
  animation-name: vault-mask-3;
}
.pulsar-vault-mask #vault-mask-unit-2 {
  animation-name: vault-mask-2;
}
.pulsar-vault-mask #vault-mask-unit-1 {
  animation-name: vault-mask-1;
}
.pulsar-vault-mask #vault-mask-unit-0 {
  animation-name: vault-mask-0;
}

@keyframes vault-mask-5 {
  0% {
    opacity: 0.2;
  }
  7.5% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes vault-mask-4 {
  0%,
  7.5% {
    opacity: 0.2;
  }
  15% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes vault-mask-3 {
  0%,
  15% {
    opacity: 0.2;
  }
  22.5% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes vault-mask-2 {
  0%,
  22.5% {
    opacity: 0.2;
  }
  30% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes vault-mask-1 {
  0%,
  30% {
    opacity: 0.2;
  }
  37.5% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}
@keyframes vault-mask-0 {
  0%,
  37.5% {
    opacity: 0.2;
  }
  45% {
    opacity: 1;
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0.2;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-mask [id^='vault-mask-unit-'] {
    animation: none;
    opacity: 1;
  }
}

From this family15 in Vault

See the family