Pulsar
Conveyor junction routing units to diverging paths

Route

CSS

An articulated diverter blade switches incoming units between upper and lower conveyor paths, resetting cleanly behind each payload.

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, Energy and utilities
Style
Geometric solid · light stroke
Set
conveyor
Tags
loopminimalgeometricuiline

Companion assets

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

Animated
Conveyor junction routing units to diverging paths
CSS tier
Static vector
Route, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-route-title" class="pulsar pulsar-conveyor-route" data-pulsar="conveyor-route" role="img" viewBox="0 0 120 40"><title id="conveyor-route-title">Conveyor junction routing units to diverging paths</title><line id="conveyor-route-infeed" x1="0" x2="48" y1="20" y2="20" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><path id="conveyor-route-branch-top" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" d="M48 20c16 0 24-8 40-8h32"></path><path id="conveyor-route-branch-bot" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" d="M48 20c16 0 24 8 40 8h32"></path><circle id="conveyor-route-pivot" cx="48" cy="20" r="2.5" fill="currentColor" opacity=".3"></circle><line id="conveyor-route-blade" x1="48" x2="62" y1="20" y2="20" stroke="currentColor" stroke-width="2"></line><g id="conveyor-route-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-route-unit-1" width="10" height="10" x="-14" y="15" rx="1.5"></rect><rect id="conveyor-route-unit-2" width="10" height="10" x="-14" y="15" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-route #conveyor-route-blade {
  animation: conveyor-route-switch 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
  transform-origin: 48px 20px;
}

.pulsar-conveyor-route #conveyor-route-unit-1 {
  animation: conveyor-route-u1 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.pulsar-conveyor-route #conveyor-route-unit-2 {
  animation: conveyor-route-u2 4000ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes conveyor-route-switch {
  0%,
  12% {
    transform: rotate(0);
  }
  20%,
  38% {
    transform: rotate(-25deg);
  }
  46%,
  60% {
    transform: rotate(0);
  }
  68%,
  86% {
    transform: rotate(25deg);
  }
  94%,
  100% {
    transform: rotate(0);
  }
}

@keyframes conveyor-route-u1 {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  22% {
    transform: translate(60px, 0);
    opacity: 1;
  }
  44% {
    transform: translate(118px, -8px);
    opacity: 1;
  }
  50% {
    transform: translate(138px, -8px);
    opacity: 0;
  }
  50.01%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes conveyor-route-u2 {
  0%,
  48% {
    transform: translate(0, 0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  70% {
    transform: translate(60px, 0);
    opacity: 1;
  }
  92% {
    transform: translate(118px, 8px);
    opacity: 1;
  }
  98% {
    transform: translate(138px, 8px);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-route * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-route #conveyor-route-unit-1 {
    transform: translate(118px, -8px);
    opacity: 1;
  }
  .pulsar-conveyor-route #conveyor-route-unit-2 {
    transform: translate(118px, 8px);
    opacity: 1;
  }
}

From this family14 in Conveyor

See the family