Tiles that rise
SVG, Hover, Physics
NewFree
Back to the library
The orbit of equal areas
In the minimal style, on black, with real physics: a planet goes round a thin ellipse, fast near the Sun and slow far away, timed by Kepler’s equation. Every twelfth of the year a thin radius runs from the Sun to the planet; on the second lap two very different slices, one short and wide and one long and thin, fill with orange and the words one month: they have the same area. For the page of a made-up planetarium.
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 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
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.
14 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 orbit of equal areas” from Animorio and fit it into my siteWhat it does
On the black page a thin paper-coloured ellipse draws itself, starting from the point closest to the Sun; the major axis appears in dots from the centre outwards, the Sun (a small solid circle) settles in one of the foci with a small bounce and a little grey cross appears in the other focus. Then a planet, a small hollow circle, sets off from the point closest to the Sun and goes round the ellipse anticlockwise: it races as it passes the Sun and slows down far away, like a real planet. Every twelfth of its year a thin grey radius flicks out from the Sun to where it is: by the end of the first lap the ellipse is cut into twelve slices that all look different. On the second lap, as soon as the planet has crossed one, two slices fill with orange on a small spring, one near the Sun, short and wide, and one on the far side, long and very thin, and next to each one the words one month appear in italics: they have the same area, which is Kepler’s second law. Underneath the line Equal areas, equal times. rises letter by letter, gaining weight, with the name of the made-up planetarium, Aphelion. After a breath the radii draw back one after the other, the slices close, the planet and the Sun disappear and the ellipse rubs itself out; then it all starts again. A click starts it over. On a phone’s tall screen the ellipse stands upright, with the Sun at the top.
How it works
Time and place
GSAP only tweens the mean anomaly M, the planet’s time on its lap, linearly. On every frame Kepler’s equation M = E − e sin E is solved with eight Newton steps and gives the eccentric anomaly E; the point on the ellipse is (cos E, b sin E) round the centre, with the Sun in the focus at distance e. So the changing speed is not an ease: it is the physics.
The twelve radii
The twelve equal moments (M = k/12 of a lap) are turned into E once, giving twelve points on the ellipse. Each radius is a tween of its length from 0 to 1, starting exactly when the planet passes that point: power3.out, a flick that settles.
The slices
A slice is a path: from the Sun to the first point, an elliptical arc A (the same semi-axes, scaled from the Sun) to the second, then closed. It grows by scaling everything from the Sun with elastic.out(1, 0.65). The second slice is the one half a year later, on the other side: the same area, the opposite shape.
The labels on the normal
The words one month sit just outside the arc, along the ellipse’s normal halfway through the slice (b cos E, −sin E), and hang to the right, left, above or below depending on where the normal points on screen: so they never end up inside the filled slice.
Upright on a phone, click and reduced motion
Everything is in units of the semi-major axis and goes through one function that puts it on screen: when the screen is taller than wide that function stands the ellipse upright (and swaps the semi-axes of the arcs). A resize redraws everything. A click starts it over; with reduced motion the finished drawing, radii, slices, labels and title, fades in and stays.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
TITLE | script.js | 'Equal areas, equal times.' | The line under the orbit. |
ECC | script.js | 0.62 | How stretched the orbit is: 0 = a circle, 0.8 = a long ellipse. |
YEAR | script.js | 7 | The seconds the planet takes to go round once. |
SLICES | script.js | 12 | How many equal times the year is cut into (the radii). |
NEAR | script.js | 0 | Which slice near the Sun fills with orange (0 = the one after the closest point). |
HOLD | script.js | 1.4 | The seconds the finished drawing stays after the second lap. |
When to use it
On the page of a planetarium, an observatory, a science museum or a talk; as the opening of a physics lesson or course; anywhere that wants an idea of measured time, of seasons or of cycles that last the same even when they look different.
On phones
The same animation with the sizes adapted: on the tall screen the ellipse stands upright, with the Sun at the top, so it is as large as the width allows; the one month labels stay above and below the ends and the line goes underneath.
With reduced motion
Nothing moves: the orbit with its twelve radii, the two orange slices with their labels, the planet standing still and the line fade in and stay.
Pitfalls
- The label of the slice near the Sun, placed along the direction from the Sun, ended up half inside the orange slice and could not be read: it goes along the ellipse’s normal.
- On a phone the lying ellipse, as wide as the screen minus the room for the labels, would come out tiny and the label at the far end would go off the screen: upright it all fits, and larger.
- Making the slices’ arrays again on reset (S.slices = [0, 0]) cut the timeline’s tweens loose, still tweening the old arrays: they are cleared with fill(0).
Libraries
GSAP 3.15.0, Fraunces (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 6.1 KB; the libraries: GSAP 28 KB.
Testing
Tested on 19 October 2026
- Desktop: Done
- Phone: Done
- Reduced motion: Done
- Safari on iPhone: To do
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.
