Blueprint Elevation

CSS

A building elevation drafts itself from the ground line up: walls rise, the roof draws in, then door, windows and a dimension tick.

Tier: CSS
Dependencies: None
Duration: 1.6 s, plays once
Categories: Transitions and reveals, Decorative and illustrative
Use cases: Onboarding and setup, Hero and marketing
Industries: Real estate and property, Manufacturing and industrial
Style: Technical · hairline stroke
Set: blueprint
Tags: strokeone-shotstaggerlinegeometric
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-elevation-title" class="pulsar pulsar-blueprint-elevation" data-pulsar="blueprint-elevation" role="img" viewBox="0 0 160 96"><title id="blueprint-elevation-title">A building elevation drafting itself: ground line, walls, roof, door, windows and a dimension tick</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.5"><path id="blueprint-elevation-ground" d="M16 80h128"></path><path id="blueprint-elevation-wall-l" d="M40 80V40"></path><path id="blueprint-elevation-wall-r" d="M120 80V40"></path><path id="blueprint-elevation-roof" d="m40 40 40-20 40 20"></path><rect id="blueprint-elevation-door" width="16" height="24" x="72" y="56"></rect><rect id="blueprint-elevation-win-l" width="12" height="12" x="48" y="48"></rect><rect id="blueprint-elevation-win-r" width="12" height="12" x="100" y="48"></rect></g><g id="blueprint-elevation-dim" fill="none" stroke="currentColor" stroke-linecap="square" stroke-opacity=".6" stroke-width=".75"><path d="M40 84v6m80-6v6"></path><path stroke-dasharray="3 3" d="M40 87h80"></path></g></svg>

animation.css

.pulsar-blueprint-elevation #blueprint-elevation-ground {
  stroke: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-name: blueprint-elevation-ground;
  animation-duration: 1600ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

.pulsar-blueprint-elevation #blueprint-elevation-wall-l,
.pulsar-blueprint-elevation #blueprint-elevation-wall-r {
  stroke: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-duration: 1600ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.pulsar-blueprint-elevation #blueprint-elevation-wall-l {
  animation-name: blueprint-elevation-wall-l;
}

.pulsar-blueprint-elevation #blueprint-elevation-wall-r {
  animation-name: blueprint-elevation-wall-r;
}

.pulsar-blueprint-elevation #blueprint-elevation-roof {
  stroke: var(--pulsar-accent, currentColor);
  stroke-dasharray: 89.4 200;
  animation-name: blueprint-elevation-roof;
  animation-duration: 1600ms;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  animation-fill-mode: both;
}

.pulsar-blueprint-elevation #blueprint-elevation-door {
  stroke: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-name: blueprint-elevation-door;
  animation-duration: 1600ms;
  animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  animation-fill-mode: both;
}

.pulsar-blueprint-elevation #blueprint-elevation-win-l,
.pulsar-blueprint-elevation #blueprint-elevation-win-r {
  stroke: var(--pulsar-accent, currentColor);
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 1600ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
}

.pulsar-blueprint-elevation #blueprint-elevation-win-l {
  animation-name: blueprint-elevation-win-l;
}

.pulsar-blueprint-elevation #blueprint-elevation-win-r {
  animation-name: blueprint-elevation-win-r;
}

.pulsar-blueprint-elevation #blueprint-elevation-dim {
  stroke: currentColor;
  animation-name: blueprint-elevation-dim;
  animation-duration: 1600ms;
  animation-timing-function: linear;
  animation-fill-mode: both;
}

@keyframes blueprint-elevation-ground {
  0% {
    transform: scaleX(0);
  }

  20%,
  100% {
    transform: scaleX(1);
  }
}

@keyframes blueprint-elevation-wall-l {
  0%,
  15% {
    transform: scaleY(0);
  }

  39%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes blueprint-elevation-wall-r {
  0%,
  21% {
    transform: scaleY(0);
  }

  45%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes blueprint-elevation-roof {
  0%,
  40% {
    stroke-dashoffset: 89.4;
  }

  65%,
  100% {
    stroke-dashoffset: 0;
  }
}

@keyframes blueprint-elevation-door {
  0%,
  62% {
    transform: scaleY(0);
  }

  80%,
  100% {
    transform: scaleY(1);
  }
}

@keyframes blueprint-elevation-win-l {
  0%,
  75% {
    opacity: 0;
    transform: scale(0.6);
  }

  88%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blueprint-elevation-win-r {
  0%,
  80% {
    opacity: 0;
    transform: scale(0.6);
  }

  93%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes blueprint-elevation-dim {
  0%,
  88% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-elevation #blueprint-elevation-ground,
  .pulsar-blueprint-elevation #blueprint-elevation-wall-l,
  .pulsar-blueprint-elevation #blueprint-elevation-wall-r,
  .pulsar-blueprint-elevation #blueprint-elevation-roof,
  .pulsar-blueprint-elevation #blueprint-elevation-door,
  .pulsar-blueprint-elevation #blueprint-elevation-win-l,
  .pulsar-blueprint-elevation #blueprint-elevation-win-r,
  .pulsar-blueprint-elevation #blueprint-elevation-dim {
    animation: none;
    opacity: 1;
    stroke-dashoffset: 0;
    transform: none;
  }
}