Il logo dai tre cerchi

Intro, SVG, TestoGSAPMediaPeso compresso: Demo 9,0 KBGSAP 28 KBGratisScarica lo zip

Un’intro di logo in stile minimal: tre cerchi sottili arrivano rotolando su una riga, si fermano dondolando come ruote, quello in mezzo sale con una molla e i tre diventano un diagramma di Venn; l’area che hanno in comune si riempie di colore, ci cade dentro l’iniziale e i cerchi si ritirano nel bordo di quella forma, che resta come monogramma accanto al nome. Nel Playground ci metti il tuo nome, scegli la lettera, quanto si sovrappongono i cerchi 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 three-circle logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/instrument-sans@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, rolls three thin circles into a Venn diagram and fills what they share -->
    <svg class="palco" data-stage role="img" aria-label="trevo" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <clipPath id="shared-area"><path data-shared /></clipPath>
        <clipPath id="name-box"><rect data-name-box /></clipPath>
      </defs>
      <g data-mark>
        <!-- the floor the circles roll on -->
        <line class="suolo" data-floor />
        <!-- what the three circles share: a disc of colour that grows inside it, and the initial cut out of it -->
        <g clip-path="url(#shared-area)">
          <circle class="comune" data-fill r="0" />
          <text class="iniziale" data-initial></text>
        </g>
        <!-- the three circles, each with a small tick on its rim that shows it turning -->
        <g data-circles></g>
      </g>
      <!-- the name, one letter at a time, or the picture -->
      <g data-name></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

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 dai tre cerchi» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su un fondo bianco caldo e vuoto si disegna, dal centro verso i lati, una riga grigia sottilissima: il pavimento. Da sinistra arriva rotolando un cerchio fatto di una linea sola, da destra un altro: ognuno ha una piccola tacca sul bordo che gira mentre rotola, così si vede che è una ruota. Si fermano sovrapposti, vanno qualche pixel oltre il loro posto e dondolano indietro come una ruota che si assesta. Un terzo cerchio arriva da sinistra, passa attraverso il primo e si ferma in mezzo, sopra gli altri due. Le tacche rientrano nei bordi, il cerchio in mezzo sale con una molla sopra gli altri due, il pavimento si ripiega verso il centro e i due cerchi sotto sentono l’arrivo con un fremito di un pixel: ora i tre sono un diagramma di Venn, e ognuno passa per il centro degli altri due. L’area che i tre hanno in comune si riempie di vermiglio partendo dal suo centro, e dentro ci cade l’iniziale del marchio inventato, trevo, ritagliata nel colore: entra stretta e leggera, un poco più in basso, poi si allarga e prende peso. Intanto ogni cerchio si ritira: si accorcia dai due capi finché resta solo l’arco che dà all’area comune, e lì sparisce. Rimane una forma a triangolo curvo, il monogramma, che scivola di lato e si mette al suo posto; il nome arriva accanto una lettera dopo l’altra, ognuna stretta e leggera che si allarga e prende peso. Mentre il logo è in mostra un’onda di peso attraversa il nome e l’iniziale prende fiato. Dopo qualche secondo il nome se ne va, il colore rientra nel centro e tutto ricomincia. Un clic la fa ripartire. Al posto del nome si può mettere un’immagine, che si scopre accanto al monogramma.

Come funziona

Tre cerchi e l’area che hanno in comune

I centri stanno ai vertici di un triangolo equilatero, due sotto e uno sopra, a una distanza che si misura in raggi (OVERLAP). Due cerchi si incrociano su una retta che passa per il centro del terzo: il punto interno sta a metà fra i due centri più la radice di (1 meno un quarto della distanza al quadrato), verso il centro dei tre. L’area comune è fatta di tre archi, uno per cerchio, fra i suoi due punti d’incrocio; si disegna come un tracciato di più di 200 punti ordinati per angolo attorno al centro, e diventa un clipPath. Con OVERLAP a 1 ogni cerchio passa per il centro degli altri due e l’area è un triangolo di Reuleaux, largo quanto è alto.

Rotolare senza strisciare

Ogni cerchio è un gruppo spostato con translate; dentro c’è un secondo gruppo che porta la tacca e gira con rotate. L’angolo non si anima: si ricava dallo spazio percorso, (x meno il posto d’arrivo) diviso il raggio, in radianti, così la ruota non striscia mai e al suo posto la tacca è dritta in alto. La x arriva qualche pixel oltre con power3.out e torna con elastic.out(1, 0.38): è il dondolio di una ruota che si ferma, e la tacca dondola con lei.

Il cerchio che si ritira nel suo arco

