Il logo morso dal dinosauro
Intro, SVG, Testo
NuovaGratis
Torna alla libreria
Il logo colpito dal fulmine
L’anteprima di un logo in tre atti: le lettere arrivano portate dal vento, poi una nuvola temporalesca con la faccia si mette sopra, si scurisce, piove e tuona, e un fulmine a zigzag carbonizza una lettera che fuma; un secondo fulmine ne fa saltare un’altra, che ricade storta. Poi esce un piccolo sole e asciuga tutto. 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 lightning-struck logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/big-shoulders-display@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script measures it, writes the logo in it and moves the cloud and the sun -->
<svg class="palco" data-stage role="img" aria-label="Stormline" xmlns="http://www.w3.org/2000/svg">
<defs>
<!-- the cloud is a heap of puffs: drawn three times (outline, body, dark body), so the outline is only outside -->
<g id="puffs" data-puffs>
<ellipse cx="0" cy="14" rx="122" ry="58" />
<circle cx="-82" cy="-8" r="50" />
<circle cx="-26" cy="-44" r="62" />
<circle cx="44" cy="-38" r="55" />
<circle cx="100" cy="-4" r="46" />
<circle cx="-126" cy="22" r="34" />
<circle cx="130" cy="24" r="32" />
<circle cx="-84" cy="54" r="30" />
<circle cx="-28" cy="60" r="32" />
<circle cx="34" cy="60" r="31" />
<circle cx="90" cy="50" r="30" />
</g>
<!-- whatever is drawn inside the cloud stays inside it -->
<mask id="in-cloud" maskUnits="userSpaceOnUse" x="-260" y="-220" width="520" height="420" style="mask-type: alpha">
<use href="#puffs" fill="#fff" />
</mask>
</defs>
<g data-world>
<!-- the sky behind everything: dark with the storm, white with a flash, warm with the sun -->
<rect class="cielo-buio" data-dark-sky />
<rect class="lampo" data-flash />
<rect class="luce-sole" data-sunlight />
<g data-wind></g>
<g data-ground>
<ellipse class="ombra-nuvola" data-cloud-shadow />
<ellipse class="pozza" data-puddle />
<ellipse class="pozza-lucido" data-puddle-shine />
</g>
<g data-ripples></g>
<g id="logo" data-logo></g>
<g data-smoke></g>
<g data-rain></g>
<g data-bolts></g>
<!-- the cloud: drawn around 0 0, the bottom of its belly is at y 92 -->
<g data-cloud-place transform="translate(-9999 -9999)">
<g data-cloud-float>
<g data-cloud-body>
<use href="#puffs" class="nuvola-bordo" />
<use href="#puffs" class="nuvola" />
<g mask="url(#in-cloud)">
<ellipse class="nuvola-pancia" cx="0" cy="98" rx="178" ry="50" />
<path class="nuvola-ricciolo" d="M-64 66Q-60 50 -44 46M0 70Q2 54 18 50M60 64Q64 50 78 46M-112 40Q-116 26 -104 16M108 42Q114 28 104 18M-62 -28Q-70 -42 -60 -54Q-50 -62 -42 -54M24 -64Q30 -80 46 -80Q60 -78 62 -66" />
<path class="nuvola-lucido" d="M-118 4Q-114 -26 -90 -38M-70 -62Q-56 -96 -18 -102M30 -84Q56 -88 76 -70" />
</g>
<!-- the angry cloud: the same puffs, darker, fading in over the light ones -->
<g class="buio" data-cloud-dark>
<use href="#puffs" class="nuvola-scura" />
<g mask="url(#in-cloud)">
<ellipse class="nuvola-pancia-scura" cx="0" cy="98" rx="178" ry="50" />
<path class="nuvola-ricciolo-scuro" d="M-64 66Q-60 50 -44 46M0 70Q2 54 18 50M60 64Q64 50 78 46M-112 40Q-116 26 -104 16M108 42Q114 28 104 18M-62 -28Q-70 -42 -60 -54Q-50 -62 -42 -54M24 -64Q30 -80 46 -80Q60 -78 62 -66" />
</g>
</g>
<!-- the face -->
<ellipse class="guancia" cx="-68" cy="24" rx="15" ry="9.5" data-cheek-l />
<ellipse class="guancia" cx="68" cy="24" rx="15" ry="9.5" data-cheek-r />
<ellipse class="occhio" cx="-36" cy="-6" rx="16" ry="19" />
<ellipse class="occhio" cx="36" cy="-6" rx="16" ry="19" />
<g data-pupils>
<circle class="iride" cx="-37" cy="-4" r="9.5" />
<circle class="pupilla" cx="-37" cy="-4" r="5" />
<circle class="riflesso" cx="-40.5" cy="-8" r="2.4" />
<circle class="iride" cx="35" cy="-4" r="9.5" />
<circle class="pupilla" cx="35" cy="-4" r="5" />
<circle class="riflesso" cx="31.5" cy="-8" r="2.4" />
</g>
<g data-lid-l>
<ellipse class="palpebra" cx="-36" cy="-6" rx="18.5" ry="21.5" />
<ellipse class="palpebra-scura buio" cx="-36" cy="-6" rx="18.5" ry="21.5" />
</g>
<g data-lid-r>
<ellipse class="palpebra" cx="36" cy="-6" rx="18.5" ry="21.5" />
<ellipse class="palpebra-scura buio" cx="36" cy="-6" rx="18.5" ry="21.5" />
</g>
<path class="sopracciglio" d="M-58 -38Q-40 -48 -18 -36" data-brow-l />
<path class="sopracciglio" d="M58 -38Q40 -48 18 -36" data-brow-r />
<path class="bocca-linea" d="M-18 42Q0 30 18 42" data-mouth-frown />
<ellipse class="bocca" cx="0" cy="40" rx="9" ry="11" data-mouth-o />
<path class="bocca" d="M-24 32Q0 60 24 32Q0 40 -24 32Z" data-mouth-grin />
<g data-sparks></g>
</g>
</g>
</g>
<!-- the little sun that dries everything: drawn around 0 0 -->
<g data-sun-place transform="translate(-9999 -9999)">
<g data-sun-body>
<g data-sun-rays></g>
<circle class="sole" cx="0" cy="0" r="50" />
<path class="sole-lucido" d="M-36 -18Q-30 -36 -12 -42" />
<ellipse class="sole-guancia" cx="-30" cy="14" rx="9" ry="5.5" />
<ellipse class="sole-guancia" cx="30" cy="14" rx="9" ry="5.5" />
<ellipse class="occhio occhio--sole" cx="-17" cy="-6" rx="9" ry="11" />
<ellipse class="occhio occhio--sole" cx="17" cy="-6" rx="9" ry="11" />
<g data-sun-pupils>
<circle class="iride iride--sole" cx="-18" cy="-4" r="6" />
<circle class="pupilla" cx="-18" cy="-4" r="3.3" />
<circle class="riflesso" cx="-20" cy="-6.6" r="1.6" />
<circle class="iride iride--sole" cx="16" cy="-4" r="6" />
<circle class="pupilla" cx="16" cy="-4" r="3.3" />
<circle class="riflesso" cx="14" cy="-6.6" r="1.6" />
</g>
<ellipse class="sole-palpebra" cx="-17" cy="-6" rx="10.5" ry="12.5" data-sun-lid-l />
<ellipse class="sole-palpebra" cx="17" cy="-6" rx="10.5" ry="12.5" data-sun-lid-r />
<path class="sole-bocca" d="M-15 14Q0 30 15 14Q0 20 -15 14Z" />
</g>
</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="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.
42 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 colpito dal fulmine» da Animorio e adattala al mio sitoCosa fa
Su una carta chiara arriva il logo di un marchio inventato, Stormline, scritto in un carattere alto, stretto e pesantissimo: una folata di vento lo porta da sinistra, con le righe del vento che si arricciano in fondo, e le lettere scivolano dentro inclinate all’indietro, si fermano piegandosi in avanti e si raddrizzano con un’oscillazione elastica. Da destra entra una nuvola grigia con la faccia, che ribolle ai bordi e ondeggia piano: si ferma sopra il logo con uno schiacciamento, sbatte gli occhi, guarda giù, aggrotta le sopracciglia e gonfia le guance. Poi si scurisce e il cielo con lei: comincia a piovere, le gocce schizzano sulle lettere e sul pavimento, dove si apre una pozzanghera con i cerchi. Due tuoni: la nuvola rimbomba a bocca aperta, il palco trema e tutto il fondo s’illumina per un attimo. La nuvola si gonfia, fra le guance crepitano scintille, e un fulmine a zigzag, disegnato in un decimo di secondo, colpisce una lettera: lampo bianco, poi la lettera è carbonizzata, nera dove è stata colpita e bruciata verso il basso, con i bordi anneriti e crepe di brace arancione che si spengono piano; saltano scintille, la lettera si schiaccia e si affloscia un poco, e sale il fumo a sbuffi. La nuvola si sposta e un fulmine più piccolo fa saltare un’altra lettera, che fa una giravolta e ricade storta su un angolo, in mezzo agli spruzzi. Contenta, la nuvola ride, sbuffa e se ne va a sinistra sgocciolando e schiarendosi. Il logo resta così: le lettere fumano, le braci si riaccendono piano, l’acqua cola giù dalle lettere nella pozzanghera. Dopo qualche secondo esce un piccolo sole sorridente, la luce diventa calda, la pozzanghera evapora, il bruciato sbiadisce, le lettere si raddrizzano con un saltello e la storia ricomincia. Un clic la fa ripartire da capo. Al posto della parola si può mettere un’immagine: pioggia, fulmini e bruciatura funzionano anche lì.
Come funziona
Il palco a 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 da lì viene una sola grandezza per tutto, dall’alto in basso: la nuvola, lo spazio in cui cade il fulmine, il logo, il pavimento. Su uno schermo alto la nuvola è più grande e più in alto, così il fulmine fa più strada.
Dove cade la pioggia
Le lettere si disegnano anche su una canvas e, colonna per colonna, si legge il primo pixel pieno dall’alto: è lì che una goccia schizza, e il resto cade sul pavimento e fa un cerchio nella pozzanghera. Le gocce partono dalla pancia della nuvola, dov’è in quel momento: i suoi spostamenti sono scritti in un elenco con il loro ease, e cloudX(t) dice dove si trova in ogni istante.
La nuvola
È un mucchio di cerchi in un gruppo dentro defs, disegnato tre volte con use: una con un contorno largo, una col colore chiaro, una con quello scuro che compare quando si arrabbia. Così il contorno sta solo all’esterno e i bordi possono ribollire: basta cambiare il raggio dei cerchi, e le tre copie lo seguono. La pancia e i riccioli stanno dentro una maschera fatta con lo stesso mucchio. Occhi con iride, riflesso e palpebra, sopracciglia, guance e tre bocche ruotano o si scalano sul loro punto, calcolato con getBBox.
Il fulmine
Uno zigzag da sotto la nuvola fino al punto più alto della lettera, con una o due diramazioni che finiscono nel vuoto, disegnato quattro volte: un alone largo e trasparente, un contorno scuro, il giallo e un cuore bianco. Ogni linea ha pathLength 1 e si traccia portando stroke-dashoffset da 1 a 0 in un decimo di secondo. Nello stesso istante il fondo fa un lampo, il palco trema e sulla lettera si accende una stella.
La lettera bruciata
La lettera colpita ha una sua copia come maschera alfa e dentro, sopra il colore del logo, un gradiente radiale dal punto colpito (nero, poi marrone, poi trasparente), il contorno della lettera in nero spesso, che la maschera taglia a metà così resta solo il bordo interno, e crepe di brace in arancione e giallo. Un rettangolo chiaro nella stessa maschera è il lampo sulla lettera. La lettera si affloscia con scaleY e skewX dal piede, l’altra salta, gira e atterra con l’angolo che serve perché il suo spigolo più basso tocchi il pavimento.
La regia e il tuo logo
Tutta la storia è una timeline sola, con timeScale per la velocità: ogni lettera ha tre gruppi uno dentro l’altro, per il vento, per il salto e per la bruciatura, così le trasformazioni non si pestano i piedi. Alla fine il sole asciuga e la scena si ricostruisce dall’etichetta «arrive», con pioggia e fulmini nuovi ogni volta. Se IMAGE ha un indirizzo il logo diventa quell’immagine: un pezzo solo, colpito a un terzo della larghezza e fatto saltare dal secondo fulmine.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
NAME | script.js | 'Stormline' | Il logo scritto: ogni lettera è un pezzo che il fulmine può colpire. |
IMAGE | script.js | '' | Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola. |
STRUCK | script.js | 2 | La lettera che il fulmine grande carbonizza, contando da 0 (gli spazi contano). Un’immagine è colpita a un terzo della larghezza. |
BOLTS | script.js | 2 | Quanti fulmini cadono, da 1 a 3: il primo brucia una lettera, gli altri ne fanno saltare una che ricade storta. |
RAIN | script.js | 26 | Quanta pioggia, in gocce al secondo. Con 0 il temporale è asciutto e la pozzanghera non c’è. |
CLOUD | script.js | 2.6 | Quanto è larga la nuvola, in altezze di lettera. |
SPEED | script.js | 1 | La velocità di tutta la storia: 2 è il doppio, 0.5 la metà. |
REST | script.js | 4 | Quanti secondi il logo resta bruciacchiato e fumante prima che esca il sole. |
LOOP | script.js | true | Se il sole asciuga tutto e la storia ricomincia. Con false il logo resta bruciato e continua a fumare. |
Quando usarla
Per presentare un logo in modo che non si dimentichi: l’anteprima per un cliente, l’apertura di un sito o di un video, una pagina 404 o un caricamento con un po’ di ironia, un post per i social, un marchio che parla di meteo, energia o elettricità. Funziona con un marchio scritto e con un’immagine.
Sul telefono
La stessa storia, con le misure adattate: su uno schermo alto la nuvola è più grande e sta più in alto, così il fulmine fa una strada più lunga. Un tocco la fa ripartire.
Con il movimento ridotto
Niente si muove: il logo compare in dissolvenza, poi la nuvola scura con la pioggia ferma, poi un fulmine che appare e sparisce, la bruciatura e la pozzanghera, e la nuvola svanisce. Se la storia ricomincia, anche il sole e l’asciugatura sono dissolvenze.
Trappole
- Il contorno di una nuvola fatta di cerchi sovrapposti non si può dare a ogni cerchio, se no dentro restano tutte le righe: il mucchio si disegna due volte con use, prima con un tratto largo e scuro e poi pieno sopra, e il contorno resta solo fuori.
- Un elemento con la classe che fissa il colore non si può ricolorare da un use: i cerchi della nuvola in defs non hanno nessun colore, così ogni use dà il suo (contorno, chiaro, scuro, maschera).
- Una linea con pathLength 1 e stroke-dasharray «1 1» lascia un puntino all’inizio quando la si cancella con dashoffset -1, per via della punta tonda: con «1 2» il buco è abbastanza lungo e il puntino sparisce.
- Il fulmine giallo spariva proprio nel momento del lampo, quando il fondo diventa chiaro: ha un contorno scuro come la nuvola, fra l’alone e il giallo.
- Il sole fuori schermo a destra si vedeva per un attimo ai tremori del palco: parte più lontano, oltre la punta dei raggi.
- Un’immagine presa da un altro sito non si può leggere su una canvas (getImageData dà errore): allora la pioggia schizza sul bordo alto del suo riquadro.
- Una lettera ruotata intorno al suo centro affonda nel pavimento con uno spigolo: dopo il salto sale di quanto serve, metà larghezza per il seno dell’angolo più metà altezza per il coseno, meno metà altezza.
- Le scintille fra le guance, fatte come un’unica linea a zigzag, sembravano una bocca digrignata: sono diventate scariche corte che partono dalle guance.
Librerie
GSAP 3.15.0, Big Shoulders Display (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 19 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.
