Pulsar
Technical throughput conduit metering high velocity data flow

Throughput Volume

CSS

A technical conduit constricts and expands dynamically as accelerated data streams pulse through a calibrated metering throat.

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

Companion assets

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

Animated
Technical throughput conduit metering high velocity data flow
CSS tier
Static vector
Throughput Volume, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="endpoint-throughput-title" class="pulsar pulsar-endpoint-throughput" data-pulsar="endpoint-throughput" role="img" viewBox="0 0 160 96"><title id="endpoint-throughput-title">Technical throughput conduit metering high velocity data flow</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" opacity=".3"><path id="endpoint-throughput-datum" d="M20 20h8m-8 0v8m120-8h-8m8 0v8M20 76h8m-8 0v-8m120 8h-8m8 0v-8"></path><line id="endpoint-throughput-axis" x1="24" x2="136" y1="48" y2="48" stroke-dasharray="2 4"></line></g><path id="endpoint-throughput-calipers" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.2" d="M80 20v8m0 40v8"></path><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><line x1="28" x2="28" y1="28" y2="68"></line><line x1="132" x2="132" y1="28" y2="68"></line><path id="endpoint-throughput-pipe-top" d="M28 32h28c12 0 16 6 24 6s12-6 24-6h28"></path><path id="endpoint-throughput-pipe-bot" d="M28 64h28c12 0 16-6 24-6s12 6 24 6h28"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.25"><path id="endpoint-throughput-flow-top" stroke-dasharray="10 16" d="M30 40h26c12 0 16 4 24 4s12-4 24-4h26" opacity=".7"></path><line id="endpoint-throughput-flow-mid" x1="30" x2="130" y1="48" y2="48" stroke-dasharray="14 18" stroke-width="1.5"></line><path id="endpoint-throughput-flow-bot" stroke-dasharray="10 16" d="M30 56h26c12 0 16-4 24-4s12 4 24 4h26" opacity=".7"></path></g><circle id="endpoint-throughput-core" cx="80" cy="48" r="2.5" fill="currentColor"></circle><circle id="endpoint-throughput-pulse-ring" cx="80" cy="48" r="7" fill="none" stroke="currentColor" stroke-dasharray="3 3" stroke-width="1" opacity="0"></circle></svg>

animation.css

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

.pulsar-endpoint-throughput #endpoint-throughput-core {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-throughput #endpoint-throughput-flow-mid,
.pulsar-endpoint-throughput #endpoint-throughput-flow-top,
.pulsar-endpoint-throughput #endpoint-throughput-flow-bot,
.pulsar-endpoint-throughput #endpoint-throughput-calipers,
.pulsar-endpoint-throughput #endpoint-throughput-pulse-ring {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-endpoint-throughput #endpoint-throughput-flow-mid {
  animation: endpoint-throughput-flow-main 3600ms linear infinite;
}

.pulsar-endpoint-throughput #endpoint-throughput-flow-top,
.pulsar-endpoint-throughput #endpoint-throughput-flow-bot {
  animation: endpoint-throughput-flow-sub 3600ms linear infinite;
}

.pulsar-endpoint-throughput #endpoint-throughput-pipe-top {
  animation: endpoint-throughput-squeeze-top 3600ms ease-in-out infinite;
  transform-origin: 80px 32px;
}

.pulsar-endpoint-throughput #endpoint-throughput-pipe-bot {
  animation: endpoint-throughput-squeeze-bot 3600ms ease-in-out infinite;
  transform-origin: 80px 64px;
}

.pulsar-endpoint-throughput #endpoint-throughput-pulse-ring {
  animation: endpoint-throughput-meter 1800ms cubic-bezier(0.16, 1, 0.3, 1) infinite;
  transform-origin: 80px 48px;
}

@keyframes endpoint-throughput-flow-main {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -96;
  }
}

@keyframes endpoint-throughput-flow-sub {
  0% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -78;
  }
}

@keyframes endpoint-throughput-squeeze-top {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(2.5px);
  }
}

@keyframes endpoint-throughput-squeeze-bot {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-2.5px);
  }
}

@keyframes endpoint-throughput-meter {
  0% {
    opacity: 0;
    transform: scale(0.6);
  }
  20% {
    opacity: 0.85;
  }
  55%,
  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-endpoint-throughput * {
    animation: none !important;
    transform: none;
  }
  .pulsar-endpoint-throughput #endpoint-throughput-flow-mid,
  .pulsar-endpoint-throughput #endpoint-throughput-flow-top,
  .pulsar-endpoint-throughput #endpoint-throughput-flow-bot {
    stroke-dashoffset: 0;
  }
}

From this family15 in Endpoint

See the family