Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo fra le forme Bauhaus
L’intro di un logo alla maniera dei manifesti svizzeri e del Bauhaus: un cerchio rotola, un quadrato cade e rimbalza, un triangolo inciampa e si ribalta; dove le forme si tagliano nascono le lettere, che poi escono dalle forme come da finestre. Tutto a colori pieni su carta avorio. 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 Bauhaus shapes logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the sheet: the script measures it, sets the grid and builds the shapes, the letters and their windows -->
<svg class="palco" data-stage role="img" aria-label="tessel" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the asymmetric grid, hairlines that come and go -->
<g data-grid></g>
<!-- crop marks at the corners of the layout -->
<g data-marks></g>
<!-- the black bar: the floor the shapes land on -->
<rect class="nero" data-bar />
<!-- the shapes, where they cut each other, and the letters through them -->
<g data-forms>
<g data-shapes></g>
<g data-cuts></g>
</g>
<g data-letters></g>
<!-- the colophon -->
<g class="colophon" data-colophon></g>
<!-- motion notation: impact ticks and the arc of the flip -->
<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="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 fra le forme Bauhaus» da Animorio e adattala al mio sitoCosa fa
Su un foglio color avorio si tracciano le righe sottili di una griglia asimmetrica e i quattro segni di taglio agli angoli dell’impaginazione; da fuori dello schermo, a sinistra, entra di scatto una barra nera: è il pavimento. Dall’alto cade un quadrato rosso, si schiaccia sulla barra (che si piega appena), fa un saltello, si schiaccia ancora e si assesta con un elastico, mentre due coppie di trattini neri segnano l’urto come in un diagramma. Da sinistra rotola un cerchio blu con un quarto nero, che fa vedere il rotolamento: urta il quadrato, si schiaccia contro di lui e rimbalza indietro, e il quadrato si impenna sullo spigolo e ricade. Da destra scivola un triangolo giallo, sbatte contro il quadrato (che si impenna dall’altra parte), si tira indietro e salta ribaltandosi: un arco sottile disegna la sua traiettoria e si cancella, e il triangolo atterra a punta in giù, incastrato nel quadrato, e oscilla sulla punta. Il cerchio salta su e si incastra anche lui. Dove due forme si sovrappongono la carta diventa nera, e lì dentro compaiono i primi pezzi delle lettere di un marchio inventato, tessel. Poi le forme si aprono come finestre, ognuna nella sua sagoma: prima si riempiono di lettere (color carta sul rosso e sul blu, nere sul giallo), poi le lasciano uscire, nere sulla carta. Le lettere fanno un saltello una dopo l’altra e si assestano, accanto alla barra salgono tre righe di colophon e la griglia si ritira. Il logo resta composto e le forme continuano a giocare: il cerchio gira di un quarto, il triangolo oscilla, il quadrato saltella, e i tagli delle lettere si spostano con loro. Dopo qualche secondo le finestre si chiudono, il triangolo vola via ribaltandosi, il cerchio cade e rotola fuori, la barra si ritira e il quadrato precipita; poi tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: compare prima nei tagli, poi le stesse finestre la rivelano tutta.
Come funziona
Una sola misura
Il palco è un SVG con il viewBox grande quanto la finestra, così un’unità è un pixel. Le lettere si misurano su una canvas con lo stesso carattere (measureText, actualBoundingBoxAscent per l’altezza vera) e tutto si conta in altezze di lettera: il cerchio ha il raggio di 1,15 lettere, il quadrato il lato di 2,2, il triangolo di 2,4, e ognuno ha il suo posto fisso sulla griglia. La parola si centra sul gruppo delle forme; la grandezza si sceglie perché ci stiano le forme, la parola e il colophon, accanto alla barra su uno schermo largo, sotto la barra su uno schermo alto.
Una forma, molte copie
Ogni forma è un solo path nei defs, con la sua posa (centro, rotazione, schiacciamento e inclinazione intorno al punto su cui poggia) scritta come attributo transform a ogni fotogramma, da un ticker di GSAP che legge oggetti semplici. Lo stesso path si usa con use molte volte: a colori, dentro una clipPath, dentro le maschere come finestra e come taglio. Il cerchio rotola perché la sua rotazione si calcola dallo spostamento diviso per il raggio; il triangolo si ribalta con un arco in due mezzi tween e un mezzo giro.
I tagli
Il taglio fra due forme è la seconda forma, nera, dentro la clipPath della prima: così l’intersezione è sempre esatta, anche mentre le forme si muovono. Le lettere stanno una volta sola nei defs e si usano più volte: color carta dentro due clipPath annidate (i tagli, dove compaiono per prime), nel colore giusto dentro ogni forma, nere fuori. Le lettere nere si disegnano per prime e le forme nere per ultime: il bordo sfumato di un colore non resta mai come una riga sottile sotto l’altro.
Le finestre
La maschera delle finestre contiene le stesse forme, ingrandite intorno al loro centro con un secondo transform: con apertura 0 non si vede niente, con 1 la finestra coincide con la forma (le lettere la riempiono, con un back.out che passa un po’ il bordo), poi si allarga fino a coprire la parola (ogni forma sa di quanto, dalla distanza degli angoli della parola: per il triangolo si divide per il raggio del cerchio inscritto). Le lettere nere usano una seconda maschera, le finestre meno le forme in nero.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, arrive, interlock, reveal, compose, rest e leave e timeScale per la velocità; la manopola dell’elasticità cambia gli elastic.out, i back.out, gli schiacciamenti e i salti. Nel riposo le forme fanno a turno un piccolo gioco ogni secondo e mezzo. Se IMAGE ha un indirizzo, la parola diventa quell’immagine: nasce nei tagli e le finestre la rivelano come la parola. 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 | 'tessel' | Il logo scritto: nasce nei tagli fra le forme ed esce dalle loro finestre. In minuscolo sta bene, come nella grafica del Bauhaus. |
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 le stesse finestre la rivelano. |
SHAPES | script.js | 3 | Quante forme: 1 solo il quadrato, 2 cerchio e quadrato, 3 cerchio, quadrato e triangolo. |
BOUNCE | script.js | 1 | Quanto è elastico tutto: gli schiacciamenti, i salti e gli assestamenti (0 = netto e secco, 2 = molto elastico). |
COLORS | script.js | ['blue', 'red', 'yellow'] | I colori del cerchio, del quadrato e del triangolo, scelti fra red, blue, yellow e black. Le lettere sopra una forma gialla sono nere, sulle altre color carta. |
ROTATE | script.js | 1 | Quanto girano le forme: il rotolamento del cerchio, i mezzi giri del triangolo (da 2 in su ne fa tre), i giochi nel riposo. Con 0 il cerchio scivola senza girare e il triangolo arriva già a punta in giù. |
SPEED | script.js | 1 | La velocità di tutta l’animazione: 2 è il doppio, 0.5 la metà. |
REST | script.js | 5 | Quanti secondi il logo resta composto prima che le forme se ne vadano. |
LOOP | script.js | true | Se l’impaginazione si smonta e si ricompone. Con false il logo resta, con le forme che continuano a giocare. |
Quando usarla
Per presentare un logo con il rigore e l’allegria della grafica moderna: l’apertura del sito di uno studio di design, di un’architettura, di una scuola d’arte, di un museo o di un marchio di oggetti, l’anteprima per 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: le forme e la parola prendono quasi tutta la larghezza dello schermo e il colophon va sotto la barra, allineato alla colonna del quadrato. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: compaiono in dissolvenza la barra e i segni di taglio, poi le forme già incastrate, poi le lettere e il colophon. Se l’animazione ricomincia, tutto se ne va in dissolvenza.
Trappole
- Le lettere color carta nei tagli, disegnate sopra le lettere nere sul giallo, lasciavano una riga scura sottile lungo il lato del triangolo (il bordo sfumato della clipPath): le lettere nere si disegnano per prime, così quelle chiare le coprono del tutto.
- Lo stesso succedeva fra le forme: il rosso del quadrato restava come un filo lungo il bordo, sotto il quarto nero del cerchio. Il quarto si disegna sopra tutte le forme e le forme nere per ultime: dove si sovrappongono è nero comunque.
- Con un cerchio giallo le lettere sopra sono nere, e sul suo quarto nero sparivano: il quarto ha la sua clipPath e lì le lettere cambiano colore.
- In dissolvenza, con il movimento ridotto, forme e tagli che svanivano ognuno per conto suo facevano vedere le sovrapposizioni in trasparenza: stanno in un gruppo solo, che svanisce tutto insieme.
- Con la parola sopra le forme quasi tutta, la seconda metà delle finestre (quella che porta le lettere nere sulla carta) non si vedeva e restava un momento vuoto: le lettere si assestano appena le finestre coincidono con le forme, mentre si allargano.
Librerie
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 12 KB; le librerie: GSAP 28 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.
