L’orbita delle aree uguali

SVG, FisicaGSAPMediaPeso compresso: Demo 6,1 KBGSAP 28 KBGratisScarica lo zip

Nello stile minimal, su fondo nero, con fisica vera: un pianeta gira su un’ellisse sottile, veloce vicino al Sole e lento lontano, con i tempi dell’equazione di Keplero. Ogni dodicesimo d’anno un raggio sottile va dal Sole al pianeta; al secondo giro due spicchi diversissimi, uno corto e largo e uno lungo e sottile, si riempiono d’arancio con la scritta one month: hanno la stessa area. Per la pagina di un planetario inventato.

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 orbit of equal areas</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fraunces@5.3.0/full.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage aria-label="Aphelion Planetarium: equal areas, equal times. Click to start again.">
    <!-- a planet on an ellipse, timed by Kepler's equation: twelve equal times cut twelve equal areas -->
    <svg class="scene" data-scene aria-hidden="true">
      <g data-sectors></g>
      <path class="axis" data-axis d="" />
      <path class="orbit" data-orbit d="" pathLength="1" />
      <g data-radii></g>
      <path class="focus" data-focus d="" />
      <circle class="sun" data-sun r="6" />
      <circle class="planet" data-planet r="5" />
      <g class="tags" data-tags>
        <text class="tag" data-tag="0">one month</text>
        <text class="tag" data-tag="1">one month</text>
      </g>
    </svg>

    <div class="caption" data-caption>
      <p class="caption__title" data-title>Equal areas, equal times.</p>
      <p class="caption__note" data-note>Aphelion Planetarium, the second law</p>
    </div>
  </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 «L’orbita delle aree uguali» da Animorio e adattala al mio sito

Collega Animorio a Claude Code

Cosa fa

Sul fondo nero si disegna un’ellisse sottile color carta, partendo dal punto più vicino al Sole; l’asse maggiore compare a puntini dal centro verso i lati, il Sole (un piccolo cerchio pieno) si posa in uno dei fuochi con un piccolo rimbalzo e nell’altro fuoco compare una crocetta grigia. Poi un pianeta, un cerchietto vuoto, parte dal punto più vicino al Sole e gira sull’ellisse in senso antiorario: corre quando passa accanto al Sole e rallenta quando è lontano, come un pianeta vero. Ogni dodicesimo del suo anno un raggio grigio sottile scatta dal Sole fino al punto in cui si trova: alla fine del primo giro l’ellisse è tagliata in dodici spicchi che sembrano tutti diversi. Al secondo giro, appena il pianeta ne ha attraversato uno, due spicchi si riempiono d’arancio con una piccola molla, uno vicino al Sole, corto e largo, e uno dalla parte opposta, lungo e sottilissimo, e accanto a ognuno compare in corsivo one month: hanno la stessa area, ed è la seconda legge di Keplero. Sotto sale la frase Equal areas, equal times. lettera per lettera, prendendo peso, e il nome del planetario inventato, Aphelion. Dopo un respiro i raggi rientrano uno dopo l’altro, gli spicchi si chiudono, il pianeta e il Sole spariscono e l’ellisse si cancella; poi tutto ricomincia. Un clic lo fa ripartire. Sullo schermo alto del telefono l’ellisse sta in piedi, col Sole in alto.

Come funziona

Il tempo e il posto

GSAP anima solo l’anomalia media M, cioè il tempo del pianeta sul suo giro, in modo lineare. A ogni fotogramma l’equazione di Keplero M = E − e sin E si risolve con otto passi di Newton e dà l’anomalia eccentrica E; il punto sull’ellisse è (cos E, b sin E) attorno al centro, col Sole nel fuoco a distanza e. Così la velocità che cambia non è un’ease: è la fisica.

I dodici raggi

I dodici istanti uguali (M = k/12 di giro) si convertono una volta sola in E, cioè in dodici punti dell’ellisse. Ogni raggio è un tween da 0 a 1 della sua lunghezza, che parte esattamente quando il pianeta passa per quel punto: power3.out, uno scatto che si posa.

Gli spicchi

Uno spicchio è un path: dal Sole al primo punto, un arco ellittico A (stessi semiassi, ingranditi dal Sole) fino al secondo, e chiuso. Cresce scalando tutto dal Sole con elastic.out(1, 0.65). Il secondo spicchio è quello di mezzo anno dopo, dall’altra parte: stessa area, forma opposta.

Le scritte sulla normale

La scritta one month sta appena fuori dall’arco, lungo la normale dell’ellisse a metà spicchio (b cos E, −sin E), e si aggancia a destra, a sinistra, sopra o sotto secondo dove punta la normale sullo schermo: così non entra mai nello spicchio pieno.

In piedi sul telefono, clic e movimento ridotto

Tutto è in unità del semiasse maggiore e passa da una funzione che lo porta sullo schermo: quando lo schermo è più alto che largo la funzione gira l’ellisse in verticale (e scambia i semiassi degli archi). Il ridimensionamento ridisegna tutto. Un clic riparte da capo; con il movimento ridotto il disegno finito, raggi, spicchi, scritte e titolo, compare in dissolvenza e resta.

Valori da cambiare

Nome	File	Di partenza	Cosa cambia
`TITLE`	script.js	`'Equal areas, equal times.'`	La frase sotto l’orbita.
`ECC`	script.js	`0.62`	Quanto è schiacciata l’orbita: 0 = un cerchio, 0.8 = un’ellisse lunga.
`YEAR`	script.js	`7`	I secondi che il pianeta impiega per un giro.
`SLICES`	script.js	`12`	In quanti tempi uguali si taglia l’anno (i raggi).
`NEAR`	script.js	`0`	Quale spicchio vicino al Sole si riempie d’arancio (0 = quello dopo il punto più vicino).
`HOLD`	script.js	`1.4`	I secondi in cui il disegno finito resta fermo dopo il secondo giro.

Provali nel Playground

Quando usarla

Nella pagina di un planetario, di un osservatorio, di un museo della scienza o di una conferenza; come apertura di una lezione o di un corso di fisica; ovunque serva un’idea di tempo misurato, di stagioni o di cicli che durano uguale anche quando sembrano diversi.

Sul telefono

Le stesse animazioni con le misure adattate: sullo schermo alto l’ellisse sta in piedi, col Sole in alto, così è grande quanto la larghezza permette; le scritte one month restano sopra e sotto le punte e la frase va sotto.

Con il movimento ridotto

Niente si muove: l’orbita con i dodici raggi, i due spicchi arancio con le scritte, il pianeta fermo e la frase compaiono in dissolvenza e restano.

Trappole

La scritta dello spicchio vicino al Sole, messa lungo la direzione dal Sole, finiva per metà dentro lo spicchio arancio e non si leggeva: va messa lungo la normale dell’ellisse.
Sul telefono l’ellisse sdraiata, larga quanto lo schermo meno lo spazio per le scritte, verrebbe piccolissima e la scritta della punta lontana uscirebbe dallo schermo: in piedi entra tutta, più grande.
Ricreare gli elenchi degli spicchi nel reset (S.slices = [0, 0]) staccava i tween della timeline, che animavano ancora gli elenchi vecchi: si azzerano con fill(0).

Librerie

GSAP 3.15.0, Fraunces (font variabile) 5.3.0.

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