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

CSS tier

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