The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The three-circle logo
A minimal logo intro: three thin circles roll in along a line, come to rest rocking like wheels, the middle one rises on a spring and the three become a Venn diagram; the area they share fills with colour, the initial drops into it and the circles retract into the edge of that shape, which stays as a monogram beside the name. In the Playground you type your own name, choose the letter, how much the circles overlap, or upload your own logo.
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 three-circle logo</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="scena">
<!-- the stage: the script measures it, rolls three thin circles into a Venn diagram and fills what they share -->
<svg class="palco" data-stage role="img" aria-label="trevo" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="shared-area"><path data-shared /></clipPath>
<clipPath id="name-box"><rect data-name-box /></clipPath>
</defs>
<g data-mark>
<!-- the floor the circles roll on -->
<line class="suolo" data-floor />
<!-- what the three circles share: a disc of colour that grows inside it, and the initial cut out of it -->
<g clip-path="url(#shared-area)">
<circle class="comune" data-fill r="0" />
<text class="iniziale" data-initial></text>
</g>
<!-- the three circles, each with a small tick on its rim that shows it turning -->
<g data-circles></g>
</g>
<!-- the name, one letter at a time, or the picture -->
<g data-name></g>
</svg>
<p class="nota">Click or tap to see it again</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.
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 three-circle logo” from Animorio and fit it into my siteWhat it does
On an empty warm white ground a very thin grey line draws itself from the centre outward: the floor. From the left a circle made of a single line rolls in, from the right another: each has a small tick on its rim that turns as it rolls, so you can see it is a wheel. They stop overlapping, run a few pixels past their place and rock back like a wheel settling. A third circle comes in from the left, rolls through the first and stops in the middle, over the other two. The ticks fold into the rims, the middle circle rises on a spring above the other two, the floor folds back into the centre and the two circles below feel it arrive with a one-pixel shiver: now the three are a Venn diagram, and each one runs through the centres of the other two. The area all three share fills with vermilion from its centre, and the initial of the made-up brand, trevo, drops into it, cut out of the colour: it comes in narrow and light, a little low, then widens and takes weight. Meanwhile every circle retracts: it shortens from both ends until only the arc it gives to the shared area is left, and fades there. What remains is a curved triangle, the monogram, which glides aside into its place; the name arrives beside it one letter after the other, each one narrow and light, widening and taking weight. While the logo is on show a wave of weight runs through the name and the initial takes a breath. After a few seconds the name leaves, the colour drains back into the centre and it all starts again. A click restarts it. A picture can take the place of the name: it is uncovered beside the monogram.
How it works
Three circles and the area they share
The centres sit on the corners of an equilateral triangle, two below and one above, at a distance measured in radii (OVERLAP). Two circles cross on a line that runs through the centre of the third: the inner point lies at the midpoint between the two centres plus the square root of (1 minus a quarter of the distance squared), towards the centre of the three. The shared area is made of three arcs, one per circle, between its two crossing points; it is drawn as a path of over 200 points sorted by angle around the centre, and becomes a clipPath. With OVERLAP at 1 each circle runs through the centres of the other two and the area is a Reuleaux triangle, as wide as it is tall.
Rolling without sliding
Each circle is a group moved with translate; inside it a second group carries the tick and turns with rotate. The angle is not animated: it comes from the distance travelled, (x minus the place it stops) divided by the radius, in radians, so the wheel never slides and at rest the tick stands straight up. The x arrives a few pixels past with power3.out and comes back with elastic.out(1, 0.38): it is the rocking of a wheel coming to rest, and the tick rocks with it.
The circle that retracts into its arc
The path of each circle starts opposite the arc it gives to the shared area. stroke-dasharray shows a stretch of length v, and stroke-dashoffset centres it on the middle of the path, which is that arc: as v goes down from the circumference to the length of the arc, the circle shortens from both ends at once and settles on the edge of the coloured shape. When v is the whole circle the dashes are removed, because a seam would show where the stroke meets its own start.
The colour and the initial
The colour is a solid circle growing from the centre inside the clipPath of the shared area, so it takes its exact shape. The initial is a text in the colour of the ground, clipped by the same clipPath: its ink box, measured on a canvas, must fit the biggest circle inside the area (radius 1 minus the distance between centres divided by the square root of 3). It comes in at width 75 and weight 400 and reaches 100 and 700 with font-variation-settings, rising from below with back.out.
The camera, the name and your logo
The whole drawing is in a group with translate, scale and translate: a camera that looks at the big diagram in the middle and then moves to the final logo with power3.inOut. The line thickness is divided by the scale, so the lines stay one and a half pixels. The name is set in Instrument Sans, a variable typeface with width and weight: each letter is a text measured on a canvas and comes in narrow and light. The whole intro is one timeline with the labels start, roll, rise, fill, reveal, name, rest and leave. If IMAGE holds an address, the picture takes the place of the name and is uncovered by a widening clip; in the Playground there is a button to upload a file.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'trevo' | The brand name, written beside the monogram. Its first letter is also the initial in the monogram, if MONOGRAM is empty. |
IMAGE | script.js | '' | The logo as a picture: the address of a file, or upload it from your computer. If there is one, it takes the place of the name beside the monogram. |
MONOGRAM | script.js | '' | The letter cut out of the shared area. Empty means the first letter of the name; any letter works. |
OVERLAP | script.js | 1 | How far apart the centres of the circles are, in radii: 1 means each circle runs through the centres of the other two; below 1 they overlap more and the shared area is bigger and rounder, above 1 it is smaller and sharper. |
SETTLE | script.js | 6 | How many pixels a circle rolls past its place before it rocks back (0 = it stops dead). |
SPEED | script.js | 1 | The speed of the whole animation: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 4 | How many seconds the logo stays on show before it starts again. |
LOOP | script.js | true | Whether the colour drains away and the circles roll in again. With false the logo stays, and now and then a wave of weight runs through the name. |
When to use it
To present a brand born from a meeting: a studio with three partners, an agency, a consultancy, a service that brings three things together, a design brand, a portfolio, a loading screen, a preview for a client, a social post. The Venn diagram speaks of what is shared; it suits pages where everything else is quiet. It works with a written name and with a picture.
On phones
The same animation with the sizes adapted: the diagram takes nearly the whole width of the screen and the final logo shrinks to fit, with the lines always one and a half pixels. A tap restarts it.
With reduced motion
Nothing rolls and nothing moves: the diagram fades in already made, the shared area fades into colour with the initial, then everything fades and the logo appears already in place beside the name. If the animation starts again, the logo leaves with a fade too.
Pitfalls
- The size of the initial was worked out in hundredths of the typeface but multiplied by a hundred again: the letter, in the colour of the ground, became huge and covered the whole coloured area, which looked empty. The canvas measures, divided by 100, are already for a typeface 1 unit tall.
- A dash pattern that starts with a zero-length dash ("0 x v ...") still leaves a dot where the path begins, even with butt caps: the visible window is made with a dash of length v and stroke-dashoffset.
- With the whole circle drawn, the stroke ended exactly where it began and a small light seam showed where they met: when the circle is fully drawn the dashes are removed (none) and the path is closed with Z.
- The name arrived while the monogram was still gliding into place and the first letter landed on it: the letters start when the camera has travelled nearly all the way.
- A circle with no marks does not look as if it turns: the tick on the rim, turned from the distance travelled, is the only way to show that it rolls.
Libraries
GSAP 3.15.0, Instrument Sans (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 9.0 KB; the libraries: GSAP 28 KB.
Testing
Tested on 15 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.
