Il logo morso dal dinosauro

Intro, SVG, TestoGSAPImpegnativaPeso compresso: Demo 16 KBGSAP 28 KBGratisScarica lo zip

L’anteprima di un logo in tre atti: le lettere cadono e atterrano schiacciandosi, poi arriva un dinosauro da destra, ruggisce e morde la fine del logo, che sanguina a colature dense; un pestone spacca una lettera in due. 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.

Scarica lo zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The dinosaur-bitten logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/unbounded@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 dinosaur -->
    <svg class="palco" data-stage role="img" aria-label="Brambly" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the bite: everything white stays, the black circles are the hole -->
        <mask id="bite" maskUnits="userSpaceOnUse" data-bite-mask>
          <rect fill="#fff" data-bite-full />
          <g fill="#000" data-hole></g>
        </mask>
        <!-- the wound shows only where there is still logo -->
        <mask id="on-logo" maskUnits="userSpaceOnUse" style="mask-type: alpha" data-on-logo>
          <use href="#logo" />
        </mask>
        <!-- the piece of logo that ends up in the mouth -->
        <clipPath id="chunk-cut" data-cut></clipPath>
        <radialGradient id="wound-fill" gradientUnits="userSpaceOnUse" data-wound-fill>
          <stop offset="0" class="ferita-scura" />
          <stop offset="0.66" class="ferita-scura" />
          <stop offset="0.74" class="ferita" />
          <stop offset="1" class="ferita ferita--via" />
        </radialGradient>
        <!-- the drips melt into each other like a thick liquid -->
        <filter id="goo" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-goo>
          <feGaussianBlur in="SourceGraphic" stdDeviation="5" data-goo-blur />
          <feColorMatrix values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -9" />
        </filter>
        <!-- the dinosaur's body and tail, to keep the belly, the stripes and the spots inside them -->
        <clipPath id="dino-body-clip">
          <path d="M176 64C192 88 214 100 246 104C278 108 300 118 318 128L336 170L316 222C296 252 246 262 200 254C156 246 128 210 126 168C126 140 132 116 146 98Z" />
        </clipPath>
        <clipPath id="dino-tail-clip">
          <path d="M296 126C340 122 400 108 462 80C456 110 424 148 384 176C360 194 334 212 300 230Z" />
        </clipPath>
      </defs>

      <g data-world>
        <g data-ground></g>
        <g id="logo" data-logo></g>
        <g mask="url(#on-logo)"><circle class="ferita-disco" fill="url(#wound-fill)" data-wound /></g>
        <g class="sangue" filter="url(#goo)" data-blood></g>
        <g data-shine></g>

        <!-- the dinosaur: drawn facing left, the point between its feet is 0 0 -->
        <g data-dino-place>
          <ellipse class="dino-ombra" cx="0" cy="2" rx="120" ry="10" data-dino-shadow />
          <g data-dino-flip>
            <g data-dino-body>
              <g transform="translate(-250 -300)">
                <!-- the far leg, darker, behind everything -->
                <g data-leg-back>
                  <path class="dino-lontano" d="M258 190C252 160 302 156 318 186C330 210 318 238 298 246L294 280L304 284C313 288 313 300 304 300L250 300C240 300 238 290 248 287L270 282L272 246C258 238 260 212 258 190Z" />
                  <path class="unghia" d="M250 300L239 302L248 294ZM262 300L252 303L260 295Z" />
                </g>
                <!-- the tail: its spikes behind it, its stripes and spots inside it -->
                <g data-tail>
                  <path class="dino-cresta" d="M324.7 126Q332.6 114.8 338.5 108Q339.1 117.8 343.3 126ZM355.9 118Q362.8 107.8 367.9 102Q368.4 110.5 372.1 118ZM386.2 108Q392 99 396.3 94Q396.8 101.2 399.8 108ZM415.4 98Q420.2 90 423.7 86Q424.1 91.8 426.6 98ZM439.7 89Q443.3 82.2 446.1 79Q446.4 83.5 448.3 89Z" />
                  <path class="dino" d="M296 126C340 122 400 108 462 80C456 110 424 148 384 176C360 194 334 212 300 230Z" />
                  <g clip-path="url(#dino-tail-clip)">
                    <path class="dino-pancia" d="M300 232C334 214 362 196 386 178C420 152 452 116 470 80L470 260L300 260Z" />
                    <path class="dino-macchia" d="M352 132C360 126 372 126 374 132C372 138 358 140 352 132ZM392 118C398 113 408 113 409 118C407 123 396 124 392 118ZM424 104C429 100 436 100 437 104C435 108 427 109 424 104Z" />
                  </g>
                </g>
                <!-- the spikes along the back, half hidden by the body -->
                <path class="dino-cresta" d="M185.9 87Q192.8 76.8 197.9 71Q198.4 79.5 202.1 87ZM207.5 99Q216.4 86.7 223.1 79Q223.8 90 228.5 99ZM233.2 106Q243.2 92.5 250.7 84Q251.5 96.3 256.8 106ZM261.8 111Q271.3 98.1 278.4 90Q279.1 101.7 284.2 111ZM289.1 120Q297.5 108.2 303.8 101Q304.5 111.4 308.9 120Z" />
                <!-- the throat swells when it swallows -->
                <circle class="dino" cx="150" cy="110" r="0" data-gulp />
                <!-- body and neck in one piece; the outline is drawn apart, so that it stops where the tail starts -->
                <path class="dino dino--pieno" d="M176 64C192 88 214 100 246 104C278 108 300 118 318 128L336 170L316 222C296 252 246 262 200 254C156 246 128 210 126 168C126 140 132 116 146 98Z" />
                <g clip-path="url(#dino-body-clip)">
                  <path class="dino-pancia" d="M128 150C140 206 186 244 250 252C276 255 300 248 318 234L318 300L100 300L100 150Z" />
                  <path class="dino-righe" d="M124 174Q137 179 148 173M130 198Q147 205 162 198M143 220Q163 229 180 221M164 238Q187 247 207 240M196 250Q220 257 244 250" />
                  <path class="dino-macchia" d="M226 118C234 111 248 112 250 119C247 126 232 127 226 118ZM260 126C266 121 276 122 277 127C275 132 264 133 260 126ZM204 104C209 100 217 101 218 105C216 109 208 110 204 104ZM288 138C293 134 300 135 301 139C299 143 292 144 288 138Z" />
                  <path class="dino-lucido" d="M196 96C218 110 252 116 296 126" />
                </g>
                <path class="dino-linea" d="M176 64C192 88 214 100 246 104C278 108 300 118 318 128M316 222C296 252 246 262 200 254C156 246 128 210 126 168C126 140 132 116 146 98" />
                <!-- the far arm, darker, over the chest -->
                <g data-arm-back>
                  <path class="braccio-bordo" d="M174 190Q160 200 156 212Q148 210 140 206" />
                  <path class="braccio braccio--lontano" d="M174 190Q160 200 156 212Q148 210 140 206" />
                  <path class="unghia" d="M136 202L129 201L135 207ZM137 208L131 211L138 211Z" />
                </g>
                <!-- the head: it turns on the neck; the inside of the mouth, the piece it bites, the jaw, then the skull -->
                <g data-head>
                  <g data-mouth>
                    <path class="bocca" d="M158 104L64.5 98L64.5 182.4Z" />
                    <path class="lingua" d="M152 110C132 114 104 124 86 142C82 148 92 151 99 146C114 135 134 124 154 117Z" />
                  </g>
                  <g data-chunk-slot></g>
                  <g data-jaw>
                    <path class="dente" d="M42 106L47 93L53 106ZM58 106L63 94L69 106ZM74 106L79 94L85 106ZM90 106L95 94L101 106ZM106 106L111 95L117 106ZM122 106L127 96L132 106Z" />
                    <path class="dino" d="M158 104L36 104C25 104 20 114 28 122C44 136 104 140 144 132C166 128 170 112 158 104Z" />
                    <path class="dino-righe" d="M48 124Q90 132 136 124" />
                  </g>
                  <path class="dente" d="M34 100L39 113L45 100ZM50 100L55 113L61 100ZM66 100L71 113L77 100ZM82 100L87 113L93 100ZM98 100L103 113L109 100ZM114 100L119 112L125 100ZM130 100L135 111L141 100Z" />
                  <path class="dino" d="M182 82C184 56 168 38 140 34C128 26 108 24 96 32C70 32 36 42 18 62C8 74 10 94 24 100L158 104C176 104 184 96 182 82Z" />
                  <path class="dino-macchia" d="M146 50C151 45 160 46 161 51C159 56 150 57 146 50ZM164 62C168 59 174 60 174 64C172 68 166 68 164 62ZM58 46C62 43 68 43 69 46C67 50 61 50 58 46Z" />
                  <path class="dino-lucido" d="M30 58C48 44 72 38 92 37" />
                  <path class="dino-scuro" d="M26 60C29 56 36 57 37 60C35 64 28 64 26 60Z" />
                  <ellipse class="guancia" cx="142" cy="88" rx="13" ry="7" data-blush />
                  <ellipse class="orbita" cx="114" cy="60" rx="19" ry="16" />
                  <circle class="occhio" cx="112" cy="60" r="13" />
                  <g data-pupil>
                    <circle class="iride" cx="107.5" cy="61" r="8" />
                    <circle class="pupilla" cx="106.5" cy="61" r="4.6" />
                    <circle class="riflesso" cx="104" cy="57.6" r="2.4" />
                  </g>
                  <ellipse class="palpebra" cx="112" cy="60" rx="15.6" ry="15.6" data-lid />
                  <path class="ciglio" d="M95 42Q112 33 131 42" data-brow />
                </g>
                <!-- the near arm, in front of the chest -->
                <g data-arm>
                  <path class="braccio-bordo" d="M166 184Q151 194 146 207Q137 205 128 199" />
                  <path class="braccio" d="M166 184Q151 194 146 207Q137 205 128 199" />
                  <path class="unghia" d="M124 195L117 194L123 200ZM125 201L119 204L126 204Z" />
                </g>
                <!-- the near leg, with its thigh -->
                <g data-leg-front>
                  <path class="dino" d="M182 206C176 176 226 166 244 194C258 216 246 246 224 252L220 282L232 286C241 290 241 300 232 300L176 300C166 300 164 290 174 287L198 282L198 250C186 242 184 222 182 206Z" />
                  <path class="dino-righe" d="M196 220C204 236 222 242 238 232M200 284L218 284" />
                  <path class="unghia" d="M176 300L165 302L174 294ZM188 300L178 303L186 295Z" />
                </g>
              </g>
            </g>
          </g>
        </g>

        <g data-crumbs></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.

