The seal logo

Intro, Text, SVGGSAPMediumCompressed weight: Demo 9.4 KBGSAP 28 KBFreeDownload the zip

A minimal logo intro: a seal drawn in a thin line comes down on the sheet, presses with a small bounce, rocks once and lifts, leaving the mark printed in one colour with slightly uneven ink; then the rule under the logo stretches out and the name beside it gains weight letter by letter. In the Playground you type your own name, choose the letter in the seal 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 seal logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/roboto-flex@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, brings the line-drawn seal down onto the sheet and sets the name beside the print -->
    <svg class="palco" data-stage role="img" aria-label="Heddle" xmlns="http://www.w3.org/2000/svg">
      <defs data-defs></defs>
      <!-- the four corner marks where the seal lands -->
      <path class="tacca" data-marks />
      <!-- the print the seal leaves, in the accent ink -->
      <g data-print-place>
        <g data-print-clip>
          <g class="stampa" data-print></g>
        </g>
      </g>
      <!-- the thin rule under the logo -->
      <path class="riga" data-rule />
      <!-- the name, one tspan per letter -->
      <text class="nome" data-name></text>
      <!-- the seal itself, drawn in thin lines -->
      <g data-seal></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 seal logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On an empty warm white ground, four grey corner marks appear: they show the spot on the sheet where the seal will land. The seal comes in from above, big and tilted, drawing itself in a thin line as it comes: the outline of the block, then the square frame and the letter, like a see-through guide. As it comes down it straightens, passes zero by less than a degree and comes back with a small elastic; it hovers, dips a little, takes a breath rising a touch and then drops hard. On impact it spreads by a hair and comes back, bounces a pixel, the four corner marks feel the blow and move away for a moment, and under it the ink opens out from the middle. The seal rocks once, like a hand leaning on it, then comes away with a little suction and floats up, vanishing. On the sheet the print stays in the accent colour, the frame with the H of Heddle, the made-up brand: the edges slightly uneven, a few dry specks, some patches a shade lighter, and the ink getting a tone lighter as it dries. A thin rule stretches out under the logo, runs a little past the end and comes back; the name beside the print arrives letter by letter, first as thin as a hair and narrow, then it widens and gains weight up to black, passes its size by a whisker and settles. When the last letter lands the rule gives a pixel under the weight and springs straight. After a few seconds the name goes thin and vanishes from its end, the rule pulls back, the print fades and it all starts again, with the print a little different each time and tilted another way. A click restarts it. The seal can print a picture instead of the letter.

How it works

One size

The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. Everything is counted in print heights: the name has a cap height of 0.4 prints and sits on the same baseline as the print, the rule 0.2 prints below. The name is measured in the SVG with getComputedTextLength, already at its final weight, and the cap height on a canvas (actualBoundingBoxAscent). If it does not fit in a row, the name goes under the print, and a long name may get smaller without shrinking the seal.

A seal coming down

Seen from above, an object that rises gets bigger: the seal is a group with a single transform, written by one function after every frame from a few numbers (height, drift, turn, squash). The height becomes the scale, 1 + 0.26 times the height, plus a hair of drift upwards. Its lines have vector-effect non-scaling-stroke, so they stay thin even when the seal is big, and they draw themselves with pathLength 1 and stroke-dashoffset from 1 to 0.

The blow

The drop is power4.in, fast at the end. On impact, at the same instant, the ink opens out from the middle (a clipPath with a circle growing in expo.out), the print and the seal spread by 1-2 per cent and an elastic.out brings them back, the seal bounces a pixel, and the corner marks move two pixels outwards and spring back. Then the rocking: three sine.inOut tweens of less than a degree. The lift starts with the seal shrinking slightly, the suction, before it rises.

Slightly uneven ink

The print has an SVG filter: a slow feTurbulence pushes the edges about by a couple of pixels with feDisplacementMap, a fine feTurbulence run through feColorMatrix leaves a few dry specks, a broad one makes some patches a little lighter, and two feComposite in join them. The frequencies are in pixels, so the grain is the same on every screen; INK changes the displacement and the number of specks, and each run gets new seeds, so every print is a little different. An uploaded picture is recoloured on a canvas in the accent colour before it goes into the print.

The name gaining weight

The name is a single text with one tspan per letter, in Roboto Flex, a variable typeface with the wght and wdth axes. Each tspan has its own font-variation-settings, written every frame: the letters start at weight 100 and width 30, reach a little past WEIGHT and full width with power2.inOut, and an elastic.out brings them back to their value. Since the letters sit in the same text, they push each other along and the name grows without overlapping. The whole intro is one timeline, with the labels start, arrive, wind, press, lift, reveal, name, rest and leave.

Values to change

Name	File	Default	What it changes
`NAME`	script.js	`'Heddle'`	The name beside the seal: it gains weight letter by letter. Empty, only the seal stays.
`IMAGE`	script.js	`''`	A picture for the seal to print, instead of the frame with the letter: the address of a file, or upload it from your computer. It is printed in the accent colour; the name beside it stays (empty NAME to have only the picture).
`LETTER`	script.js	`''`	The letter inside the seal. Empty, it is the first letter of the name.
`WEIGHT`	script.js	`620`	How heavy the name gets in the end: 300 is light, 900 is black.
`INK`	script.js	`1`	How uneven the ink is: 0 is a clean print, 2 a dry, worn seal.
`PRESS`	script.js	`1`	How hard the seal comes down: how much it spreads, bounces and knocks the corner marks (0 = it settles without a blow).
`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 starts again.
`LOOP`	script.js	`true`	Whether the logo fades and a new seal is printed. With false the logo stays.

Try them in the Playground

When to use it

To present a logo with a precise, slightly hand-made gesture: the opening of a workshop's site, a textile or paper label, a publisher, a graphic design studio, a restaurant or a hotel with a seal-like mark, a portfolio, a loading screen, a preview for a client, a social post. It suits pages where everything else is quiet. It works with a written name and with a picture.

On phones

The same animation with the sizes adapted: on a narrow screen the name goes under the print, centred, with the rule under it; a long name gets smaller and the seal stays big. A tap restarts it.

With reduced motion

Nothing moves: the print fades in where it belongs, then the rule and the name already at their weight. If the animation starts again, the logo leaves with a fade too.

Pitfalls

With the letters of the name in separate tspans but in a single text, changing the weight of one letter moves the others by itself: no overlaps. The final width has to be measured in the SVG with getComputedTextLength, after setting every letter to its final weight: the canvas does not know font-variation-settings.
The ink grain with only a fine noise and a high threshold looked like sand, not a print: now the noise is coarser, the threshold is low (a few dry specks) and a slow displacement of the edges does the rest. Slightly uneven means the print reads first of all as a clean mark.
With the seal growing as it rises, its lines got thicker too: vector-effect non-scaling-stroke keeps them thin at every height.
On a phone, with a long name under the print, the width of the name shrank the seal as well, down to a postage stamp: now the name may be smaller than 0.4 prints and the seal stays big.
The wdth axis of Roboto Flex does little at low weights: at weight 100, width 30 narrows the name by only a fifth. The weight gain shows well only if the letters become visible straight away (0.08 s) and the weight rises slowly: with a longer fade it looked like nothing more than a grey name turning black.

Libraries

GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.

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

Testing

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