Pulsar
A reverse proxy barrier receiving, verifying, and mirroring packet traffic

Reverse Proxy

CSS

An inbound request meets an intermediate proxy barrier, verifying credentials before a mirrored authenticated packet emerges to continue the path.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Security and trust, Workflow and approvals
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
endpoint
Tags
looplineminimalui

Companion assets

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

Animated
A reverse proxy barrier receiving, verifying, and mirroring packet traffic
CSS tier
Static vector
Reverse Proxy, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-proxy-title" class="pulsar pulsar-endpoint-proxy" data-pulsar="endpoint-proxy" role="img" viewBox="0 0 160 96"><title id="endpoint-proxy-title">A reverse proxy barrier receiving, verifying, and mirroring packet traffic</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-proxy-datum" d="M20 24h8m-8 0v8m120-8h-8m8 0v8M20 72h8m-8 0v-8m120 8h-8m8 0v-8"></path><path id="endpoint-proxy-ticks" d="M50 45v6m60-6v6"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="endpoint-proxy-track-in" x1="28" x2="72" y1="48" y2="48"></line><line id="endpoint-proxy-track-out" x1="88" x2="132" y1="48" y2="48"></line><rect id="endpoint-proxy-barrier" width="8" height="40" x="76" y="28"></rect><path id="endpoint-proxy-caliper-left" d="M72 44h4m-4 8h4"></path><path id="endpoint-proxy-caliper-right" d="M84 44h4m-4 8h4"></path></g><line id="endpoint-proxy-core" x1="80" x2="80" y1="36" y2="60" stroke="currentColor" stroke-width="1.5"></line><circle id="endpoint-proxy-ping" cx="80" cy="48" r="4" fill="none" stroke="currentColor" stroke-width="1"></circle><g id="endpoint-proxy-in"><rect width="8" height="8" x="28" y="44" fill="currentColor" rx="1"></rect></g><g id="endpoint-proxy-out"><rect width="8" height="8" x="88" y="44" fill="currentColor" rx="1"></rect></g></svg>

animation.css

.pulsar-endpoint-proxy #endpoint-proxy-in,
.pulsar-endpoint-proxy #endpoint-proxy-out,
.pulsar-endpoint-proxy #endpoint-proxy-core,
.pulsar-endpoint-proxy #endpoint-proxy-ping,
.pulsar-endpoint-proxy #endpoint-proxy-barrier {
  transform-box: fill-box;
  animation-duration: 3600ms;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

.pulsar-endpoint-proxy #endpoint-proxy-in {
  fill: currentColor;
  transform-origin: center;
  animation-name: endpoint-proxy-in;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.pulsar-endpoint-proxy #endpoint-proxy-out {
  fill: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-proxy-out;
  animation-timing-function: cubic-bezier(0.25, 1, 0.5, 1);
}

.pulsar-endpoint-proxy #endpoint-proxy-core {
  stroke: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-proxy-c;
  animation-timing-function: ease-in-out;
}

.pulsar-endpoint-proxy #endpoint-proxy-ping {
  stroke: var(--pulsar-accent, currentColor);
  transform-origin: center;
  animation-name: endpoint-proxy-p;
  animation-timing-function: cubic-bezier(0.2, 0.6, 0.3, 1);
}

.pulsar-endpoint-proxy #endpoint-proxy-barrier {
  stroke: currentColor;
  animation-name: endpoint-proxy-b;
}

@keyframes endpoint-proxy-in {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  8% {
    transform: translate(0, 0);
    opacity: 1;
  }
  38% {
    transform: translate(44px, 0);
    opacity: 1;
  }
  44% {
    transform: translate(44px, 0) scale(0.2);
    opacity: 0;
  }
  100% {
    transform: translate(44px, 0) scale(0.2);
    opacity: 0;
  }
}

@keyframes endpoint-proxy-c {
  0%,
  36%,
  60%,
  100% {
    opacity: 0.3;
    transform: scaleY(1);
  }
  42%,
  52% {
    opacity: 1;
    transform: scaleY(1.2);
  }
}

@keyframes endpoint-proxy-p {
  0%,
  38% {
    opacity: 0;
    transform: scale(0.5);
  }
  42% {
    opacity: 0.8;
    transform: scale(0.8);
  }
  56%,
  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes endpoint-proxy-out {
  0%,
  48% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
  }
  54% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
  84% {
    transform: translate(40px, 0) scale(1);
    opacity: 1;
  }
  92% {
    transform: translate(40px, 0) scale(0.2);
    opacity: 0;
  }
  100% {
    transform: translate(40px, 0) scale(0.2);
    opacity: 0;
  }
}

@keyframes endpoint-proxy-b {
  0%,
  38%,
  56%,
  100% {
    stroke: currentColor;
  }
  44%,
  50% {
    stroke: var(--pulsar-accent, currentColor);
  }
}

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

  .pulsar-endpoint-proxy #endpoint-proxy-ping {
    opacity: 0;
  }

  .pulsar-endpoint-proxy #endpoint-proxy-in {
    transform: translate(44px, 0);
    opacity: 0.7;
  }

  .pulsar-endpoint-proxy #endpoint-proxy-out {
    transform: translate(40px, 0);
    opacity: 1;
  }
}

From this family15 in Endpoint

See the family