Pulsar
Technical HTTP headers inspection stack displaying structured key-value pairs

HTTP Headers

CSS

A technical stack of key-value header rows advances vertically within an API frame, highlighting authenticated tokens and content headers.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Dashboards and reporting, Navigation and wayfinding
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
endpoint
Tags
looplineminimalbarsui

Companion assets

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

Animated
Technical HTTP headers inspection stack displaying structured key-value pairs
CSS tier
Static vector
HTTP Headers, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-header-title" class="pulsar pulsar-endpoint-header" data-pulsar="endpoint-header" role="img" viewBox="0 0 160 96"><title id="endpoint-header-title">Technical HTTP headers inspection stack displaying structured key-value pairs</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-header-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-header-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><rect id="endpoint-header-frame" width="92" height="52" x="34" y="22"></rect><line id="endpoint-header-bar" x1="34" x2="126" y1="32" y2="32" stroke-width=".75" opacity=".4"></line><line id="endpoint-header-path" x1="58" x2="98" y1="27" y2="27" stroke-width="1" opacity=".5"></line></g><circle id="endpoint-header-beacon" cx="120" cy="27" r="1.5" fill="currentColor"></circle><rect id="endpoint-header-badge" width="14" height="4" x="40" y="25" fill="currentColor" rx="1"></rect><polygon id="endpoint-header-pointer" fill="currentColor" points="36,51 39,53 36,55"></polygon><g stroke-linecap="square" stroke-width="1.25"><g id="endpoint-header-row-1" stroke="currentColor"><line x1="42" x2="58" y1="41" y2="41"></line><circle cx="62" cy="41" r=".75" fill="currentColor" stroke="none"></circle><line x1="66" x2="108" y1="41" y2="41" opacity=".7"></line></g><g id="endpoint-header-row-2" stroke="currentColor"><line x1="42" x2="54" y1="51" y2="51"></line><circle cx="58" cy="51" r=".75" fill="currentColor" stroke="none"></circle><line id="endpoint-header-token" x1="62" x2="114" y1="51" y2="51"></line></g><g id="endpoint-header-row-3" stroke="currentColor"><line x1="42" x2="62" y1="61" y2="61"></line><circle cx="66" cy="61" r=".75" fill="currentColor" stroke="none"></circle><line x1="70" x2="100" y1="61" y2="61" opacity=".7"></line></g><g id="endpoint-header-row-4" stroke="currentColor" opacity="0"><line x1="42" x2="52" y1="71" y2="71"></line><circle cx="56" cy="71" r=".75" fill="currentColor" stroke="none"></circle><line x1="60" x2="106" y1="71" y2="71" opacity=".7"></line></g></g></svg>

animation.css

.pulsar-endpoint-header {
  --pulsar-accent: currentColor;
}

.pulsar-endpoint-header #endpoint-header-badge,
.pulsar-endpoint-header #endpoint-header-pointer,
.pulsar-endpoint-header #endpoint-header-beacon,
.pulsar-endpoint-header #endpoint-header-row-2 circle {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-header #endpoint-header-token,
.pulsar-endpoint-header #endpoint-header-path,
.pulsar-endpoint-header #endpoint-header-row-2 line:first-child {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-header #endpoint-header-row-1 {
  animation: endpoint-header-shift-r1 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-endpoint-header #endpoint-header-row-2 {
  animation: endpoint-header-shift-r2 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-endpoint-header #endpoint-header-row-3 {
  animation: endpoint-header-shift-r3 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-endpoint-header #endpoint-header-row-4 {
  animation: endpoint-header-shift-r4 3600ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-endpoint-header #endpoint-header-pointer {
  animation: endpoint-header-pulse-ptr 3600ms ease-in-out infinite;
  transform-origin: 37px 53px;
}

.pulsar-endpoint-header #endpoint-header-token {
  animation: endpoint-header-token-glow 3600ms ease-in-out infinite;
}

@keyframes endpoint-header-shift-r1 {
  0%,
  35% {
    transform: translateY(0);
    opacity: 1;
  }
  60%,
  85% {
    transform: translateY(-10px);
    opacity: 0;
  }
  95%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes endpoint-header-shift-r2 {
  0%,
  35% {
    transform: translateY(0);
  }
  60%,
  85% {
    transform: translateY(-10px);
  }
  95%,
  100% {
    transform: translateY(0);
  }
}

@keyframes endpoint-header-shift-r3 {
  0%,
  35% {
    transform: translateY(0);
  }
  60%,
  85% {
    transform: translateY(-10px);
  }
  95%,
  100% {
    transform: translateY(0);
  }
}

@keyframes endpoint-header-shift-r4 {
  0%,
  35% {
    transform: translateY(0);
    opacity: 0;
  }
  60%,
  85% {
    transform: translateY(-10px);
    opacity: 1;
  }
  95%,
  100% {
    transform: translateY(0);
    opacity: 0;
  }
}

@keyframes endpoint-header-pulse-ptr {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.8;
  }
  50% {
    transform: translateX(1.5px);
    opacity: 1;
  }
}

@keyframes endpoint-header-token-glow {
  0%,
  100% {
    opacity: 0.75;
    stroke-width: 1.25;
  }
  45% {
    opacity: 1;
    stroke-width: 1.75;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-header * {
    animation: none !important;
    transform: none;
  }
  .pulsar-endpoint-header #endpoint-header-token {
    opacity: 1;
  }
}

From this family15 in Endpoint

See the family