Pulsar

Multi-Factor Verification

CSS

Two distinct validation rings (representing two factors) compress onto a single central axis and merge into a solid lock icon.

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
circleringgeometricminimalpulse

Companion assets

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

Animated
CSS tier
Static vector
Multi-Factor Verification, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-credential-mfa-verify" data-pulsar="credential-mfa-verify" viewBox="0 0 160 96"><g class="credential-mfa-factor-1"><circle cx="56" cy="48" r="18" stroke="currentColor" stroke-width="2"></circle><circle cx="56" cy="48" r="3" fill="currentColor"></circle></g><g class="credential-mfa-factor-2"><circle cx="104" cy="48" r="18" stroke="var(--pulsar-accent, currentColor)" stroke-width="2"></circle><circle cx="104" cy="48" r="3" fill="var(--pulsar-accent, currentColor)"></circle></g><circle cx="80" cy="48" r="22" stroke="var(--pulsar-accent, currentColor)" stroke-width="2.5" class="credential-mfa-merged"></circle></svg>

animation.css

.pulsar-credential-mfa-verify {
  display: block;
  overflow: visible;
}
.pulsar-credential-mfa-verify .credential-mfa-factor-1 {
  animation: credential-mfa-verify-f1-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-credential-mfa-verify .credential-mfa-factor-2 {
  animation: credential-mfa-verify-f2-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-credential-mfa-verify .credential-mfa-merged {
  transform-origin: 80px 48px;
  animation: credential-mfa-verify-merged-anim 4200ms ease infinite;
}

@keyframes credential-mfa-verify-f1-anim {
  0%,
  15% {
    transform: translateX(0);
    opacity: 0.8;
  }
  38%,
  78% {
    transform: translateX(24px);
    opacity: 0.2;
  }
  90%,
  100% {
    transform: translateX(0);
    opacity: 0.8;
  }
}

@keyframes credential-mfa-verify-f2-anim {
  0%,
  15% {
    transform: translateX(0);
    opacity: 0.8;
  }
  38%,
  78% {
    transform: translateX(-24px);
    opacity: 0.2;
  }
  90%,
  100% {
    transform: translateX(0);
    opacity: 0.8;
  }
}

@keyframes credential-mfa-verify-merged-anim {
  0%,
  35% {
    transform: scale(0.6);
    opacity: 0;
  }
  44%,
  78% {
    transform: scale(1);
    opacity: 1;
  }
  90%,
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}

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

From this family15 in Credential

See the family