The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The stencil logo
A minimal logo intro: a thin, see-through stencil comes down onto the paper, a veil of colour crosses it in one slanted pass and the paint goes through the holes; then a corner lifts, the stencil peels off folding back on itself and flies away, and the logo is left on the paper with the little bridges of the stencil, which close one after the other. 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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The stencil logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script cuts the logo out of a thin stencil sheet, sprays it and peels the sheet away -->
<svg class="palco" data-stage role="img" aria-label="boada" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the four crop marks: first around the sheet, at the end around the logo -->
<path class="tacca" data-marks />
<!-- the paint that goes through the holes: what stays on the paper -->
<g data-paint></g>
<!-- the stencil sheet: its shadow, the flat part, the mist of the spray, and the flap that folds back -->
<g data-sheet></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.
13 values to change
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 stencil logo” from Animorio and fit it into my siteWhat it does
On an empty warm white ground, four thin crop marks draw themselves at the corners, one after the other, where the stencil will land. The stencil comes down from above: a thin, see-through sheet, barely grey, with the made-up brand boada cut into it and the cut edges marked by a fine line. As it comes down it shrinks a little, its shadow tightens under it, it lands a pixel too low and settles with a small elastic; the crop marks feel the blow and spread by a pixel. In the letters you can see the bridges of the stencil: the thin strips that hold the middle of the o, the b, the d and the a to the sheet, which would otherwise fall out. Then a veil of blue crosses the sheet in one slanted pass, like a spray: where it has passed the paint stays solid in the holes, and only a light mist is left on the sheet. The top right corner lifts, trembles and drops back a little; then the stencil peels off folding back on itself, showing its back with the letters mirrored, and flies away, speeding up, with its shadow. The logo is left on the paper, with its bridges still open. The crop marks close in around the logo, pass their place by a pixel and spring back; the bridges close one after the other, from the left, as if the paint flowed in, and the crop marks feel the last one click. After a few seconds the crop marks pull in their arms and the logo is wiped away with the same slanted pass; it all starts again. A click restarts it. A picture can take the place of the word: its dark or coloured parts (or its shape, if it has a transparent ground) are cut into the stencil, and the pass uncovers the picture in its own colours.
How it works
The stencil, cut on a canvas
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 logo is drawn on a canvas as big as the stencil, in a wide (fontStretch expanded), heavy Archivo, or the picture is drawn. Three drawings come out of that canvas, made with its compositing operations: the white shape of the logo, the sheet with the holes and the cut edges (the shape moved one pixel in eight directions, minus the shape), and the sheet alone, used as a mask. They become three data: images inside the SVG.
The bridges, found by themselves
On the canvas a fill that starts from the edges marks everything outside; whatever is left empty and is not outside is a closed hole, the middle of an o or a b, which would fall out of a real stencil. For each hole the column of its centre is taken and walked up and down until it reaches the outside: that is the bridge, a thin vertical rectangle. Bridges close together are merged (a B has a single one for its two bowls), and letters with no holes, such as n or M, get no bridges, as in a real stencil.
The veil of colour
The paint is a blue rectangle with two masks: the shape of the logo, with the bridges in black, and the pass, a linear gradient from white to black, turned by TILT degrees, that slides across the sheet with sine.inOut. The same gradient, lighter, leaves the mist on the sheet, and a third gradient with a peak in the middle is the veil you see passing. At the end a black gradient in the same mask makes the pass again and wipes the logo away.
The stencil that folds
The fold is a straight line that starts at the top right corner and crosses the sheet. The sheet is cut into two polygons along the line: the part that stays is a clipPath, the lifted part is drawn again mirrored over the line, with a reflection matrix (I minus twice d times d transposed). Both are the same group used twice with use, and on the back a veil in the ground colour makes it look like the matt side of the sheet. Moving the line with power2.in, the mirrored part travels twice as fast and the sheet flies away; a blurred shadow follows it and grows as it lifts.
Direction and your logo
The whole intro is one timeline, with the labels start, land, veil, lift, peel, reveal, close, rest and leave, and timeScale for the speed; a single function writes gradients, bridges, crop marks and fold after every frame, and writes an attribute again only if it has changed. The bridges close by shrinking their rectangle in the mask to zero, with power3.in. If IMAGE holds an address, the canvas holds the picture and the paint is the picture itself; in the Playground, next to the field, there is a button to upload a file, which goes into the code as a data: address.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'boada' | The logo as a word: it is cut into the stencil. |
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. |
BRIDGE | script.js | 1 | How wide the bridges of the stencil are (1 = as in a real stencil, 0 = no bridges). |
MIST | script.js | 1 | How much paint mist stays on the stencil after the pass (0 = it stays clean). |
TILT | script.js | 14 | How slanted the pass of colour is, in degrees. |
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 is wiped away. |
LOOP | script.js | true | Whether the logo is wiped away and it starts again with a new stencil. With false the logo stays. |
When to use it
To present a logo with a print-workshop gesture: the opening of a graphic design or screen printing studio’s site, a clothing or furniture brand, a venue, 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 and the stencil are smaller, so the stencil and the crop marks fit on the screen; the fold flies away the same way. A tap restarts it.
With reduced motion
Nothing moves: the stencil fades in, the paint fades in through the holes, the stencil fades away, then the bridges fade out and the crop marks appear around the logo. If the animation starts again, the logo leaves with a fade too.
Pitfalls
- The shadow of the stencil coming down showed through the see-through sheet and turned it dark grey: now it sits in a group with a mask that takes out the rectangle of the sheet, so it is seen only around it. The mask goes on the group, not on the rectangle, because GSAP moves the rectangle and the mask would move with it.
- SVG masks use the space of the element that calls them: inside the mirrored part of the fold, the gradient of the pass and the mist are mirrored along with the sheet, and rightly so (the paint is stuck to the sheet). The same goes for the clipPaths of the two pieces, written in the sheet's coordinates before the reflection.
- On the canvas the width of the typeface is set with fontStretch, but it must be written after font: setting font resets it to normal, and the letters came out narrow. Everything else (holes, bridges, edges) comes from the same canvas, so the stencil and the paint match to the pixel even where fontStretch is missing.
- A picture with a transparent ground is cut along its shape, one with a solid ground along its dark or coloured parts: the script decides by counting the transparent pixels. An island inside a hole (a square inside an empty square) is held by a single bridge.
Libraries
GSAP 3.15.0, Archivo (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.
