Pulsar

Policy Draft

CSS

A wireframe contract document compiles line-by-line while a geometric compass traces its seal.

Tier
CSS
Dependencies
None
Duration
4 s, loops
Categories
Loaders and spinners
Use cases
Loading and waiting, Workflow and approvals
Industries
Insurance, Cross-industry
Style
Technical · light stroke
Set
underwrite
Tags
linegeometricrotateloop

Companion assets

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

Animated
CSS tier
Static vector
Policy Draft, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" class="pulsar pulsar-underwrite-policy" data-pulsar="underwrite-policy" viewBox="0 0 160 96"><g class="doc-boundary"><path fill="currentColor" fill-opacity=".05" stroke="currentColor" stroke-width="1.5" d="M52 18h44l12 12v48H52z"></path><path stroke="currentColor" stroke-width="1.5" d="M96 18v12h12"></path></g><line x1="60" x2="88" y1="36" y2="36" stroke="currentColor" stroke-dasharray="28" stroke-dashoffset="28" stroke-width="1.5" class="scan-l1"></line><line x1="60" x2="100" y1="44" y2="44" stroke="currentColor" stroke-dasharray="40" stroke-dashoffset="40" stroke-width="1.5" class="scan-l2"></line><line x1="60" x2="94" y1="52" y2="52" stroke="currentColor" stroke-dasharray="34" stroke-dashoffset="34" stroke-width="1.5" class="scan-l3"></line><line x1="60" x2="80" y1="60" y2="60" stroke="currentColor" stroke-dasharray="20" stroke-dashoffset="20" stroke-width="1.5" class="scan-l4"></line><g class="tracer"><circle cx="88" cy="66" r="6" stroke="var(--pulsar-accent, currentColor)" stroke-dasharray="3 2" stroke-width="1.5"></circle><circle cx="88" cy="66" r="2" fill="var(--pulsar-accent, currentColor)"></circle></g></svg>

animation.css

.pulsar-underwrite-policy {
  display: block;
  width: 100%;
  height: 100%;
}
.pulsar-underwrite-policy .scan-l1 {
  animation: underwrite-policy-draw 4s ease-in-out infinite;
}
.pulsar-underwrite-policy .scan-l2 {
  animation: underwrite-policy-draw 4s ease-in-out infinite;
  animation-delay: -3.8s;
}
.pulsar-underwrite-policy .scan-l3 {
  animation: underwrite-policy-draw 4s ease-in-out infinite;
  animation-delay: -3.6s;
}
.pulsar-underwrite-policy .scan-l4 {
  animation: underwrite-policy-draw 4s ease-in-out infinite;
  animation-delay: -3.4s;
}
.pulsar-underwrite-policy .tracer {
  transform-origin: 88px 66px;
  animation: underwrite-policy-spin 4s linear infinite;
}
@keyframes underwrite-policy-draw {
  0%,
  15% {
    stroke-dashoffset: 40;
  }
  45%,
  80% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: 40;
  }
}
@keyframes underwrite-policy-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .pulsar-underwrite-policy .scan-l1,
  .pulsar-underwrite-policy .scan-l2,
  .pulsar-underwrite-policy .scan-l3,
  .pulsar-underwrite-policy .scan-l4,
  .pulsar-underwrite-policy .tracer {
    animation: none;
    transform: none;
    stroke-dashoffset: 0;
  }
}

From this family15 in Underwrite

See the family