Pulsar

Bottleneck

CSS

A vertical channel narrows in the middle, showing a stream of small dots slowing down and stacking up before passing through one by one.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Data and progress
Use cases
Dashboards and reporting, Workflow and approvals
Industries
Logistics and supply chain, Manufacturing and industrial
Style
Data mark · light stroke
Set
takt
Tags
dotsparticleslineminimalbars

Companion assets

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

Animated
CSS tier
Static vector
Bottleneck, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="pulsar pulsar-takt-bottleneck" data-pulsar="takt-bottleneck" viewBox="0 0 160 96"><path stroke-width="2" d="M58 18v18q16 8 16 16v26" opacity=".4"></path><path stroke-width="2" d="M102 18v18q-16 8-16 16v26" opacity=".4"></path><line x1="70" x2="90" y1="48" y2="48" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="2 2" stroke-width="1.5"></line><circle cx="80" cy="22" r="3" fill="var(--pulsar-accent, currentColor)" stroke-width="0" class="takt-bottle-dot d1"></circle><circle cx="80" cy="22" r="3" fill="var(--pulsar-accent, currentColor)" stroke-width="0" class="takt-bottle-dot d2"></circle><circle cx="80" cy="22" r="3" fill="var(--pulsar-accent, currentColor)" stroke-width="0" class="takt-bottle-dot d3"></circle></svg>

animation.css

.pulsar-takt-bottleneck {
  display: block;
  overflow: visible;
}
.pulsar-takt-bottleneck .d1 {
  animation: takt-bottleneck-flow 4000ms cubic-bezier(0.5, 0, 0.2, 1) infinite;
}
.pulsar-takt-bottleneck .d2 {
  animation: takt-bottleneck-flow 4000ms cubic-bezier(0.5, 0, 0.2, 1) -1333ms infinite;
}
.pulsar-takt-bottleneck .d3 {
  animation: takt-bottleneck-flow 4000ms cubic-bezier(0.5, 0, 0.2, 1) -2666ms infinite;
}

@keyframes takt-bottleneck-flow {
  0% {
    transform: translateY(0px);
    opacity: 0;
  }
  15% {
    opacity: 1;
    transform: translateY(8px);
  }
  45% {
    transform: translateY(24px);
  }
  65% {
    transform: translateY(32px);
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(52px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-takt-bottleneck .d1,
  .pulsar-takt-bottleneck .d2,
  .pulsar-takt-bottleneck .d3 {
    animation: none;
    opacity: 1;
  }
  .pulsar-takt-bottleneck .d1 {
    transform: translateY(12px);
  }
  .pulsar-takt-bottleneck .d2 {
    transform: translateY(28px);
  }
  .pulsar-takt-bottleneck .d3 {
    transform: translateY(46px);
  }
}

From this family15 in Takt

See the family