The dinosaur-bitten logo
Intro, SVG, Text
NewFree
Back to the library
The hairline-rules logo
A minimal logo intro: hairline horizontal rules shoot in from the left and from the right, each at its own speed, stop out of line, line up, break into the pieces of the letters and swell into the solid brand; one red rule arrives out of register and clicks back into place with a last one-pixel jolt. In the Playground you can put in your name or upload your 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 hairline-rules 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 stage: the script measures the logo, slices it into thin rules and slides them in -->
<svg class="palco" data-stage role="img" aria-label="Ostrel" xmlns="http://www.w3.org/2000/svg">
<defs data-defs></defs>
<g data-world>
<!-- the solid logo, seen through one clip made of all the rows -->
<g data-solid></g>
<!-- the late row: its own slice of the logo, out of register until the last click -->
<g data-late></g>
<!-- the rules: one group per row, each with the pieces it breaks into -->
<g data-rules></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.
13 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 hairline-rules logo” from Animorio and fit it into my siteWhat it does
On a warm white ground, empty, hairline black rules come in one after the other, one from the left and one from the right: each runs at its own speed, slows down and stops a little out of place, so the block has ragged edges on both sides at once. Each rule, as it stops, carries on for a pixel and comes back. The last one to arrive is red, and the slowest. Then the rules line up flush, all the same length, and close ranks: one pixel too far and a small elastic. Now each rule breaks into the pieces of the letters it crosses, from the middle row outwards: the bits between the letters retract into them, and the invented brand, Ostrel, shows up drawn in hatching. The red rule breaks last. Then the rules swell, top to bottom, until they touch and the letters are solid; only the red band stays a few pixels off, like a print out of register. At the very end it clicks into place, the whole logo jolts by one pixel and the red turns black. While the logo is on show, once, a hairline gap runs across it and closes again. After a few seconds the letters turn back into rules, bottom to top, the rules stretch out again and leave to the sides; it all starts over. A click restarts it. A picture can take the place of the word: it is sliced into the same rules.
How it works
One unit
The stage is an SVG whose viewBox is as big as the window, so one unit is one pixel. The logo is measured on a canvas in the same face, Archivo at weight 800 (measureText, with actualBoundingBoxLeft, Right, Ascent and Descent for the real box of the ink), and its size is chosen to sit wide on a computer and a little narrower on a phone, never taller than 240 pixels: beyond that the rules stop looking thin. The box is split into ROWS equal bands, with a rule along the middle of each, about a third of the band thick.
Where the ink is
The logo is drawn once on a canvas two or three times denser than the screen and read with getImageData along the middle line of every band: where the opacity is over one half there is ink. Pieces less than a pixel or so apart are joined, pieces shorter than half a pixel are dropped. Each rule becomes a group of rectangles, one per piece, which all start the same and as long as the whole rule: on top of each other, they look like a single line.
Coming in, stopping, lining up
Each rule has a side (even from the left, odd from the right), a random duration between 0.7 and 1.35 seconds and a place to stop, a little short of the middle on its own side. It comes in with expo.out, which runs and then glides, goes a pixel and a half too far and an elastic.out brings it back. Then all of them go to x = 0 with power3.inOut, with the same extra pixel, while the gaps between the rules close and their lengths become the same.
The rules break and swell
The rectangles of each rule go each to its own piece (attr x and width): power3.inOut to one pixel narrower, then elastic.out, from the middle row outwards. To swell them, the real letters take over: the logo is drawn just once, seen through a clipPath made of one rectangle per band. In the same frame the rules go off and the logo comes on, cut into bands as thin as the rules; then each rectangle of the clip grows to the whole band (half a pixel into the next, so no light seam is left).
The rule out of register, and your logo
The red rule has a clip and a copy of the logo all of its own, in red and shifted by LATE pixels. At the very end the copy goes to −1 and back to zero with an elastic, its fill fades to black, the whole group drops by one pixel and comes back up; then the band joins the others’ clip and the copy goes off. The whole entrance is one timeline, with the labels start, justify, break, fill, reveal, rest and leave, and timeScale for the speed. If IMAGE has an address, the picture takes the place of the word: the canvas reads its transparency, and the black rules melt into its colours instead of vanishing at once.
Values to change
| Name | File | Default | What it changes |
|---|---|---|---|
NAME | script.js | 'Ostrel' | The logo as a word: the rules break into 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. |
ROWS | script.js | 20 | How many rules the logo is sliced into. With a small logo (a long name, a phone) there are fewer, never closer than four and a half pixels, so they stay rules. |
RAGGED | script.js | 1 | How unevenly the rules stop before they line up. With 0 they arrive already flush. |
LATE | script.js | 3 | How many pixels the red rule stays out of register before the last click. With 0 there is no red rule. |
SPEED | script.js | 1 | The speed of everything: 2 is twice as fast, 0.5 half as fast. |
REST | script.js | 4 | How many seconds the logo stays on show before the rules leave. |
LOOP | script.js | true | Whether the logo turns back into rules, the rules leave and it all starts over. With false the logo stays, and now and then a hairline gap runs across it. |
When to use it
To present a logo with a precise, typographic gesture: the opening of a graphic design or architecture studio's site, a magazine, a fashion or design brand, a portfolio, a preview for a client, a loading screen, a social post. It suits pages where everything else is restrained. It works with a written brand and with a picture.
On phones
The same animation with the sizes adapted: the logo is narrower and there are fewer rules, so they stay hairlines and do not turn into a grey smudge. A tap restarts it.
With reduced motion
Nothing moves: the hatched logo fades in, then the solid logo fades in over it. If the animation starts again, the logo leaves with a fade too.
Pitfalls
- A long name or a phone screen makes a short logo, and twenty rules three pixels apart turned into a grey band with no letters: there is at most one rule every four and a half pixels, so fewer than ROWS when needed.
- The switch from the rules (rectangles) to the real letters (the logo cut into bands) happens in the same frame and at the same height: the pieces are read along the middle line of each band, so the only difference is the slanted tip of curved strokes, and the bands start swelling right away.
- The red rule has a clip of its own: if its band were also in the others’ clip, a sliver of black in the right place would show under the shifted red. It joins the shared clip only once it is back at zero and black, and only then does the red copy go off.
- A picture from another site cannot be read on the canvas (getImageData throws): then each rule becomes a single piece as wide as the picture. Pictures uploaded in the Playground are data: addresses and can be read.
- A picture has its own colours: switching the black rules off at once made it change colour in one frame, so with a picture the rules fade over half a second while the bands swell.
Libraries
GSAP 3.15.0, Archivo (font variabile) 5.3.0.
Compressed with gzip, the three demo files weigh 7.6 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.
