Pulsar
Oscillating continuous data stream moving along a coordinate grid

Data Stream

CSS

Continuous data pulses traverse a calibrated sine track across an indexed technical coordinate grid with oscillating sampling markers.

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

Companion assets

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

Animated
Oscillating continuous data stream moving along a coordinate grid
CSS tier
Static vector
Data Stream, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-stream-title" class="pulsar pulsar-endpoint-stream" data-pulsar="endpoint-stream" role="img" viewBox="0 0 160 96"><title id="endpoint-stream-title">Oscillating continuous data stream moving along a coordinate grid</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-stream-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-stream-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line><line x1="52" x2="52" y1="26" y2="70" stroke-dasharray="2 4"></line><line x1="80" x2="80" y1="26" y2="70" stroke-dasharray="2 4"></line><line x1="108" x2="108" y1="26" y2="70" stroke-dasharray="2 4"></line></g><path id="endpoint-stream-ticks" fill="none" stroke="currentColor" stroke-width="1.2" d="M50 48h4m24 0h4m24 0h4"></path><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><path id="endpoint-stream-track" stroke-dasharray="2 3" d="M24 48c14-18 18-18 28 0s18 18 28 0 18-18 28 0 18 18 28 0" opacity=".4"></path><path id="endpoint-stream-flow" stroke-dasharray="14 28" stroke-width="1.5" d="M24 48c14-18 18-18 28 0s18 18 28 0 18-18 28 0 18 18 28 0"></path></g><g id="endpoint-stream-caliper-1"><circle id="endpoint-stream-node-1" cx="52" cy="34" r="2.5" fill="currentColor"></circle><circle id="endpoint-stream-ring-1" cx="52" cy="34" r="5" fill="none" stroke="currentColor" stroke-width="1"></circle></g><g id="endpoint-stream-caliper-2"><circle id="endpoint-stream-node-2" cx="80" cy="62" r="2.5" fill="currentColor"></circle><circle id="endpoint-stream-ring-2" cx="80" cy="62" r="5" fill="none" stroke="currentColor" stroke-width="1"></circle></g><g id="endpoint-stream-caliper-3"><circle id="endpoint-stream-node-3" cx="108" cy="34" r="2.5" fill="currentColor"></circle><circle id="endpoint-stream-ring-3" cx="108" cy="34" r="5" fill="none" stroke="currentColor" stroke-width="1"></circle></g></svg>

animation.css

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

.pulsar-endpoint-stream #endpoint-stream-flow,
.pulsar-endpoint-stream #endpoint-stream-ticks {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-stream #endpoint-stream-flow {
  animation: endpoint-stream-dash 3600ms linear infinite;
}

.pulsar-endpoint-stream #endpoint-stream-node-1,
.pulsar-endpoint-stream #endpoint-stream-node-2,
.pulsar-endpoint-stream #endpoint-stream-node-3 {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-stream #endpoint-stream-ring-1,
.pulsar-endpoint-stream #endpoint-stream-ring-2,
.pulsar-endpoint-stream #endpoint-stream-ring-3 {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-stream #endpoint-stream-ring-1 {
  animation: endpoint-stream-pulse-1 3600ms ease-out infinite;
  transform-origin: 52px 34px;
}

.pulsar-endpoint-stream #endpoint-stream-ring-2 {
  animation: endpoint-stream-pulse-2 3600ms ease-out infinite;
  transform-origin: 80px 62px;
}

.pulsar-endpoint-stream #endpoint-stream-ring-3 {
  animation: endpoint-stream-pulse-3 3600ms ease-out infinite;
  transform-origin: 108px 34px;
}

@keyframes endpoint-stream-dash {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -84;
  }
}

@keyframes endpoint-stream-pulse-1 {
  0%,
  10% {
    transform: scale(0.6);
    opacity: 0;
  }
  20% {
    opacity: 0.9;
  }
  35% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes endpoint-stream-pulse-2 {
  0%,
  40% {
    transform: scale(0.6);
    opacity: 0;
  }
  50% {
    opacity: 0.9;
  }
  65% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@keyframes endpoint-stream-pulse-3 {
  0%,
  70% {
    transform: scale(0.6);
    opacity: 0;
  }
  80% {
    opacity: 0.9;
  }
  95% {
    transform: scale(2.2);
    opacity: 0;
  }
  100% {
    transform: scale(2.2);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-stream * {
    animation: none !important;
  }
  .pulsar-endpoint-stream #endpoint-stream-flow {
    stroke-dashoffset: 0;
  }
  .pulsar-endpoint-stream #endpoint-stream-ring-1,
  .pulsar-endpoint-stream #endpoint-stream-ring-2,
  .pulsar-endpoint-stream #endpoint-stream-ring-3 {
    opacity: 0.4;
    transform: none;
  }
}

From this family15 in Endpoint

See the family