The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The Bauhaus shapes logo
A logo intro in the manner of Swiss and Bauhaus posters: a circle rolls, a square drops and bounces, a triangle trips and flips over; where the shapes cut each other the letters are born, then they come out of the shapes as through windows. All in flat colours on ivory paper. In the Playground you type your own name 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 Bauhaus shapes logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the sheet: the script measures it, sets the grid and builds the shapes, the letters and their windows -->
<svg class="palco" data-stage role="img" aria-label="tessel" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the asymmetric grid, hairlines that come and go -->
<g data-grid></g>
<!-- crop marks at the corners of the layout -->
<g data-marks></g>
<!-- the black bar: the floor the shapes land on -->
<rect class="nero" data-bar />
<!-- the shapes, where they cut each other, and the letters through them -->
<g data-forms>
<g data-shapes></g>
<g data-cuts></g>
</g>
<g data-letters></g>
<!-- the colophon -->
<g class="colophon" data-colophon></g>
<!-- motion notation: impact ticks and the arc of the flip -->
<g data-fx></g>
</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.
19 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 Bauhaus shapes logo” from Animorio and fit it into my siteWhat it does
On an ivory sheet the fine lines of an asymmetric grid are drawn, with the four crop marks at the corners of the layout; from off the screen on the left a black bar shoots in: it is the floor. From above a red square drops, squashes on the bar (which bends a touch), hops once, squashes again and settles with a spring, while two pairs of black ticks mark the impact as on a diagram. From the left a blue circle rolls in, with a black quarter that shows its roll: it knocks into the square, squashes against it and bounces back, and the square rears up on its corner and drops back. From the right a yellow triangle slides in, bumps into the square (which rears up the other way), pulls back and jumps, flipping over: a thin arc draws its path and wipes itself away, and the triangle lands point down, wedged into the square, and teeters on its point. The circle jumps up and wedges itself in too. Where two shapes overlap the paper turns black, and there the first pieces of the letters of a made-up brand, tessel, appear. Then the shapes open as windows, each in its own outline: first they fill with letters (paper-coloured on the red and the blue, black on the yellow), then they let them out, black on the paper. The letters hop one after another and settle, three lines of colophon slide up beside the bar and the grid pulls away. The logo stays composed and the shapes keep playing: the circle turns a quarter, the triangle teeters, the square hops, and the cuts in the letters move with them. After a few seconds the windows close, the triangle flies off flipping over, the circle drops and rolls away, the bar pulls back and the square falls; then it all starts again. A click restarts it. A picture can take the place of the word: it shows first in the cuts, then the same windows reveal all of it.
How it works
One size
The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. The letters are measured on a canvas in the same typeface (measureText, actualBoundingBoxAscent for the true height) and everything is counted in letter heights: the circle has a radius of 1.15 letters, the square a side of 2.2, the triangle of 2.4, and each one has its fixed place on the grid. The word is centred on the group of shapes; the size is chosen so that the shapes, the word and the colophon fit, beside the bar on a wide screen, under the bar on a tall one.
One shape, many copies
Every shape is a single path in the defs, with its pose (centre, rotation, squash and lean about the point it stands on) written as a transform attribute on every frame, by a GSAP ticker that reads plain objects. The same path is used many times with use: in colour, inside a clipPath, inside the masks as a window and as a cut. The circle rolls because its rotation is worked out from its travel divided by its radius; the triangle flips with an arc made of two half tweens and a half turn.
The cuts
The cut between two shapes is the second shape, in black, inside the clipPath of the first: so the overlap is always exact, even while the shapes move. The letters live once in the defs and are used several times: paper-coloured inside two nested clipPaths (the cuts, where they appear first), in the right colour inside each shape, black outside. Black letters are drawn first and black shapes last: the soft edge of one colour never stays as a fine line under the other.
The windows
The windows mask holds the same shapes, scaled about their centre by a second transform: at an opening of 0 nothing shows, at 1 the window matches the shape (the letters fill it, with a back.out that goes a little past the edge), then it grows until it covers the word (each shape knows by how much, from the distance to the corners of the word: for the triangle it is divided by the radius of its inscribed circle). The black letters use a second mask, the windows less the shapes in black.
Direction and your logo
The whole intro is one timeline, with the labels start, arrive, interlock, reveal, compose, rest and leave and timeScale for the speed; the bounce knob changes the elastic.out and back.out eases, the squashes and the hops. At rest the shapes take turns at a little game every second and a half. If IMAGE holds an address, the word becomes that picture: it is born in the cuts and the windows reveal it like the word. In the Playground, next to the field, there is a button to upload a file, which goes into the code as a data: address.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'tessel' | The logo as a word: it is born in the cuts between the shapes and comes out of their windows. Lowercase suits it, as in Bauhaus graphics. |
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 word and the same windows reveal it. |
SHAPES | script.js | 3 | How many shapes: 1 the square alone, 2 circle and square, 3 circle, square and triangle. |
BOUNCE | script.js | 1 | How springy it all is: the squashes, the hops and the settles (0 = crisp and dry, 2 = very springy). |
COLORS | script.js | ['blue', 'red', 'yellow'] | The colours of the circle, the square and the triangle, chosen from red, blue, yellow and black. The letters on a yellow shape are black, on the others paper-coloured. |
ROTATE | script.js | 1 | How much the shapes spin: the roll of the circle, the half turns of the triangle (from 2 up it makes three), the games at rest. At 0 the circle slides without turning and the triangle comes in already point down. |
SPEED | script.js | 1 | The speed of the whole animation: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 5 | How many seconds the logo stays composed before the shapes leave. |
LOOP | script.js | true | Whether the layout comes apart and is composed again. With false the logo stays, the shapes still playing. |
When to use it
To present a logo with the rigour and the cheerfulness of modern graphics: the opening of the site of a design studio, an architect, an art school, a museum or a brand of objects, a preview for a client, a loading screen, a social post. It works with a written wordmark and with a picture.
On phones
The same animation with the sizes adapted: the shapes and the word take almost the whole width of the screen and the colophon goes under the bar, lined up with the square's column. A tap restarts it.
With reduced motion
Nothing moves: the bar and the crop marks fade in, then the shapes already wedged together, then the letters and the colophon. If the animation starts again, everything fades away.
Pitfalls
- The paper-coloured letters in the cuts, drawn over the black letters on the yellow, left a thin dark line along the triangle's side (the soft edge of the clipPath): the black letters are drawn first, so the light ones cover them completely.
- The same happened between the shapes: the square's red stayed as a thread along its edge, under the circle's black quarter. The quarter is drawn over all the shapes and black shapes last: where they overlap it is black anyway.
- With a yellow circle the letters on it are black, and on its black quarter they vanished: the quarter has its own clipPath and there the letters swap colour.
- In the fade, with reduced motion, shapes and cuts fading each on its own showed the overlaps through each other: they sit in one group, which fades all together.
- With the word almost all on the shapes, the second half of the windows (the one that brings out the black letters on the paper) did not show and left an empty moment: the letters settle as soon as the windows match the shapes, while they grow.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 12 KB; the libraries: GSAP 28 KB.
Testing
Tested on 10 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.