Il tracciato di ogni cerchio comincia dalla parte opposta all’arco che dà all’area comune. Con stroke-dasharray se ne mostra un tratto lungo v e con stroke-dashoffset lo si centra sulla metà del tracciato, cioè proprio su quell’arco: quando v scende dalla circonferenza alla lunghezza dell’arco, il cerchio si accorcia dai due capi insieme e si posa sul bordo della forma colorata. Quando v è il cerchio intero il tratteggio si toglie, perché nel punto dove il tratto incontra il suo inizio si vedrebbe una giuntura.

Il colore e l’iniziale

Il colore è un cerchio pieno che cresce dal centro dentro il clipPath dell’area comune, così prende la sua forma esatta. L’iniziale è un text del colore del fondo, ritagliato dallo stesso clipPath: la sua scatola d’inchiostro, misurata su una canvas, deve stare nel cerchio più grande che entra nell’area (raggio 1 meno la distanza dei centri divisa per radice di 3). Entra a larghezza 75 e peso 400 e arriva a 100 e 700 con font-variation-settings, salendo da sotto con back.out.

La camera, il nome e il tuo logo

Tutto il disegno sta in un gruppo con translate, scale e translate: una camera che guarda il diagramma grande al centro e poi si sposta sul logo finale con power3.inOut. Lo spessore delle linee è diviso per la scala, così restano di un pixel e mezzo. Il nome è in Instrument Sans, un carattere variabile con larghezza e peso: ogni lettera è un text misurato su una canvas e arriva stretta e leggera. Tutta l’entrata è una timeline sola con le etichette start, roll, rise, fill, reveal, name, rest e leave. Se IMAGE ha un indirizzo, l’immagine prende il posto del nome e si scopre con un ritaglio che si allarga; nel Playground c’è il tasto per caricare un file.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`NAME`	script.js	`'trevo'`	Il nome del marchio, scritto accanto al monogramma. La sua prima lettera è anche l’iniziale nel monogramma, se MONOGRAM è vuoto.
`IMAGE`	script.js	`''`	Il logo come immagine: l’indirizzo di un file, oppure caricalo dal tuo computer. Se c’è, prende il posto del nome accanto al monogramma.
`MONOGRAM`	script.js	`''`	La lettera ritagliata nell’area comune. Vuoto vuol dire la prima lettera del nome; va bene qualsiasi lettera.
`OVERLAP`	script.js	`1`	Quanto sono lontani i centri dei cerchi, in raggi: 1 vuol dire che ogni cerchio passa per il centro degli altri due; meno di 1 si sovrappongono di più e l’area comune è più grande e rotonda, più di 1 è più piccola e appuntita.
`SETTLE`	script.js	`6`	Di quanti pixel un cerchio rotola oltre il suo posto prima di dondolare indietro (0 = si ferma secco).
`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 di ricominciare.
`LOOP`	script.js	`true`	Se il colore rientra e i cerchi tornano a rotolare. Con false il logo resta, e ogni tanto un’onda di peso attraversa il nome.

Provali nel Playground

Quando usarla

Per presentare un marchio che nasce da un incontro: uno studio con tre soci, un’agenzia, una società di consulenza, un servizio che mette insieme tre cose, un marchio di design, un portfolio, un caricamento, l’anteprima per un cliente, un post per i social. Il diagramma di Venn parla di ciò che si ha in comune; sta bene dove il resto della pagina è sobrio. Funziona con un nome scritto e con un’immagine.

Sul telefono

La stessa animazione con le misure adattate: il diagramma occupa quasi tutta la larghezza dello schermo e il logo finale si stringe per entrarci, con le linee sempre di un pixel e mezzo. Un tocco la fa ripartire.

Con il movimento ridotto

Niente rotola e niente si sposta: il diagramma compare in dissolvenza già fatto, l’area comune sfuma nel colore con l’iniziale, poi tutto sfuma e il logo compare già al suo posto accanto al nome. Se l’animazione ricomincia, anche il logo se ne va in dissolvenza.

Trappole

La dimensione dell’iniziale era calcolata in centesimi del carattere ma moltiplicata ancora per cento: la lettera, del colore del fondo, diventava enorme e copriva tutta l’area colorata, che sembrava vuota. Le misure della canvas, divise per 100, sono già per un carattere alto 1.
Un tratteggio che comincia con un tratto lungo zero («0 x v ...») lascia lo stesso un puntino nel punto dove comincia il tracciato, anche con i capi dritti: la finestra visibile si fa con un tratto lungo v e stroke-dashoffset.
Con il cerchio intero il tratto finiva proprio dove cominciava e nel punto d’incontro si vedeva una piccola giuntura chiara: quando il cerchio è tutto disegnato il tratteggio si toglie (none) e il tracciato si chiude con Z.
Il nome arrivava mentre il monogramma stava ancora scivolando al suo posto e la prima lettera ci finiva sopra: le lettere partono quando la camera ha fatto quasi tutta la strada.
Un cerchio senza segni non sembra girare: la tacca sul bordo, girata in base allo spazio percorso, è l’unico modo di far vedere che rotola.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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