Pulsar

Passkey

CSS

A biometrically inspired biometric waveform resolves from a chaotic wave into a clean, uniform pulse on a timeline.

Tier
CSS
Dependencies
None
Duration
4.2 s, loops
Categories
Data and progress
Use cases
Success and confirmation, Security and trust
Industries
Security and identity, Cross-industry
Style
Technical · light stroke
Set
credential
Tags
wavelinepulsegeometricminimal

Companion assets

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

Animated
CSS tier
Static vector
Passkey, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-credential-passkey" data-pulsar="credential-passkey" viewBox="0 0 160 96"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.8" d="M64 64c0-26 32-26 32 0" opacity=".4"></path><path stroke="currentColor" stroke-linecap="round" stroke-width="1.8" d="M72 64c0-18 16-18 16 0" opacity=".4"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M30 64h26c6 0 10-32 24-32s18 32 24 32h26" class="credential-passkey-pulse"></path><circle cx="80" cy="32" r="6" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="credential-passkey-halo"></circle><circle cx="80" cy="32" r="2.5" fill="var(--pulsar-accent, currentColor)"></circle></svg>

animation.css

.pulsar-credential-passkey {
  display: block;
  overflow: visible;
}
.pulsar-credential-passkey .credential-passkey-pulse {
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: credential-passkey-pulse-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-credential-passkey .credential-passkey-halo {
  transform-origin: 80px 32px;
  animation: credential-passkey-halo-anim 4200ms ease infinite;
}

@keyframes credential-passkey-pulse-anim {
  0%,
  15% {
    stroke-dashoffset: 140;
    opacity: 0;
  }
  25% {
    opacity: 1;
  }
  50%,
  80% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  92%,
  100% {
    stroke-dashoffset: -140;
    opacity: 0;
  }
}

@keyframes credential-passkey-halo-anim {
  0%,
  42% {
    transform: scale(0.4);
    opacity: 0;
  }
  52% {
    opacity: 0.9;
  }
  70% {
    transform: scale(1.6);
    opacity: 0;
  }
  100% {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-credential-passkey * {
    animation: none !important;
  }
}

From this family15 in Credential

See the family