Falling tools
Physics, Hover
NewFree
Back to the library
The double pendulum that draws
In the minimal style, with real physics: on a black page a double pendulum of two thin rods, with a small vermilion weight at the end that draws its own path with a fading line. The motion is chaotic and never comes back the same; below, the word erratic feels the weight passing over it and the letter under it grows bolder and narrower. The weight can be taken with the mouse or a finger and let go anywhere.
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>Erratic</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>
<!-- the weight at the end of the pendulum can be taken and let go; a click lets it go from its first pose again -->
<main class="stage" data-stage tabindex="0" role="button" aria-label="A double pendulum that draws its own path and never swings the same way twice. Drag the weight and let it go.">
<header class="top">
<span class="top__brand">Erratic</span>
<span class="top__note">Generative prints, never the same twice</span>
</header>
<canvas class="trail" data-trail aria-hidden="true"></canvas>
<svg class="rig" data-svg aria-hidden="true">
<path class="mount" data-mount d="" />
<line class="rod" data-rod1 x1="0" y1="0" x2="0" y2="0" />
<line class="rod" data-rod2 x1="0" y1="0" x2="0" y2="0" />
<circle class="joint" data-joint r="3.5" cx="0" cy="0" />
<circle class="joint" data-pivot r="2" cx="0" cy="0" />
<circle class="bob" data-bob r="5.5" cx="0" cy="0" />
</svg>
<!-- the word: every letter gets heavier while the weight swings above it -->
<h1 class="word" data-word>erratic</h1>
<p class="hint" data-hint>Drag the weight and let it go.</p>
<p class="read" data-readout><span data-a1>0°</span> <span data-a2>0°</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
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.
17 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 double pendulum that draws” from Animorio and fit it into my siteWhat it does
A black page, at the top the name of an invented studio of generative prints, Erratic. In the middle a small hatched mount appears and from it two thin rods come down, straight, with an empty ring at the elbow and a small vermilion weight at the end; below, the word erratic rises letter by letter. An invisible hand lifts the pendulum nearly upside down and lets it go: the two rods turn, bend, the second one makes whole turns around the elbow, and the weight leaves a thin vermilion line that wears away from its tail in seven seconds, so there is always a new drawing on the page, never the same one. When the weight passes over the word, the letter under it gains weight and narrows on the width axis, and goes light again when it leaves. Bottom right you read the angles of the two rods. After a while the hand takes the pendulum again, brings it back to the starting pose and lets go once more. The weight can be taken with the mouse or a finger: the rods follow it without ever flipping the elbow, and let go it leaves with the hand’s speed. A click starts it again from the starting pose.
How it works
The real equations
Two equal masses on two equal weightless rods: the angular accelerations are the classic ones of the double pendulum (from Lagrange’s equations), with gravity over rod length set by PERIOD, the period of a small swing. They are integrated with fourth-order Runge-Kutta in fixed steps of a six-hundredth of a second inside gsap.ticker, and a frame's time never goes over a thirtieth of a second. A breath of air (AIR) takes away a little speed.
A line that wears away
Every other step the weight's position goes into a list with its time; points older than TRAIL seconds drop out. The line is drawn on a canvas in twenty-four runs, from the oldest to the newest, each with its own opacity: the tail fades, the head is full. With a point every other step the line stays smooth even when the weight whips round the elbow.
The hand: lift and let go
A GSAP timeline brings the angles from the pose of the moment to the starting one (START), the shortest way whatever turns the rods have made, and then opens the hand with zero speed. Every time the pendulum starts from exactly the same point, and a gsap.delayedCall takes it again after RUN seconds. While a hand holds it, the angles chase their target and their speed is what the pendulum carries when it is let go.
Taking the weight
Two rods and a point: inverse kinematics finds the two angles that bring the weight under the finger, with the elbow on the side it is already on, so the rods never flip. The point is kept within the reach of the two rods. Let go, the pendulum leaves with the hand’s speed, held within a limit.
The word that feels the weight
Every letter of erratic measures its sideways distance from the weight: with a Gaussian bell half a rod wide, the nearest letter gains weight (up to 700 on wght) and narrows (wdth) on the variable typeface Instrument Sans, chasing the value with a little delay, so the passing reads as a wave running over the word.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
PERIOD | script.js | 1.7 | How many seconds one small swing of a single rod takes: more is slower and dreamier. |
START | script.js | [118, 166] | The angles of the two rods when the hand lets go, in degrees from hanging straight down. The closer to 180, the wilder the drawing. |
RUN | script.js | 16 | How many seconds the pendulum swings on its own before the hand takes it again. |
TRAIL | script.js | 7 | How many seconds of path the line keeps before it fades. |
AIR | script.js | 0.04 | How much the air slows the pendulum: 0 never stops, 0.3 calms down before the hand takes it again. |
--accent | style.css | #ff4a2b | The colour of the weight and of the line it draws. |
--weight | style.css | 400 | The weight of the word where the pendulum is far away, from 400 to 700. |
When to use it
For the opening of a generative art studio, of an artist or a designer who works with code, for a 404 page that is never the same, for the cover of a physics course or an article about chaos. It works with any short word under the pendulum, a brand name too.
On phones
The same physics, with the rods measured on the width so the drawing fits the screen; the word sits a little above the bottom. The weight is taken with a finger, with a larger area.
With reduced motion
The pendulum does not move: it hangs straight, and around it there is already the drawing of nine seconds of swinging, worked out silently and traced more faintly. A click swaps it for another drawing, started from a slightly different pose, with a fade.
Pitfalls
- The motion is chaotic: with a longer or shorter frame the path changes after a few seconds. That is why the hand always lets the pendulum go from rest and resets the physics clock: the recorded loop is always the same, but it lasts about eighteen seconds and the video script cannot see it start again; the card's video needs a fixed length.
- With one position per frame the line would have corners where the weight whips round the elbow (at sixty frames a second up to thirty pixels between two points): that is why a point goes in every other physics step.
- For two rods and a point inverse kinematics has two solutions, with the elbow on one side or the other: always picking the same one, the elbow would snap over as soon as the weight is taken. The one on the side the elbow is already on is picked.
- At twelve pixels the Greek theta read as a zero (θ1 looked like 01): the angles are now called upper and lower.
Libraries
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.5 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.