25 valori da cambiare

Apri il Playground

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 morso dal dinosauro» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una carta color osso arriva il logo di un marchio inventato, Brambly, scritto in un carattere largo e nerissimo: le lettere cadono dall’alto una dopo l’altra, si schiacciano toccando la linea e rimbalzano su come gomma. Il terreno comincia a tremare, il logo si scansa di lato e da destra entra un tirannosauro verde, a passi pesanti che fanno saltellare le lettere. Si ferma, annusa, ruggisce (le lettere si piegano all’indietro come al vento), poi prende la rincorsa e morde la fine del logo: nella lettera resta un buco tondo coi segni dei denti, il bordo diventa rosso e cominciano a colare gocce dense che cadono a terra e fanno una pozza. Il dinosauro mastica, sputa briciole di lettera, deglutisce tutto contento e batte un piede: il pestone fa saltare il logo e una lettera si crepa a zigzag, si apre in due e le due metà cadono a terra. Lui capisce il guaio, sgrana gli occhi, si gira e scappa. Il logo resta così, morso e gocciolante, mentre il dinosauro rimette dentro la testa dal bordo per un’occhiata; dopo qualche secondo il logo guarisce (il sangue risale, il buco si richiude, la lettera rotta torna al suo posto) e la storia ricomincia. Un clic la fa ripartire da capo. Al posto della parola si può mettere un’immagine: morso, sangue e crepa 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: il logo, il morso e il dinosauro stanno sempre affiancati. Su uno schermo alto il dinosauro è un po’ più grande e, fermo, mostra solo testa e petto: il resto resta oltre il bordo.

