Pulsar

Data Sharing Gate

CSS

An outline shield split vertically in two opens like a gate, allowing a stream of data packet nodes to pass through.

Tier
CSS
Dependencies
None
Duration
4.4 s, loops
Categories
Transitions and reveals
Use cases
Sync and integration, Security and trust
Industries
SaaS and software, Security and identity
Style
Minimal line · light stroke
Set
consent
Tags
dotslineminimalgeometricarrow

Companion assets

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

Animated
CSS tier
Static vector
Data Sharing Gate, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-consent-data-share" data-pulsar="consent-data-share" viewBox="0 0 160 96"><g class="consent-data-shield-l"><path stroke="currentColor" stroke-width="1.25" d="m80 22-20 6v18c0 12 20 26 20 26"></path></g><g class="consent-data-shield-r"><path stroke="currentColor" stroke-width="1.25" d="m80 22 20 6v18c0 12-20 26-20 26"></path></g><g class="consent-data-packet-1"><circle cx="80" cy="48" r="3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5"></circle></g><g class="consent-data-packet-2"><circle cx="80" cy="48" r="2.5" fill="var(--pulsar-accent, currentColor)"></circle></g></svg>

animation.css

.pulsar-consent-data-share {
  display: block;
  overflow: visible;
}
.pulsar-consent-data-share .consent-data-shield-l {
  animation: consent-data-share-shield-l-anim 4400ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-consent-data-share .consent-data-shield-r {
  animation: consent-data-share-shield-r-anim 4400ms cubic-bezier(0.2, 1, 0.3, 1) infinite;
}
.pulsar-consent-data-share .consent-data-packet-1 {
  animation: consent-data-share-packet1-anim 4400ms cubic-bezier(0.2, 1, 0.3, 1) infinite -300ms;
}
.pulsar-consent-data-share .consent-data-packet-2 {
  animation: consent-data-share-packet2-anim 4400ms cubic-bezier(0.2, 1, 0.3, 1) infinite 0ms;
}

@keyframes consent-data-share-shield-l-anim {
  0%,
  15% {
    transform: translateX(0);
  }
  40%,
  75% {
    transform: translateX(-18px);
  }
  90%,
  100% {
    transform: translateX(0);
  }
}

@keyframes consent-data-share-shield-r-anim {
  0%,
  15% {
    transform: translateX(0);
  }
  40%,
  75% {
    transform: translateX(18px);
  }
  90%,
  100% {
    transform: translateX(0);
  }
}

@keyframes consent-data-share-packet1-anim {
  0%,
  20% {
    transform: translateX(-24px);
    opacity: 0;
  }
  45%,
  70% {
    transform: translateX(12px);
    opacity: 1;
  }
  85%,
  100% {
    transform: translateX(36px);
    opacity: 0;
  }
}

@keyframes consent-data-share-packet2-anim {
  0%,
  25% {
    transform: translateX(-36px);
    opacity: 0;
  }
  50%,
  75% {
    transform: translateX(0);
    opacity: 1;
  }
  90%,
  100% {
    transform: translateX(24px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-consent-data-share .consent-data-shield-l,
  .pulsar-consent-data-share .consent-data-shield-r,
  .pulsar-consent-data-share .consent-data-packet-1,
  .pulsar-consent-data-share .consent-data-packet-2 {
    animation: none;
  }
}

From this family15 in Consent

See the family