Pulsar
A section outline drawing itself and filling with forty-five degree hatching

Blueprint Hatch

CSS

A section outline draws itself and then fills, line by line, with forty-five degree hatching.

Tier
CSS
Dependencies
None
Duration
1.2 s, plays once
Categories
Transitions and reveals
Use cases
Loading and waiting, Transitions and reveals
Industries
Manufacturing and industrial, Cross-industry
Style
Technical · hairline stroke
Set
blueprint
Tags
staggerlineone-shotstrokegeometric
Themeable
Yes. Inherits currentColor and reads --pulsar-accent.
Version
1.0.0, added 2026-09-09
Licence
To be confirmed. See the repository LICENSE.

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="blueprint-hatch-title" class="pulsar pulsar-blueprint-hatch" data-pulsar="blueprint-hatch" role="img" viewBox="0 0 160 96"><title id="blueprint-hatch-title">A section outline drawing itself and filling with forty-five degree hatching</title><clipPath id="blueprint-hatch-clip"><rect width="96" height="48" x="32" y="24"></rect></clipPath><g id="blueprint-hatch-lines" fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75" clip-path="url(#blueprint-hatch-clip)" opacity=".55"><path id="blueprint-hatch-h1" d="M32 28.12 36.12 24" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h2" d="M32 39.43 47.43 24" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h3" d="M32 50.75 58.75 24" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h4" d="M32 62.06 70.06 24" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h5" d="m33.37 72 48-48" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h6" d="m44.69 72 48-48" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h7" d="m56 72 48-48" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h8" d="m67.31 72 48-48" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h9" d="m78.63 72 48-48" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h10" d="M89.94 72 128 33.94" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h11" d="M101.25 72 128 45.25" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h12" d="M112.57 72 128 56.57" class="blueprint-hatch-line"></path><path id="blueprint-hatch-h13" d="m123.88 72 4.12-4.12" class="blueprint-hatch-line"></path></g><path id="blueprint-hatch-outline" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.5" d="M32 24h96v48H32Z"></path></svg>

animation.css

.pulsar-blueprint-hatch #blueprint-hatch-outline {
  fill: none;
  stroke: var(--pulsar-accent, currentColor);
  stroke-dasharray: 288;
  stroke-dashoffset: 288;
  animation: blueprint-hatch-draw 300ms cubic-bezier(0.65, 0, 0.35, 1) 0ms both;
}

.pulsar-blueprint-hatch .blueprint-hatch-line {
  fill: none;
  stroke: var(--pulsar-accent, currentColor);
  stroke-dasharray: var(--blueprint-hatch-len);
  stroke-dashoffset: var(--blueprint-hatch-len);
}

.pulsar-blueprint-hatch #blueprint-hatch-h1 {
  --blueprint-hatch-len: 5.83;
  animation: blueprint-hatch-fill 300ms linear 300ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h2 {
  --blueprint-hatch-len: 21.83;
  animation: blueprint-hatch-fill 300ms linear 350ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h3 {
  --blueprint-hatch-len: 37.84;
  animation: blueprint-hatch-fill 300ms linear 400ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h4 {
  --blueprint-hatch-len: 53.83;
  animation: blueprint-hatch-fill 300ms linear 450ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h5 {
  --blueprint-hatch-len: 67.89;
  animation: blueprint-hatch-fill 300ms linear 500ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h6 {
  --blueprint-hatch-len: 67.89;
  animation: blueprint-hatch-fill 300ms linear 550ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h7 {
  --blueprint-hatch-len: 67.89;
  animation: blueprint-hatch-fill 300ms linear 600ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h8 {
  --blueprint-hatch-len: 67.89;
  animation: blueprint-hatch-fill 300ms linear 650ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h9 {
  --blueprint-hatch-len: 67.89;
  animation: blueprint-hatch-fill 300ms linear 700ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h10 {
  --blueprint-hatch-len: 53.83;
  animation: blueprint-hatch-fill 300ms linear 750ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h11 {
  --blueprint-hatch-len: 37.84;
  animation: blueprint-hatch-fill 300ms linear 800ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h12 {
  --blueprint-hatch-len: 21.83;
  animation: blueprint-hatch-fill 300ms linear 850ms both;
}

.pulsar-blueprint-hatch #blueprint-hatch-h13 {
  --blueprint-hatch-len: 5.83;
  animation: blueprint-hatch-fill 300ms linear 900ms both;
}

@keyframes blueprint-hatch-draw {
  from {
    stroke-dashoffset: 288;
  }

  to {
    stroke-dashoffset: 0;
  }
}

@keyframes blueprint-hatch-fill {
  from {
    stroke-dashoffset: var(--blueprint-hatch-len);
  }

  to {
    stroke-dashoffset: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-hatch #blueprint-hatch-outline,
  .pulsar-blueprint-hatch #blueprint-hatch-lines .blueprint-hatch-line {
    animation: none;
    stroke-dashoffset: 0;
  }
}