Pulsar

Compile

CSS

Four small square blocks arrange themselves in a grid as they pulse in opacity and rotate together around a central pivot point.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Automation and rules
Industries
SaaS and software, Legal
Style
Minimal line · light stroke
Set
clause
Tags
barsgeometricstaggerloop

Companion assets

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

Animated
CSS tier
Static vector
Compile, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-clause-compile" data-pulsar="clause-compile" viewBox="0 0 160 96"><g stroke="currentColor" stroke-width="1.25" class="contract-sheet" opacity=".3"><rect width="64" height="60" x="48" y="18" rx="3"></rect></g><g class="clause-assembly"><line x1="56" x2="104" y1="32" y2="32" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="piece p1"></line><line x1="56" x2="96" y1="46" y2="46" stroke="currentColor" stroke-linecap="round" stroke-width="2" class="piece p2"></line><line x1="56" x2="88" y1="60" y2="60" stroke="var(--pulsar-accent, currentColor)" stroke-linecap="round" stroke-width="2" class="piece p3"></line></g><g stroke="currentColor" class="corner-registration" opacity=".4"><path d="M44 24h4v-4m68 4h-4v-4M44 72h4v4m68-4h-4v4"></path></g></svg>

animation.css

.pulsar-clause-compile {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-clause-compile .piece.p1 {
  animation: clause-compile-slide-1 4s ease-in-out infinite;
}
.pulsar-clause-compile .piece.p2 {
  animation: clause-compile-slide-2 4s ease-in-out infinite;
}
.pulsar-clause-compile .piece.p3 {
  animation: clause-compile-slide-3 4s ease-in-out infinite;
}
.pulsar-clause-compile .contract-sheet {
  animation: clause-compile-border 4s ease-in-out infinite;
}
@keyframes clause-compile-slide-1 {
  0% {
    transform: translateX(-24px);
    opacity: 0;
  }
  30%,
  75% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clause-compile-slide-2 {
  0%,
  15% {
    transform: translateX(24px);
    opacity: 0;
  }
  45%,
  75% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clause-compile-slide-3 {
  0%,
  30% {
    transform: translateY(16px);
    opacity: 0;
  }
  60%,
  75% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes clause-compile-border {
  0%,
  100% {
    opacity: 0.25;
  }
  50%,
  75% {
    opacity: 0.7;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-clause-compile .piece.p1,
  .pulsar-clause-compile .piece.p2,
  .pulsar-clause-compile .piece.p3,
  .pulsar-clause-compile .contract-sheet {
    animation: none;
    transform: none;
    opacity: 0.8;
  }
}

From this family15 in Clause

See the family