Blueprint Dimension

CSS

Two extension lines drop in, a dimension line stretches between them and arrowheads snap onto both ends.

Tier: CSS
Dependencies: None
Duration: 1.2 s, plays once
Categories: Transitions and reveals, Data and progress
Use cases: Dashboards and reporting, Sync and integration
Industries: Real estate and property, Manufacturing and industrial
Style: Technical · hairline stroke
Set: blueprint
Tags: arrowlineone-shotscaleminimal
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-dimension-title" class="pulsar pulsar-blueprint-dimension" data-pulsar="blueprint-dimension" role="img" viewBox="0 0 160 96"><title id="blueprint-dimension-title">A dimension callout: extension lines, a dimension line and arrowheads assembling</title><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width=".75"><path id="blueprint-dimension-ext-l" d="M24 24v48"></path><path id="blueprint-dimension-ext-r" d="M136 24v48"></path></g><g fill="none" stroke="currentColor" stroke-linecap="square" stroke-width="1.5"><path id="blueprint-dimension-line-l" d="M24 48h46"></path><path id="blueprint-dimension-line-r" d="M136 48H90"></path><path id="blueprint-dimension-tick-l" d="M74 42v12"></path><path id="blueprint-dimension-tick-r" d="M86 42v12"></path></g><g fill="currentColor"><path id="blueprint-dimension-head-l" d="m24 48 6-2.5v5z"></path><path id="blueprint-dimension-head-r" d="m136 48-6-2.5v5z"></path></g></svg>

animation.css

.pulsar-blueprint-dimension #blueprint-dimension-ext-l,
.pulsar-blueprint-dimension #blueprint-dimension-ext-r {
  stroke: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  animation-fill-mode: both;
}

.pulsar-blueprint-dimension #blueprint-dimension-ext-l {
  animation-name: blueprint-dimension-ext-l;
}

.pulsar-blueprint-dimension #blueprint-dimension-ext-r {
  animation-name: blueprint-dimension-ext-r;
}

.pulsar-blueprint-dimension #blueprint-dimension-line-l,
.pulsar-blueprint-dimension #blueprint-dimension-line-r {
  stroke: var(--pulsar-accent, currentColor);
  transform-box: fill-box;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
  animation-fill-mode: both;
  animation-name: blueprint-dimension-stretch;
}

.pulsar-blueprint-dimension #blueprint-dimension-line-l {
  transform-origin: 0% 50%;
}

.pulsar-blueprint-dimension #blueprint-dimension-line-r {
  transform-origin: 100% 50%;
}

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

.pulsar-blueprint-dimension #blueprint-dimension-head-l {
  animation-name: blueprint-dimension-head-l;
}

.pulsar-blueprint-dimension #blueprint-dimension-head-r {
  animation-name: blueprint-dimension-head-r;
}

.pulsar-blueprint-dimension #blueprint-dimension-tick-l,
.pulsar-blueprint-dimension #blueprint-dimension-tick-r {
  stroke: currentColor;
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation-duration: 1200ms;
  animation-timing-function: cubic-bezier(0.33, 0, 0.2, 1);
  animation-fill-mode: both;
}

.pulsar-blueprint-dimension #blueprint-dimension-tick-l {
  animation-name: blueprint-dimension-tick-l;
}

.pulsar-blueprint-dimension #blueprint-dimension-tick-r {
  animation-name: blueprint-dimension-tick-r;
}

@keyframes blueprint-dimension-ext-l {
  0% {
    transform: scaleY(0);
  }

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

@keyframes blueprint-dimension-ext-r {
  0%,
  8% {
    transform: scaleY(0);
  }

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

@keyframes blueprint-dimension-stretch {
  0%,
  25% {
    transform: scaleX(0);
  }

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

@keyframes blueprint-dimension-head-l {
  0%,
  58% {
    opacity: 0;
    transform: translateX(4px);
  }

  75%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes blueprint-dimension-head-r {
  0%,
  58% {
    opacity: 0;
    transform: translateX(-4px);
  }

  75%,
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes blueprint-dimension-tick-l {
  0%,
  75% {
    opacity: 0;
    transform: scaleY(0.5);
  }

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

@keyframes blueprint-dimension-tick-r {
  0%,
  83% {
    opacity: 0;
    transform: scaleY(0.5);
  }

  100% {
    opacity: 1;
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pulsar-blueprint-dimension #blueprint-dimension-ext-l,
  .pulsar-blueprint-dimension #blueprint-dimension-ext-r,
  .pulsar-blueprint-dimension #blueprint-dimension-line-l,
  .pulsar-blueprint-dimension #blueprint-dimension-line-r,
  .pulsar-blueprint-dimension #blueprint-dimension-head-l,
  .pulsar-blueprint-dimension #blueprint-dimension-head-r,
  .pulsar-blueprint-dimension #blueprint-dimension-tick-l,
  .pulsar-blueprint-dimension #blueprint-dimension-tick-r {
    animation: none;
    opacity: 1;
    transform: none;
  }
}