Il compasso che divide il cerchio

SVG, IntroGSAPMediaPeso compresso: Demo 6,2 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal: un compasso di tre linee sottili punta il centro, traccia un cerchio e poi ci cammina sopra a passi lunghi quanto il raggio, lasciando un graffio dove atterra. In sei passi il cerchio è diviso: sei raggi escono dal centro, uno spicchio si riempie di vermiglio e sotto sale il nome di uno studio di architettura.

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 compass that divides the circle</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="stage" data-stage aria-label="Sixfold, architecture studio. Click to draw it again.">
    <!-- the drawing: a compass draws a circle, walks round it in six steps and the circle splits into six -->
    <svg class="scene" data-scene aria-hidden="true">
      <path class="slice" data-slice d="" />
      <g class="radii" data-radii></g>
      <path class="circle" data-circle d="" />
      <g class="marks" data-marks></g>
      <path class="cross" data-cross d="" />
      <g class="compass" data-compass>
        <line class="leg" data-leg-a />
        <line class="leg" data-leg-b />
        <line class="stem" data-stem />
        <circle class="knob" data-knob r="3.5" />
      </g>
    </svg>

    <p class="caption" data-caption>
      <span class="caption__name" data-name>Sixfold</span>
      <span class="caption__note" data-note>Architecture studio</span>
    </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.

13 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 compasso che divide il cerchio» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Su una pagina bianco caldo arriva un compasso disegnato con tre linee sottili: due gambe uguali e una piccola impugnatura sopra la cerniera, visto un po’ dall’alto, così la cerniera sta sempre dritta sopra le punte. Scende sul foglio, punta il centro (una crocetta sottile) e si apre fino al raggio, un capello oltre e indietro. La punta che si muove fa il giro intero e il cerchio si disegna, piano all’inizio e alla fine. Poi il compasso cammina sul cerchio: una punta resta ferma, l’altra passa sopra il centro e atterra sulla linea, va un filo oltre e torna, lasciando un graffietto grigio dove tocca; al passo dopo le punte si scambiano. Dopo sei passi è tornato al punto di partenza, perché il raggio sta esattamente sei volte nel cerchio. Il compasso si chiude e si alza sparendo, sei raggi escono dal centro verso i sei graffi uno dopo l’altro, superano di un pelo il cerchio e rientrano, e uno spicchio si riempie di vermiglio con una piccola molla. Sotto sale il nome dello studio inventato, Sixfold, lettera per lettera, prendendo peso e larghezza, e sotto ancora Architecture studio. Dopo un respiro lo spicchio si richiude, i raggi rientrano, i graffi svaniscono e il cerchio si srotola all’indietro; poi tutto ricomincia. Un clic lo fa ripartire da capo.

Come funziona

Tutto in raggi

Lo stato del disegno è fatto di numeri in unità del raggio, col centro in zero: le due punte del compasso, i gradi di cerchio disegnati, quanto è uscito ogni raggio, la misura dello spicchio. GSAP anima solo quei numeri e una funzione render li trasforma in attributi SVG (path con archi A, line, circle) moltiplicandoli per il raggio in pixel. Così un ridimensionamento a metà animazione ridisegna tutto alla misura nuova senza ricostruire niente.

Il compasso visto un po’ dall’alto

Le due gambe hanno la stessa lunghezza LEG: la cerniera sta sopra il punto medio delle punte, a un’altezza che viene da Pitagora, √(L² − (d/2)²), schiacciata un poco per la prospettiva. Tenendola sempre dritta in su, il compasso si legge come un oggetto in piedi sul foglio in qualunque posizione, anche quando le punte sono una sopra l’altra.

Camminare sul cerchio

Il trucco geometrico: la corda di un sesto di cerchio è lunga quanto il raggio. Al primo passo il compasso ruota intorno alla punta sul cerchio e l’altra va dal centro al punto a 60 gradi; dal secondo in poi ruota di 120 gradi intorno alla punta ferma, passando sopra il centro, e le punte si alternano. Ogni passo è un tween di un angolo con back.out(LAND): la punta va un filo oltre e torna, e il graffio (un arco di raggio uguale intorno alla punta ferma) si allunga fino al punto più lontano raggiunto.

I raggi, lo spicchio e il nome

I raggi escono con back.out(0.9), quindi superano il cerchio di pochi pixel e rientrano, sfalsati di 70 millesimi. Lo spicchio è un path a settore scalato dal centro con elastic.out(1, 0.6). Il nome è diviso in lettere: salgono con back.out e intanto font-weight va da 300 a 560 e font-stretch (Instrument Sans, legato alla variabile --w) da 80 a 100.

Giro, clic e movimento ridotto

Tutto è una timeline sola in pausa, che a onComplete rimette lo stato a zero e riparte: il video dell’anteprima vede il giro intero. Un clic chiama la stessa ripartenza. Con il movimento ridotto il disegno finito (cerchio, graffi, raggi, spicchio e nome) compare in dissolvenza e resta fermo.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`WORD`	script.js	`'Sixfold'`	Il nome che sale sotto il cerchio.
`DRAW`	script.js	`1.4`	I secondi che il compasso impiega a disegnare il cerchio intero.
`STEP`	script.js	`0.46`	I secondi di ognuno dei sei passi sul cerchio.
`LAND`	script.js	`1.5`	Quanto ogni passo va oltre prima di fermarsi: 0 = si ferma secco, 3 = rimbalza di più.
`SLICE`	script.js	`5`	Quale dei sei spicchi si riempie di vermiglio (da 0 a 5, in senso orario partendo da destra).
`LEG`	script.js	`0.95`	La lunghezza delle gambe del compasso, in raggi (da 0.6 a 1.4): più corte, la cerniera sta più bassa.
`HOLD`	script.js	`2.2`	I secondi in cui il disegno finito resta fermo prima di disfarsi.

Provali nel Playground

Quando usarla

Come apertura o caricamento col marchio di uno studio di architettura, di un geometra, di una scuola di design o di un laboratorio di piastrelle; come illustrazione di una pagina «metodo» o «come lavoriamo»; ovunque serva un’idea di precisione e di costruzione fatta a mano.

Sul telefono

Le stesse animazioni con le misure adattate: il cerchio si allarga quasi a tutto lo schermo (resta lo spazio per i graffi ai lati), il compasso cammina sempre dentro il cerchio e sopra c’è il posto per la cerniera; il nome resta sotto.

Con il movimento ridotto

Niente si muove: il disegno finito, col cerchio, i sei graffi, i raggi, lo spicchio vermiglio e il nome, compare in dissolvenza e resta.

Trappole

La prima versione metteva la cerniera sul lato perpendicolare alle punte: girando intorno al centro e camminando sul cerchio la cerniera finiva fuori, sotto o dentro a caso e il compasso si leggeva come due linee qualsiasi. Con la cerniera sempre dritta in su (visto un po’ dall’alto) si legge sempre come un compasso in piedi.
Scegliendo il lato della cerniera «lontano dal centro» il compasso saltava dall’altra parte proprio a metà passo, quando la punta che si muove passa sopra il centro: la direzione fissa in su non ha salti.
Il compasso mentre cammina arriva fino a circa 1,6 raggi sopra il centro: il raggio del cerchio si calcola lasciando quello spazio sopra, altrimenti l’impugnatura usciva dallo schermo.
Il graffio si allunga solo fino al punto più lontano raggiunto, non segue la punta quando torna indietro dall’overshoot: altrimenti si accorciava e sembrava cancellarsi.

Librerie

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

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

Collaudo

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