Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dal sigillo
Un’intro di logo in stile minimal: un sigillo disegnato a filo sottile scende sul foglio, si schiaccia con un piccolo rimbalzo, dondola una volta e si alza, lasciando il marchio stampato in un solo colore con l’inchiostro appena irregolare; poi la riga sotto il logo si stende e il nome accanto prende peso lettera per lettera. Nel Playground ci metti il tuo nome, scegli la lettera del sigillo 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 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
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.
14 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 dal sigillo» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo e vuoto compaiono quattro tacche grigie ad angolo: segnano il punto del foglio dove arriverà il sigillo. Il sigillo entra dall’alto, grande e storto, e intanto si disegna a filo sottile: il contorno del blocco, poi la cornice quadrata e la lettera, come una guida in trasparenza. Mentre scende si raddrizza, supera lo zero di meno di un grado e torna indietro con un piccolo elastico; resta sospeso, si abbassa appena, prende fiato salendo un poco e poi cala di colpo. All’impatto si allarga di un capello e torna, rimbalza di un pixel, le quattro tacche sentono il colpo e si allontanano per un attimo, e sotto di lui l’inchiostro si apre dal centro. Il sigillo dondola una volta, come una mano che ci si appoggia, poi si stacca con un piccolo risucchio e vola via verso l’alto, sparendo. Sul foglio resta la stampa nel colore d’accento, la cornice con la H di Heddle, il marchio inventato: i bordi appena mossi, qualche puntino secco, zone un filo più chiare, e l’inchiostro che asciugandosi si schiarisce di un tono. Una riga sottile si stende sotto il logo, va un poco oltre la fine e torna; il nome accanto alla stampa arriva lettera per lettera, prima sottile come un capello e stretto, poi si allarga e prende peso fino al nero, supera la sua misura di un niente e si assesta. Quando atterra l’ultima lettera la riga cede di un pixel sotto il peso e torna dritta. Dopo qualche secondo il nome torna sottile e sparisce dalla fine, la riga si ritira, la stampa sfuma e tutto ricomincia, con la stampa ogni volta un po’ diversa e un po’ storta in un altro modo. Un clic la fa ripartire. Al posto della lettera il sigillo può stampare un’immagine.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Tutto si conta in altezze di stampa: il nome ha l’altezza delle maiuscole pari a 0,4 stampe e sta sulla stessa linea di base della stampa, la riga sta 0,2 stampe più sotto. Il nome si misura nell’SVG con getComputedTextLength, già al suo peso finale, e l’altezza delle maiuscole su una canvas (actualBoundingBoxAscent). Se in riga non ci sta, il nome va sotto la stampa, e un nome lungo può essere più piccolo senza far rimpicciolire il sigillo.
Un sigillo che scende
Visto dall’alto, un oggetto che sale diventa più grande: il sigillo è un gruppo con una sola trasformazione, scritta da una funzione dopo ogni fotogramma a partire da pochi numeri (altezza, spostamento, rotazione, schiacciamento). L’altezza diventa la scala, 1 + 0,26 per l’altezza, e un filo di spostamento verso l’alto. Le sue linee hanno vector-effect non-scaling-stroke, così restano sottili anche quando il sigillo è grande, e si disegnano con pathLength 1 e stroke-dashoffset da 1 a 0.
Il colpo
La discesa è power4.in, veloce alla fine. All’impatto, nello stesso istante, l’inchiostro si apre dal centro (un clipPath con un cerchio che cresce in expo.out), la stampa e il sigillo si allargano dell’1-2 per cento e un elastic.out li riporta, il sigillo rimbalza di un pixel, e le tacche agli angoli si spostano di due pixel verso fuori e tornano con un elastico. Poi il dondolio: tre tween sine.inOut di meno di un grado. Il distacco comincia con il sigillo che si stringe appena, il risucchio, prima di salire.
L’inchiostro appena irregolare
La stampa ha un filtro SVG: un feTurbulence lento sposta i bordi di un paio di pixel con feDisplacementMap, un feTurbulence fine passato da feColorMatrix lascia qualche puntino secco, uno largo rende qualche zona un poco più chiara, e due feComposite in li uniscono. Le frequenze sono in pixel, quindi la grana è uguale su ogni schermo; INK cambia lo spostamento e la quantità di puntini, e ogni giro ha semi nuovi, quindi ogni stampa è un poco diversa. Un’immagine caricata si ricolora sulla canvas nel colore d’accento prima di entrare nella stampa.
Il nome che prende peso
Il nome è un solo text con un tspan per lettera, in Roboto Flex, un carattere variabile con gli assi wght e wdth. Ogni tspan ha il suo font-variation-settings, scritto a ogni fotogramma: le lettere partono a peso 100 e larghezza 30, arrivano un poco oltre WEIGHT e la larghezza piena con power2.inOut, e un elastic.out le riporta al loro valore. Siccome le lettere stanno nello stesso text, si spingono da sole e il nome si allunga senza sovrapposizioni. Tutta l’entrata è una timeline sola, con le etichette start, arrive, wind, press, lift, reveal, name, rest e leave.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Heddle' | Il nome accanto al sigillo: prende peso lettera per lettera. Vuoto, resta solo il sigillo. |
IMAGE | script.js | '' | Un’immagine da far stampare al sigillo, al posto della cornice con la lettera: l’indirizzo di un file, oppure caricala dal tuo computer. Viene stampata nel colore d’accento; il nome accanto resta (svuota NAME per avere solo l’immagine). |
LETTER | script.js | '' | La lettera dentro il sigillo. Vuoto, è l’iniziale del nome. |
WEIGHT | script.js | 620 | Quanto diventa pesante il nome alla fine: 300 è leggero, 900 nerissimo. |
INK | script.js | 1 | Quanto è irregolare l’inchiostro: 0 è una stampa pulita, 2 un sigillo secco e consumato. |
PRESS | script.js | 1 | Quanto forte scende il sigillo: quanto si allarga, quanto rimbalza e quanto spinge le tacche agli angoli (0 = si posa senza colpo). |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta in mostra prima di ricominciare. |
LOOP | script.js | true | Se il logo sfuma e si stampa un sigillo nuovo. Con false il logo resta. |
Quando usarla
Per presentare un logo con un gesto preciso e un po’ artigianale: l’apertura del sito di una bottega, di un’etichetta di tessuti o di carta, di una casa editrice, di uno studio di grafica, di un ristorante o di un hotel con un marchio a sigillo, un portfolio, un caricamento, l’anteprima per un cliente, un post per i social. Sta bene dove il resto della pagina è sobrio. Funziona con un nome scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: sullo schermo stretto il nome va sotto la stampa, centrato, con la riga sotto di lui; un nome lungo diventa più piccolo e il sigillo resta grande. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: la stampa compare in dissolvenza al suo posto, poi la riga e il nome già al loro peso. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.
Trappole
- Con le lettere del nome in tspan separati ma in un solo text, cambiare il peso di una lettera sposta le altre da sole: niente sovrapposizioni. Il conto della larghezza finale va fatto nell’SVG con getComputedTextLength, mettendo prima tutte le lettere al peso finale: la canvas non conosce font-variation-settings.
- La grana dell’inchiostro con un solo rumore fine e una soglia alta sembrava sabbia, non una stampa: ora il rumore è più grosso, la soglia è bassa (pochi puntini secchi) e uno spostamento lento dei bordi fa il resto. «Appena irregolare» vuol dire che la stampa si legge prima di tutto come un marchio pulito.
- Con il sigillo che cresce salendo, anche le sue linee diventavano più spesse: vector-effect non-scaling-stroke le tiene sottili a ogni altezza.
- Sul telefono, con un nome lungo sotto la stampa, la larghezza del nome faceva rimpicciolire anche il sigillo fino a un francobollo: ora il nome può essere più piccolo di 0,4 stampe e il sigillo resta grande.
- L’asse wdth di Roboto Flex conta poco ai pesi bassi: a peso 100 la larghezza 30 stringe il nome solo di un quinto. La crescita del peso si vede bene solo se le lettere diventano visibili subito (0,08 s) e il peso sale lento: con una dissolvenza più lunga sembrava solo un nome grigio che diventa nero.
Librerie
GSAP 3.15.0, Roboto Flex (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 9,4 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.
