Il logo dipinto a pennello

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

L’intro di un logo con un grande pennello: piomba sulla tela, le setole si piegano e si aprono, e trascina una pennellata larga e materica che si scarica e diventa secca in fondo, con schizzi e colature. Nel colore si aprono le lettere in negativo, un secondo colpo giallo le riempie e alla fine dal pennello cade una goccia. 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 paintbrush logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/syne@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, paints the canvas weave, builds the strokes and the brush, and paints the logo -->
    <svg class="palco" data-stage role="img" aria-label="Daubry" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the weave of the primed canvas: a little tile of threads the script paints on a canvas -->
        <pattern id="weave" patternUnits="userSpaceOnUse" width="96" height="96">
          <image width="96" height="96" data-weave-image />
        </pattern>
        <!-- the frayed, streaky edges of a brush stroke: a noise stretched along the stroke pushes the edges about -->
        <filter id="fray" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-fray>
          <feTurbulence type="fractalNoise" numOctaves="2" result="streaks" data-fray-turb />
          <feDisplacementMap in="SourceGraphic" in2="streaks" xChannelSelector="R" yChannelSelector="G" data-fray-disp />
        </filter>
        <filter id="fray-2" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-fray-2>
          <feTurbulence type="fractalNoise" numOctaves="2" result="streaks" data-fray-turb-2 />
          <feDisplacementMap in="SourceGraphic" in2="streaks" xChannelSelector="R" yChannelSelector="G" data-fray-disp-2 />
        </filter>
        <!-- the logo cut out of the paint: white keeps the paint, the black letters open in it -->
        <mask id="holes" maskUnits="userSpaceOnUse" data-holes-mask>
          <rect fill="#fff" data-holes-rect />
          <g data-holes></g>
        </mask>
        <!-- the brush is painted as wide as it goes: these two follow its tip -->
        <clipPath id="reveal-1"><rect data-reveal-1 /></clipPath>
        <clipPath id="reveal-2"><rect data-reveal-2 /></clipPath>
        <!-- the brush's shadow on the canvas: its own outline, soft and dark -->
        <filter id="brush-shadow" x="-40%" y="-40%" width="180%" height="180%">
          <feGaussianBlur in="SourceAlpha" stdDeviation="6" result="soft" data-shadow-blur />
          <feFlood class="ombra-tinta" result="tone" />
          <feComposite in="tone" in2="soft" operator="in" />
        </filter>
        <!-- the wet shine that runs along the fresh paint -->
        <linearGradient id="gloss-grad" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" class="lucido-stop lucido-stop--via" />
          <stop offset="0.5" class="lucido-stop" />
          <stop offset="1" class="lucido-stop lucido-stop--via" />
        </linearGradient>
      </defs>

      <!-- the primed canvas -->
      <rect class="tela" data-wall />
      <rect class="tela-trama" fill="url(#weave)" data-weave />

      <g data-world>
        <!-- the paint: the second colour under the first, the drips, the first stroke with the logo cut out of it -->
        <g data-paint>
          <g clip-path="url(#reveal-2)" data-coat-2></g>
          <g data-drips></g>
          <g mask="url(#holes)" data-coat-1-holder>
            <g data-coat-1-place>
              <g clip-path="url(#reveal-1)" data-coat-1></g>
            </g>
            <g data-rims></g>
            <g data-ripples></g>
          </g>
          <g data-spots></g>
        </g>

        <!-- the brush and its shadow; 0 0 is the middle of the bristles' tip -->
        <g data-shadow-place opacity="0">
          <use href="#brush" filter="url(#brush-shadow)" />
        </g>
        <g data-brush-place>
          <g id="brush">
            <g data-handle-place>
              <g data-handle></g>
            </g>
            <path class="setole" data-bristles />
            <path class="setole-colore" data-bristles-paint />
            <path class="setole-fili" data-strands />
            <path class="setole-lucido" data-strands-light />
            <path class="ghiera" data-ferrule />
            <path class="ghiera-righe" data-ferrule-lines />
            <path class="ghiera-luce" data-ferrule-light />
            <g class="goccia-pennello" data-hanging>
              <line data-hanging-neck />
              <circle data-hanging-drop />
            </g>
          </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.

