Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo di un tratto solo
Un’intro di logo in stile minimal: una linea sottile, guidata da un pennino quadrato blu, ripassa il contorno di tutte le lettere senza mai staccarsi, poi si ingrossa verso l’interno finché le lettere sono piene; il pennino diventa il punto finale, fa una giravolta in aria e cade al suo posto con due rimbalzi. 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 one-stroke logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/syne@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script traces the outline of the logo and draws it with a single line, without lifting the pen -->
<svg class="palco" data-stage role="img" aria-label="odalo" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- a picture logo, uncovered by the line as it thickens -->
<g data-picture></g>
<!-- one group per piece of the logo: the line that thickens inside it, and the line itself -->
<g data-pieces></g>
<!-- the lead-in and the stretches of line that join one outline to the next -->
<g data-links></g>
<!-- a thin line of colour that runs round one letter while the logo is on show -->
<path class="scia" data-glint />
<!-- the square nib at the head of the line, which ends up as the full stop -->
<g data-nib><rect class="punto" data-nib-rect /></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.
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 di un tratto solo» da Animorio e adattala al mio sitoCosa fa
Su un fondo grigio chiaro e vuoto entra da sinistra un quadratino blu che si tira dietro una linea nera sottile. Arrivato alla prima lettera del marchio inventato, odalo, comincia a girarle intorno e ne disegna il contorno, poi va dritto al buco della lettera e disegna anche quello, poi alla lettera dopo: la linea non si stacca mai, come la penna di un plotter, e il quadratino si gira seguendo la strada. Quando l’ultimo contorno si chiude, i tratti dritti che univano una lettera all’altra vengono risucchiati dentro le lettere e spariscono, e la linea comincia a ingrossarsi verso l’interno: le lettere si riempiono una dopo l’altra, da sinistra, e ognuna, appena è piena, si gonfia di un pixel e si assesta. Intanto il quadratino si è staccato dalla linea: salendo diventa grande quanto un’asta, fa una giravolta lenta in aria e, quando l’ultima lettera è piena, cade a destra del nome come punto finale. Atterra schiacciandosi, rimbalza due volte sempre più basso e un elastico lo rimette dritto; sotto il colpo le lettere si abbassano di un paio di pixel, prima la più vicina, e tornano su. Mentre il logo è in mostra una linea blu corre una volta intorno a una lettera e il punto risponde con un saltello. Poi il punto salta via, le lettere si svuotano tornando linea e la linea si srotola lettera per lettera; tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: la linea ripassa le sue parti scure o colorate e ingrossandosi scopre i colori veri dell’immagine.
Come funziona
Il contorno, preso da una canvas
Il logo si disegna grande su una canvas, con lo stesso carattere della pagina, Syne al peso 800 (o si disegna l’immagine). Ogni pixel diventa un numero da 0 a 1 e l’algoritmo dei marching squares segue la linea dove il numero passa da sotto a sopra la metà: escono contorni chiusi, morbidi perché il passaggio si calcola dentro il pixel. Ramer-Douglas-Peucker toglie i punti inutili; un contorno dentro un altro è un buco. Tutto si misura in altezze di lettera e il palco è un SVG col viewBox grande quanto la finestra, così un’unità è un pixel.
Un tratto solo
I pezzi si mettono in fila da sinistra, ogni contorno in senso orario, e ognuno comincia nel punto più vicino a dove la penna ha finito il precedente: così i tratti dritti che li uniscono restano corti. Lead-in, contorni e tratti di unione formano un’unica strada, con un peso per ogni pezzo (i tratti dritti vanno più veloci); un solo numero, da 0 a 1, dice dov’è la penna, e ogni path mostra il suo pezzo con un trattino solo (stroke-dasharray e stroke-dashoffset, con pathLength uguale alla lunghezza misurata). Il pennino quadrato si gira con la tangente, modulo 90 gradi: un quadrato non cambia girandolo di un quarto.
La linea che si ingrossa
Ogni contorno c’è due volte: la linea vera e una copia ritagliata con un clipPath che è il pezzo stesso (contorno più buchi, clip-rule evenodd). Della copia si vede solo la metà interna del tratto: allargandola fino al doppio del punto più profondo del pezzo, misurato sulla canvas con una camminata dal bordo, le lettere si riempiono dai bordi verso il centro. Intanto la linea vera si assottiglia fino a zero, e il bordo che resta è esattamente il contorno. Un’immagine invece si vede attraverso una maschera fatta della stessa linea bianca che si ingrossa.
Il punto che cade
Il punto è il pennino stesso: un gruppo con posizione, giro, grandezza e schiacciamento scritti a mano nel transform dopo ogni fotogramma. Lo schiacciamento ha il perno sul fondo, così il quadrato atterrando si allarga senza staccarsi dalla riga di base. Sale con power3.out, scende con power3.in e atterra proprio quando l’ultima lettera è piena; due rimbalzi (alti quanto BOUNCE), poi elastic.out. Le lettere sentono il colpo: ognuna scende di un paio di pixel con un ritardo che cresce con la distanza dal punto e torna su con un elastico.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, reveal, land, rest e leave, e timeScale per la velocità; una sola funzione scrive il palco dopo ogni fotogramma, e scrive un attributo solo se è cambiato. Se IMAGE ha un indirizzo, la canvas ripassa le parti scure o colorate dell’immagine (lo sfondo chiaro o trasparente resta fondo) e il punto cade in basso a destra. Nel Playground accanto al campo c’è il tasto per caricare un file, che entra nel codice come indirizzo data:.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'odalo' | Il logo scritto: la linea ripassa il contorno delle sue lettere. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola e la linea ne ripassa le parti scure o colorate. |
DRAW | script.js | 4 | Quanti secondi impiega la linea a ripassare tutto il logo. |
LINE | script.js | 1 | Lo spessore della linea: 1 è un filo, 2 il doppio. |
FILL | script.js | true | Se la linea si ingrossa fino a riempire le lettere. Con false il logo resta disegnato a filo. |
BOUNCE | script.js | 1 | Quanto rimbalza il punto quando cade al suo posto (0 = atterra secco). |
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 srotolarsi. |
LOOP | script.js | true | Se il logo si srotola e la linea lo ridisegna. Con false resta, e ogni tanto una linea blu gira intorno a una lettera. |
Quando usarla
Per presentare un logo con un gesto preciso, da disegno tecnico: l’apertura del sito di uno studio di grafica o di architettura, di un marchio di design o di tecnologia, di un portfolio, l’anteprima per un cliente, un caricamento, 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 logo è largo quasi quanto lo schermo, la linea resta sottile e il punto cade come sul computer. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il logo pieno compare in dissolvenza, poi il punto. Se l’animazione ricomincia, il logo se ne va in dissolvenza.
Trappole
- Un trattino lungo zero con le punte arrotondate disegna comunque un puntino: ogni pezzo di linea ancora vuoto o già cancellato si nasconde del tutto, invece di restare con un trattino di lunghezza zero.
- La linea ingrossata senza ritaglio usciva dalle lettere e le gonfiava: la copia che si ingrossa è ritagliata dal pezzo stesso, e la linea vera, che fa da bordo, si assottiglia fino a zero, così alla fine il bordo è esattamente il contorno.
- Con lo stesso spessore finale per tutto il logo, le lettere sottili si riempivano subito e restavano ferme: ogni pezzo ha il suo, misurato sulla canvas col punto più profondo dentro il pezzo.
- Col volo di durata fissa il punto atterrava quando le ultime lettere erano ancora a filo, e il colpo si perdeva: ora il volo dura quanto il riempimento, che dipende da quanti pezzi ha il logo, e il punto tocca terra proprio quando l’ultima lettera è piena.
Librerie
GSAP 3.15.0, Syne (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 13 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 14 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.
