Pulsar
Two conveyor lines merging into a single outbound stream

Merge

CSS

Two converging feeder tracks interleave units in an alternating cadence onto a single outbound trunk line.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Sync and integration
Industries
Logistics and supply chain, Energy and utilities
Style
Geometric solid · light stroke
Set
conveyor
Tags
loopminimalgeometricuistagger

Companion assets

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

Animated
Two conveyor lines merging into a single outbound stream
CSS tier
Static vector
Merge, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="conveyor-merge-title" class="pulsar pulsar-conveyor-merge" data-pulsar="conveyor-merge" role="img" viewBox="0 0 120 40"><title id="conveyor-merge-title">Two conveyor lines merging into a single outbound stream</title><path id="conveyor-merge-track-top" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" d="M0 12h40c16 0 24 8 32 8"></path><path id="conveyor-merge-track-bot" fill="none" stroke="currentColor" stroke-opacity=".15" stroke-width="2" d="M0 28h40c16 0 24-8 32-8"></path><line id="conveyor-merge-track-out" x1="72" x2="120" y1="20" y2="20" stroke="currentColor" stroke-opacity=".15" stroke-width="2"></line><circle id="conveyor-merge-node" cx="72" cy="20" r="2" fill="currentColor" opacity=".25"></circle><g id="conveyor-merge-units" fill="var(--pulsar-accent, currentColor)"><rect id="conveyor-merge-unit-top-1" width="10" height="10" x="-14" y="7" rx="1.5"></rect><rect id="conveyor-merge-unit-bot-1" width="10" height="10" x="-14" y="23" rx="1.5"></rect><rect id="conveyor-merge-unit-top-2" width="10" height="10" x="-14" y="7" rx="1.5"></rect><rect id="conveyor-merge-unit-bot-2" width="10" height="10" x="-14" y="23" rx="1.5"></rect></g></svg>

animation.css

.pulsar-conveyor-merge #conveyor-merge-unit-top-1 {
  animation: conveyor-merge-top-anim 4000ms linear infinite;
  animation-delay: 0ms;
}

.pulsar-conveyor-merge #conveyor-merge-unit-bot-1 {
  animation: conveyor-merge-bot-anim 4000ms linear infinite;
  animation-delay: -3000ms;
}

.pulsar-conveyor-merge #conveyor-merge-unit-top-2 {
  animation: conveyor-merge-top-anim 4000ms linear infinite;
  animation-delay: -2000ms;
}

.pulsar-conveyor-merge #conveyor-merge-unit-bot-2 {
  animation: conveyor-merge-bot-anim 4000ms linear infinite;
  animation-delay: -1000ms;
}

@keyframes conveyor-merge-top-anim {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(45px, 0);
  }
  38% {
    transform: translate(86px, 8px);
  }
  50% {
    transform: translate(128px, 8px);
    opacity: 1;
  }
  54% {
    transform: translate(142px, 8px);
    opacity: 0;
  }
  54.01%,
  95% {
    transform: translate(0, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@keyframes conveyor-merge-bot-anim {
  0% {
    transform: translate(0, 0);
    opacity: 1;
  }
  25% {
    transform: translate(45px, 0);
  }
  38% {
    transform: translate(86px, -8px);
  }
  50% {
    transform: translate(128px, -8px);
    opacity: 1;
  }
  54% {
    transform: translate(142px, -8px);
    opacity: 0;
  }
  54.01%,
  95% {
    transform: translate(0, 0);
    opacity: 0;
  }
  100% {
    transform: translate(0, 0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-conveyor-merge * {
    animation: none !important;
    transform: none;
  }
  .pulsar-conveyor-merge #conveyor-merge-unit-top-1 {
    transform: translate(105px, 8px);
    opacity: 1;
  }
  .pulsar-conveyor-merge #conveyor-merge-unit-bot-1 {
    transform: translate(70px, -8px);
    opacity: 1;
  }
  .pulsar-conveyor-merge #conveyor-merge-unit-top-2 {
    transform: translate(30px, 0);
    opacity: 1;
  }
  .pulsar-conveyor-merge #conveyor-merge-unit-bot-2 {
    transform: translate(10px, 0);
    opacity: 1;
  }
}

From this family14 in Conveyor

See the family