Pulsar
Revoke

Revoke

CSS

A permission block withdraws from a set and the remaining blocks close ranks.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Errors and warnings, Security and trust
Industries
Security and identity, HR and recruitment
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricui

Companion assets

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

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-revoke-title" class="pulsar pulsar-vault-revoke" data-pulsar="vault-revoke" role="img" viewBox="0 0 48 48"><title id="vault-revoke-title">Revoke</title><rect id="vault-revoke-keep-1" width="10" height="10" x="1" y="19" fill="currentColor" rx="2"></rect><rect id="vault-revoke-keep-2" width="10" height="10" x="25" y="19" fill="currentColor" rx="2"></rect><rect id="vault-revoke-keep-3" width="10" height="10" x="37" y="19" fill="currentColor" rx="2"></rect><rect id="vault-revoke-block" width="10" height="10" x="13" y="19" fill="currentColor" rx="2"></rect></svg>

animation.css

/* Accent: the permission being withdrawn, against the ones that stay. */
.pulsar-vault-revoke #vault-revoke-block {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-vault-revoke #vault-revoke-block {
  transform-box: view-box;
  animation: vault-revoke-withdraw 4000ms ease-in-out infinite;
}

/* Lifts out of the row, then the row closes over where it was. */
@keyframes vault-revoke-withdraw {
  0%,
  15% {
    transform: translateY(0);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  35%,
  86% {
    transform: translateY(-16px);
    opacity: 1;
  }
  94% {
    transform: translateY(-16px);
    opacity: 0;
  }
  99%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

.pulsar-vault-revoke #vault-revoke-keep-2,
.pulsar-vault-revoke #vault-revoke-keep-3 {
  transform-box: view-box;
  animation: vault-revoke-close 4000ms ease-in-out infinite;
}

@keyframes vault-revoke-close {
  0%,
  35% {
    transform: translateX(0);
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  55%,
  86% {
    transform: translateX(-12px);
  }
  97%,
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-revoke #vault-revoke-block {
    animation: none;
    transform: translateY(-16px);
    opacity: 1;
  }
  .pulsar-vault-revoke #vault-revoke-keep-2,
  .pulsar-vault-revoke #vault-revoke-keep-3 {
    animation: none;
    transform: translateX(-12px);
  }
}

From this family15 in Vault

See the family