Pulsar
Technical bearer authentication padlock verifying token and unlocking

Bearer Auth

CSS

A technical wireframe padlock receives a horizontal bearer token keycard, verifying credentials as the shackle unlocks and pivots open.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Success and confirmation, Security and trust
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
endpoint
Tags
looplinegeometricrotateui

Companion assets

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

Animated
Technical bearer authentication padlock verifying token and unlocking
CSS tier
Static vector
Bearer Auth, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-auth-title" class="pulsar pulsar-endpoint-auth" data-pulsar="endpoint-auth" role="img" viewBox="0 0 160 96"><title id="endpoint-auth-title">Technical bearer authentication padlock verifying token and unlocking</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-auth-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-auth-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line><line x1="80" x2="80" y1="24" y2="76" stroke-dasharray="2 4"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><path id="endpoint-auth-shackle" d="M72 44V34a8 8 0 0 1 16 0v10"></path><rect id="endpoint-auth-body" width="28" height="24" x="66" y="44" rx="2"></rect></g><circle id="endpoint-auth-beacon" cx="88" cy="49" r="1.5" fill="currentColor"></circle><g id="endpoint-auth-core" fill="currentColor"><circle cx="80" cy="53" r="2.5"></circle><polygon points="79,53 81,53 82,60 78,60"></polygon></g><circle id="endpoint-auth-halo" cx="80" cy="54" r="6" fill="none" stroke="currentColor" stroke-width="1.25" opacity="0"></circle><g id="endpoint-auth-token" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line x1="28" x2="62" y1="56" y2="56"></line><line x1="36" x2="36" y1="53" y2="59" stroke-width="1"></line><line x1="42" x2="42" y1="53" y2="59" stroke-width="1"></line><line x1="48" x2="48" y1="53" y2="59" stroke-width="1"></line><polygon fill="currentColor" stroke="none" points="62,54 66,56 62,58"></polygon></g></svg>

animation.css

.pulsar-endpoint-auth {
  --pulsar-accent: currentColor;
}

.pulsar-endpoint-auth #endpoint-auth-core,
.pulsar-endpoint-auth #endpoint-auth-beacon,
.pulsar-endpoint-auth #endpoint-auth-token polygon {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-auth #endpoint-auth-shackle,
.pulsar-endpoint-auth #endpoint-auth-halo,
.pulsar-endpoint-auth #endpoint-auth-token {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-auth #endpoint-auth-halo {
  animation: endpoint-auth-ring 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 54px;
}

.pulsar-endpoint-auth #endpoint-auth-token {
  animation: endpoint-auth-pass 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-endpoint-auth #endpoint-auth-shackle {
  animation: endpoint-auth-unlock 3600ms cubic-bezier(0.34, 1.56, 0.64, 1) infinite;
  transform-origin: 72px 34px;
}

@keyframes endpoint-auth-pass {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  32%,
  65% {
    transform: translateX(18px);
    opacity: 1;
  }
  85% {
    transform: translateX(75px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 0;
  }
}

@keyframes endpoint-auth-unlock {
  0%,
  32% {
    transform: translateY(0) rotate(0);
  }
  38% {
    transform: translateY(-4px) rotate(0);
  }
  48%,
  70% {
    transform: translateY(-4px) rotate(-32deg);
  }
  82%,
  100% {
    transform: translateY(0) rotate(0);
  }
}

@keyframes endpoint-auth-ring {
  0%,
  35% {
    opacity: 0;
    transform: scale(0.6);
  }
  42% {
    opacity: 0.9;
  }
  58% {
    opacity: 0;
    transform: scale(2.6);
  }
  100% {
    opacity: 0;
    transform: scale(2.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-auth * {
    animation: none !important;
    transform: none;
  }
  .pulsar-endpoint-auth #endpoint-auth-token {
    opacity: 1;
    transform: translateX(18px);
  }
}

From this family15 in Endpoint

See the family