Il morso

Il morso è una maschera SVG: un rettangolo bianco e, in nero, un cerchio con sette cerchietti sul bordo sinistro, i segni dei denti. Sta su ogni lettera morsa e, con maskUnits userSpaceOnUse, segue la lettera quando si muove. La stessa forma, come clipPath, ritaglia una copia del pezzo morso che finisce dentro la testa del dinosauro: le si dà la trasformazione inversa della testa (getCTM), così parte esattamente dal punto del morso e poi segue la bocca mentre mastica.

Il sangue

La ferita è un gradiente radiale che si allarga dal bordo del buco, mostrato solo dove c’è ancora logo grazie a una maschera alfa con dentro un use del logo. Le colature sono un rettangolo e un cerchio che crescono in giù, sotto un filtro che le fa colare come un liquido denso (sfocatura e poi una matrice che indurisce l’alfa). Dove partire si scopre disegnando le lettere morse su una canvas e leggendo i pixel lungo il bordo del morso. Le gocce cadono con power2.in e ogni goccia allarga la pozza.

La crepa

La lettera che si rompe ha due copie, ognuna ritagliata da un clipPath che segue lo stesso zigzag, e lo zigzag disegnato sopra col colore della carta: si traccia con stroke-dashoffset. Finché non si crepa si vede la lettera intera, perché due metà accostate lasciano una riga sottile. Poi ogni metà ruota intorno al suo angolo esterno in basso e cade a terra con bounce.out.

