The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The seven-segment logo
A minimal logo intro: the name first shows up on a seven-segment display, thin strokes lighting up in jolts; then the segments round off, join, melt into the real letters and swell on a spring, gaining weight and width; the last point left lit, in red, becomes the full stop and hops into place. In the Playground you can put in your name or upload your 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 seven-segment 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 draws a row of seven-segment cells, lights the name on them and turns it into type -->
<svg class="palco" data-stage role="img" aria-label="SABLE" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the unlit segments, hairlines -->
<g data-ghosts></g>
<!-- the lit segments and the real letters, melted into each other by a filter while one becomes the other -->
<g data-melt>
<g data-lit></g>
<g data-type></g>
</g>
<!-- the decimal points: the last one stays lit and becomes the full stop -->
<g data-points></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.
15 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 seven-segment logo” from Animorio and fit it into my siteWhat it does
On a warm white ground, empty, a row of unlit digits draws itself, like the ones on an old clock radio: each cell is an 8 made of seven hairlines, light grey, leaning a little forward. Then the display switches on: the segments turn black in jolts, each cell runs through a few wrong patterns and settles, from left to right, on a letter of the invented brand, SABLE, with a small one-pixel jolt. All the decimal points go off except the last, which stays lit in red after two jolts. The name stays on show for a moment, written like a display. Then the segments round off, the grey hairlines draw back, the gaps between the segments close and the cells straighten up on a measured spring. Each cell slides onto its real letter, still thin and narrow, and melts into it, one letter after the other. Then the letters swell on a spring: they gain weight and width a little past their mark and come back, and the word grows wider. The red point rounds off, follows the end of the growing word, becomes the full stop, hops and lands with a one-pixel squash; the whole logo feels it. While it is on show, a wave of weight runs through it once. Then the letters thin out from the right, go off in jolts, the point goes off last and it all starts over. A click restarts it. A picture can take the place of the word: it is read onto the segments too.
How it works
One unit
The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. The word is a text element with one tspan per letter, in variable Archivo (weight from 100 to 900, width from 62 to 125). It is measured twice: already swollen, at its final axes plus their small overshoot, to choose the size so it sits wide on a computer and narrower on a phone; and thin and narrow (weight 200, width 62), with getStartPositionOfChar and getEndPositionOfChar, to know where each letter is at the moment it takes over from the segments. The ink of each letter comes from a canvas at the same weight, stretched or squeezed by the ratio of the two widths.
The display
Each cell is as tall as the capitals and a little over half as wide. The seven segments are rectangles along the middle lines of the cell, shortened by a small gap at both ends; the unlit segments are one-pixel lines in the same place. The letters are written in the classic display alphabet: capitals where they can be told apart, small letters where they cannot (b, d, n, r, t). Each cell leans with skewX around its own baseline and switches on with a run of T.set calls on the segments' opacity, a random pattern every 65 milliseconds, before it settles on its letter.
Rounding off and joining
The same function draws the segments in all their states: with the gap at the ends and sharp corners, then with rx at half the thickness (the ends turn round), then with no gap and half a thickness longer, so the round ends meet at the corners and the sign becomes one continuous line. GSAP moves from one state to the next with attr (x, y, width, height, rx), while the lean goes back to zero with elastic.out. Last, the segments move onto the box of the thin letter and take on the thickness of its stems.
Melting into the letters
Segments and letters sit in a group with a filter: a blur and a hard cut of the opacity with feColorMatrix. While a cell's segments fade and its letter appears (fill-opacity on the tspan), the filter fuses the two shapes as if they were liquid, one letter after the other. Then the blur drops to zero and the cut goes back to neutral in a quarter of a second, so the filter can be removed with no jump. From there the letters are real text: each tspan has its own font-variation-settings, which GSAP takes from weight 200 and width 62 to the chosen weight and width, a little past with power3.out and back with elastic.out.
The point, and your logo
The red point is a single rectangle: an object holding its position between its place in the display and the end of the word, its size, its roundness, its hop and its squash, which every step of the timeline redraws by reading getComputedTextLength, so it follows the word as it widens. The whole entrance is one timeline, with the labels start, point, round, join, move, melt, swell, hop, rest and leave, and timeScale for the speed. If IMAGE has an address, the picture takes the place of the word: the canvas reads its opacity along every segment of the cells laid over it, and the segments that light up are the ones where the logo is.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'SABLE' | The logo as a word: first it shows up on the display, then in real 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. |
SLANT | script.js | 7 | How far the display cells lean forward, in degrees, before they straighten up. With 0 they stand upright. |
FLICKER | script.js | 1 | How many wrong patterns each cell runs through before it settles on its letter. With 0 it lights up right straight away. |
WEIGHT | script.js | 760 | The weight the letters swell to, from 300 to 900. |
WIDTH | script.js | 112 | The width the letters spread to, from 62 (narrow) to 125 (wide). |
SPEED | script.js | 1 | The speed of everything: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 4 | How many seconds the logo stays on show before it goes off. |
LOOP | script.js | true | Whether the logo goes off and lights up again from the start. With false it stays, and now and then a wave of weight runs through it. |
When to use it
To present a logo with a technical but warm idea: the opening of the site of an electronics, watch or audio brand, a design studio, an electronic music festival, an app, a loading screen, a preview for a client, a social post. It suits pages where everything else is restrained. It works with a written brand and with a picture.
On phones
The same animation with the sizes adapted: the display and the word are narrower and smaller, the segments thinner, and with a long name the cells switch on closer together, so the entrance lasts the same. A tap restarts it.
With reduced motion
Nothing moves: the finished logo, with its red point, fades in. If the animation starts again, it fades out.
Pitfalls
- The canvas knows nothing of the width axis: measured there, a narrow letter looks as wide as a normal one. The positions come from the SVG (getStartPositionOfChar and getEndPositionOfChar, which use the real axes), and the canvas ink is squeezed by the same ratio. The narrow stems are also thinner than the ones the canvas measures: the segments are a little over half as thick.
- With the segments and the letters fading together, wherever the two shapes did not overlap a half-transparent grey stayed for a few frames. The filter's opacity cut is very steep (40 and −15 in the alpha column), so every point is either full or empty, and the melting goes one letter at a time: two liquid shapes at once looked like a smudge.
- Removing the filter at once changed the thickness of the letters by a hair in one frame: before it goes, the blur drops to zero and the matrix goes back to neutral, and only then does the swelling start.
- The letters swell inside the same text, so the word widens and re-centres at every step: the full stop cannot have a fixed place, and every tween that changes the axes or the point redraws everything, reading the real length of the text. So jumping to any moment of the timeline (the Playground, the poster) gives the same drawing.
- With a long name the entrance went past nine seconds: the waits between one cell and the next are divided by the number of letters beyond six, and the cells run through three to seven wrong patterns whatever the length.
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 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.
