Pulsar

Batch Lock

CSS

An industrial retaining clamp bracket closes firmly around a grouped batch of five components for production locking.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Decorative and illustrative
Use cases
Security and trust, Workflow and approvals
Industries
Manufacturing and industrial, Cross-industry
Style
Duotone · regular stroke
Set
bom
Tags
geometricminimalloop

Companion assets

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

Animated
CSS tier
Static vector
Batch Lock, 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-bom-batch-lock" data-pulsar="bom-batch-lock" viewBox="0 0 160 96"><g class="batch-items"><circle cx="48" cy="48" r="5.5" fill="currentColor" fill-opacity=".1" stroke-width="1.5"></circle><circle cx="64" cy="48" r="5.5" fill="currentColor" fill-opacity=".1" stroke-width="1.5"></circle><circle cx="80" cy="48" r="5.5" fill="currentColor" fill-opacity=".1" stroke-width="1.5"></circle><circle cx="96" cy="48" r="5.5" fill="currentColor" fill-opacity=".1" stroke-width="1.5"></circle><circle cx="112" cy="48" r="5.5" fill="currentColor" fill-opacity=".1" stroke-width="1.5"></circle></g><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M38 32h-8v32h8" class="clamp left"></path><path stroke="var(--pulsar-accent, currentColor)" stroke-width="2" d="M122 32h8v32h-8" class="clamp right"></path><line x1="30" x2="130" y1="28" y2="28" stroke-dasharray="3 3" stroke-width="1.5" opacity=".3"></line><path fill="var(--pulsar-accent, currentColor)" d="m76 28 4-4 4 4Z" class="lock-pin"></path></svg>

animation.css

.pulsar-bom-batch-lock {
  display: block;
  overflow: visible;
}
.pulsar-bom-batch-lock .clamp.left {
  animation: bom-batch-lock-left 4000ms ease-in-out infinite;
}
.pulsar-bom-batch-lock .clamp.right {
  animation: bom-batch-lock-right 4000ms ease-in-out infinite;
}
.pulsar-bom-batch-lock .lock-pin {
  animation: bom-batch-lock-pin 4000ms ease-in-out infinite;
}
.pulsar-bom-batch-lock .batch-items {
  animation: bom-batch-lock-items 4000ms ease-in-out infinite;
}

@keyframes bom-batch-lock-left {
  0%,
  15% {
    transform: translateX(-6px);
    opacity: 0.4;
  }
  35%,
  80% {
    transform: translateX(4px);
    opacity: 1;
  }
  95%,
  100% {
    transform: translateX(-6px);
    opacity: 0.4;
  }
}

@keyframes bom-batch-lock-right {
  0%,
  15% {
    transform: translateX(6px);
    opacity: 0.4;
  }
  35%,
  80% {
    transform: translateX(-4px);
    opacity: 1;
  }
  95%,
  100% {
    transform: translateX(6px);
    opacity: 0.4;
  }
}

@keyframes bom-batch-lock-pin {
  0%,
  25% {
    transform: translateY(-6px);
    opacity: 0.3;
  }
  40%,
  80% {
    transform: translateY(0);
    opacity: 1;
  }
  95%,
  100% {
    transform: translateY(-6px);
    opacity: 0.3;
  }
}

@keyframes bom-batch-lock-items {
  0%,
  30% {
    opacity: 0.6;
  }
  45%,
  80% {
    opacity: 1;
  }
  95%,
  100% {
    opacity: 0.6;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-bom-batch-lock .clamp.left,
  .pulsar-bom-batch-lock .clamp.right,
  .pulsar-bom-batch-lock .lock-pin,
  .pulsar-bom-batch-lock .batch-items {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

From this family15 in Bom

See the family