The send button
Buttons, Transitions, SVG
NewFree
All components
The drawing chart
A line chart that draws itself from the left while the total counts up; a cursor follows the pointer or the finger from point to point and lights the line up to it, and changing the period the curve bends into the new one while the numbers count to their new values.
The code
A folder that runs on its own: index.html, style.css, script.js and the libraries from a CDN. The React and Vue tabs hold the same demo as a ready component, which switches its animations off when it leaves the page.
<!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
Change values, colours and text with the controls and watch the animation respond live. Or write in the code yourself. Then download the folder with your changes.
15 values to change
Or ask Claude Code for it
With the Animorio connector, Claude Code takes it from here, guide included, and fits it into your project. Paste this request:
Take “The drawing chart” from Animorio and fit it into my siteWhat it does
On a black background a dark card: Bookings, a big total with the change next to it in green (+12.4%), on the right three periods, 7 days, 30 days and 12 months, and below a mint green line chart with its area fading into the dark, the number lines on the left and the days underneath. When the page opens the line draws itself from left to right with its area, while the total counts up from zero. Moving over the chart a dashed line follows the pointer from point to point, gliding on a spring: the line is lit up to it and dim after it, and above it runs a white label with the day and the number, following the curve. Choosing another period, a pill slides under its name, the curve bends into the new one, the numbers on the left and the dates underneath swap, the total counts to its new value and the change changes; the twelve months’ one is red (−3.2%).
How it works
A curve of many points
Each period has its own numbers (7, 30 or 12), but the curve is always drawn through the same 90 points, worked out with a Catmull-Rom rounded by ROUND: so going from one period to another only means moving 90 heights. The drawing is as wide as the card, so its words stay 11 pixels on a phone too.
It draws itself
Line and area sit under a clipPath that widens from left to right in DRAW seconds, while the total counts up from zero. The scale on the left has four round steps (1, 1.5, 2, 2.5, 3, 4, 5, 6 or 8 times a power of ten) above the highest point.
The cursor
The pointer picks the nearest point and the cursor goes there on a spring (CURSOR), worked out on GSAP’s ticker. There are two lines: a dim one underneath and a lit one cut up to the cursor; the label takes the curve’s height where the cursor is, so it slides along the line.
Another period
The 90 heights go from the old ones to the new ones in MORPH seconds with expo.inOut; the numbers on the left and the dates underneath swap with a fade, the total counts to its new value, the change shrinks and comes back, and the pill slides under the period with back.out.
Keys, fingers and the preview
The chart is reached with Tab: the arrows, Home and End move the cursor and a line for screen readers reads the day and the number; the periods are tabs with the arrows. A finger slides across the chart sideways (the page still scrolls up and down) and the label stays a moment. A click from a script on the periods (the library’s preview) picks the next one.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
DRAW | script.js | 1.4 | The seconds the line takes to draw itself. |
MORPH | script.js | 0.9 | The seconds the curve takes to bend into another period. |
CURSOR | script.js | [320, 0.78] | The cursor’s spring: how stiff it is and how much it is held back. |
ROUND | script.js | 0.5 | How round the curve is between two points (0 = straight lines). |
When to use it
For a dashboard, a site’s or a shop’s statistics, a place’s bookings, a project’s results: wherever a number changes over time.
On phones
The periods move under the total and the chart takes the width of the screen, its words always the same size. A finger slides across the chart sideways to read the points, and the page still scrolls up and down.
With reduced motion
The line appears already drawn, the cursor jumps from point to point, changing period the curve and the numbers change at once and the pill moves without sliding.
Pitfalls
- Two periods with a different number of points cannot be turned into each other point by point: the curve is always resampled on the same 90 points, and only their heights move.
- An SVG with a fixed viewBox shrinks its words too: on a phone the numbers would become 5 pixels. The drawing takes the card’s real width and is redrawn when it changes.
- A scale reaching any number gives ticks like 667 and 1,333: the top is rounded to four round steps above the highest point.
- stop-color in the markup does not read CSS variables: the area gradient’s colour is set from the stylesheet.
Libraries
GSAP 3.15.0, Sora (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.0 KB; the libraries: GSAP 28 KB.
Testing
Tested on 3 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: Done
License
Use it in your own projects and in your clients’ projects. Do not resell it or redistribute it as is. GSAP stays under its own Standard license. Full license.
