Pulsar
Blueprint sweep

Blueprint Sweep

CSS

A vertical drafting rule travels across the sheet and leaves a fully drawn gridded panel behind it.

Tier
CSS
Dependencies
None
Duration
1.2 s, plays once
Categories
Transitions and reveals
Use cases
Search and filtering, Transitions and reveals
Industries
SaaS and software, Cross-industry
Style
Technical · hairline stroke
Set
blueprint
Tags
wipeone-shotlinegridminimal

Companion assets

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

Animated
Blueprint sweep
CSS tier
Static vector
Blueprint Sweep, not animated
Download SVG

Code

animation.svg

<svg xmlns="http://www.w3.org/2000/svg" aria-labelledby="blueprint-sweep-title" class="pulsar pulsar-blueprint-sweep" data-pulsar="blueprint-sweep" role="img" viewBox="0 0 160 96"><title id="blueprint-sweep-title">Blueprint sweep</title><defs><clipPath id="blueprint-sweep-clip"><rect id="blueprint-sweep-clip-rect" width="145.5" height="96" x="7.25" y="0"></rect></clipPath></defs><g id="blueprint-sweep-sheet" fill="none" stroke="currentColor" clip-path="url(#blueprint-sweep-clip)"><path id="blueprint-sweep-grid" stroke-width=".75" d="M24 8v80M40 8v80M56 8v80M72 8v80M88 8v80m16-80v80m16-80v80m16-80v80M8 24h144M8 40h144M8 56h144M8 72h144"></path><rect id="blueprint-sweep-frame" width="144" height="80" x="8" y="8" stroke-linecap="square" stroke-width="1.5"></rect><path id="blueprint-sweep-rules" stroke-width="1.5" d="M24 32h96M24 48h64M24 64h80"></path></g><g id="blueprint-sweep-rule"><rect id="blueprint-sweep-wash" width="6" height="88" x="2" y="4" opacity=".18"></rect><path id="blueprint-sweep-edge" fill="none" stroke-width="1.5" d="M8 4v88"></path></g></svg>

animation.css

.pulsar-blueprint-sweep #blueprint-sweep-grid {
  stroke-opacity: var(--pulsar-grid-opacity, 0.25);
}

.pulsar-blueprint-sweep #blueprint-sweep-wash {
  fill: var(--pulsar-accent, currentColor);
}

.pulsar-blueprint-sweep #blueprint-sweep-edge {
  stroke: var(--pulsar-accent, currentColor);
}

.pulsar-blueprint-sweep #blueprint-sweep-clip-rect {
  transform-box: fill-box;
  transform-origin: left center;
  animation-name: blueprint-sweep-reveal;
  animation-duration: 1200ms;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

.pulsar-blueprint-sweep #blueprint-sweep-rule {
  transform-box: fill-box;
  transform-origin: left center;
  animation-name: blueprint-sweep-travel;
  animation-duration: 1200ms;
  animation-delay: 0ms;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: both;
}

@keyframes blueprint-sweep-reveal {
  0% {
    transform: scaleX(0);
    animation-timing-function: linear;
  }
  83.333% {
    transform: scaleX(1);
  }
  100% {
    transform: scaleX(1);
  }
}

@keyframes blueprint-sweep-travel {
  0% {
    transform: translateX(0);
    opacity: 1;
    animation-timing-function: linear;
  }
  83.333% {
    transform: translateX(144px);
    opacity: 1;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
  }
  100% {
    transform: translateX(156px);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-sweep #blueprint-sweep-clip-rect {
    animation: none;
    transform: scaleX(1);
  }

  .pulsar-blueprint-sweep #blueprint-sweep-rule {
    animation: none;
    transform: none;
    opacity: 0;
  }
}

From this family10 in Blueprint

See the family