Back to the library
Schematic — dimensions reported
Variant: Dimensioned
A plate being measured in the order a draftsman works: witness lines leave the part first, the dimension line rules between them at a constant rate, and the number lands last — because "160" is a conclusion, and nothing about it is true until the line below it spans the part. The arrowheads are not simultaneous: the left one appears as the ruling starts, the right one as it arrives, and the bore leader’s as its own ruling leaves the arc — each landing as the pen passes its station. The ruled line and the leader are linear, a pen against a straightedge that does not hesitate; the witness lines get ease-out because they are entrances. Reach for it on a spec page or a hardware marketing section where precision is the message — the part itself never moves, because it is the datum everything else is claiming something about.
svgline-drawingdiagramloop
The source
A complete HTML document. Paste it into an empty .html file and it plays — no stylesheet, script, font, or image to fetch.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Schematic — dimensions reported</title>
<style>
:root {
/* Neutrals — fixed, never remixed. */
--ivory: #faf9f5;
--paper: #ffffff;
--oat: #e3dacc;
--slate: #141413;
/* Knobs — the remix API. A knob exists iff declared here and used below. */
--hue: 38.8;
--lift: 0;
--chroma: 1;
--speed: 1;
/* Accents — derived from the knobs with the family's offsets baked in,
so one hue roll moves them together. Defaults reproduce the original hex. */
--clay: oklch(calc(0.6724 + var(--lift)) calc(0.1308 * var(--chroma)) var(--hue));
--clay-d: oklch(calc(0.5797 + var(--lift)) calc(0.127 * var(--chroma)) var(--hue));
--olive: oklch(
calc(0.6118 + var(--lift)) calc(0.0713 * var(--chroma)) calc(var(--hue) + 88.3)
);
--rust: oklch(
calc(0.5408 + var(--lift)) calc(0.1357 * var(--chroma)) calc(var(--hue) - 10.3)
);
/* Clock — 6.4s: the two measurements land inside the first 40%, the
finished drawing holds for three seconds, and the annotations clear
in a beat. The part itself never animates — it is the datum. */
--cycle: 6.4s;
--t: calc(var(--cycle) / var(--speed));
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
background: var(--ivory);
font-family:
system-ui,
-apple-system,
'Segoe UI',
Roboto,
sans-serif;
color: var(--slate);
}
.sheet {
width: min(320px, 90vw);
height: auto;
display: block;
}
.part {
fill: var(--paper);
stroke: var(--slate);
stroke-width: 2;
}
.bore {
fill: var(--ivory);
stroke: var(--slate);
stroke-width: 2;
}
/* Centrelines are part of the drawing, not the measurement — they sit on
the sheet before anything moves and never leave it. */
.centreline {
stroke: var(--slate);
stroke-width: 1;
stroke-dasharray: 9 3 2 3;
opacity: 0.3;
}
.anno {
animation: anno-clear var(--t) var(--ease-out) infinite;
}
/* Witness lines leave the part before anything is ruled between them:
a measurement is a claim about the part, so the first stroke starts
on its edge. Grown by transform, never height. */
.witness {
stroke: var(--clay);
stroke-width: 1.25;
/* view-box units, because a line's fill-box has no area: both witness
lines start on y=120, so one origin serves them both. */
transform-box: view-box;
transform-origin: 0 120px;
transform: scaleY(0);
animation: witness-grow var(--t) var(--ease-out) infinite;
}
.witness.w2 {
animation-name: witness-grow-2;
}
/* The dimension line is ruled at a constant rate — it is a pen against a
straightedge, and easing it would claim the hand hesitated. */
.dim {
stroke: var(--clay);
stroke-width: 1.25;
stroke-dasharray: 100 200;
stroke-dashoffset: 100;
animation: rule-line var(--t) linear infinite;
}
/* Each arrowhead lands as the pen passes its station: the left one as
the rule starts, the right one as it arrives, and the leader's as its
own ruling leaves the bore. Cut at 3:1 — a drafting arrow is a sliver. */
.arrow {
fill: var(--clay);
opacity: 0;
animation: arrow-left var(--t) var(--ease-out) infinite;
}
.arrow.far {
animation-name: arrow-right;
}
.arrow.at-bore {
animation-name: arrow-leader;
}
.leader {
stroke: var(--clay);
stroke-width: 1.25;
fill: none;
stroke-dasharray: 100 200;
stroke-dashoffset: 100;
animation: rule-leader var(--t) linear infinite;
}
/* The number is the last thing to appear, because it is the conclusion:
nothing about "160" is true until the line below it spans the part. */
.value {
fill: var(--clay-d);
font-family: inherit;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.06em;
opacity: 0;
transform: translateY(2px);
animation: value-in var(--t) var(--ease-out) infinite;
}
.value.bore-note {
animation-name: bore-note-in;
}
@keyframes witness-grow {
0%,
5% {
transform: scaleY(0);
}
8.5%,
100% {
transform: scaleY(1);
}
}
@keyframes witness-grow-2 {
0%,
6.5% {
transform: scaleY(0);
}
10%,
100% {
transform: scaleY(1);
}
}
@keyframes rule-line {
0%,
10% {
stroke-dashoffset: 100;
}
19%,
100% {
stroke-dashoffset: 0;
}
}
@keyframes arrow-left {
0%,
10% {
opacity: 0;
}
12%,
100% {
opacity: 1;
}
}
@keyframes arrow-right {
0%,
18% {
opacity: 0;
}
20%,
100% {
opacity: 1;
}
}
@keyframes arrow-leader {
0%,
28% {
opacity: 0;
}
30%,
100% {
opacity: 1;
}
}
@keyframes value-in {
0%,
20.5% {
opacity: 0;
transform: translateY(2px);
}
25%,
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes rule-leader {
0%,
28% {
stroke-dashoffset: 100;
}
34%,
100% {
stroke-dashoffset: 0;
}
}
@keyframes bore-note-in {
0%,
34% {
opacity: 0;
transform: translateY(2px);
}
38.5%,
100% {
opacity: 1;
transform: translateY(0);
}
}
/* Annotations clear together; the part stays. A drawing outlives its
markup, and resetting the part with it would say the object flickered. */
@keyframes anno-clear {
0%,
86% {
opacity: 1;
}
93%,
100% {
opacity: 0;
}
}
@media (prefers-reduced-motion: reduce) {
/* The draws are the content, so they stay — at half rate, which turns
the ruling into something closer to a slow uncover than a gesture. */
.anno,
.witness,
.dim,
.arrow,
.leader,
.value {
animation-duration: calc(var(--t) * 2);
}
}
</style>
</head>
<body>
<svg
class="sheet"
viewBox="0 0 300 170"
role="img"
aria-label="An engineering drawing of a plate with a bored hole being dimensioned: witness lines extend from its edges, a dimension line rules between them, arrowheads and the measurement land, then a leader line calls out the bore diameter"
>
<rect class="part" x="70" y="52" width="160" height="64" rx="8" />
<circle class="bore" cx="150" cy="84" r="16" />
<line class="centreline" x1="124" y1="84" x2="176" y2="84" />
<line class="centreline" x1="150" y1="58" x2="150" y2="110" />
<g class="anno">
<line class="witness" x1="70" y1="120" x2="70" y2="146" />
<line class="witness w2" x1="230" y1="120" x2="230" y2="146" />
<line class="dim" pathLength="100" x1="70" y1="140" x2="230" y2="140" />
<path class="arrow" d="M70 140 L79 138.5 V141.5 Z" />
<path class="arrow far" d="M230 140 L221 138.5 V141.5 Z" />
<text class="value" x="150" y="135" text-anchor="middle">160</text>
<path class="arrow at-bore" d="M161.4 72.6 L168.8 67.3 L166.7 65.2 Z" />
<path class="leader" pathLength="100" d="M161.4 72.6 L196 38 H216" />
<text class="value bore-note" x="220" y="42" text-anchor="start">⌀32</text>
</g>
</svg>
</body>
</html>
The variant family
Same idea, one axis moved. Compare them side by side before you commit.