The rearranging tangram

SVGGSAPAdvancedCompressed weight: Demo 6.3 KBGSAP 28 KBFreeDownload the zip

In the minimal style: the seven pieces of a tangram, drawn with a thin line, glide on curves, turn and land in a real figure (a cat, a house, a boat, the square). When they are all down they fill in one at a time, the little orange square last with a quarter turn, and the name appears underneath. A click moves on to the next figure.

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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The rearranging tangram</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/wdth.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="stage" data-stage>
    <!-- seven thin pieces cut from one square: they glide, turn and land into a figure, fill in one at a time and the
         figure gets its name; then they lift off again for the next one. A click or a tap moves on to the next figure. -->
    <svg class="board" viewBox="-4 -7.45 8 7.95" role="img" aria-label="Tangram" data-board>
      <line class="floor" x1="-4" y1="0" x2="4" y2="0" data-floor />
      <g data-pieces></g>
    </svg>
    <p class="name" aria-live="polite"><span class="name__clip" data-name></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.

16 values to change

Open the Playground

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 rearranging tangram” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a warm white page a very thin grey line opens from the middle: it is the floor. On it, one after the other, the lines of the seven pieces of a tangram draw themselves, closed in their square; as soon as they are done the pieces move a touch away from the centre, as if to say they are loose, and spring back to their places. Then they fill with black one at a time, the big ones first, and last of all the little orange square, which makes a quarter turn and clicks into place while the name rises underneath, Square, its letters arriving wide and tightening as they land. After a pause the ink drains back to the middle of each piece, the pieces go back to lines, lift (they grow a little, as if picked up) and set off one after the other on curved paths, turning as they go: before turning each piece winds up a little backwards, arrives a hair past its place and comes back, and on the way down it squashes as if pressed onto the table. When all seven are down the new figure is there, a sitting cat with pointed ears and a raised tail, and again the pieces fill in one at a time, the little square (the cat's head here) with its quarter turn, and Cat appears. Then the house, where the little square is the window, the boat, where it is a porthole, and the square again. Every figure is a true tangram: the seven pieces, no gaps and no overlaps. The two big triangles and the two small ones are twins and each goes to the nearer place, so none of them makes a pointless journey. A click (or a tap) moves on to the next figure at once, even in mid-flight: the pieces set off from where they are. With a mouse, passing over a piece at rest lifts it by a hair, and it drops back on a spring.

How it works

Seven pieces, one measure

The tangram is a square four units wide cut into seven pieces: two big triangles, a medium one, two small ones, a little square and a parallelogram. Each piece is an SVG polygon drawn around its centre of mass, so turning it only means changing the angle. The viewBox is in tangram units and the floor is the line y = 0: every figure stands on it, centred across. The line width is worked out again on every resize so it stays STROKE pixels on any screen.

True figures, written as data

Every figure is a list: for each piece its centre (x, y) and its turn in degrees. The square and the cat sit on the straight grid, the house and the boat on the diagonal one (sizes in multiples of the square root of two): the solutions were found and checked by a small program that tries to cover the silhouette with the seven pieces, quarter cell by quarter cell, with no gaps and no overlaps. The little square has 90-degree symmetry and the triangles come in twins: at every change the nearest equivalent angle is chosen and, between two twins, the swap that travels less.

The flight

Each piece is an object with x, y, turn, scale, how full it is and how high it is lifted; one timeline moves it and writes the transform attribute on every frame. The path is a quadratic Bézier curve, its control point pushed sideways (upwards when possible) by ARC times the distance. Time along the curve has a hand-written ease: power3.inOut plus a small sine bump in the last quarter, so the piece arrives a hair past its place and comes back. The turn uses back.inOut, which winds up backwards first and overshoots a little at the end; the scale grows by LIFT at take-off and comes down with back.out, which takes it a moment below 1.

Lines, then ink

Each piece has two identical polygons: the line (with pathLength 1, so at the start it draws itself with stroke-dashoffset) and the fill. The fill grows from the centre of mass with back.out and a thin page-coloured outline, which keeps the seams between the pieces visible. It only fills in once all seven have landed, in the order of the flight, and the little orange square closes it with a quarter turn and an elastic on its scale. At the next change the fill drains back to the centre before take-off.

The name and the clicks

The name sits in a window with hidden overflow, one span per letter: the letters rise from below with Archivo's wdth axis at 125 and land at 100 with expo.out, so the word tightens as it arrives; leaving, they narrow down to 62 and run upwards, from the last to the first. The round goes on by itself with a delayedCall of HOLD seconds. A click kills the running timeline and builds a new one from the values the pieces are at, so you can click at any moment without a jump.

Values to change

Name	File	Default	What it changes
`NAMES`	script.js	`{ square: 'Square', cat: 'Cat', house: 'House', boat: 'Boat' }`	The figures, in the order they come, and the name written under each one. The figures are square, cat, house and boat: you can drop them, put them in another order and rename them.
`HOLD`	script.js	`2.4`	How many seconds a finished figure stays still before the pieces set off again.
`MOVE`	script.js	`1.15`	How many seconds a piece takes to fly to its new place.
`STAGGER`	script.js	`0.07`	The seconds between one piece setting off and the next: 0 sends them all at once.
`ARC`	script.js	`0.22`	How curved the paths are: 0 is a straight line, 0.5 a high arc.
`LIFT`	script.js	`0.07`	How much a piece grows while it is lifted, as if picked up.
`STROKE`	script.js	`1.25`	The thickness of the lines, in pixels, the same on every screen.
`SPEED`	script.js	`1`	The speed of the whole animation: 2 is twice as fast, 0.5 half as fast.
`LOOP`	script.js	`true`	Whether the figures follow one another by themselves; with false you only move on with a click.

Try them in the Playground

When to use it

Wherever a calm, clever gesture is needed: the page of a design or architecture studio, a school, a wooden toy shop or a brand that lives on simple shapes; an elegant loading screen, a 404 page, the section that explains how one product adapts to different uses (the same pieces, different figures).

On phones

The same animation with the sizes adapted: the figures take almost the whole width, the lines stay thin in pixels, the name gets smaller. A tap moves on to the next figure; the lift under the pointer is there only with a mouse.

With reduced motion

Nothing flies and nothing turns: the square fades in already filled, and at every change the figure fades out and the new one fades in, already put together and filled, with the name changing by a fade.

Pitfalls

Finding true tangram figures by hand is easy only in words: a house with a roof four wide and a body four by three cannot be made with these seven pieces. The silhouettes were tried with a small program that covers them quarter cell by quarter cell; those without a solution were dropped.
Filling a piece while the others were still flying was a mistake: a black outline passing over a black piece disappears. The fill only starts when all seven have landed.
The little square turns a quarter turn at every figure: if its landing angle were worked out over a full turn, at the next change it would spin a turn and a half to get back. For it the nearest equivalent angle is looked for every 90 degrees, for the triangles every 360.
A click in mid-flight must not make anything jump: the old timeline is killed and the new one reads the values where they are, the curve included, which starts from the position of that moment.
The card's video stops when the picture comes back the same: every choice (curves upwards, alternating side, twins) is deterministic, so after a full round the change from the square to the cat is identical to the first.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.3 KB; the libraries: GSAP 28 KB.

Testing

Tested on 14 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.