Il dinosauro

È disegnato una volta sola nella pagina, a pezzi e col contorno: zampe con le cosce e le unghie, coda con le spine e le macchie, braccini, pancia a righe, testa con la mascella, la lingua, l’occhio giallo, la palpebra e il sopracciglio. Ogni pezzo ruota intorno alla sua articolazione: un punto del disegno (l’anca, la spalla, il cardine della mascella) che lo script trasforma in percentuali del riquadro del pezzo con getBBox. Il boccone, una volta in bocca, scivola sulla punta del muso e resta stretto fra i denti mentre mastica. La camminata è una timeline annidata che si ripete; posizione, grandezza e verso vanno in un oggetto che si scrive come attributo transform. L’interno della bocca è un triangolo che si stira con il coseno e il seno dell’apertura, così il suo angolo resta dietro la punta della mascella.

La regia e il tuo logo

Tutta la storia è una timeline sola, con timeScale per la velocità. Alla fine il logo guarisce e la scena si ricostruisce dall’etichetta «arrive», con colature nuove ogni volta. Se IMAGE ha un indirizzo, il logo diventa quell’immagine: un pezzo solo, morso a destra e crepato ai quattro decimi della larghezza. Nel Playground accanto al campo c’è il tasto per caricare un file dal computer, che entra nel codice come indirizzo data:.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Brambly'`	Il logo scritto: ogni lettera è un pezzo che il dinosauro può mordere o rompere.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola.
`BREAKS`	script.js	`2`	La lettera che si crepa, contando da 0. Se il morso l’ha già presa, si rompe quella intera più vicina. Un’immagine si crepa ai quattro decimi della larghezza.
`BITE`	script.js	`1.3`	Quanto è largo il morso, in altezze di lettera.
`DRIPS`	script.js	`5`	Quante colature partono dal morso, al massimo: ne nascono solo dove intorno al buco c’è ancora logo.
`DINO`	script.js	`2.4`	Quanto è alto il dinosauro, 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 morso e gocciolante prima di guarire.
`LOOP`	script.js	`true`	Se il logo guarisce e la storia ricomincia. Con false resta morso e continua a gocciolare.

Provali nel Playground

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 di uno studio, una pagina 404 o un caricamento con un po’ di ironia, un post per i social. Funziona con un marchio scritto e con un’immagine.

Sul telefono

La stessa storia, con le misure adattate: su uno schermo alto il dinosauro è un po’ più grande e, quando si ferma, si vedono solo la testa e il petto. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: il logo compare in dissolvenza, poi il dinosauro accanto, poi in dissolvenza il morso, il sangue e la crepa, e il dinosauro sparisce. Se la storia ricomincia, anche la guarigione è una dissolvenza.

Trappole

Una maschera con maskUnits userSpaceOnUse sta nelle coordinate dell’elemento che la usa, trasformazione compresa: va messa sulla lettera che si muove, altrimenti la lettera salta e il buco resta fermo.
Due metà ritagliate e accostate lasciano una riga sottile dove si toccano (l’antialiasing): finché la lettera non si crepa si mostra quella intera.
getBBox ignora il clipPath: ogni metà della lettera ha il riquadro della lettera intera, quindi gli angoli intorno a cui ruotano si scelgono su quello.
L’interno della bocca, girato insieme alla mascella, usciva dal muso: si stira invece di girarlo, col coseno in larghezza e il seno in altezza.
Il gradiente della ferita colorerebbe la lettera ancora intera: si mostra solo dal morso, e durante la guarigione sparisce prima che il buco si richiuda.
Un’immagine presa da un altro sito non si può leggere su una canvas (getImageData dà errore): allora le colature si distribuiscono lungo il lato sinistro del morso.
Pezzi dello stesso verde uno sopra l’altro spariscono (dei braccini sul petto si vedevano solo le unghie): ogni pezzo ha il contorno, e quello del corpo è un tracciato a parte che si ferma dove comincia la coda, così all’attaccatura non c’è una riga.

Librerie

GSAP 3.15.0, Unbounded (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 16 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.