The blueprint logo

Intro, SVG, TextGSAPAdvancedCompressed weight: Demo 19 KBGSAP 28 KBopentype.js 48 KBFreeDownload the zip

A logo intro as a technical drawing: on a gridded blueprint the axes and construction lines are drawn, a compass traces the circles, dimensions appear with their arrows, the outline of the letters is built point by point and then fills with colour through hatching that closes up; to finish, an approval stamp and the title block. In the Playground you type your own name or upload your own logo.

The code

A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The blueprint logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/700.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/500.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it and draws the sheet, the construction, the logo, the stamp and the title block -->
    <svg class="palco" data-stage role="img" aria-label="Arcwell" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the fine grid: one square, repeated -->
        <pattern id="grid-fine" patternUnits="userSpaceOnUse" data-grid-pattern>
          <path class="griglia-fine" data-grid-cell />
        </pattern>
        <!-- the hatching that fills the logo: one bar, repeated and turned; the script widens it until it is solid -->
        <pattern id="hatch-ink" patternUnits="userSpaceOnUse" data-hatch-ink>
          <rect data-hatch-ink-bar />
        </pattern>
        <pattern id="hatch-white" patternUnits="userSpaceOnUse" data-hatch-white>
          <rect fill="#fff" data-hatch-white-bar />
        </pattern>
        <!-- the shape of the logo: the letters (or the frame of the picture) -->
        <clipPath id="logo-clip" data-logo-clip></clipPath>
        <!-- the front of the filling, which runs across the logo on a slant -->
        <mask id="wipe" maskUnits="userSpaceOnUse" data-wipe-mask>
          <path fill="#fff" data-wipe />
        </mask>
        <!-- a picture shows through the same hatching -->
        <mask id="picture-mask" maskUnits="userSpaceOnUse" data-picture-mask>
          <g mask="url(#wipe)">
            <rect fill="url(#hatch-white)" data-pm-hatch />
            <rect fill="#fff" data-pm-solid />
          </g>
        </mask>
        <!-- the approval stamp: patchy ink and rough edges -->
        <filter id="stamp-noise" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-stamp-noise>
          <feTurbulence type="fractalNoise" numOctaves="3" data-stamp-turb />
          <feColorMatrix type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 -3.2 0 0 2.6" />
        </filter>
        <mask id="stamp-mask" maskUnits="userSpaceOnUse" data-stamp-mask>
          <rect fill="#fff" filter="url(#stamp-noise)" data-stamp-mask-rect />
        </mask>
        <filter id="stamp-rough" filterUnits="userSpaceOnUse" data-stamp-rough>
          <feTurbulence type="fractalNoise" numOctaves="2" result="wobble" data-stamp-rough-turb />
          <feDisplacementMap in="SourceGraphic" in2="wobble" xChannelSelector="R" yChannelSelector="G" data-stamp-rough-disp />
        </filter>
      </defs>

      <g data-world>
        <!-- the grid: a heavier line every five squares -->
        <g data-grid>
          <rect fill="url(#grid-fine)" data-grid-fine />
          <g data-grid-major></g>
        </g>
        <!-- the border of the drawing and its centring marks -->
        <g data-frame></g>
        <!-- construction: guide lines, axes, circles from the compass, centre marks, their names -->
        <g data-build></g>
        <!-- dimensions: extension lines, dimension lines with arrows, measures -->
        <g data-dims></g>
        <!-- the logo: the filling under the outline, the points of the outline on top -->
        <g data-logo>
          <g clip-path="url(#logo-clip)">
            <g mask="url(#wipe)">
              <rect fill="url(#hatch-ink)" data-fill-hatch />
              <rect data-fill-solid />
            </g>
            <path class="lucido" data-sheen />
          </g>
          <g mask="url(#picture-mask)" data-picture></g>
          <g data-outline></g>
          <g data-nodes></g>
        </g>
        <!-- the compass, drawn in lines: its shadow, the two legs, the hinge and the grip -->
        <g class="compasso" data-compass>
          <path class="compasso-ombra" data-compass-shadow />
          <path class="compasso-gamba" data-compass-legs />
          <path class="compasso-punta" data-compass-tips />
          <path class="compasso-impugnatura" data-compass-grip />
          <path class="compasso-righe" data-compass-knurl />
          <circle class="compasso-cerniera" data-compass-hinge />
        </g>
        <!-- the approval stamp -->
        <g data-stamp-place>
          <g data-stamp></g>
        </g>
        <!-- the title block, bottom right -->
        <g data-title></g>
        <g data-fx></g>
      </g>
    </svg>
    <p class="nota">Click or tap to see it again</p>
  </main>

  <script src="https://cdn.jsdelivr.net/npm/gsap@3.15.0/dist/gsap.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/opentype.js@1.3.4/dist/opentype.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

Playground

Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.

19 values to change

Open the Playground

Or ask Claude Code for it

With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:

