Pulsar
A dimension callout: extension lines, a dimension line and arrowheads assembling

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

Companion assets

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

Animated
A dimension callout: extension lines, a dimension line and arrowheads assembling
CSS tier
Static vector
Blueprint Dimension, not animated
Download SVG

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;
  }
}

From this family10 in Blueprint

See the family