Pulsar

Velocity

CSS

A series of angled chevron arrows moves with linear cadence along a straight track, with varying segment density illustrating velocity.

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

Companion assets

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

Animated
CSS tier
Static vector
Velocity, 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-velocity" data-pulsar="takt-velocity" viewBox="0 0 160 96"><line x1="24" x2="136" y1="36" y2="36" stroke-width="1.5" opacity=".35"></line><line x1="24" x2="136" y1="60" y2="60" stroke-width="1.5" opacity=".35"></line><g class="takt-velocity-stream"><polyline stroke="var(--pulsar-accent, currentColor)" stroke-width="2" points="36 40, 44 48, 36 56" class="takt-velo-chev c1"></polyline><polyline stroke="var(--pulsar-accent, currentColor)" stroke-width="2" points="66 40, 74 48, 66 56" class="takt-velo-chev c2"></polyline><polyline stroke="var(--pulsar-accent, currentColor)" stroke-width="2" points="96 40, 104 48, 96 56" class="takt-velo-chev c3"></polyline><polyline stroke="var(--pulsar-accent, currentColor)" stroke-width="2" points="126 40, 134 48, 126 56" class="takt-velo-chev c4"></polyline></g></svg>

animation.css

.pulsar-takt-velocity {
  display: block;
  overflow: visible;
}
.pulsar-takt-velocity .takt-velo-chev {
  animation: takt-velocity-glide 4000ms linear infinite;
}
.pulsar-takt-velocity .c1 {
  animation-delay: 0ms;
}
.pulsar-takt-velocity .c2 {
  animation-delay: -1000ms;
}
.pulsar-takt-velocity .c3 {
  animation-delay: -2000ms;
}
.pulsar-takt-velocity .c4 {
  animation-delay: -3000ms;
}

@keyframes takt-velocity-glide {
  0% {
    transform: translateX(-16px);
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  85% {
    opacity: 1;
  }
  100% {
    transform: translateX(24px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-takt-velocity .takt-velo-chev {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Takt

See the family