Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo dal quadrato nero
Un’intro di logo in stile minimal: un quadrato nero viene tagliato in strisce da lame sottili, le strisce scorrono di lato, si allungano e dal nero si scavano le lettere del marchio mentre tornano in fila, con un assestamento elastico di un pixel; alla fine una linea sottile sottolinea il nome. 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 black-square logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/jost@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, cuts the square into strips and slides them into the logo -->
<svg class="palco" data-stage role="img" aria-label="scindo" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the hairline the square opens from -->
<rect class="pieno" data-seed />
<!-- the square, then the strips, then the logo: one group per strip, each with its own clip -->
<g data-square>
<g data-bands></g>
</g>
<!-- the blades that cut the square -->
<g data-blades></g>
<!-- the thin line under the name -->
<rect class="riga" data-underline />
</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 quadrato nero» da Animorio e adattala al mio sitoCosa fa
Su un fondo bianco caldo, vuoto, una riga nera sottile si disegna dal centro verso i lati e si apre in un quadrato nero, che arriva un filo più alto del dovuto e si assesta con un piccolo elastico. Il quadrato prende fiato stringendosi appena, poi lame rosse sottilissime lo attraversano una dopo l’altra, dall’alto in basso: ogni taglio apre una fessura di pochi pixel e trascina per un attimo le strisce lungo la lama. Le strisce scorrono di lato, una a destra e una a sinistra, più lontano quelle ai bordi, e si allungano in barre larghe quanto il nome. Poi dal nero si scavano le lettere del marchio inventato, scindo: le barre si svuotano dove non c’è inchiostro mentre tornano in fila, superano il loro posto di un pixel e un elastico le riporta indietro. Le fessure si chiudono con uno scatto, il logo è intero e una linea rossa sottile lo sottolinea da sinistra a destra, va un poco oltre la fine e torna indietro; un piccolo fremito risale le strisce. Mentre il logo è in mostra, una lama lo attraversa e le due metà scivolano di un pixel, poi si rimettono a posto. Dopo qualche secondo la linea si ritira, le fessure si riaprono e le strisce escono ai lati; tutto ricomincia. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: viene tagliata nelle stesse strisce e scoperta dal nero che scivola via.
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, Jost (measureText, actualBoundingBoxAscent per l’altezza vera, actualBoundingBoxLeft e Right per dove inizia e finisce l’inchiostro), e tutto si conta in altezze di lettera: il quadrato è alto quanto il logo, le barre larghe quanto l’inchiostro più un filo, lo scorrimento laterale mezzo quadrato. La grandezza si sceglie perché le barre spostate ci stiano anche sul telefono.
Le strisce
Ogni striscia è un gruppo con dentro un clipPath tutto suo: un rettangolo che all’inizio è largo quanto il quadrato e poi si allarga fino al nome. I bordi delle strisce cadono su pixel interi e ogni clip entra di un pixel nella striscia sotto: è lo stesso disegno due volte, quindi quando le strisce si toccano non resta nessuna riga chiara fra l’una e l’altra. Posizione, fessure e trascinamento di tutte le strisce li scrive una sola funzione dopo ogni fotogramma, partendo da due numeri per taglio: quanto è aperto e quanto tira.
Le lettere scavate nel nero
Le barre nere sono le lettere stesse disegnate con un contorno enorme, dello stesso colore, che riempie tutto; il contorno si stringe fino a zero e le lettere escono dal nero. Per sapere quanto deve essere grosso all’inizio, il logo si disegna piccolo su una canvas e si misura, con una camminata che parte dall’inchiostro, il punto di ogni striscia più lontano dalle lettere: così lo scambio fra il rettangolo pieno e le lettere non si vede e tutte le strisce cominciano a scavarsi nello stesso istante. Il contorno scende con expo.out, veloce all’inizio e lento sui dettagli.
Il pixel di troppo
Le strisce tornano in fila con power3.inOut verso un punto che sta un pixel oltre il loro posto (SETTLE), poi un elastic.out(1, 0.3) le riporta a zero: un movimento quasi invisibile che però fa sembrare il logo fatto di pezzi veri che si incastrano. Lo stesso per le fessure, che si chiudono passando di un pixel lo zero, per il quadrato che si apre e per la linea sotto il nome, che va un poco oltre la fine e torna con l’elastico.
La regia e il tuo logo
Tutta l’entrata è una timeline sola, con le etichette start, square, cut, shear, carve, lock, line, rest e leave, e timeScale per la velocità. Le lame sono rettangoli rossi alti un pixel e mezzo che si allungano e poi ritirano la coda. Se IMAGE ha un indirizzo, al posto delle lettere c’è l’immagine, tagliata nelle stesse strisce, e il nero non si scava ma scivola via dal lato da cui la striscia è tornata. 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 | 'scindo' | Il logo scritto: le strisce si scavano nelle 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. |
STRIPS | script.js | 7 | In quante strisce le lame tagliano il quadrato. |
SHEAR | script.js | 1 | Quanto le strisce scorrono di lato, in larghezze di quadrato (0 = restano in fila). |
SETTLE | script.js | 1 | Di quanti pixel le strisce superano il loro posto prima che l’elastico le riporti indietro (0 = si fermano secche). |
UNDERLINE | script.js | true | La linea rossa sottile che alla fine sottolinea il nome. |
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 che le strisce escano. |
LOOP | script.js | true | Se le strisce escono e si taglia un quadrato nuovo. Con false il logo resta, e ogni tanto una lama lo attraversa. |
Quando usarla
Per presentare un logo con un gesto pulito e preciso: l’apertura del sito di uno studio di architettura o di grafica, di un marchio di moda o di design, 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 è più piccolo, così le barre spostate di lato ci stanno ancora nello schermo. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il quadrato nero compare in dissolvenza, poi sfuma nel logo e la linea compare sotto il nome. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.
Trappole
- Strisce tagliate con un clip che si toccano esattamente lasciano una riga chiara sottile fra l’una e l’altra (l’antialiasing dei due bordi): i bordi cadono su pixel interi e ogni clip entra di un pixel nella striscia sotto, che mostra lo stesso disegno.
- Con un solo spessore di contorno per tutto il logo, le strisce in alto, dove c’è poco inchiostro, restavano piene finché le altre erano già lettere: ogni striscia ha il suo spessore, misurato sulla canvas, e il contorno scende con expo.out, altrimenti per mezzo secondo non succede niente e poi tutto insieme.
- Barre larghe quanto il nome con un margine generoso cominciavano a scavarsi dalle punte, con un buco strano alla fine: ora finiscono appena oltre l’inchiostro vero (actualBoundingBoxLeft e Right).
- Un nome cortissimo come una sola lettera è più stretto del quadrato: le barre allora si restringono invece di allargarsi, e il rettangolo nero sotto le lettere copre comunque il quadrato intero finché non comincia lo scavo.
Librerie
GSAP 3.15.0, Jost (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 8,2 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.
