Pulsar
An API response packet released from an opening bracket along a coordinate axis

API Response

CSS

An endpoint bracket splits open to release a square payload packet that glides outward along a dotted coordinate axis.

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
looplinescaleui

Companion assets

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

Animated
An API response packet released from an opening bracket along a coordinate axis
CSS tier
Static vector
API Response, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-response-title" class="pulsar pulsar-endpoint-response" data-pulsar="endpoint-response" role="img" viewBox="0 0 160 96"><title id="endpoint-response-title">An API response packet released from an opening bracket along a coordinate axis</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-response-datum" d="M20 24h8m-8 0v8m120-8h-8m8 0v8M20 72h8m-8 0v-8m120 8h-8m8 0v-8"></path><path id="endpoint-response-ticks" d="M60 45v6m24-6v6m24-6v6"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line id="endpoint-response-axis" x1="36" x2="128" y1="48" y2="48" stroke-dasharray="3 3"></line><path id="endpoint-response-jaw-upper" d="M44 48V36h-8v12"></path><path id="endpoint-response-jaw-lower" d="M44 48v12h-8V48"></path><path id="endpoint-response-receiver" d="M124 38h8v20h-8"></path></g><circle id="endpoint-response-core" cx="40" cy="48" r="2" fill="currentColor"></circle><circle id="endpoint-response-ping" cx="128" cy="48" r="3" fill="none" stroke="currentColor" stroke-width="1"></circle><g id="endpoint-response-packet"><rect width="8" height="8" x="36" y="44" fill="currentColor" rx="1"></rect><circle cx="40" cy="48" r="1.5" fill="none" stroke="currentColor" stroke-width=".75"></circle></g></svg>

animation.css

.pulsar-endpoint-response #endpoint-response-packet,
.pulsar-endpoint-response #endpoint-response-ping,
.pulsar-endpoint-response #endpoint-response-jaw-upper,
.pulsar-endpoint-response #endpoint-response-jaw-lower,
.pulsar-endpoint-response #endpoint-response-core {
  transform-box: fill-box;
  animation-duration: 3600ms;
  animation-delay: 0ms;
  animation-iteration-count: infinite;
  animation-fill-mode: both;
}

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

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

.pulsar-endpoint-response #endpoint-response-jaw-upper {
  stroke: currentColor;
  transform-origin: center top;
  animation-name: endpoint-response-jaw-upper;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

.pulsar-endpoint-response #endpoint-response-jaw-lower {
  stroke: currentColor;
  transform-origin: center bottom;
  animation-name: endpoint-response-jaw-lower;
  animation-timing-function: cubic-bezier(0.33, 1, 0.68, 1);
}

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

@keyframes endpoint-response-jaw-upper {
  0%,
  8% {
    transform: translateY(0);
  }

  18%,
  55% {
    transform: translateY(-5px);
  }

  68%,
  100% {
    transform: translateY(0);
  }
}

@keyframes endpoint-response-jaw-lower {
  0%,
  8% {
    transform: translateY(0);
  }

  18%,
  55% {
    transform: translateY(5px);
  }

  68%,
  100% {
    transform: translateY(0);
  }
}

@keyframes endpoint-response-packet {
  0%,
  16% {
    transform: translate(0, 0) scale(0.6);
    opacity: 0;
  }

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

  62% {
    transform: translate(88px, 0) scale(1);
    opacity: 1;
  }

  70% {
    transform: translate(88px, 0) scale(0.4);
    opacity: 0;
  }

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

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

@keyframes endpoint-response-ping {
  0%,
  58% {
    opacity: 0;
    transform: scale(0.6);
  }

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

  78% {
    opacity: 0;
    transform: scale(3.2);
  }

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

@keyframes endpoint-response-core {
  0%,
  12% {
    opacity: 0.3;
    transform: scale(1);
  }

  20%,
  35% {
    opacity: 1;
    transform: scale(1.3);
  }

  50%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-response #endpoint-response-packet,
  .pulsar-endpoint-response #endpoint-response-ping,
  .pulsar-endpoint-response #endpoint-response-jaw-upper,
  .pulsar-endpoint-response #endpoint-response-jaw-lower,
  .pulsar-endpoint-response #endpoint-response-core {
    animation: none;
    transform: none;
  }

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

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

  .pulsar-endpoint-response #endpoint-response-core {
    opacity: 0.5;
  }
}

From this family15 in Endpoint

See the family