Il logo cucito dall'ago

Intro, SVG, Testo, FisicaGSAPImpegnativaPeso compresso: Demo 23 KBGSAP 28 KBGratisScarica lo zip

L’anteprima di un logo ricamato davanti ai tuoi occhi: un telaio di legno tende la stoffa di lino, un ago d’argento col suo filo cuce il contorno delle lettere a punto filza e le riempie a punto pieno, fa il nodo e un paio di forbici taglia il filo. 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 sewn logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/gabarito@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, reads the logo's shape and sews it stitch by stitch -->
    <svg class="palco" data-stage role="img" aria-label="Hemwick" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the linen: a weave of light and dark threads, with a few thicker knots -->
        <pattern id="linen" patternUnits="userSpaceOnUse" width="8" height="8">
          <rect class="lino" width="8" height="8" />
          <path class="lino-ordito" d="M1.5 0V8M5.5 0V8" />
          <path class="lino-trama" d="M0 1.5H8M0 5.5H8" />
          <path class="lino-nodo" d="M2.6 1h2.2v1H2.6ZM6.4 5h1.6v1H6.4ZM1 3.2h1v1.6H1Z" />
        </pattern>
        <radialGradient id="vignette" cx="0.5" cy="0.48" r="0.72">
          <stop offset="0.55" class="velo" stop-opacity="0" />
          <stop offset="1" class="velo" stop-opacity="0.2" />
        </radialGradient>
        <!-- the steel of the needle and the scissors: light along the top, dark along the bottom -->
        <linearGradient id="steel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="acciaio-luce" />
          <stop offset="0.32" class="acciaio" />
          <stop offset="0.62" class="acciaio" />
          <stop offset="1" class="acciaio-scuro" />
        </linearGradient>
        <linearGradient id="brass" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="ottone-luce" />
          <stop offset="0.4" class="ottone-medio" />
          <stop offset="1" class="ottone-scuro" />
        </linearGradient>
        <!-- the little dip in the cloth where the needle goes in -->
        <radialGradient id="pucker">
          <stop offset="0" class="velo" stop-opacity="0.42" />
          <stop offset="1" class="velo" stop-opacity="0" />
        </radialGradient>
        <!-- the light that runs over the satin stitches -->
        <linearGradient id="sheen-band" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" stop-color="#000" />
          <stop offset="0.5" stop-color="#fff" />
          <stop offset="1" stop-color="#000" />
        </linearGradient>
        <mask id="sheen" maskUnits="userSpaceOnUse" data-sheen-mask>
          <g data-sheen-turn><rect fill="url(#sheen-band)" data-sheen-rect /></g>
        </mask>
        <!-- outside the hoop the cloth is loose and a little darker -->
        <mask id="outside" maskUnits="userSpaceOnUse" data-outside-mask>
          <rect fill="#fff" data-outside-full />
          <ellipse fill="#000" data-outside-hole />
        </mask>
        <clipPath id="inside"><ellipse data-inside /></clipPath>
        <!-- the part of the needle that is still above the cloth -->
        <clipPath id="needle-cut"><rect x="-260" y="-60" width="260" height="120" data-needle-cut /></clipPath>
        <clipPath id="screw-body"><rect x="-46" y="-37" width="96" height="14" rx="4" /></clipPath>
        <clipPath id="screw-head"><rect x="50" y="-48" width="16" height="36" rx="5" /></clipPath>
        <!-- a flat shadow of whatever uses it -->
        <filter id="silhouette" x="-20%" y="-60%" width="140%" height="220%" color-interpolation-filters="sRGB">
          <feFlood class="ombra-colore" />
          <feComposite in2="SourceAlpha" operator="in" />
        </filter>

        <!-- the needle: drawn pointing right, the point is 0 0, the eye is near -180 -->
        <g id="needle-art">
          <path class="ago" d="M0 0C-24 -1.6 -70 -4.8 -128 -5.4L-190 -5.4C-198 -5.4 -204 -3 -204 0C-204 3 -198 5.4 -190 5.4L-128 5.4C-70 4.8 -24 1.6 0 0Z" />
          <path class="ago-scuro" d="M-26 1.6C-70 3.4 -112 3.9 -150 3.9" />
          <path class="ago-lucido" d="M-10 -0.9C-44 -2.7 -92 -3.5 -152 -3.5" />
          <path class="cruna" d="M-190 -1.9H-162A1.9 1.9 0 0 1 -162 1.9H-190A1.9 1.9 0 0 1 -190 -1.9Z" />
          <ellipse class="ago-luccichio" cx="-60" cy="-2.6" rx="10" ry="1.4" data-glint />
        </g>
      </defs>

      <g data-world>
        <rect fill="url(#linen)" data-cloth />
        <rect class="fuori" mask="url(#outside)" data-outside />
        <g mask="url(#outside)" data-drapes></g>
        <g clip-path="url(#inside)" data-folds></g>

        <!-- the embroidery: the shadows of the stitches, the satin, its lights, the running stitch, the knot -->
        <g data-work>
          <g data-stitch-shadow></g>
          <g data-fill></g>
          <g data-light></g>
          <path class="luce" mask="url(#sheen)" data-sheen />
          <g data-outline></g>
          <g data-knot></g>
        </g>

        <!-- the wooden hoop: the script draws the ring to fit the logo; the brass screw sits on top of it -->
        <g data-hoop>
          <g data-ring></g>
          <g data-screw>
            <g data-tab-l>
              <path class="legno" d="M-38 10L-38 -46C-38 -50 -36 -52 -32 -52L-12 -52C-8 -52 -6 -50 -6 -46L-6 10Z" />
              <path class="legno-ombra" d="M-14 -50L-14 8" />
              <path class="venatura" d="M-30 -40Q-28 -20 -30 2M-22 -44Q-20 -24 -23 4" />
            </g>
            <g data-tab-r>
              <path class="legno" d="M6 10L6 -46C6 -50 8 -52 12 -52L32 -52C36 -52 38 -50 38 -46L38 10Z" />
              <path class="legno-ombra" d="M30 -50L30 8" />
              <path class="venatura" d="M14 -40Q16 -20 13 2M22 -44Q24 -24 21 4" />
            </g>
            <!-- the screw runs through both blocks: a nut on the left, a ridged thumb head on the right -->
            <path class="ottone" d="M-58 -44L-50 -48L-44 -44L-44 -16L-50 -12L-58 -16Z" />
            <path class="ottone-riga" d="M-58 -30H-44" />
            <rect class="ottone" x="-46" y="-37" width="96" height="14" rx="4" />
            <g clip-path="url(#screw-body)">
              <path class="filetto" data-threads d="M-60 -38l-5 16M-54 -38l-5 16M-48 -38l-5 16M-42 -38l-5 16M-36 -38l-5 16M-30 -38l-5 16M-24 -38l-5 16M-18 -38l-5 16M-12 -38l-5 16M-6 -38l-5 16M0 -38l-5 16M6 -38l-5 16M12 -38l-5 16M18 -38l-5 16M24 -38l-5 16M30 -38l-5 16M36 -38l-5 16M42 -38l-5 16M48 -38l-5 16M54 -38l-5 16M60 -38l-5 16M66 -38l-5 16M72 -38l-5 16M78 -38l-5 16M84 -38l-5 16M90 -38l-5 16" />
            </g>
            <path class="ottone-lucido" d="M-42 -33.5H46" />
            <rect class="ottone" x="50" y="-48" width="16" height="36" rx="5" />
            <g clip-path="url(#screw-head)">
              <path class="zigrino" data-knurl d="M44 -48v36M48 -48v36M52 -48v36M56 -48v36M60 -48v36M64 -48v36M68 -48v36M72 -48v36M76 -48v36M80 -48v36M84 -48v36" />
            </g>
            <path class="ottone-lucido" d="M54 -44V-16" />
          </g>
        </g>
        <rect fill="url(#vignette)" pointer-events="none" data-vignette />

        <!-- the needle, its shadow, the dip in the cloth and the thread -->
        <g data-tools>
          <g data-dimple>
            <ellipse fill="url(#pucker)" rx="34" ry="15" />
            <path class="piega-segno" d="M-6 -5Q-34 -13 -66 -15M-6 5Q-34 13 -66 15" />
            <path class="piega-luce" d="M-8 -9Q-36 -18 -64 -21M-8 9Q-36 18 -64 21" />
          </g>
          <g data-needle-shadow><g clip-path="url(#needle-cut)"><use href="#needle-art" filter="url(#silhouette)" /></g></g>
          <g data-thread>
            <path class="filo-bordo" data-thread-edge />
            <path class="filo filo--orlo" data-thread-main />
            <path class="filo-giro" data-thread-twist />
          </g>
          <g data-needle><g clip-path="url(#needle-cut)"><use href="#needle-art" /></g></g>
        </g>

        <!-- the scissors: drawn with the blades pointing right, the pivot is 0 0 -->
        <g data-scissors-shadow><use href="#scissors-live" filter="url(#silhouette)" /></g>
        <g data-scissors>
          <g id="scissors-live">
            <!-- each half is a blade and the handle on the other side, turning on the pivot -->
            <g data-half-b>
              <g transform="scale(1 -1)">
                <path class="manico-bordo" d="M-8 4C-26 10 -40 18 -52 28" />
                <path class="manico" d="M-8 4C-26 10 -40 18 -52 28" />
                <ellipse class="manico-bordo" cx="-70" cy="40" rx="22" ry="15" transform="rotate(25 -70 40)" />
                <ellipse class="manico" cx="-70" cy="40" rx="22" ry="15" transform="rotate(25 -70 40)" />
                <path class="lama" d="M-12 -6C28 -10 84 -8 128 -1.6C130 -0.6 129 0.6 127 0.8L-12 6Z" />
                <path class="lama-filo" d="M0 -2.2L118 -1.2" />
              </g>
            </g>
            <g data-half-a>
              <path class="manico-bordo" d="M-8 4C-26 10 -40 18 -52 28" />
              <path class="manico" d="M-8 4C-26 10 -40 18 -52 28" />
              <ellipse class="manico-bordo" cx="-70" cy="40" rx="22" ry="15" transform="rotate(25 -70 40)" />
              <ellipse class="manico" cx="-70" cy="40" rx="22" ry="15" transform="rotate(25 -70 40)" />
              <path class="manico-lucido" d="M-84 30Q-78 26 -68 27" />
              <path class="lama" d="M-12 -6C28 -10 84 -8 128 -1.6C130 -0.6 129 0.6 127 0.8L-12 6Z" />
              <path class="lama-filo" d="M0 -2.2L118 -1.2" />
              <path class="lama-lucido" d="M10 -5.2C44 -7.4 80 -6.4 112 -3" />
            </g>
            <circle class="perno" r="7.5" />
            <path class="perno-taglio" d="M-4.5 -2.5L4.5 2.5" />
          </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.

