Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo tratteggiato dal plotter
Un’intro di logo in stile minimal: la penna di un plotter tratteggia le lettere a 45 gradi, una riga dopo l’altra, avanti e indietro; poi cambia colore girandosi in aria e passa un tratteggio incrociato arancione. Alla fine si alza e batte un colpo sul logo: le righe si gonfiano dal punto colpito finché le lettere si chiudono piene, abbassandosi sotto il colpo. 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 plotter-hatched logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/anybody@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures the logo and a plotter pen hatches it, line after line -->
<svg class="palco" data-stage role="img" aria-label="Tamber" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the logo in the second pen's colour, seen only through the lines of the cross hatching -->
<g data-accent></g>
<!-- the logo in ink, seen only through the lines of the first hatching -->
<g data-ink></g>
<!-- the two hairline rails of the plotter, crossing where the pen is -->
<line class="guida" data-rail-x />
<line class="guida" data-rail-y />
<!-- the pen: a small triangle whose tip is the point that draws -->
<g data-pen><polygon class="penna" data-pen-body /></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 tratteggiato dal plotter» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo e vuoto due linee sottilissime si allungano dai lati e si incrociano: sono le guide di un plotter, e nel punto dove si incrociano cade dall’alto una piccola penna triangolare, che atterra sulla punta schiacciandosi, mentre le guide tremano un attimo. Poi la penna comincia a tratteggiare il marchio inventato, Tamber: righe diagonali a 45 gradi, una dopo l’altra, avanti e indietro come fa un plotter vero, da sinistra a destra; l’inchiostro resta solo dove ci sono le lettere, e le guide la seguono. Finita la prima passata la penna si alza, si gira su sé stessa e, quando torna di fronte, è arancione: scende all’altro capo del logo e passa il secondo tratteggio, con le righe inclinate al contrario, da destra a sinistra, così le lettere diventano una trama incrociata nera e arancione. Allora la penna sale sopra il logo, prende la rincorsa e batte un colpo nel mezzo: dal punto colpito le righe nere si gonfiano, prima le vicine e poi le lontane, finché si toccano e le lettere si chiudono piene, coprendo l’arancione. Ogni lettera, quando arriva il colpo, si abbassa di un paio di pixel, si allarga un poco (gli assi wdth e wght del carattere crescono) e torna al suo posto con un elastico. La penna rimbalza e vola via con le guide; resta solo il logo. Poi le lettere si riaprono in tratteggio, le righe si cancellano e tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: la penna tratteggia le sue parti scure o colorate, nei colori veri dell’immagine.
Come funziona
Il logo misurato su una canvas
Il logo si disegna su una canvas nascosta, con lo stesso carattere della pagina, Anybody al peso 850 (o si disegna l’immagine): ogni pixel diventa un numero da 0 a 1, e la penna tratteggia solo dove il numero supera la metà. La canvas dà anche dove comincia ogni lettera, così la pagina mette le stesse lettere in SVG, una per una, nello stesso posto. Il palco è un SVG col viewBox grande quanto la finestra, quindi un’unità è un pixel, e tutto si misura in altezze di lettera.
Le righe del tratteggio
Le righe sono parallele all’angolo scelto, distanti un passo (l’altezza della lettera divisa per LINES). Per ognuna si cammina lungo la riga e si guarda sulla canvas in una fascia larga un passo: la riga comincia al primo pixel del logo e finisce all’ultimo, con un po’ di margine. Una riga sì e una no è girata al contrario, così la penna va avanti e indietro; righe e brevi salti in mezzo formano una strada sola, e un numero da 0 a 1 dice dov’è la penna (i salti valgono meno, quindi si fanno più veloci).
L’inchiostro solo nelle lettere
Le righe non sono l’inchiostro: sono una maschera SVG bianca. Sotto c’è il logo intero, nero, e si vede solo attraverso le righe; così l’inchiostro resta dentro le lettere e i bordi sono netti anche se la riga va oltre. Il tratteggio incrociato è un secondo logo, arancione, sotto il primo, con la sua maschera di righe inclinate al contrario. Ogni riga si disegna con un trattino solo (stroke-dasharray e stroke-dashoffset), che si allunga dietro la penna.
Il colpo che chiude le lettere
La penna sale con power2.out e scende con power3.in sul punto del logo più vicino al centro. Da lì le righe nere si ingrossano fino a più di un passo, con un ritardo che cresce con la distanza: si toccano e coprono l’arancione. Solo le nere: ingrossando anche le arancioni, fra una riga e l’altra si vedevano macchie di colore. Quando sono tutte piene la maschera si toglie. Ogni lettera si abbassa e si allarga un attimo, anche negli assi wdth e wght scritti in font-variation-settings, e torna con elastic.out.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, reveal, strike, rest e leave, e timeScale per la velocità; una sola funzione scrive il palco dopo ogni fotogramma, e scrive un attributo solo se è cambiato. La penna è un gruppo con posizione, sollevamento e schiacciamento scritti a mano, col perno sulla punta; il cambio di colore avviene quando, girandosi, è di taglio. Se IMAGE ha un indirizzo, l’immagine si ritaglia dal suo fondo chiaro e se ne fa una copia arancione, una per penna. Nel Playground accanto al campo c’è il tasto per caricare un file.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Tamber' | Il logo scritto: la penna ne tratteggia le 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 penna ne tratteggia le parti scure o colorate. |
LINES | script.js | 11 | Quante righe del tratteggio stanno nell’altezza di una lettera: più sono, più il tratteggio è fitto. |
ANGLE | script.js | 45 | L’inclinazione del primo tratteggio, in gradi; quello incrociato è il suo specchio. |
CROSS | script.js | true | Se la seconda penna, arancione, passa il tratteggio incrociato. Con false il colpo arriva subito dopo la prima passata. |
NIB | script.js | 1 | Lo spessore della riga della penna: 1 è una penna fine, 2 il doppio. |
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 riaprirsi in righe. |
LOOP | script.js | true | Se il logo si riapre in righe, le righe si cancellano e la penna lo tratteggia di nuovo. Con false resta pieno. |
Quando usarla
Per presentare un logo con un gesto da tipografia e da disegno tecnico: l’apertura del sito di uno studio di grafica, di una stamperia o di un laboratorio di serigrafia, 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, le righe restano fitte rispetto alle lettere e la penna batte il suo colpo come sul computer. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il logo pieno compare in dissolvenza, senza penna né guide. Se l’animazione ricomincia, il logo se ne va in dissolvenza.
Trappole
- Ingrossando insieme le righe nere e quelle arancioni, fra una riga e l’altra restavano macchie arancioni e il colpo sembrava sporco: si ingrossano solo le nere, che bastano a riempire le lettere e coprono l’arancione.
- Con un nome lungo le righe da tratteggiare sono più del doppio e l’entrata superava i nove secondi: la durata di ogni passata cresce col numero di righe ma ha un tetto, e con tante righe la penna corre di più.
- Saltando nella timeline (un ridimensionamento, il video dell’anteprima) la penna, che durante il tratteggio segue la strada, ripartiva dal punto sbagliato verso il secondo tratteggio: alla fine di ogni passata la sua posizione è scritta nella timeline con un set.
- Un’immagine presa da un altro sito senza permesso non si legge dalla canvas: in quel caso la penna tratteggia un rettangolo grande quanto l’immagine, invece di fermarsi con un errore.
Librerie
GSAP 3.15.0, Anybody (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 11 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 15 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.
