Pulsar
Lock

Lock

CSS

A shackle lowers into the body of a padlock and the mechanism seats with a quarter turn.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Security and trust
Industries
Finance and fintech, Security and identity
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
Lock
CSS tier
Static vector
Lock, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-lock-title" class="pulsar pulsar-vault-lock" data-pulsar="vault-lock" role="img" viewBox="0 0 48 48"><title id="vault-lock-title">Lock</title><path id="vault-lock-shackle" fill="currentColor" d="M12 28v-8c0-6.627 5.373-12 12-12s12 5.373 12 12v8h-6v-8a6 6 0 0 0-12 0v8z"></path><rect id="vault-lock-body" width="32" height="24" x="8" y="20" fill="currentColor" rx="2"></rect><rect id="vault-lock-cylinder" width="12" height="12" x="18" y="26" fill="currentColor" opacity=".3" rx="2"></rect></svg>

animation.css

/* Accent: the shackle that closes. */
.pulsar-vault-lock #vault-lock-shackle {
  fill: var(--pulsar-accent, currentColor);
}

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

@keyframes vault-lock-shackle {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(8px);
  }
  75% {
    transform: translateY(8px);
  }
  85% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(0);
  }
}

.pulsar-vault-lock #vault-lock-cylinder {
  transform-origin: 24px 32px;
  transform-box: view-box;
  animation: vault-lock-cylinder 4000ms ease-in-out infinite;
}

@keyframes vault-lock-cylinder {
  0% {
    transform: rotate(0deg);
  }
  20% {
    transform: rotate(0deg);
  }
  40% {
    transform: rotate(90deg);
  }
  75% {
    transform: rotate(90deg);
  }
  85% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-lock #vault-lock-shackle {
    animation: none;
    transform: translateY(8px);
  }
  .pulsar-vault-lock #vault-lock-cylinder {
    animation: none;
    transform: rotate(90deg);
  }
}

From this family15 in Vault

See the family