Pulsar
Attest

Attest

CSS

A certificate builds line by line and a seal presses onto it at the end.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Icons and micro-interactions
Use cases
Security and trust, Documents and files
Industries
Legal, Insurance
Style
Geometric solid · none stroke
Set
vault
Tags
loopgeometricuiwipe

Companion assets

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

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

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="vault-attest-title" class="pulsar pulsar-vault-attest" data-pulsar="vault-attest" role="img" viewBox="0 0 48 48"><title id="vault-attest-title">Attest</title><rect id="vault-attest-page" width="32" height="40" x="8" y="4" fill="currentColor" opacity=".15" rx="3"></rect><rect id="vault-attest-line-1" width="20" height="3" x="14" y="11" fill="currentColor" rx="1.5"></rect><rect id="vault-attest-line-2" width="20" height="3" x="14" y="18" fill="currentColor" rx="1.5"></rect><rect id="vault-attest-line-3" width="13" height="3" x="14" y="25" fill="currentColor" rx="1.5"></rect><circle id="vault-attest-seal" cx="31" cy="34" r="6" fill="currentColor"></circle></svg>

animation.css

/* Accent: the seal pressed at the end, which is what attests the page. */
.pulsar-vault-attest #vault-attest-seal {
  fill: var(--pulsar-accent, currentColor);
}

/* Each line wipes in from its left edge, in order. */
.pulsar-vault-attest #vault-attest-line-1,
.pulsar-vault-attest #vault-attest-line-2,
.pulsar-vault-attest #vault-attest-line-3 {
  transform-box: fill-box;
  transform-origin: left center;
  animation: vault-attest-line 4000ms cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.pulsar-vault-attest #vault-attest-line-2 {
  animation-delay: -240ms;
}

.pulsar-vault-attest #vault-attest-line-1 {
  animation-delay: -480ms;
}

@keyframes vault-attest-line {
  0% {
    transform: scaleX(0);
  }
  26%,
  88% {
    transform: scaleX(1);
  }
  97%,
  100% {
    transform: scaleX(0);
  }
}

.pulsar-vault-attest #vault-attest-seal {
  transform-box: fill-box;
  transform-origin: center;
  animation: vault-attest-press 4000ms ease-in-out infinite;
}

/* Presses down onto the page rather than fading onto it. */
@keyframes vault-attest-press {
  0%,
  46% {
    transform: scale(1.8);
    opacity: 0;
    animation-timing-function: cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  62%,
  88% {
    transform: scale(1);
    opacity: 1;
  }
  97%,
  100% {
    transform: scale(1.8);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-vault-attest #vault-attest-line-1,
  .pulsar-vault-attest #vault-attest-line-2,
  .pulsar-vault-attest #vault-attest-line-3 {
    animation: none;
    transform: scaleX(1);
  }
  .pulsar-vault-attest #vault-attest-seal {
    animation: none;
    transform: scale(1);
    opacity: 1;
  }
}

From this family15 in Vault

See the family