Pulsar
Token

Token

CSS

A six-figure code rolls to a fresh value as its countdown ring completes.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Security and trust
Industries
Finance and fintech, Security and identity
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricuicounter

Companion assets

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

Animated
Token
CSS tier
Static vector
Token, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-token-title" class="pulsar pulsar-vault-token" data-pulsar="vault-token" role="img" viewBox="0 0 48 48"><title id="vault-token-title">Token</title><defs><mask id="vault-token-mask"><rect width="48" height="6" y="21" fill="#fff"></rect></mask></defs><circle id="vault-token-ring-bg" cx="24" cy="24" r="20" fill="none" stroke="currentColor" stroke-width="4" opacity=".1"></circle><circle id="vault-token-ring-fg" cx="24" cy="24" r="20" fill="none" stroke="currentColor" stroke-dasharray="125.66" stroke-width="4" transform="rotate(-90 24 24)"></circle><g id="vault-token-digits" mask="url(#vault-token-mask)"><g id="vault-token-digits-group"><rect width="4" height="6" x="7" y="21" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="13" y="21" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="19" y="21" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="25" y="21" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="31" y="21" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="37" y="21" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="7" y="29" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="13" y="29" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="19" y="29" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="25" y="29" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="31" y="29" fill="currentColor" rx="1"></rect><rect width="4" height="6" x="37" y="29" fill="currentColor" rx="1"></rect></g></g></svg>

animation.css

/* Accent: the progress ring, against its own track. */
.pulsar-vault-token #vault-token-ring-fg {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-vault-token #vault-token-ring-fg {
  animation: vault-token-ring 4000ms linear infinite;
}

@keyframes vault-token-ring {
  0% {
    stroke-dashoffset: 0;
  }
  75% {
    stroke-dashoffset: 125.66;
  }
  90% {
    stroke-dashoffset: 125.66;
  }
  90.1% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 0;
  }
}

.pulsar-vault-token #vault-token-digits-group {
  animation: vault-token-roll 4000ms ease-in-out infinite;
}

@keyframes vault-token-roll {
  0% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(0);
  }
  90% {
    transform: translateY(-8px);
  }
  100% {
    transform: translateY(-8px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-token #vault-token-ring-fg {
    animation: none;
    stroke-dashoffset: 0;
  }
  .pulsar-vault-token #vault-token-digits-group {
    animation: none;
    transform: translateY(0);
  }
}

From this family15 in Vault

See the family