Pulsar
An API request packet traveling along an axis into a bracketed endpoint node

API Request

CSS

A data packet travels along a horizontal coordinate axis, entering a bracketed endpoint node that pulses upon absorption.

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

Companion assets

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

Animated
An API request packet traveling along an axis into a bracketed endpoint node
CSS tier
Static vector
API Request, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-request-title" class="pulsar pulsar-endpoint-request" data-pulsar="endpoint-request" role="img" viewBox="0 0 160 96"><title id="endpoint-request-title">An API request packet traveling along an axis into a bracketed endpoint node</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-request-datum" d="M20 24h8m-8 0v8m120-8h-8m8 0v8M20 72h8m-8 0v-8m120 8h-8m8 0v-8"></path><path id="endpoint-request-ticks" d="M44 45v6m20-6v6m20-6v6m20-6v6"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="endpoint-request-axis" x1="28" x2="124" y1="48" y2="48"></line><path id="endpoint-request-origin" d="M32 40h-6v16h6"></path><path id="endpoint-request-target" d="M122 36h8v24h-8"></path></g><circle id="endpoint-request-core" cx="126" cy="48" r="2.5" fill="currentColor"></circle><circle id="endpoint-request-pulse" cx="126" cy="48" r="3" fill="none" stroke="currentColor" stroke-width="1"></circle><g id="endpoint-request-packet"><rect width="8" height="8" x="28" y="44" fill="currentColor" rx="1"></rect><circle cx="32" cy="48" r="1.5" fill="none" stroke="currentColor" stroke-width=".75"></circle></g></svg>

animation.css

.pulsar-endpoint-request #endpoint-request-packet,
.pulsar-endpoint-request #endpoint-request-pulse,
.pulsar-endpoint-request #endpoint-request-core,
.pulsar-endpoint-request #endpoint-request-ticks {
  transform-box: fill-box;
  animation-duration: 3600ms;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

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

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

.pulsar-endpoint-request #endpoint-request-core {
  fill: currentColor;
  transform-origin: center;
  animation-name: endpoint-request-core;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

.pulsar-endpoint-request #endpoint-request-ticks {
  stroke: currentColor;
  animation-name: endpoint-request-ticks;
  animation-timing-function: ease-in-out;
}

@keyframes endpoint-request-packet {
  0%,
  15% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }

  58% {
    transform: translate(94px, 0) scale(1);
    opacity: 1;
  }

  63% {
    transform: translate(94px, 0) scale(0.2);
    opacity: 0;
  }

  85% {
    transform: translate(0, 0) scale(0.2);
    opacity: 0;
  }

  92%,
  100% {
    transform: translate(0, 0) scale(1);
    opacity: 1;
  }
}

@keyframes endpoint-request-pulse {
  0%,
  56% {
    opacity: 0;
    transform: scale(0.5);
  }

  60% {
    opacity: 0.8;
    transform: scale(0.8);
  }

  76% {
    opacity: 0;
    transform: scale(3.5);
  }

  100% {
    opacity: 0;
    transform: scale(3.5);
  }
}

@keyframes endpoint-request-core {
  0%,
  55% {
    opacity: 0.35;
    transform: scale(1);
  }

  62%,
  70% {
    opacity: 1;
    transform: scale(1.35);
  }

  80%,
  100% {
    opacity: 0.35;
    transform: scale(1);
  }
}

@keyframes endpoint-request-ticks {
  0%,
  100% {
    opacity: 0.3;
  }

  30%,
  50% {
    opacity: 0.7;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-request #endpoint-request-packet,
  .pulsar-endpoint-request #endpoint-request-pulse,
  .pulsar-endpoint-request #endpoint-request-core,
  .pulsar-endpoint-request #endpoint-request-ticks {
    animation: none;
    transform: none;
  }

  .pulsar-endpoint-request #endpoint-request-pulse {
    opacity: 0;
  }

  .pulsar-endpoint-request #endpoint-request-packet {
    transform: translate(94px, 0);
    opacity: 1;
  }

  .pulsar-endpoint-request #endpoint-request-core {
    opacity: 0.7;
  }
}

From this family15 in Endpoint

See the family