Blueprint Background: CSS Animated Background

Blueprint Background

Blueprint paper with a fine and a bold grid, where a technical drawing sketches itself line by line, holds, then fades for the next pass. Each stroke draws in with stroke-dashoffset and pathLength.

Also known as: blueprint grid background css, technical drawing background, graph paper animation.

Color Pattern scale 16px Dark background

HTML

<div class="bgx-blueprint-grid" aria-hidden="true">
  <svg class="bgx-blueprint-grid-draft" viewBox="0 0 220 120">
    <path style="--i: 0" d="M60 26a34 34 0 1 1 0 68a34 34 0 1 1 0-68" pathLength="100" />
    <path style="--i: 1" class="bgx-blueprint-grid-thin" d="M60 16v88M16 60h88" pathLength="100" />
    <path style="--i: 2" d="M126 30h74v60h-74z" pathLength="100" />
    <path style="--i: 3" class="bgx-blueprint-grid-thin" d="M126 90 200 30" pathLength="100" />
    <path style="--i: 4" d="M126 90a60 60 0 0 1 60-60" pathLength="100" />
    <path style="--i: 5" class="bgx-blueprint-grid-thin" d="M126 104h74M126 100v8M200 100v8" pathLength="100" />
  </svg>
</div>

CSS

.bgx-blueprint-grid {
  --c: var(--bgx-color, #3b82f6);
  font-size: var(--bgx-size, 16px);
  position: absolute;
  inset: 0;
  overflow: hidden;
  --ink: rgb(255 255 255 / 0.85);
  background:
    linear-gradient(rgb(255 255 255 / 0.2) 1px, transparent 1px) -1px -1px / 5em 5em,
    linear-gradient(90deg, rgb(255 255 255 / 0.2) 1px, transparent 1px) -1px -1px / 5em 5em,
    linear-gradient(rgb(255 255 255 / 0.08) 1px, transparent 1px) -1px -1px / 1em 1em,
    linear-gradient(90deg, rgb(255 255 255 / 0.08) 1px, transparent 1px) -1px -1px / 1em 1em,
    radial-gradient(ellipse at 60% 40%, color-mix(in srgb, var(--c) 70%, #1b3b75), color-mix(in srgb, var(--c) 45%, #07142b));
}
.bgx-blueprint-grid-draft {
  position: absolute;
  top: 50%;
  right: 8%;
  width: 22em;
  height: 12em;
  margin-top: -6em;
  overflow: visible;
  fill: none;
  stroke: var(--ink);
  stroke-width: 1.3;
  stroke-linecap: round;
}
.bgx-blueprint-grid-draft path {
  stroke-dasharray: 100 100;
  animation: bgx-blueprint-grid-draw 7s cubic-bezier(0.55, 0.1, 0.35, 1) calc(var(--i) * 0.35s - 2.2s) infinite;
}
.bgx-blueprint-grid-draft .bgx-blueprint-grid-thin {
  stroke-width: 0.7;
  stroke-dasharray: 4 3;
  animation-name: bgx-blueprint-grid-fade;
}
@keyframes bgx-blueprint-grid-draw {
  0%       { stroke-dashoffset: 100; opacity: 1; }
  30%, 82% { stroke-dashoffset: 0; opacity: 1; }
  95%, 100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes bgx-blueprint-grid-fade {
  0%, 10%   { opacity: 0; }
  30%, 82%  { opacity: 0.8; }
  95%, 100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .bgx-blueprint-grid, .bgx-blueprint-grid *, .bgx-blueprint-grid::before, .bgx-blueprint-grid::after, .bgx-blueprint-grid *::before, .bgx-blueprint-grid *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

Customizing this snippet

Color: set --bgx-color on the element or a parent. Currently previewing #3b82f6.
Pattern scale: set --bgx-size. Every other dimension is in em, so the whole thing scales together. Currently previewing 16px.
Speed: change the duration on the transition or animation shorthand. Staggered delays are relative, so they keep their rhythm.
Reduced motion: the rule at the end of the CSS turns the motion off for people who asked their OS for less of it. Keep it.

Blueprint Background

HTML

CSS

Customizing this snippet

Similar animated backgrounds