Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dai sette segmenti
Un’intro di logo in stile minimal: il nome compare prima su un display a sette segmenti, con tratti sottili che si accendono a scatti; poi i segmenti si arrotondano, si uniscono, si sciolgono nelle lettere vere e si gonfiano a molla, prendendo peso e larghezza; l’ultimo punto rimasto acceso, rosso, diventa il punto finale e ci salta sopra. Nel Playground ci metti il tuo nome o carichi il tuo logo.
Il codice
Una cartella che funziona da sola: index.html, style.css, script.js e le librerie da CDN. Nelle schede React e Vue la stessa demo è già un componente, che spegne le sue animazioni quando esce dalla pagina.
<!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
Cambia valori, colori e testi con le manopole e guarda l’animazione rispondere dal vivo. Oppure scrivi tu nel codice. Poi scarica la cartella con le tue modifiche.
15 valori da cambiare
Oppure chiedila a Claude Code
Col connettore di Animorio, Claude Code la prende da qui con tutta la sua guida e la adatta al tuo progetto. Incolla questa richiesta:
Prendi «Il logo dai sette segmenti» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo, vuoto, si disegna una fila di cifre spente, come quelle di una vecchia radiosveglia: ogni casella è un 8 fatto di sette righe sottilissime, grigio chiaro, un po’ inclinato in avanti. Poi il display si accende: i segmenti diventano neri a scatti, ogni casella passa per qualche disegno sbagliato e si ferma, da sinistra a destra, su una lettera del marchio inventato, SABLE, con un piccolo sobbalzo di un pixel. Si spengono tutti i punti decimali tranne l’ultimo, che resta acceso in rosso dopo due scatti. Il nome resta un attimo in mostra, scritto da display. Poi i segmenti si arrotondano, le righe grigie si ritirano, i buchi fra un segmento e l’altro si chiudono e le caselle si raddrizzano con una molla misurata. Ogni casella scivola sulla sua lettera vera, ancora sottile e stretta, e ci si scioglie dentro, una lettera dopo l’altra. Allora le lettere si gonfiano a molla: prendono peso e larghezza un poco oltre il segno e tornano indietro, e la parola si allarga. Il punto rosso si arrotonda, segue la fine della parola che cresce, diventa il punto finale, fa un saltello e atterra schiacciandosi di un pixel; tutto il logo sente il colpo. Mentre è in mostra, un’onda di peso lo attraversa una volta. Poi le lettere tornano sottili da destra, si spengono a scatti, il punto si spegne per ultimo e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: viene letta anche lei sui segmenti.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. La parola è un elemento text con un tspan per lettera, in Archivo variabile (peso da 100 a 900, larghezza da 62 a 125). Si misura due volte: già gonfia, con i suoi assi finali e il loro piccolo eccesso, per scegliere la grandezza perché stia larga sul computer e più stretta sul telefono; e sottile e stretta (peso 200, larghezza 62), con getStartPositionOfChar e getEndPositionOfChar, per sapere dov’è ogni lettera nel momento in cui prende il posto dei segmenti. L’inchiostro di ogni lettera viene da una canvas allo stesso peso, allargato o stretto nella proporzione fra le due larghezze.
Il display
Ogni casella è alta quanto le maiuscole e larga poco più della metà. I sette segmenti sono rettangoli lungo le linee di mezzo della casella, accorciati di un piccolo spazio alle due punte; i segmenti spenti sono righe di un pixel nello stesso posto. Le lettere si scrivono con l’alfabeto classico dei display: le maiuscole dove si distinguono, le minuscole dove no (b, d, n, r, t). Ogni casella è inclinata con skewX intorno alla sua linea di base, e si accende con una serie di T.set sull’opacità dei segmenti, un disegno a caso ogni 65 millesimi di secondo, prima di fermarsi sulla sua lettera.
Arrotondarsi e unirsi
La stessa funzione disegna i segmenti in tutti i loro stati: con lo spazio alle punte e gli spigoli vivi, poi con rx pari a metà spessore (le punte diventano tonde), poi senza spazio e mezzo spessore più lunghi, così le punte tonde si incontrano negli angoli e il segno diventa una riga continua. GSAP passa da uno stato all’altro con attr (x, y, width, height, rx), mentre l’inclinazione torna a zero con elastic.out. Infine i segmenti vanno sulla scatola della lettera sottile e prendono lo spessore delle sue aste.
Sciogliersi nelle lettere
Segmenti e lettere stanno in un gruppo con un filtro: una sfocatura e un taglio netto dell’opacità con feColorMatrix. Mentre i segmenti di una casella sfumano e la sua lettera compare (fill-opacity sul tspan), il filtro fonde le due forme come se fossero liquide, una lettera dopo l’altra. Poi la sfocatura scende a zero e il taglio torna neutro in un quarto di secondo, così il filtro si può togliere senza salti. Da lì le lettere sono testo vero: ogni tspan ha il suo font-variation-settings, che GSAP porta da peso 200 e larghezza 62 al peso e alla larghezza scelti, un poco oltre con power3.out e indietro con elastic.out.
Il punto e il tuo logo
Il punto rosso è un rettangolo solo: un oggetto con la posizione fra il suo posto nel display e la fine della parola, la grandezza, l’arrotondamento, il salto e lo schiacciamento, che ogni passo della timeline ridisegna leggendo getComputedTextLength, così segue la parola mentre si allarga. Tutta l’entrata è una timeline sola, con le etichette start, point, round, join, move, melt, swell, hop, rest e leave, e timeScale per la velocità. Se IMAGE ha un indirizzo, al posto della parola c’è l’immagine: la canvas legge la sua opacità lungo ogni segmento di caselle che la coprono, e i segmenti accesi sono quelli dove c’è il logo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'SABLE' | Il logo scritto: prima compare sul display, poi in lettere vere. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
SLANT | script.js | 7 | Quanto sono inclinate in avanti le caselle del display, in gradi, prima di raddrizzarsi. Con 0 stanno dritte. |
FLICKER | script.js | 1 | Per quanti disegni sbagliati passa ogni casella prima di fermarsi sulla sua lettera. Con 0 si accende subito giusta. |
WEIGHT | script.js | 760 | Il peso a cui si gonfiano le lettere, da 300 a 900. |
WIDTH | script.js | 112 | La larghezza a cui si allargano le lettere, da 62 (strette) a 125 (larghe). |
SPEED | script.js | 1 | La velocità di tutto: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta in mostra prima di spegnersi. |
LOOP | script.js | true | Se il logo si spegne e si riaccende da capo. Con false resta, e ogni tanto un’onda di peso lo attraversa. |
Quando usarla
Per presentare un logo con un’idea tecnica ma calda: l’apertura del sito di un marchio di elettronica, di orologi o di audio, di uno studio di design, di un festival di musica elettronica, di un’app, un caricamento, l’anteprima per un cliente, un post per i social. Sta bene dove il resto della pagina è sobrio. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: il display e la parola sono più stretti e più piccoli, i segmenti più sottili, e con un nome lungo le caselle si accendono più fitte, così l’entrata dura lo stesso. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il logo finito, col suo punto rosso, compare in dissolvenza. Se l’animazione ricomincia, se ne va in dissolvenza.
Trappole
- La canvas non conosce l’asse della larghezza: misurata lì, una lettera stretta sembra larga quanto una normale. Le posizioni vengono dall’SVG (getStartPositionOfChar e getEndPositionOfChar, che usano gli assi veri), e l’inchiostro della canvas si stringe nella stessa proporzione. Anche le aste strette sono più sottili di quelle che la canvas misura: lo spessore dei segmenti è poco più di metà.
- Con i segmenti e le lettere che sfumano insieme, nei punti dove le due forme non coincidono restava per qualche fotogramma un grigio mezzo trasparente. Il taglio dell’opacità del filtro è molto ripido (40 e −15 nella colonna dell’alfa), così ogni punto è pieno o vuoto, e lo scioglimento va una lettera alla volta: due forme liquide insieme sembravano una macchia.
- Togliere il filtro di colpo faceva cambiare di un soffio lo spessore delle lettere in un fotogramma: prima di toglierlo la sfocatura scende a zero e la matrice torna neutra, e solo dopo il gonfiarsi comincia.
- Le lettere si gonfiano dentro lo stesso testo, quindi la parola si allarga e si ricentra a ogni passo: il punto finale non può avere un posto fisso, e ogni tween che cambia assi o punto ridisegna tutto, leggendo la lunghezza vera del testo. Così anche saltare a un istante qualsiasi della timeline (il Playground, il poster) dà lo stesso disegno.
- Con un nome lungo l’entrata superava i nove secondi: le attese fra una casella e l’altra si dividono per il numero di lettere oltre le sei, e le caselle passano da tre a sette disegni sbagliati qualunque sia la lunghezza.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 16 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Da fare
Licenza d’uso
Puoi usarla nei tuoi progetti e in quelli dei tuoi clienti. Non puoi rivenderla né ridistribuirla così com’è. GSAP resta sotto la sua licenza Standard. Licenza completa.
