The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The one-stroke logo
A minimal logo intro: a thin line, led by a small blue square nib, traces the outline of every letter without ever lifting, then thickens inwards until the letters are full; the nib becomes the full stop, spins once in the air and drops into place with two bounces. 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 one-stroke logo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/syne@5.3.0/index.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<main class="scena">
<!-- the stage: the script traces the outline of the logo and draws it with a single line, without lifting the pen -->
<svg class="palco" data-stage role="img" aria-label="odalo" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- a picture logo, uncovered by the line as it thickens -->
<g data-picture></g>
<!-- one group per piece of the logo: the line that thickens inside it, and the line itself -->
<g data-pieces></g>
<!-- the lead-in and the stretches of line that join one outline to the next -->
<g data-links></g>
<!-- a thin line of colour that runs round one letter while the logo is on show -->
<path class="scia" data-glint />
<!-- the square nib at the head of the line, which ends up as the full stop -->
<g data-nib><rect class="punto" data-nib-rect /></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.
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 one-stroke logo” from Animorio and fit it into my siteWhat it does
On an empty pale grey ground a small blue square comes in from the left, trailing a thin black line. At the first letter of the made-up brand, odalo, it starts going round it and draws its outline, then runs straight to the hole of the letter and draws that too, then on to the next letter: the line never lifts, like a plotter pen, and the little square turns to follow the road. When the last outline closes, the straight stretches that joined one letter to the next are pulled into the letters and vanish, and the line starts thickening inwards: the letters fill one after the other, from the left, and each one, as soon as it is full, swells by a pixel and settles. Meanwhile the little square has left the line: on the way up it grows as big as a stem, spins slowly in the air and, when the last letter is full, drops to the right of the name as the full stop. It lands with a squash, bounces twice, lower each time, and an elastic sets it straight; under the blow the letters dip by a couple of pixels, the nearest first, and spring back. While the logo is on show a blue line runs once round a letter and the full stop answers with a little hop. Then the full stop jumps away, the letters empty back into a line and the line unwinds letter by letter; it all starts again. A click restarts it. A picture can take the place of the word: the line traces its dark or coloured parts and, as it thickens, uncovers the picture’s real colours.
How it works
The outline, taken from a canvas
The logo is drawn large on a canvas, in the same typeface as the page, Syne at weight 800 (or the picture is drawn). Every pixel becomes a number from 0 to 1 and the marching squares algorithm follows the line where the number crosses one half: out come closed outlines, smooth because the crossing is worked out inside the pixel. Ramer-Douglas-Peucker removes the points that are not needed; an outline inside another is a hole. Everything is measured in letter heights and the stage is an SVG whose viewBox is as big as the window, so one unit is one pixel.
A single stroke
The pieces are lined up from the left, every outline clockwise, and each one starts at the point nearest to where the pen finished the one before: so the straight stretches joining them stay short. Lead-in, outlines and joining stretches form a single road, with a weight for every stretch (the straight ones go faster); one number, from 0 to 1, says where the pen is, and every path shows its own piece with a single dash (stroke-dasharray and stroke-dashoffset, with pathLength set to the measured length). The square nib turns with the tangent, modulo 90 degrees: a square looks the same after a quarter turn.
The line that thickens
Every outline is there twice: the real line and a copy clipped by a clipPath that is the piece itself (outline plus holes, clip-rule evenodd). Only the inner half of the copy’s stroke shows: widening it to twice the deepest point of the piece, measured on the canvas with a walk in from the edge, fills the letters from the edges to the middle. Meanwhile the real line thins to nothing, and the edge that is left is exactly the outline. A picture instead shows through a mask made of the same white line, thickening.
The full stop drops
The full stop is the nib itself: a group whose place, turn, size and squash are written by hand into its transform after every frame. The squash pivots on the bottom, so the square spreads as it lands without leaving the baseline. It rises with power3.out, falls with power3.in and lands just as the last letter is full; two bounces (as high as BOUNCE says), then elastic.out. The letters feel the blow: each one sinks a couple of pixels with a delay that grows with its distance from the full stop, and springs back with an elastic.
Direction and your logo
The whole intro is one timeline, with the labels start, reveal, land, rest and leave, and timeScale for the speed; a single function writes the stage after every frame, and writes an attribute only if it has changed. If IMAGE holds an address, the canvas traces the dark or coloured parts of the picture (a light or transparent background stays ground) and the full stop drops at the bottom right. 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 | 'odalo' | The logo as a word: the line traces the outline of its letters. |
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 line traces its dark or coloured parts. |
DRAW | script.js | 4 | How many seconds the line takes to trace the whole logo. |
LINE | script.js | 1 | How thick the line is: 1 is a hairline, 2 twice as thick. |
FILL | script.js | true | Whether the line thickens until the letters are full. With false the logo stays drawn in line. |
BOUNCE | script.js | 1 | How high the full stop bounces when it drops into place (0 = it lands 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 unwinds. |
LOOP | script.js | true | Whether the logo unwinds and the line draws it again. With false it stays, and now and then a blue line runs round a letter. |
When to use it
To present a logo with a precise, technical-drawing gesture: the opening of a graphic design or architecture studio's site, a design or tech brand, a portfolio, a preview for a client, a loading screen, a social post. It suits pages where everything else is quiet. It works with a written wordmark and with a picture.
On phones
The same animation with the sizes adapted: the logo is almost as wide as the screen, the line stays thin and the full stop drops just as on a computer. A tap restarts it.
With reduced motion
Nothing moves: the full logo fades in, then the full stop. If the animation starts again, the logo leaves with a fade.
Pitfalls
- A zero-length dash with round caps still draws a dot: every stretch of line that is still empty or already erased is hidden completely, instead of being left with a dash of length zero.
- The thickened line without a clip spilled out of the letters and bloated them: the copy that thickens is clipped to the piece itself, and the real line, which acts as the edge, thins to nothing, so at the end the edge is exactly the outline.
- With one final thickness for the whole logo, thin letters filled at once and then sat still: each piece has its own, measured on the canvas from the deepest point inside it.
- With a fixed flight time the full stop landed while the last letters were still drawn in line, and the blow was lost: now the flight lasts as long as the filling, which depends on how many pieces the logo has, and the full stop touches down just as the last letter is full.
Libraries
GSAP 3.15.0, Syne (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 13 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.
