Pulsar

Route Drawing

CSS

A curved, multi-segment path draws itself in from left to right, then fades out from tail to head in a continuous, flowing loop.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Navigation and wayfinding
Industries
Logistics and supply chain, Cross-industry
Style
Minimal line · light stroke
Set
lastmile
Tags
lineminimalloopprogress

Companion assets

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

Animated
CSS tier
Static vector
Route Drawing, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-lastmile-route-draw" data-pulsar="lastmile-route-draw" viewBox="0 0 160 96"><path stroke="currentColor" stroke-linecap="round" stroke-width="1.2" d="M24 68c24 0 24-36 48-36s24 36 48 36c12 0 16-18 20-32" class="route-bg" opacity=".18"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="1.5" d="M24 68c24 0 24-36 48-36s24 36 48 36c12 0 16-18 20-32" class="route-active"></path><circle cx="24" cy="68" r="3" stroke="currentColor" stroke-width="1.2" class="node n1"></circle><circle cx="72" cy="32" r="3" stroke="currentColor" stroke-width="1.2" class="node n2"></circle><circle cx="120" cy="68" r="3" stroke="currentColor" stroke-width="1.2" class="node n3"></circle><circle cx="140" cy="36" r="3" stroke="var(--pulsar-accent, currentColor)" stroke-width="1.2" class="node n4"></circle></svg>

animation.css

.pulsar-lastmile-route-draw {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-lastmile-route-draw .route-active {
  stroke-dasharray: 160;
  animation: lastmile-route-draw-path 4s ease-in-out infinite;
}
.pulsar-lastmile-route-draw .node.n1 {
  animation: lastmile-route-draw-node 4s ease-in-out infinite;
}
.pulsar-lastmile-route-draw .node.n2 {
  animation: lastmile-route-draw-node 4s ease-in-out infinite -3s;
}
.pulsar-lastmile-route-draw .node.n3 {
  animation: lastmile-route-draw-node 4s ease-in-out infinite -2s;
}
.pulsar-lastmile-route-draw .node.n4 {
  animation: lastmile-route-draw-node 4s ease-in-out infinite -1s;
}
@keyframes lastmile-route-draw-path {
  0% {
    stroke-dashoffset: 160;
    opacity: 0;
  }
  15% {
    opacity: 1;
  }
  60% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  85% {
    stroke-dashoffset: -160;
    opacity: 0.2;
  }
  100% {
    stroke-dashoffset: -160;
    opacity: 0;
  }
}
@keyframes lastmile-route-draw-node {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.9);
    transform-origin: center;
  }
  25%,
  50% {
    opacity: 1;
    transform: scale(1.15);
    transform-origin: center;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-lastmile-route-draw .route-active,
  .pulsar-lastmile-route-draw .node.n1,
  .pulsar-lastmile-route-draw .node.n2,
  .pulsar-lastmile-route-draw .node.n3,
  .pulsar-lastmile-route-draw .node.n4 {
    animation: none;
    stroke-dashoffset: 0;
    opacity: 1;
  }
}

From this family15 in Lastmile

See the family