Pulsar

Trusted I/O

CSS

An input block and an output block pass data through a central, opaque, shielded container that pulses as processing occurs.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Sync and integration, Security and trust
Industries
SaaS and software, Security and identity
Style
Geometric solid · light stroke
Set
enclave
Tags
linepulsegeometricminimalui

Companion assets

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

Animated
CSS tier
Static vector
Trusted I/O, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-enclave-trusted-io" data-pulsar="enclave-trusted-io" viewBox="0 0 160 96"><rect width="36" height="48" x="62" y="24" fill="currentColor" fill-opacity=".05" stroke="currentColor" stroke-width="2" rx="4"></rect><circle cx="80" cy="48" r="4" fill="var(--pulsar-accent, currentColor)"></circle><line x1="20" x2="62" y1="48" y2="48" stroke="currentColor" stroke-linecap="round" stroke-width="1.8" opacity=".5"></line><circle cx="20" cy="48" r="3" fill="currentColor" class="enclave-io-in-packet"></circle><line x1="98" x2="140" y1="48" y2="48" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2"></line><circle cx="98" cy="48" r="3" fill="var(--pulsar-accent, currentColor)" class="enclave-io-out-packet"></circle><circle cx="80" cy="48" r="12" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.5" class="enclave-io-core-pulse"></circle></svg>

animation.css

.pulsar-enclave-trusted-io {
  display: block;
  overflow: visible;
}
.pulsar-enclave-trusted-io .enclave-io-in-packet {
  animation: enclave-trusted-io-in-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-enclave-trusted-io .enclave-io-out-packet {
  animation: enclave-trusted-io-out-anim 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
.pulsar-enclave-trusted-io .enclave-io-core-pulse {
  transform-origin: 80px 48px;
  animation: enclave-trusted-io-pulse-anim 4000ms ease infinite;
}

@keyframes enclave-trusted-io-in-anim {
  0% {
    transform: translateX(0);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  38% {
    transform: translateX(42px);
    opacity: 1;
  }
  42%,
  100% {
    transform: translateX(42px);
    opacity: 0;
  }
}

@keyframes enclave-trusted-io-out-anim {
  0%,
  48% {
    transform: translateX(0);
    opacity: 0;
  }
  54% {
    opacity: 1;
  }
  78% {
    transform: translateX(42px);
    opacity: 1;
  }
  84%,
  100% {
    transform: translateX(42px);
    opacity: 0;
  }
}

@keyframes enclave-trusted-io-pulse-anim {
  0%,
  36% {
    transform: scale(0.5);
    opacity: 0;
  }
  46% {
    opacity: 0.9;
  }
  64% {
    transform: scale(1.5);
    opacity: 0;
  }
  100% {
    transform: scale(1.5);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-enclave-trusted-io * {
    animation: none !important;
  }
}

From this family15 in Enclave

See the family