Pulsar

Gate Open

CSS

Two vertical curtains slide left and right, revealing a verified consent check token behind them.

Tier
CSS
Dependencies
None
Duration
4.2 s, loops
Categories
Transitions and reveals
Use cases
Security and trust, Workflow and approvals
Industries
Security and identity, Cross-industry
Style
Minimal line · light stroke
Set
consent
Tags
wipeminimallinegeometricpulse

Companion assets

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

Animated
CSS tier
Static vector
Gate Open, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-consent-gate-open" data-pulsar="consent-gate-open" viewBox="0 0 160 96"><g class="consent-gate-token"><circle cx="80" cy="48" r="16" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5"></circle><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="m73 48 5 5 9-10"></path></g><g class="consent-gate-left"><line x1="80" x2="80" y1="16" y2="80" stroke="currentColor" stroke-width="1.5"></line><path stroke="currentColor" d="M52 24h28M56 36h24M52 48h28M56 60h24M52 72h28" opacity=".35"></path></g><g class="consent-gate-right"><line x1="80" x2="80" y1="16" y2="80" stroke="currentColor" stroke-width="1.5"></line><path stroke="currentColor" d="M80 24h28M80 36h24M80 48h28M80 60h24M80 72h28" opacity=".35"></path></g></svg>

animation.css

.pulsar-consent-gate-open {
  display: block;
  overflow: visible;
}
.pulsar-consent-gate-open .consent-gate-token {
  animation: consent-gate-open-token-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}
.pulsar-consent-gate-open .consent-gate-left {
  animation: consent-gate-open-left-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-consent-gate-open .consent-gate-right {
  animation: consent-gate-open-right-anim 4200ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}

@keyframes consent-gate-open-token-anim {
  0%,
  15% {
    transform: scale(0.6);
    opacity: 0;
  }
  40%,
  80% {
    transform: scale(1);
    opacity: 1;
  }
  92%,
  100% {
    transform: scale(0.6);
    opacity: 0;
  }
}

@keyframes consent-gate-open-left-anim {
  0%,
  15% {
    transform: translateX(0);
  }
  40%,
  80% {
    transform: translateX(-32px);
  }
  92%,
  100% {
    transform: translateX(0);
  }
}

@keyframes consent-gate-open-right-anim {
  0%,
  15% {
    transform: translateX(0);
  }
  40%,
  80% {
    transform: translateX(32px);
  }
  92%,
  100% {
    transform: translateX(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-consent-gate-open .consent-gate-token,
  .pulsar-consent-gate-open .consent-gate-left,
  .pulsar-consent-gate-open .consent-gate-right {
    animation: none;
  }
}

From this family15 in Consent

See the family