30 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 dipinto a pennello» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una tela bianca preparata, con la trama dei fili appena visibile, entra dall’alto a sinistra un grande pennello piatto: manico laccato verde con l’anello e la punta dorati, ghiera di metallo con le pieghe, setole chiare intinte nel vermiglione, e una goccia che pende dall’angolo e dondola. Il pennello si ferma sopra la tela con le setole che oscillano, si carica all’indietro e poi si abbatte con uno schiaffo: le setole si schiacciano e si aprono a ventaglio, la tela dà un piccolo colpo, il colore schizza all’indietro in gocce e spruzzi. Poi trascina una pennellata larga e materica: le setole si piegano all’indietro, sulla pennellata restano le creste più scure e le righe lucide del colore bagnato, i bordi sono sfrangiati e qualche goccia vola dai lati. Man mano il pennello preme meno e il colore finisce: in fondo la pennellata si apre in strisce secche e spezzate dove si vede la tela. Il pennello si stacca con un colpo di polso, le setole scattano e tremano, e se ne va. Dal bordo di sotto partono le colature: una goccia si gonfia, scende, rallenta e si ferma. Poi la pennellata cambia: un luccichio la percorre, il colore si gonfia appena e nel rosso si aprono una alla volta le lettere di un marchio inventato, Daubry, in negativo, ognuna con un rimbalzo, un’onda nel colore e un bordo più scuro dove la pittura si è spostata. Il pennello torna da sinistra carico di giallo e dà un secondo colpo più veloce: il giallo passa sotto il rosso, riempie le lettere e spunta sotto la pennellata e dopo la sua fine. Il pennello si ferma in alto sopra la fine della pennellata, una goccia gialla si raccoglie sulle setole e si allunga; un piccolo strattone e la goccia cade, si allunga in volo e si schiaccia sulla tela in una macchia con gli schizzi intorno e una piccola colatura. Il pennello se ne va. Il colore si asciuga, le righe lucide si spengono e ogni tanto un luccichio passa sulla pennellata; dopo qualche secondo tutta la pittura cola giù e sparisce e la scena ricomincia, con una pennellata ogni volta un po’ diversa. Un clic la fa ripartire. Al posto della parola si può mettere un’immagine: si apre nel colore e si riempie di giallo, oppure dei suoi colori.

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: la pennellata è alta quanto il logo più un margine, comincia un’altezza prima e finisce, secca, un po’ dopo; il pennello è largo quanto la pennellata. Su uno schermo alto il logo prende tutta la larghezza e le code secche possono uscire dal bordo.

La pennellata

Il corpo è un tracciato solo: un bordo sopra e uno sotto mossi da una somma di seni, un grosso inizio tondo dove il pennello è atterrato e una fine che si apre in dita di colore. Un filtro sposta i bordi con un feDisplacementMap guidato da un feTurbulence stirato lungo la pennellata (frequenza bassa in orizzontale, alta in verticale), e così i bordi diventano fili. Sopra ci sono le creste scure e le righe lucide, tutte parallele alla pennellata; verso la fine, righe color tela con un gradiente che sale e un tratteggio a caso fanno vedere la tela, e oltre la fine restano strisce spezzate. La pennellata si scopre con un clipPath il cui rettangolo si allunga con lo stesso ease del pennello.

Il pennello

Ogni setola è una curva quadratica dalla bocca della ghiera alla punta. Tre numeri bastano per tutto: la pressione accorcia il ciuffo e lo apre a ventaglio, la trazione sposta il punto di controllo così che le punte restino indietro, e quanto colore c’è decide fin dove arriva la parte colorata (lo stesso tratto di curva, calcolato con de Casteljau). La ghiera va dalla bocca piatta al manico tondo, il manico è disegnato una volta lungo il suo asse. L’ombra è un use del pennello con un filtro di sfocatura, spostata e più chiara quanto più il pennello è lontano dalla tela.

Il logo in negativo e il secondo colore