Take “The blueprint logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a blue blueprint sheet the fine grid lights up from the centre, with a heavier line every five squares, and the border of the drawing is traced all the way round with its centring marks. Construction lines run out from the middle: the baseline, the cap height, the x-height, the boundaries of every letter and the dash-dot axes, each with its name and its measure in millimetres. A compass drawn in lines comes in, sways, plants its needle with a small settle and turns a full circle: the lead traces the circle a round part of the logo of an invented brand, Arcwell, is built on; then it lifts, moves and traces another, leaving a centre mark. Meanwhile the dimensions appear: extension lines, the dimension line opening from its middle, arrows popping out and numbers counting up to the real measure, plus a radius with its leader. The outline of every letter is drawn at a steady speed, letter after letter, with the little squares of the points and the curve handles popping up as the line reaches them. The outline closes with a flash of the line and a slight bounce, the points go out one after another and the construction lines fade away; the logo fills from the left with 45 degree hatching that slides, closes up and thickens until it is solid colour, then settles. A red stamp, «APPROVED, FOR PRODUCTION», comes down big and turned, hits the sheet, squashes and shakes the drawing; the title block bottom right is drawn and typed in cell by cell, with the project name, the scale, the units, the revision and the date. The drawing stays on show with a glint passing over the logo now and then, then it clears and starts again.

How it works

One measure

The stage is an SVG with a viewBox as big as the window, so one unit is one pixel and the dimensions can show the real measure (pixels times 25.4/96 gives millimetres). Everything is counted in cap heights: the size is chosen so that the dimensions fit at the sides, the stamp below and the title block in the bottom right corner; on a tall screen the logo takes almost the whole width.

The real outlines of the letters

opentype.js reads the font file (Barlow as WOFF) and gives, letter by letter, the commands of the outline: every contour (the outside and the holes) becomes a path of its own, with its length from getTotalLength for stroke-dasharray and stroke-dashoffset. The same commands give the points on the curve (the little squares) and the control points (the handles). A hole is a closed contour inside another: that is where the compass traces its circle. If a letter is missing from the file, the logo is written as stroked text, without points.

The compass

The compass is not a still drawing: on every frame the two tapered legs, from the needle to the hinge and from the hinge to the lead, the knurled grip and its shadow are worked out again. The hinge sits over the midpoint between needle and lead, raised just enough for the legs to stay the same length; GSAP only moves numbers (centre, radius, angle, lift, pressure) and the circle is drawn with the same ease as the angle, so the lead and the line move together.

The dimensions

Every dimension has its extension lines, a dimension line that opens from its middle by animating the x1 and x2 attributes, two arrows that pop out with back.out round their tips (svgOrigin) and a number that counts up to the measure in millimetres. The construction lines grow the same way, from the middle out to the sides.

Hatching that turns solid

The filling is a rectangle with a pattern: one bar, repeated and turned 45 degrees. GSAP changes its step (it closes up), its offset (it slides) and the thickness of the bar until it is as wide as the step and the hatching turns solid; the rectangle is clipped by the letters (a clipPath with one path per letter, so the holes stay empty) and uncovered by a mask with a slanted front. A picture uses the same pattern, in white, as a mask.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'Arcwell'`	The logo as a word: its letters are drawn outline by outline, and it is the project name in the title block.
`IMAGE`	script.js	`''`	The logo as a picture: the address of a file, or upload it from your computer. If there is one, it takes the place of the word: the construction lines frame it and the hatching reveals it.
`PAPER`	script.js	`'blueprint'`	The sheet: 'blueprint' (white lines on blueprint blue) or 'white' (blue lines on white paper).
`INK`	script.js	`'#ffc93c'`	The colour the logo is filled with.
`GRID`	script.js	`24`	The side of a grid square, in pixels (0 = no grid); a heavier line every five.
`DETAIL`	script.js	`1`	How much construction: guide lines, compass circles, points, handles and dimensions. 0 = the bare minimum, 2 = a busy sheet.
`SPEED`	script.js	`1`	2 = twice as fast, 0.5 = half as fast.
`REST`	script.js	`4`	How many seconds the finished drawing stays on show before it starts again.
`LOOP`	script.js	`true`	Clear the sheet and draw it all again.

Try them in the Playground

When to use it

To present a logo with the air of a carefully made project: the opening of the site of an architecture or engineering firm, a design studio or a brand of technical products, showing a new logo to a client, a loading screen, a social post. It works with a written wordmark and with a picture.

On phones

The same animation with the sizes adapted: the logo takes almost the whole width, the stamp comes down under the logo instead of to the side and the title block stays in the bottom right corner. A tap restarts it.

With reduced motion

Nothing moves: the sheet with its grid fades in, then the construction with the outline and the dimensions; the construction fades away and the filled logo fades in in its place, then the stamp and the title block. If the animation starts again, the sheet leaves with a fade.

Pitfalls

A path with several contours, dashed with stroke-dasharray, does not draw the holes together with the outside: every contour goes in a path of its own, with its own length. The clip, on the other hand, needs one path per letter, or the union of the contours fills the holes too.
Fontsource's WOFF file has only the basic Latin letters: with an accented letter like Ł the outline is missing, so charToGlyphIndex is checked first and, if anything is missing, the logo falls back to stroked text (the CSS font also has the extended letters).
With Playwright's waitForFunction the condition must return a plain value: returning the timeline T (an object that cannot be copied) makes the wait time out even when T is already there.
The dimensions and the typed or counting texts use onUpdate: with T.seek(t) callbacks are suppressed, so to look at a precise moment you need T.seek(t, false).
The radius leader pointed left and overlapped the names of the guide lines on a phone: now it rises to the right to a shelf between the letters and the overall width, and fades with the circle it refers to.

Libraries

GSAP 3.15.0, opentype.js 1.3.4, Barlow (Fontsource) 5.3.0, IBM Plex Mono (Fontsource) 5.3.0.

Compressed with gzip, the three demo files weigh 19 KB; the libraries: GSAP 28 KB, opentype.js 48 KB.

Testing

Tested on 10 October 2026

Desktop: Done
Phone: Done
Reduced motion: Done
Safari on iPhone: To do

License

Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.