31 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 cucito dall'ago» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una stoffa di lino, con la trama di fili chiari e scuri e qualche piega morbida, cade dall’alto un telaio da ricamo di legno ovale: atterra schiacciandosi un poco, alza un po’ di peluria e rimbalza come una molla. La vite d’ottone in cima gira (si vedono scorrere il filetto e la zigrinatura della testa), i due blocchetti di legno si stringono e le pieghe dentro il telaio si tirano lisce di colpo. Poi da un lato entra di corsa un ago d’argento con riflessi, col filo blu che gli va dietro piegandosi come una catenella; si gira verso la prima lettera, prende la mira e punta la stoffa. Cuce il contorno di ogni lettera di un marchio inventato, Hemwick, a punto filza: i puntini di filo compaiono uno dopo l’altro lungo i bordi, l’ago entra ed esce (quando è sotto se ne vede solo il pezzo di dietro) e la stoffa si piega un poco nel punto in cui entra. Poi cambia filo e riempie le lettere a punto pieno: tante righe di filo rosso parallele e inclinate, con le ombre sotto, le luci sopra e qualche filo un po’ più chiaro o più scuro, come un ricamo vero. Alla fine fa due giri sull’ultimo punto e il nodo salta fuori, tira il filo, un piccolo paio di forbici entra da sotto e fa «snip», il codino resta lì e il ricamo si gonfia appena. L’ago vola di lato, si appunta nella stoffa e dondola. A riposo la luce passa sul filo e lo fa luccicare, la stoffa intorno al telaio si muove appena e l’ago dondola col suo filo appeso; dopo qualche secondo l’ago va a prendere il nodo e tira: i punti si scuciono al contrario, prima il pieno e poi il contorno, e il ricamo ricomincia con le righe inclinate dall’altra parte e l’ago che entra dall’altro lato. Un clic la fa ripartire da capo. Al posto della parola si può mettere un’immagine: l’ago ne cuce la sagoma e il punto pieno prende i colori dell’immagine.

