Pulsar
Grant

Grant

CSS

A permission block slides into an empty slot in a set and locks flush.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Onboarding and setup, 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
Grant
CSS tier
Static vector
Grant, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-grant-title" class="pulsar pulsar-vault-grant" data-pulsar="vault-grant" role="img" viewBox="0 0 48 48"><title id="vault-grant-title">Grant</title><rect id="vault-grant-slot" width="12" height="12" x="18" y="30" fill="currentColor" opacity=".2" rx="2"></rect><rect id="vault-grant-held-1" width="12" height="12" x="4" y="30" fill="currentColor" rx="2"></rect><rect id="vault-grant-held-2" width="12" height="12" x="32" y="30" fill="currentColor" rx="2"></rect><rect id="vault-grant-held-3" width="12" height="12" x="4" y="16" fill="currentColor" rx="2"></rect><rect id="vault-grant-held-4" width="12" height="12" x="32" y="16" fill="currentColor" rx="2"></rect><rect id="vault-grant-block" width="12" height="12" x="18" y="30" fill="currentColor" rx="2"></rect></svg>

animation.css

/* Accent: the block being granted, against the set already held. */
.pulsar-vault-grant #vault-grant-block {
  fill: var(--pulsar-accent, currentColor);
}

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

/* Down the column, then flush into the slot and held there. */
@keyframes vault-grant-slide {
  0% {
    transform: translateY(-28px);
    opacity: 0;
  }
  12% {
    transform: translateY(-28px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  }
  40%,
  88% {
    transform: translateY(0);
    opacity: 1;
  }
  96%,
  100% {
    transform: translateY(-28px);
    opacity: 0;
  }
}

.pulsar-vault-grant #vault-grant-slot {
  animation: vault-grant-slot 4000ms ease-in-out infinite;
}

@keyframes vault-grant-slot {
  0%,
  35% {
    opacity: 0.2;
  }
  45%,
  100% {
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-grant #vault-grant-block {
    animation: none;
    transform: translateY(0);
    opacity: 1;
  }
  .pulsar-vault-grant #vault-grant-slot {
    animation: none;
    opacity: 0;
  }
}

From this family15 in Vault

See the family