Pulsar
Technical API error code indicator with splitting circle and warning mark

API Error Code

CSS

A technical circle splits horizontally along its equator, exposing a flashing error indicator and warning ring before self-correcting.

Tier
CSS
Dependencies
None
Duration
3.6 s, loops
Categories
Icons and micro-interactions, Data and progress
Use cases
Errors and warnings, Notifications
Industries
SaaS and software, Cross-industry
Style
Technical · light stroke
Set
endpoint
Tags
loopcirclepulsegeometricui

Companion assets

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

Animated
Technical API error code indicator with splitting circle and warning mark
CSS tier
Static vector
API Error Code, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-error-code-title" class="pulsar pulsar-endpoint-error-code" data-pulsar="endpoint-error-code" role="img" viewBox="0 0 160 96"><title id="endpoint-error-code-title">Technical API error code indicator with splitting circle and warning mark</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-error-code-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-error-code-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line><line x1="80" x2="80" y1="20" y2="76" stroke-dasharray="2 4"></line></g><circle id="endpoint-error-code-beacon-left" cx="48" cy="48" r="2" fill="currentColor"></circle><circle id="endpoint-error-code-beacon-right" cx="112" cy="48" r="2" fill="currentColor"></circle><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><g id="endpoint-error-code-top"><path d="M58 48a22 22 0 0 1 44 0"></path><path id="endpoint-error-code-ticks-top" stroke-width="1.2" d="M80 20v5M56 48h4m40 0h4"></path></g><g id="endpoint-error-code-bottom"><path d="M58 48a22 22 0 0 0 44 0"></path><path id="endpoint-error-code-ticks-bottom" stroke-width="1.2" d="M80 71v5M56 48h4m40 0h4"></path></g></g><circle id="endpoint-error-code-warn-ring" cx="80" cy="48" r="14" fill="none" stroke="currentColor" stroke-dasharray="2 3" stroke-width="1" opacity="0"></circle><g id="endpoint-error-code-mark" fill="currentColor"><rect width="3" height="12" x="78.5" y="38" rx="1.5"></rect><circle cx="80" cy="56" r="1.75"></circle></g></svg>

animation.css

.pulsar-endpoint-error-code {
  --pulsar-accent: currentColor;
}

.pulsar-endpoint-error-code #endpoint-error-code-mark,
.pulsar-endpoint-error-code #endpoint-error-code-beacon-left,
.pulsar-endpoint-error-code #endpoint-error-code-beacon-right {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-error-code #endpoint-error-code-warn-ring,
.pulsar-endpoint-error-code #endpoint-error-code-ticks-top,
.pulsar-endpoint-error-code #endpoint-error-code-ticks-bottom {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-error-code #endpoint-error-code-mark {
  animation: endpoint-error-code-flash 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}

.pulsar-endpoint-error-code #endpoint-error-code-warn-ring {
  animation: endpoint-error-code-pulse 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}

.pulsar-endpoint-error-code #endpoint-error-code-top {
  animation: endpoint-error-code-split-top 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pulsar-endpoint-error-code #endpoint-error-code-bottom {
  animation: endpoint-error-code-split-bottom 3600ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

@keyframes endpoint-error-code-split-top {
  0%,
  18% {
    transform: translateY(0);
  }
  30%,
  68% {
    transform: translateY(-6px);
  }
  80%,
  100% {
    transform: translateY(0);
  }
}

@keyframes endpoint-error-code-split-bottom {
  0%,
  18% {
    transform: translateY(0);
  }
  30%,
  68% {
    transform: translateY(6px);
  }
  80%,
  100% {
    transform: translateY(0);
  }
}

@keyframes endpoint-error-code-flash {
  0%,
  20% {
    opacity: 0;
    transform: scale(0.4);
  }
  30% {
    opacity: 1;
    transform: scale(1.15);
  }
  38%,
  65% {
    opacity: 1;
    transform: scale(1);
  }
  74%,
  100% {
    opacity: 0;
    transform: scale(0.4);
  }
}

@keyframes endpoint-error-code-pulse {
  0%,
  25% {
    opacity: 0;
    transform: scale(0.6);
  }
  34% {
    opacity: 0.85;
  }
  58% {
    opacity: 0;
    transform: scale(2);
  }
  100% {
    opacity: 0;
    transform: scale(2);
  }
}

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

From this family15 in Endpoint

See the family