Il pulsante d’invio
Pulsanti, Transizioni, SVG
NuovaGratis
Tutti i componenti
Il grafico che si disegna
Un grafico a linea che si disegna da sinistra mentre il totale conta; un cursore segue il puntatore o il dito di punto in punto e illumina la linea fino a sé, e cambiando periodo la curva si piega nella nuova mentre i numeri contano ai loro valori.
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.
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>The drawing chart</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/sora@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="stage">
<!-- the chart: a line that draws itself, with its area filling in behind. A cursor follows the pointer or the
finger from point to point, lighting the line up to it; changing the period, the curve bends into the new
one and the numbers count to their new values. The chart is drawn by the script -->
<section class="chart" aria-labelledby="chart-title" data-chart>
<div class="chart__head">
<div>
<p class="chart__title" id="chart-title">Bookings</p>
<p class="chart__total"><span data-total>0</span><span class="chart__delta" data-delta></span></p>
</div>
<div class="chart__ranges" role="tablist" aria-label="Period" data-ranges data-autoclic>
<span class="chart__pill" aria-hidden="true" data-pill></span>
</div>
</div>
<div class="chart__plot" tabindex="0" role="img" aria-describedby="chart-said" data-plot>
<svg class="chart__svg" viewBox="0 0 600 240" aria-hidden="true" data-svg>
<defs>
<linearGradient id="chart-area" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-opacity="0.32"/>
<stop offset="1" stop-opacity="0"/>
</linearGradient>
<clipPath id="chart-lit"><rect x="-10" y="-10" height="270" data-lit/></clipPath>
<clipPath id="chart-drawn"><rect x="-10" y="-10" height="270" data-drawn/></clipPath>
</defs>
<g class="chart__grid" data-grid></g>
<g clip-path="url(#chart-drawn)">
<path class="chart__area" fill="url(#chart-area)" data-area/>
<path class="chart__line chart__line--dim" data-dim/>
<path class="chart__line" clip-path="url(#chart-lit)" data-line/>
</g>
<line class="chart__cursor" y1="8" y2="214" data-cursor/>
<g class="chart__days" data-days></g>
</svg>
<div class="chart__tip" aria-hidden="true" data-tip><span data-tip-day></span><strong data-tip-value></strong></div>
</div>
<p class="sr" id="chart-said" aria-live="polite" data-said></p>
</section>
</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.
15 valori da cambiare
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 grafico che si disegna» da Animorio e adattala al mio sitoCosa fa
Su un fondo nero una scheda scura: Bookings, un totale grande con accanto la variazione in verde (+12.4%), a destra tre periodi, 7 days, 30 days e 12 months, e sotto un grafico a linea verde menta con l’area sfumata nel buio, le righe dei numeri a sinistra e i giorni sotto. Aprendo la pagina la linea si disegna da sinistra a destra con la sua area, mentre il totale conta da zero. Passando sul grafico una linea tratteggiata segue il puntatore di punto in punto, scivolando su una molla: la linea è accesa fino a lei e spenta dopo, e sopra corre un’etichetta bianca con il giorno e il numero, che segue la curva. Scegliendo un altro periodo, una pillola scivola sotto il nome, la curva si piega in quella nuova, i numeri a sinistra e le date sotto si scambiano, il totale conta fino al nuovo valore e la variazione cambia; quella dei dodici mesi è rossa (−3.2%).
Come funziona
Una curva di tanti punti
Ogni periodo ha i suoi numeri (7, 30 o 12), ma la curva si disegna sempre attraverso gli stessi 90 punti, calcolati con una Catmull-Rom arrotondata di ROUND: così passare da un periodo all’altro vuol dire solo spostare 90 altezze. Il disegno è largo quanto la scheda, così le scritte restano di 11 pixel anche al telefono.
Si disegna da sola
Linea e area stanno sotto un clipPath che si allarga da sinistra a destra in DRAW secondi, e intanto il totale conta da zero. La scala a sinistra ha quattro passi tondi (1, 1,5, 2, 2,5, 3, 4, 5, 6 o 8 per una potenza di dieci) sopra il punto più alto.
Il cursore
Il puntatore sceglie il punto più vicino e il cursore ci va con una molla (CURSOR), calcolata sul ticker di GSAP. Le linee sono due: una spenta sotto e una accesa ritagliata fino al cursore; l’etichetta prende l’altezza della curva lì dove si trova il cursore, così scivola lungo la linea.
Un altro periodo
Le 90 altezze vanno da quelle vecchie alle nuove in MORPH secondi con expo.inOut; i numeri a sinistra e le date sotto si scambiano in dissolvenza, il totale conta fino al nuovo valore, la variazione si rimpicciolisce e torna, e la pillola scivola sotto il periodo con back.out.
Tastiera, dito e anteprima
Il grafico si raggiunge col tasto Tab: le frecce, Inizio e Fine spostano il cursore e una riga per gli screen reader legge giorno e numero; i periodi sono tab con le frecce. Col dito si scorre sul grafico di lato (la pagina scorre ancora in verticale) e l’etichetta resta un momento. Un clic da script sui periodi (l’anteprima della libreria) sceglie il successivo.
Valori da cambiare
| Nome | File | Di partenza | Cosa cambia |
|---|---|---|---|
DRAW | script.js | 1.4 | I secondi in cui la linea si disegna. |
MORPH | script.js | 0.9 | I secondi in cui la curva si piega in un altro periodo. |
CURSOR | script.js | [320, 0.78] | La molla del cursore: quanto è rigida e quanto è frenata. |
ROUND | script.js | 0.5 | Quanto è tonda la curva fra due punti (0 = linee dritte). |
Quando usarla
Per un pannello di controllo, le statistiche di un sito o di un negozio, le prenotazioni di una struttura, i risultati di un progetto: ovunque un numero cambia nel tempo.
Sul telefono
I periodi vanno sotto il totale e il grafico prende la larghezza dello schermo, con le scritte sempre della stessa grandezza. Col dito si scorre sul grafico di lato per leggere i punti, e la pagina scorre ancora in verticale.
Con il movimento ridotto
La linea compare già disegnata, il cursore salta di punto in punto, cambiando periodo la curva e i numeri cambiano di colpo e la pillola si sposta senza scivolare.
Trappole
- Due periodi con un numero diverso di punti non si possono trasformare l’uno nell’altro punto per punto: la curva si ricampiona sempre sugli stessi 90 punti, e si spostano solo le loro altezze.
- Un SVG con un viewBox fisso rimpicciolisce anche le scritte: al telefono i numeri diventerebbero di 5 pixel. Il disegno prende la larghezza vera della scheda e si ridisegna quando cambia.
- Una scala che arriva a un numero qualsiasi dà tacche come 667 e 1.333: il massimo si arrotonda a quattro passi tondi sopra il punto più alto.
- stop-color nel markup non legge le variabili CSS: il colore del gradiente dell’area si dà dal foglio di stile.
Librerie
GSAP 3.15.0, Sora (font variabile) 5.3.0.
Compressi con gzip, i tre file della demo pesano 7,0 KB; le librerie: GSAP 28 KB.
Collaudo
Provata il 3 ottobre 2026
- Computer: Fatto
- Telefono: Fatto
- Movimento ridotto: Fatto
- Safari su iPhone: Fatto
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.
