Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dal progetto tecnico
L’intro di un logo come un disegno tecnico: su una cianografia con la griglia si tracciano gli assi e le linee di costruzione, un compasso disegna i cerchi, compaiono le quote con le frecce, il contorno delle lettere si costruisce punto per punto e poi si riempie di colore con un tratteggio che si stringe; alla fine un timbro di approvazione e il cartiglio. 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 blueprint logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/barlow@5.3.0/700.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource/ibm-plex-mono@5.3.0/500.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it and draws the sheet, the construction, the logo, the stamp and the title block -->
<svg class="palco" data-stage role="img" aria-label="Arcwell" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the fine grid: one square, repeated -->
<pattern id="grid-fine" patternUnits="userSpaceOnUse" data-grid-pattern>
<path class="griglia-fine" data-grid-cell />
</pattern>
<!-- the hatching that fills the logo: one bar, repeated and turned; the script widens it until it is solid -->
<pattern id="hatch-ink" patternUnits="userSpaceOnUse" data-hatch-ink>
<rect data-hatch-ink-bar />
</pattern>
<pattern id="hatch-white" patternUnits="userSpaceOnUse" data-hatch-white>
<rect fill="#fff" data-hatch-white-bar />
</pattern>
<!-- the shape of the logo: the letters (or the frame of the picture) -->
<clipPath id="logo-clip" data-logo-clip></clipPath>
<!-- the front of the filling, which runs across the logo on a slant -->
<mask id="wipe" maskUnits="userSpaceOnUse" data-wipe-mask>
<path fill="#fff" data-wipe />
</mask>
<!-- a picture shows through the same hatching -->
<mask id="picture-mask" maskUnits="userSpaceOnUse" data-picture-mask>
<g mask="url(#wipe)">
<rect fill="url(#hatch-white)" data-pm-hatch />
<rect fill="#fff" data-pm-solid />
</g>
</mask>
<!-- the approval stamp: patchy ink and rough edges -->
<filter id="stamp-noise" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-stamp-noise>
<feTurbulence type="fractalNoise" numOctaves="3" data-stamp-turb />
<feColorMatrix type="matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 -3.2 0 0 2.6" />
</filter>
<mask id="stamp-mask" maskUnits="userSpaceOnUse" data-stamp-mask>
<rect fill="#fff" filter="url(#stamp-noise)" data-stamp-mask-rect />
</mask>
<filter id="stamp-rough" filterUnits="userSpaceOnUse" data-stamp-rough>
<feTurbulence type="fractalNoise" numOctaves="2" result="wobble" data-stamp-rough-turb />
<feDisplacementMap in="SourceGraphic" in2="wobble" xChannelSelector="R" yChannelSelector="G" data-stamp-rough-disp />
</filter>
</defs>
<g data-world>
<!-- the grid: a heavier line every five squares -->
<g data-grid>
<rect fill="url(#grid-fine)" data-grid-fine />
<g data-grid-major></g>
</g>
<!-- the border of the drawing and its centring marks -->
<g data-frame></g>
<!-- construction: guide lines, axes, circles from the compass, centre marks, their names -->
<g data-build></g>
<!-- dimensions: extension lines, dimension lines with arrows, measures -->
<g data-dims></g>
<!-- the logo: the filling under the outline, the points of the outline on top -->
<g data-logo>
<g clip-path="url(#logo-clip)">
<g mask="url(#wipe)">
<rect fill="url(#hatch-ink)" data-fill-hatch />
<rect data-fill-solid />
</g>
<path class="lucido" data-sheen />
</g>
<g mask="url(#picture-mask)" data-picture></g>
<g data-outline></g>
<g data-nodes></g>
</g>
<!-- the compass, drawn in lines: its shadow, the two legs, the hinge and the grip -->
<g class="compasso" data-compass>
<path class="compasso-ombra" data-compass-shadow />
<path class="compasso-gamba" data-compass-legs />
<path class="compasso-punta" data-compass-tips />
<path class="compasso-impugnatura" data-compass-grip />
<path class="compasso-righe" data-compass-knurl />
<circle class="compasso-cerniera" data-compass-hinge />
</g>
<!-- the approval stamp -->
<g data-stamp-place>
<g data-stamp></g>
</g>
<!-- the title block, bottom right -->
<g data-title></g>
<g data-fx></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="https://cdn.jsdelivr.net/npm/opentype.js@1.3.4/dist/opentype.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.
19 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 progetto tecnico» da Animorio e adattala al mio sitoCosa fa
Su un foglio blu da cianografia la griglia sottile si accende dal centro, le righe più grosse una ogni cinque quadretti, e la cornice del disegno si traccia tutt’intorno con le sue tacche di centratura. Dal centro corrono le linee di costruzione: la linea di base, l’altezza delle maiuscole, quella delle minuscole, i confini di ogni lettera e gli assi a tratto e punto, ognuna col suo nome e la sua misura in millimetri. Entra un compasso disegnato a linee, oscilla, pianta l’ago con un piccolo assestamento e fa un giro intero: la mina traccia il cerchio su cui è costruita una parte tonda del logo di un marchio inventato, Arcwell; poi si alza, si sposta e ne traccia un altro, e lascia un segno di centro. Intanto compaiono le quote: le linee di richiamo, la linea di misura che si apre dal centro, le frecce che saltano fuori e i numeri che contano fino alla misura vera, più un raggio con la sua linea di riferimento. Il contorno di ogni lettera si disegna a velocità costante, lettera dopo lettera, coi quadratini dei punti e le maniglie delle curve che spuntano quando la linea ci passa. Il contorno si chiude con un lampo della linea e un leggero rimbalzo, i punti si spengono uno dopo l’altro e le linee di costruzione svaniscono; il logo si riempie da sinistra con un tratteggio a 45 gradi che scorre, si stringe e si ingrossa finché diventa colore pieno, poi si assesta. Scende un timbro rosso «APPROVED, FOR PRODUCTION», grande e girato, che colpisce il foglio, si schiaccia e fa tremare il disegno; il cartiglio in basso a destra si traccia e si scrive cella per cella, col nome del progetto, la scala, le unità, la revisione e la data. Il disegno resta in mostra con un riflesso che ogni tanto passa sul logo, poi si cancella e ricomincia.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel e le quote possono dire la misura vera (pixel per 25,4/96 dà i millimetri). Tutto si conta in altezze di maiuscola: la grandezza si sceglie perché ci stiano le quote ai lati, il timbro sotto e il cartiglio nell’angolo in basso a destra; su uno schermo alto il logo prende quasi tutta la larghezza.
I contorni veri delle lettere
opentype.js legge il file del carattere (Barlow in WOFF) e dà, lettera per lettera, i comandi del contorno: ogni contorno (il fuori e i buchi) diventa un path a sé, con la sua lunghezza da getTotalLength per stroke-dasharray e stroke-dashoffset. Dagli stessi comandi vengono i punti sulla curva (i quadratini) e i punti di controllo (le maniglie). Un buco è un contorno chiuso dentro un altro: lì il compasso traccia il suo cerchio. Se una lettera manca nel file, il logo si scrive come testo con il bordo, senza punti.
Il compasso
Il compasso non è un disegno fermo: a ogni fotogramma si ricalcolano le due gambe affusolate dall’ago al perno e dal perno alla mina, l’impugnatura zigrinata e la sua ombra. Il perno sta sopra il punto medio fra ago e mina, alzato quanto serve perché le gambe restino lunghe uguali; GSAP muove solo i numeri (centro, raggio, angolo, sollevamento, pressione) e il cerchio si disegna con lo stesso ease dell’angolo, così la mina e la linea vanno insieme.
Le quote
Ogni quota ha le linee di richiamo, la linea di misura che si allarga dal centro animando gli attributi x1 e x2, due frecce che saltano fuori con back.out attorno alla loro punta (svgOrigin) e un numero che conta fino alla misura in millimetri. Le linee di costruzione crescono allo stesso modo, dal centro verso i lati.
Il tratteggio che diventa pieno
Il riempimento è un rettangolo con un pattern: una barra ripetuta e girata di 45 gradi. GSAP ne cambia il passo (si stringe), lo spostamento (scorre) e lo spessore della barra finché è largo quanto il passo e il tratteggio diventa pieno; il rettangolo è ritagliato dalle lettere (clipPath con un path per lettera, così i buchi restano vuoti) e scoperto da una maschera col fronte obliquo. Un’immagine usa lo stesso pattern bianco come maschera.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Arcwell' | Il logo scritto: le sue lettere si disegnano contorno per contorno, ed è il nome del progetto nel cartiglio. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola: le linee di costruzione la inquadrano e il tratteggio la scopre. |
PAPER | script.js | 'blueprint' | Il foglio: 'blueprint' (linee bianche sul blu della cianografia) oppure 'white' (linee blu su carta bianca). |
INK | script.js | '#ffc93c' | Il colore con cui si riempie il logo. |
GRID | script.js | 24 | Il lato di un quadretto della griglia, in pixel (0 = niente griglia); una riga più grossa ogni cinque. |
DETAIL | script.js | 1 | Quanta costruzione: linee guida, cerchi del compasso, punti, maniglie e quote. 0 = l’essenziale, 2 = un foglio pieno. |
SPEED | script.js | 1 | 2 = due volte più veloce, 0.5 = metà velocità. |
REST | script.js | 4 | Quanti secondi il disegno finito resta in mostra prima di ricominciare. |
LOOP | script.js | true | Cancella il foglio e ridisegna tutto da capo. |
Quando usarla
Per presentare un logo con l’aria di un progetto fatto con cura: l’apertura del sito di uno studio di architettura o di ingegneria, di uno studio di design o di un marchio di prodotti tecnici, la presentazione di un logo nuovo a un cliente, un caricamento, un post per i social. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa animazione con le misure adattate: il logo prende quasi tutta la larghezza, il timbro scende sotto il logo invece che di lato e il cartiglio resta nell’angolo in basso a destra. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il foglio con la griglia compare in dissolvenza, poi la costruzione col contorno e le quote; la costruzione svanisce e al suo posto compare il logo pieno, poi il timbro e il cartiglio. Se l’animazione ricomincia, il foglio se ne va in dissolvenza.
Trappole
- Un path con più contorni tratteggiato con stroke-dasharray non disegna i buchi insieme al fuori: ogni contorno va in un path suo, con la sua lunghezza. Per il ritaglio invece serve un path solo per lettera, altrimenti l’unione dei contorni riempie anche i buchi.
- Il file WOFF del carattere di Fontsource ha solo le lettere latine di base: con una lettera accentata come Ł manca il contorno, quindi si controlla charToGlyphIndex prima e, se manca qualcosa, il logo passa al testo con il bordo (il carattere del CSS ha anche le lettere estese).
- Con waitForFunction di Playwright la condizione deve restituire un valore semplice: restituire la timeline T (un oggetto che non si può copiare) fa scadere l’attesa anche quando T c’è già.
- Le quote e le scritte che contano o si battono usano onUpdate: con T.seek(t) i richiami sono soppressi, quindi per guardare un istante preciso serve T.seek(t, false).
- Il richiamo del raggio puntava verso sinistra e si sovrapponeva ai nomi delle linee guida sul telefono: ora sale a destra fino a una mensola fra le lettere e la quota della larghezza, e svanisce col cerchio a cui si riferisce.
Librerie
GSAP 3.15.0, opentype.js 1.3.4, Barlow (Fontsource) 5.3.0, IBM Plex Mono (Fontsource) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 KB; le librerie: GSAP 28 KB, opentype.js 48 KB.
Collaudo
Provata il 10 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.
