Blueprint Grid

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="blueprint-grid-title" class="pulsar pulsar-blueprint-grid" data-pulsar="blueprint-grid" role="img" viewBox="0 0 160 96"><title id="blueprint-grid-title">Drafting gridlines extending across a sheet with node crosses marking the intersections</title><g id="blueprint-grid-lines" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width=".75"><path id="blueprint-grid-v1" d="M8 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v2" d="M24 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v3" d="M40 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v4" d="M56 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v5" d="M72 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v6" d="M88 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v7" d="M104 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v8" d="M120 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v9" d="M136 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-v10" d="M152 8v80" class="blueprint-grid-v"></path><path id="blueprint-grid-h1" d="M8 8h144" class="blueprint-grid-h"></path><path id="blueprint-grid-h2" d="M8 24h144" class="blueprint-grid-h"></path><path id="blueprint-grid-h3" d="M8 40h144" class="blueprint-grid-h"></path><path id="blueprint-grid-h4" d="M8 56h144" class="blueprint-grid-h"></path><path id="blueprint-grid-h5" d="M8 72h144" class="blueprint-grid-h"></path><path id="blueprint-grid-h6" d="M8 88h144" class="blueprint-grid-h"></path></g><g id="blueprint-grid-nodes" fill="none" stroke="currentColor" stroke-linecap="square" stroke-linejoin="miter" stroke-width="1.5"><path id="blueprint-grid-n1" d="M22 24h4m-2-2v4" class="blueprint-grid-n"></path><path id="blueprint-grid-n2" d="M54 40h4m-2-2v4" class="blueprint-grid-n"></path><path id="blueprint-grid-n3" d="M86 24h4m-2-2v4" class="blueprint-grid-n"></path><path id="blueprint-grid-n4" d="M118 56h4m-2-2v4" class="blueprint-grid-n"></path><path id="blueprint-grid-n5" d="M134 72h4m-2-2v4" class="blueprint-grid-n"></path></g></svg>

/* One shot, 1200ms. Each element runs a 240ms (20%) window; the stagger is the
   animation-delay. The last node cross carries the full shorthand so the
   longest delay + duration reads as exactly meta.duration (960 + 240). */

.pulsar-blueprint-grid .blueprint-grid-v,
.pulsar-blueprint-grid .blueprint-grid-h {
  opacity: var(--pulsar-grid-opacity, 0.25);
  transform-box: fill-box;
}

.pulsar-blueprint-grid .blueprint-grid-v {
  transform-origin: top;
  animation: blueprint-grid-extend-y 240ms cubic-bezier(0.33, 0, 0.2, 1) both;
}

.pulsar-blueprint-grid .blueprint-grid-h {
  transform-origin: left;
  animation: blueprint-grid-extend-x 240ms cubic-bezier(0.33, 0, 0.2, 1) both;
}

.pulsar-blueprint-grid .blueprint-grid-n {
  transform-box: fill-box;
  transform-origin: center;
  animation: blueprint-grid-node 240ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Vertical gridlines: 2.8% (33.6ms) apart, left to right. */
.pulsar-blueprint-grid #blueprint-grid-v2 {
  animation-delay: 33.6ms;
}
.pulsar-blueprint-grid #blueprint-grid-v3 {
  animation-delay: 67.2ms;
}
.pulsar-blueprint-grid #blueprint-grid-v4 {
  animation-delay: 100.8ms;
}
.pulsar-blueprint-grid #blueprint-grid-v5 {
  animation-delay: 134.4ms;
}
.pulsar-blueprint-grid #blueprint-grid-v6 {
  animation-delay: 168ms;
}
.pulsar-blueprint-grid #blueprint-grid-v7 {
  animation-delay: 201.6ms;
}
.pulsar-blueprint-grid #blueprint-grid-v8 {
  animation-delay: 235.2ms;
}
.pulsar-blueprint-grid #blueprint-grid-v9 {
  animation-delay: 268.8ms;
}
.pulsar-blueprint-grid #blueprint-grid-v10 {
  animation-delay: 302.4ms;
}

/* Horizontal gridlines: from 30%, 5% (60ms) apart, top to bottom. */
.pulsar-blueprint-grid #blueprint-grid-h1 {
  animation-delay: 360ms;
}
.pulsar-blueprint-grid #blueprint-grid-h2 {
  animation-delay: 420ms;
}
.pulsar-blueprint-grid #blueprint-grid-h3 {
  animation-delay: 480ms;
}
.pulsar-blueprint-grid #blueprint-grid-h4 {
  animation-delay: 540ms;
}
.pulsar-blueprint-grid #blueprint-grid-h5 {
  animation-delay: 600ms;
}
.pulsar-blueprint-grid #blueprint-grid-h6 {
  animation-delay: 660ms;
}

/* Node crosses: from 70%, 2.5% (30ms) apart, ending on 100%. */
.pulsar-blueprint-grid #blueprint-grid-n1 {
  animation-delay: 840ms;
}
.pulsar-blueprint-grid #blueprint-grid-n2 {
  animation-delay: 870ms;
}
.pulsar-blueprint-grid #blueprint-grid-n3 {
  animation-delay: 900ms;
}
.pulsar-blueprint-grid #blueprint-grid-n4 {
  animation-delay: 930ms;
}
.pulsar-blueprint-grid #blueprint-grid-n5 {
  animation: blueprint-grid-node 240ms cubic-bezier(0.22, 1, 0.36, 1) 960ms both;
}

@keyframes blueprint-grid-extend-y {
  from {
    transform: scaleY(0);
  }
  to {
    transform: scaleY(1);
  }
}

@keyframes blueprint-grid-extend-x {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes blueprint-grid-node {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-grid .blueprint-grid-v,
  .pulsar-blueprint-grid .blueprint-grid-h {
    animation: none;
    opacity: var(--pulsar-grid-opacity, 0.25);
    transform: none;
  }

  /* #blueprint-grid-n5 repeated: its id rule outranks the class rule above. */
  .pulsar-blueprint-grid .blueprint-grid-n,
  .pulsar-blueprint-grid #blueprint-grid-n5 {
    animation: none;
    opacity: 1;
    transform: none;
  }
}