La pennellata rossa ha una maschera: un rettangolo bianco e sopra le lettere in nero, ognuna scalata da zero con elastic.out intorno al suo centro, quindi si aprono come buchi nel colore. Le stesse lettere, solo col bordo scuro, fanno la cresta intorno ai buchi. La pennellata gialla sta sotto la rossa: si vede solo nei buchi, sotto il bordo e dopo la fine, quindi riempie il logo. Se IMAGE ha un indirizzo, un filtro trasforma le parti scure e colorate dell’immagine in nero per la maschera, e con feMorphology dilate fa il bordo.

La regia

Tutta l’entrata è una timeline sola, con le etichette start, arrive, press, stroke, lift, reveal, fill, drop, rest e leave e timeScale per la velocità. Il pennello segue la pennellata con un oggetto che avanza e a ogni passo legge l’altezza della pennellata in quel punto; un’inversa dell’ease dice quando il pennello passa da un punto, così gocce e colature partono al momento giusto. La goccia appesa si allunga, si stacca con lo strattone e diventa un’ellisse che cade con power2.in e si schiaccia sulla tela con elastic.out. La prima pittura è sempre uguale (un generatore a caso col seme fisso), così il poster cade sempre sullo stesso logo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Daubry'`	Il logo scritto: si apre nel colore lettera per lettera.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola.
`PAINT`	script.js	`1`	Quanto è carico il pennello: schizzi e colature (0 = pennellate pulite, 2 = colore che cola dappertutto).
`PRESSURE`	script.js	`1`	Quanto preme il pennello: quanto si piegano e si aprono le setole, lo schiaffo sulla tela e il colpo.
`DRY`	script.js	`1`	Quanto è lunga la fine secca e spezzata di ogni pennellata (0.2 corta, 2.5 lunga).
`TINT`	script.js	`true`	Un’immagine si riempie del secondo colore; con false si riempie dei suoi colori.
`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 dipinto resta in mostra prima che il colore coli via.
`LOOP`	script.js	`true`	Se il colore cola via e si dipinge di nuovo. Con false il logo resta, con un luccichio ogni tanto.

Provali nel Playground

Quando usarla

Per presentare un logo con un gesto pieno di colore e di mano: l’apertura del sito di un imbianchino, di un colorificio, di una scuola d’arte, di un festival, di un marchio di streetwear o di un locale, 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: su uno schermo alto il logo è largo quasi quanto lo schermo, le code secche delle pennellate escono dal bordo e il pennello, grande, entra e esce dai lati. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: il pennello compare in dissolvenza sopra la tela, poi compare la pennellata rossa con le colature e il pennello svanisce; nella pennellata compaiono le lettere in negativo e poi il giallo che le riempie. Se l’animazione ricomincia, il colore se ne va in dissolvenza.

Trappole

Cambiare svgOrigin a un elemento che GSAP ha già scalato lo sposta: GSAP compensa con una traslazione. Il colpo dell’atterraggio e il gonfiarsi del colore usavano due origini diverse e su telefono la pennellata finiva più in alto delle lettere. Ora ogni elemento ha una sola origine, fissata quando si costruisce la scena.
Il luccichio, un parallelogramma mosso con x, va mostrato solo sul colore: la maschera deve stare su un gruppo fermo che lo contiene, perché una maschera messa sull’elemento che si sposta si sposta con lui.
Le punte delle setole devono essere almeno alte quanto la pennellata, altrimenti sopra il pennello si vede il colore tagliato dritto dal clipPath: il ciuffo si apre a ventaglio con la pressione e il clipPath resta un poco dietro la punta.
Un’opacità messa con gsap.set finisce nello stile e vince sull’attributo opacity: l’ombra del pennello, scritta come attributo, restava piena e scura. Ora si scrive nello stile, moltiplicata per l’opacità del pennello.
Una goccia che cade da un pennello inclinato deve partire dall’angolo più basso delle setole, calcolato con la stessa posa che il pennello ha in quel momento della timeline (la scala cresce con la distanza dalla tela).
La prima pittura usa un generatore a caso col seme fisso: con Math.random le colature e gli schizzi del poster cambiavano a ogni collaudo.

Librerie

GSAP 3.15.0, Syne (font variabile) 5.3.0.

Compressi con gzip, i tre file della demo pesano 17 KB; le librerie: GSAP 28 KB.

Collaudo

Provata il 11 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.