Come funziona

La forma del logo

Ogni lettera (o l’immagine) si disegna da sola su una piccola canvas, con lo stesso carattere della pagina, e se ne leggono i pixel. Il bordo fra dentro e fuori si trova con i marching squares: per ogni quadratino di quattro pixel una tabella dice quali lati attraversa il bordo, il punto si sposta lungo il lato in proporzione all’alfa, e i pezzettini si legano in linee chiuse, levigate due volte. Ne vengono il contorno esterno e quelli dei buchi, come nella e o nella o.

Punto filza e punto pieno

Il contorno si misura lungo la sua lunghezza e si divide in punti tutti uguali, ognuno lungo STITCH altezze di lettera con un vuoto dopo. Il punto pieno sono righe parallele, inclinate di ANGLE gradi, distanti un FILL-esimo dell’altezza: lungo ogni riga si cercano i tratti dentro la lettera, i tratti di righe vicine che si sovrappongono diventano una colonna che l’ago riempie in un colpo solo, e i tratti troppo lunghi si spezzano in punti più corti sfalsati come mattoni.

Migliaia di punti in pochi tracciati

I punti non sono elementi uno per uno: ogni colore ha tre tracciati (l’ombra spostata in basso a destra, il filo, la luce più corta in alto a sinistra) e ognuno tiene il testo di tutti i suoi punti con la lunghezza dopo ciascuno. Mostrare i primi n punti vuol dire tagliare la stringa: un attributo d per tracciato a ogni fotogramma. I fili un po’ più chiari e più scuri vengono dallo stesso colore con color-mix; con un’immagine i punti si raggruppano per colore letto dai pixel.

