The compass that divides the circle

SVG, IntroGSAPMediumCompressed weight: Demo 6.2 KBGSAP 28 KBFreeDownload the zip

In the minimal style: a compass of three thin lines pricks the centre, draws a circle and then walks round it in steps as long as the radius, leaving a scratch where it lands. In six steps the circle is divided: six radii shoot out of the centre, one slice fills with vermilion and the name of an architecture studio rises underneath.

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 compass that divides the circle</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>
  <main class="stage" data-stage aria-label="Sixfold, architecture studio. Click to draw it again.">
    <!-- the drawing: a compass draws a circle, walks round it in six steps and the circle splits into six -->
    <svg class="scene" data-scene aria-hidden="true">
      <path class="slice" data-slice d="" />
      <g class="radii" data-radii></g>
      <path class="circle" data-circle d="" />
      <g class="marks" data-marks></g>
      <path class="cross" data-cross d="" />
      <g class="compass" data-compass>
        <line class="leg" data-leg-a />
        <line class="leg" data-leg-b />
        <line class="stem" data-stem />
        <circle class="knob" data-knob r="3.5" />
      </g>
    </svg>

    <p class="caption" data-caption>
      <span class="caption__name" data-name>Sixfold</span>
      <span class="caption__note" data-note>Architecture studio</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.

13 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 compass that divides the circle” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a warm white page a compass drawn with three thin lines comes in: two equal legs and a small handle above the hinge, seen a little from above, so the hinge always stands straight over the points. It comes down onto the paper, pricks the centre (a thin little cross) and opens to its radius, a hair past and back. The moving point runs right round and the circle draws itself, slow at the start and at the end. Then the compass walks round the circle: one point stays, the other swings over the centre and lands on the line, goes a hair past and back, leaving a small grey scratch where it touches; on the next step the points swap. After six steps it is back where it started, because the radius fits exactly six times round the circle. The compass closes and lifts away, six radii shoot out of the centre to the six scratches one after the other, overshoot the circle a hair and come back, and one slice fills with vermilion on a small spring. Underneath, the name of the made-up studio, Sixfold, rises letter by letter, gaining weight and width, and under it Architecture studio. After a breath the slice closes, the radii draw back in, the scratches fade and the circle unwinds backwards; then it all starts again. A click starts it over.

How it works

Everything in radii

The drawing's state is made of numbers in units of the radius, with the centre at zero: the compass's two points, the degrees of circle drawn, how far each radius has run, the size of the slice. GSAP tweens only those numbers and a render function turns them into SVG attributes (paths with A arcs, lines, a circle) by multiplying them by the radius in pixels. So a resize halfway through just redraws everything at the new size without rebuilding anything.

A compass seen a little from above

The two legs have the same length LEG: the hinge stands above the midpoint of the points, at a height that comes from Pythagoras, √(L² − (d/2)²), squashed a little for perspective. Keeping it always straight up, the compass reads as an object standing on the paper in any position, even when one point is above the other.

Walking round the circle

The geometry trick: the chord of a sixth of a circle is as long as the radius. On the first step the compass turns round the point on the circle and the other goes from the centre to the point at 60 degrees; from the second on it turns 120 degrees round the point that stays, passing over the centre, and the points take turns. Each step is a tween of one angle with back.out(LAND): the point goes a hair past and back, and the scratch (an arc of the same radius round the point that stays) grows to the furthest point reached.

The radii, the slice and the name

The radii run out with back.out(0.9), so they overshoot the circle by a few pixels and come back, 70 thousandths apart. The slice is a sector path scaled from the centre with elastic.out(1, 0.6). The name is split into letters: they rise with back.out while font-weight goes from 300 to 560 and font-stretch (Instrument Sans, tied to the --w variable) from 80 to 100.

Loop, click and reduced motion

It is all one paused timeline which, on onComplete, sets the state back to zero and plays again: the preview video sees the whole loop. A click calls the same restart. With reduced motion the finished drawing (circle, scratches, radii, slice and name) fades in and stays still.

Values to change

Name	File	Default	What it changes
`WORD`	script.js	`'Sixfold'`	The name that rises under the circle.
`DRAW`	script.js	`1.4`	The seconds the compass takes to draw the whole circle.
`STEP`	script.js	`0.46`	The seconds for each of the six steps round the circle.
`LAND`	script.js	`1.5`	How far each step overshoots before it settles: 0 = it stops dead, 3 = it bounces more.
`SLICE`	script.js	`5`	Which of the six slices fills with vermilion (0 to 5, clockwise from the right).
`LEG`	script.js	`0.95`	The length of the compass legs, in radii (0.6 to 1.4): shorter, and the hinge stands lower.
`HOLD`	script.js	`2.2`	The seconds the finished drawing stays still before it unwinds.

Try them in the Playground

When to use it

As an opening or a brand loader for an architecture studio, a surveyor, a design school or a tile workshop; as the picture on a «method» or «how we work» page; anywhere that wants an idea of precision and of building by hand.

On phones

The same animation with the sizes adapted: the circle widens to nearly the whole screen (with room for the scratches at the sides), the compass always walks inside the circle and there is room above for the hinge; the name stays underneath.

With reduced motion

Nothing moves: the finished drawing, with the circle, the six scratches, the radii, the vermilion slice and the name, fades in and stays.

Pitfalls

The first version put the hinge on the side perpendicular to the points: turning round the centre and walking on the circle, the hinge ended up outside, below or inside at random and the compass read as two random lines. With the hinge always straight up (seen a little from above) it always reads as a compass standing up.
Choosing the hinge side «away from the centre» made the compass jump to the other side right halfway through a step, when the moving point passes over the centre: a fixed upward direction has no jumps.
While it walks the compass reaches about 1.6 radii above the centre: the circle's radius is worked out leaving that room above, otherwise the handle went off the screen.
The scratch only grows to the furthest point reached and does not follow the point back from the overshoot: otherwise it got shorter and seemed to rub itself out.

Libraries

GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 6.2 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.