The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The marble run logo
An intro for the logo of a made-up wooden toy shop, Kugel, in the rich style: on a plywood board a beech marble run zigzags down. Glass marbles wait in a row behind a little gate, set off one at a time, ring two brass bells, run along the track and drop through their own trapdoor: for every marble a painted wooden letter block pops up out of the walnut base, until the name is spelled. Then the blocks do a wave and the bells ring together.
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 marble run logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/fredoka@5.3.0/wdth.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena" data-stage>
<p class="marca"><span data-brand>Kugel</span> <span class="marca__dida">Wooden toys</span></p>
<h1 class="sr" data-title>Kugel</h1>
<!-- everything is drawn in this svg by script.js: the plywood board, the beech rails, the brass bells, the gate,
the glass marbles, the track with its little trapdoors, the walnut base and the painted letter blocks -->
<svg class="disegno" data-svg viewBox="0 0 720 760" preserveAspectRatio="xMidYMid meet" aria-hidden="true"></svg>
<p class="motto" data-tagline>Rolled, sanded and painted by hand.</p>
<button class="pillola" type="button" data-replay data-autoclic>
<span class="pillola__scritta" data-testo="Replay">Replay</span>
</button>
</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.
34 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 marble run logo” from Animorio and fit it into my siteWhat it does
A plywood board hung on a petrol green wall, with its grain, a knot in the wood, the pegboard holes and four brass screws. On it three beech rails zigzag down, held by screwed brass brackets, and at the bottom there is a walnut base with five slots and a brass nameplate. At the top the glass marbles, each with its colour and a cat's eye inside, wait in a row behind a little beech gate. The gate lifts, the first marble rolls down picking up speed and the others move up one place. At the end of the first rail it hits a brass bell, which swings and rings, and drops onto the second, squashing for a moment and bouncing; it runs back, rings the second bell, drops onto the third rail and then onto the track above the base. There it runs to its own trapdoor, which opens: the marble disappears into the slot and a painted wooden block pops out of the base, with its engraved letter and worn corners, and settles with a wobble in a puff of sawdust. One marble after another the shop's name is spelled; the blocks do a wave, the bells ring together, the tagline arrives and after a pause it all starts again. With the pointer or a finger on it, a block lifts and wobbles.
How it works
One svg in a fixed viewBox
Board, rails, bells, trapdoors, marbles, blocks and base are drawn by script.js in an svg with a 720 by 690 viewBox and preserveAspectRatio meet: on a computer and in the phone box the scene scales as a whole with nothing to recalculate. The colours come from the :root variables, so the Playground Palette repaints everything.
State in objects, drawing every frame
Every marble, block, bell and trapdoor is an object with its own numbers (position, rotation, squash); the GSAP timeline animates those numbers and a function on the ticker writes the transform attributes every frame. On nested svg groups it avoids rotation origin trouble.
Rolling on the rail
While a marble runs, its y comes from its x along the line of the rail and the cat's eye turns by distance over radius: it really rolls, without sliding. On the rails it speeds up with power1.in, falling it drops with power2.in like a weight, and landing it squashes and makes a little hop.
One marble, one letter
Marble number i runs to trapdoor i, which opens just before it arrives; the first ones go furthest, so none passes over a block that is already out. The block rises from under the edge of the base through a mask, goes a little past, squashes as it lands and settles with elastic.out.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
WORD | script.js | 'Kugel' | The name of the shop: 3 to 6 letters, one marble per letter. |
SPEED | script.js | 1 | 2 is twice as fast, 0.5 half as fast. |
GAP | script.js | 0.62 | How many seconds between one marble and the next. |
BOUNCE | script.js | 1 | How much a marble bounces when it lands on a rail. |
GLASS | script.js | 0.92 | How solid the glass of the marbles is. |
RING | script.js | 1 | 1 makes the bells ring when the marbles hit them, 0 does not. |
HOLD | script.js | 3.5 | How many seconds the finished logo stays before starting again. |
When to use it
For the opening of the site of a wooden toy shop, a toy library, a woodworking workshop or a kids' brand; as a brand loader or the launch of a collection.
On phones
The same intro: the whole scene scales down between the name at the top and the Replay button, with the same marbles, bells and blocks.
With reduced motion
Nothing rolls and nothing jumps: the finished logo appears with the blocks out of the base, in a fade; then the tagline and the Replay button.
Pitfalls
- The marbles go to the furthest trapdoors first: if the first one stopped close, the others would roll over the blocks that are already out.
- The cat's eye rotation restarts from the angle the marble has at the start of each run: the queue moving up already turns it, and starting from a number saved earlier would make it jump.
- Replay only shows up at the end of the entrance, and the automatic restart waits HOLD seconds: a click halfway would start it all over.
Libraries
GSAP 3.15.0, Fredoka (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 10.0 KB; the libraries: GSAP 28 KB.
Testing
Tested on 23 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.