L’ago e il suo percorso

L’ago è un oggetto solo (punto d’ingresso, direzione, profondità, quanto è alzato, quanto si stira) scritto come attributo transform. La profondità lo fa avanzare lungo il suo asse mentre un clipPath nelle sue coordinate taglia la parte già sotto la stoffa, e una fossetta con un gradiente radiale si allarga nel punto d’ingresso. Il percorso è una lista di tappe, con quanti punti sono fatti a ogni tappa: un tween solo lo scorre, quindi la timeline si può fermare e portare a qualsiasi tempo.

Il filo a catenella

Il filo è una catenella di ventidue punti mossa in gsap.ticker con il metodo di Verlet: ogni punto tiene la sua velocità, cade un poco e quattordici passaggi lo riportano alla sua distanza dal vicino. Un capo è la cruna dell’ago, l’altro l’ultimo punto cucito oppure libero; quando le forbici tagliano, il capo si libera e il filo resta appeso all’ago. Se l’ago salta lontano (una ripartenza, un salto della timeline) il filo si ristende e si assesta subito.

La regia e il tuo logo

Tutta la storia è una timeline sola, con timeScale per la velocità e le etichette start, arrive, stab, fill, reveal, knot, snip, pin, rest e unpick. Lo scucire rimette all’indietro il numero di punti mentre l’ago tira, poi la scena riparte da «arrive» con le righe inclinate dall’altra parte. Il telaio è un ovale scelto per dare le lettere più grandi possibile: tondo sul telefono, largo sul computer. Se IMAGE ha un indirizzo, si cuce la sua sagoma; un’immagine di un altro sito che non si può leggere viene cucita come un rettangolo e appare sopra il ricamo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'Hemwick'`	Il logo scritto: l’ago cuce il contorno di ogni lettera, poi la riempie.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto della parola: l’ago ne cuce la sagoma e il punto pieno prende i suoi colori.
`STITCH`	script.js	`0.1`	Quanto è lungo un punto filza lungo i bordi, in altezze di lettera.
`FILL`	script.js	`36`	Quanto è fitto il punto pieno: righe di filo per ogni altezza di lettera.
`ANGLE`	script.js	`35`	L’inclinazione del punto pieno, in gradi (0 orizzontale, 90 verticale). A ogni giro cambia di poco da una parte e dall’altra.
`HOOP`	script.js	`true`	Il telaio di legno con la vite d’ottone. Con false la stoffa resta libera e le pieghe si lisciano da sole.
`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 ricamato resta in mostra prima di essere scucito.
`LOOP`	script.js	`true`	Se il ricamo si scuce e ricomincia. Con false resta lì, con la luce che ci passa sopra e l’ago che dondola.

