The plotter-hatched logo

Intro, SVG, TextGSAPAdvancedCompressed weight: Demo 11 KBGSAP 28 KBFreeDownload the zip

A minimal logo intro: a plotter pen hatches the letters at 45 degrees, one line after the other, back and forth; then it changes colour with a turn in the air and lays an orange cross hatching over the first. At the end it rises and strikes the logo once: the lines swell from the point it hit until the letters close up solid, dipping under the blow. 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 plotter-hatched logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures the logo and a plotter pen hatches it, line after line -->
    <svg class="palco" data-stage role="img" aria-label="Tamber" xmlns="http://www.w3.org/2000/svg">
      <defs data-defs></defs>
      <g data-world>
        <!-- the logo in the second pen's colour, seen only through the lines of the cross hatching -->
        <g data-accent></g>
        <!-- the logo in ink, seen only through the lines of the first hatching -->
        <g data-ink></g>
        <!-- the two hairline rails of the plotter, crossing where the pen is -->
        <line class="guida" data-rail-x />
        <line class="guida" data-rail-y />
        <!-- the pen: a small triangle whose tip is the point that draws -->
        <g data-pen><polygon class="penna" data-pen-body /></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="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.

14 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 plotter-hatched logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white ground two hairlines stretch out from the sides and cross: they are the rails of a plotter, and where they cross a small triangular pen drops from above, landing on its tip with a squash while the rails shiver for a moment. Then the pen starts hatching the made-up brand, Tamber: diagonal lines at 45 degrees, one after the other, back and forth like a real plotter, from left to right; the ink stays only where the letters are, and the rails follow the pen. When the first pass is done the pen lifts, turns round and, when it faces us again, it is orange: it comes down at the other end of the logo and lays the second hatching, with the lines slanting the other way, from right to left, so the letters become a black and orange cross hatch. Then the pen rises over the logo, winds up and strikes it once in the middle: from the point it hit the black lines swell, the near ones first and then the far ones, until they touch and the letters close up solid, covering the orange. Each letter, when the blow reaches it, dips a couple of pixels, grows a little wider (the typeface’s wdth and wght axes go up) and springs back with an elastic. The pen bounces off and flies away with the rails; only the logo is left. Then the letters open back into hatching, the lines are wiped away and it all starts again. A click restarts it. A picture can take the place of the word: the pen hatches its dark or coloured parts, in the picture’s real colours.

How it works

The logo, measured on a canvas

The logo is drawn on a hidden canvas, in the same typeface as the page, Anybody at weight 850 (or the picture is drawn): every pixel becomes a number from 0 to 1, and the pen hatches only where the number is over one half. The canvas also gives where each letter starts, so the page sets the same letters in SVG, one by one, in the same place. The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel, and everything is measured in letter heights.

The hatching lines

The lines run parallel at the chosen angle, one step apart (the letter height divided by LINES). For each one we walk along the line and look at the canvas in a band one step wide: the line starts at the first pixel of the logo and ends at the last, with a little margin. Every other line is turned round, so the pen goes back and forth; lines and the short hops between them make a single road, and one number from 0 to 1 says where the pen is (the hops weigh less, so they go faster).

Ink only inside the letters

The lines are not the ink: they are a white SVG mask. Underneath is the whole logo, in black, and it shows only through the lines; so the ink stays inside the letters and the edges are sharp even where a line runs past them. The cross hatching is a second logo, in orange, under the first, with its own mask of lines slanting the other way. Each line is drawn with a single dash (stroke-dasharray and stroke-dashoffset) that grows behind the pen.

The blow that closes the letters

The pen rises with power2.out and drops with power3.in onto the point of the logo nearest the middle. From there the black lines thicken to more than a step, with a delay that grows with the distance: they touch and cover the orange. Only the black ones: thickening the orange ones too left patches of colour between the lines. When they are all full the mask is taken off. Each letter dips and widens for a moment, in the wdth and wght axes written in font-variation-settings too, and comes back with elastic.out.

Direction and your logo

The whole intro is one timeline, with the labels start, reveal, strike, rest and leave, and timeScale for the speed; a single function writes the stage after every frame, and writes an attribute only if it has changed. The pen is a group whose place, lift and squash are written by hand, pivoting on its tip; the colour changes while, turning, it is edge on. If IMAGE holds an address, the picture is cut out of its light ground and an orange copy is made, one for each pen. In the Playground, next to the field, there is a button to upload a file.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'Tamber'`	The logo as a word: the pen hatches its letters.
`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 and the pen hatches its dark or coloured parts.
`LINES`	script.js	`11`	How many hatching lines fit in the height of a letter: the more there are, the denser the hatching.
`ANGLE`	script.js	`45`	The slant of the first hatching, in degrees; the cross hatching is its mirror.
`CROSS`	script.js	`true`	Whether the second, orange pen lays the cross hatching. With false the blow comes right after the first pass.
`NIB`	script.js	`1`	How thick the pen line is: 1 is a fine pen, 2 twice as thick.
`SPEED`	script.js	`1`	The speed of the whole animation: 2 is twice as fast, 0.5 half as fast.
`REST`	script.js	`4`	How many seconds the logo stays on show before it opens back into lines.
`LOOP`	script.js	`true`	Whether the logo opens back into lines, the lines are wiped away and the pen hatches it again. With false it stays solid.

Try them in the Playground

When to use it

To present a logo with a printing and technical-drawing gesture: the opening of the site of a graphic design studio, a print shop or a screen-printing workshop, a design or tech brand, a portfolio, a preview for a client, a loading screen, a social post. It suits pages where everything else is quiet. It works with a written wordmark and with a picture.

On phones

The same animation with the sizes adapted: the logo is almost as wide as the screen, the lines stay just as dense for the letters and the pen strikes its blow just as on a computer. A tap restarts it.

With reduced motion

Nothing moves: the solid logo fades in, with no pen and no rails. If the animation starts again, the logo leaves with a fade.

Pitfalls

Thickening the black and the orange lines together left orange patches between one line and the next, and the blow looked dirty: only the black ones thicken, which is enough to fill the letters and covers the orange.
With a long name there are more than twice as many lines to hatch and the intro ran past nine seconds: the length of each pass grows with the number of lines but has a ceiling, and with many lines the pen simply runs faster.
When the timeline jumped (a resize, the preview video) the pen, which follows the road while it hatches, set off for the cross hatching from the wrong place: at the end of each pass its position is written into the timeline with a set.
A picture from another site without permission can't be read from the canvas: then the pen hatches a rectangle as big as the picture, instead of stopping with an error.

Libraries

GSAP 3.15.0, Anybody (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 11 KB; the libraries: GSAP 28 KB.

Testing

Tested on 15 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.