Provali nel Playground

Quando usarla

Per presentare un logo con calore e mestiere: un marchio di moda, una sartoria, un negozio di filati, una merceria, un laboratorio artigiano, una pagina di caricamento o un post per i social. Funziona con un marchio scritto e con un’immagine.

Sul telefono

La stessa storia, con le misure adattate: il telaio sceglie la forma che dà le lettere più grandi, quindi sul telefono diventa quasi tondo, e l’ago, le forbici e il filo sono grandi in proporzione. Un tocco la fa ripartire.

Con il movimento ridotto

Niente si muove: il telaio è già al suo posto, il contorno compare in dissolvenza, poi il punto pieno, poi il nodo e l’ago appuntato. Se la storia ricomincia, il ricamo sparisce in dissolvenza e ritorna.

Trappole

gsap.set con opacity scrive lo stile in linea, che vince sulla classe: l’ombra fuori dal telaio, opaca al 7% nel CSS, diventava nera piena. Per accenderla e spegnerla si usa l’attributo visibility.
Centinaia di punti come elementi separati, ognuno con la sua ombra e la sua luce, sono migliaia di nodi: si tengono come testo in pochi tracciati e se ne mostra solo l’inizio, tagliando la stringa.
Il clipPath con clipPathUnits userSpaceOnUse sta nelle coordinate dell’elemento che lo usa: messo sul gruppo dentro quello trasformato, taglia l’ago nel suo disegno e segue rotazione e scala (anche per l’ombra).
Un filo simulato nel ticker non sa dei salti della timeline: se la cruna si sposta troppo in un fotogramma il filo si ristende lungo la linea giusta e si assesta con settanta passaggi, altrimenti resterebbe tirato attraverso lo schermo.
Con un telaio di forma fissa un nome lungo restava minuscolo in una striscia sottile, e sul telefono il telaio lasciava vuoto metà schermo: ora si provano tutti gli ovali che contengono il logo e si prende quello con le lettere più grandi, il più tondo a parità.
Un’immagine presa da un altro sito non si può leggere su una canvas (getImageData dà errore): si chiede con crossOrigin e, se il server rifiuta, si ricarica senza, si cuce il suo rettangolo e l’immagine appare sopra il ricamo.
I movimenti dell’ago sono interpolazioni da una posizione nota a un’altra, mai valori letti al momento: così la timeline dà la stessa scena andando avanti, saltando o ripartendo da «arrive».

Librerie

GSAP 3.15.0, Gabarito (font variabile) 5.3.0.

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