The laser-cut logo

Intro, SVG, TextGSAP, CanvasAdvancedCompressed weight: Demo 17 KBGSAP 28 KBFreeDownload the zip

A logo intro in a workshop: a laser head runs along its rails and cuts the letters out of a brushed steel plate, the cut glowing and cooling, sparks bouncing and a thread of smoke rising; then the letters come loose with a snap, rise and turn over to show their polished edge. 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.

Download the zip

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>The laser-cut logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/archivo@5.3.0/standard.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script traces the logo, builds the plate, the machine and the pieces, and cuts them out -->
    <svg class="palco" data-stage role="img" aria-label="Kerfly" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- brushed steel: a soft light across the plate, and a tile of fine streaks the script paints on a canvas -->
        <linearGradient id="steel" gradientUnits="userSpaceOnUse" data-steel>
          <stop offset="0" class="acciaio acciaio--medio" />
          <stop offset="0.32" class="acciaio acciaio--chiaro" />
          <stop offset="0.56" class="acciaio acciaio--scuro" />
          <stop offset="0.8" class="acciaio acciaio--chiaro" />
          <stop offset="1" class="acciaio acciaio--medio" />
        </linearGradient>
        <linearGradient id="steel-back" gradientUnits="userSpaceOnUse" data-steel-back>
          <stop offset="0" class="acciaio acciaio--retro-scuro" />
          <stop offset="0.5" class="acciaio acciaio--retro" />
          <stop offset="1" class="acciaio acciaio--retro-scuro" />
        </linearGradient>
        <linearGradient id="wall" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="parete-stop parete-stop--alta" />
          <stop offset="1" class="parete-stop" />
        </linearGradient>
        <pattern id="brush" patternUnits="userSpaceOnUse" width="320" height="90">
          <image width="320" height="90" data-brush-image />
        </pattern>
        <!-- the glint that slides over the pieces at rest -->
        <linearGradient id="sheen" gradientUnits="userSpaceOnUse" data-sheen>
          <stop offset="0" class="lampo lampo--via" />
          <stop offset="0.5" class="lampo" />
          <stop offset="1" class="lampo lampo--via" />
        </linearGradient>
        <!-- the light of the beam on the metal, and a puff of smoke -->
        <radialGradient id="hotspot">
          <stop offset="0" class="caldo caldo--bianco" />
          <stop offset="0.16" class="caldo caldo--giallo" />
          <stop offset="0.42" class="caldo caldo--arancio" />
          <stop offset="1" class="caldo caldo--via" />
        </radialGradient>
        <radialGradient id="puff">
          <stop offset="0" class="fumo-stop" />
          <stop offset="0.55" class="fumo-stop fumo-stop--meta" />
          <stop offset="1" class="fumo-stop fumo-stop--via" />
        </radialGradient>
        <filter id="soft" x="-30%" y="-30%" width="160%" height="160%">
          <feGaussianBlur stdDeviation="4" data-soft-blur />
        </filter>
        <filter id="glow" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="3" data-glow-blur />
        </filter>
      </defs>

      <g data-world>
        <!-- the bed of the machine: dark slats under the plate, seen through the holes once the letters are out -->
        <g data-bed></g>

        <!-- the plate: its cut walls (a copy pushed down by its thickness), the holed plate, the heat tint -->
        <g data-plate>
          <path class="parete" fill-rule="evenodd" data-wall />
          <path fill="url(#steel)" fill-rule="evenodd" data-plate-base />
          <path class="spazzolato" fill="url(#brush)" fill-rule="evenodd" data-plate-brush />
          <path class="bordo-lastra" fill-rule="evenodd" data-plate-edge />
          <g class="alone" data-tint></g>
        </g>
        <g class="ombre" filter="url(#soft)" data-shadows></g>
        <g data-pieces></g>
        <!-- the whole plate, before the cut: it hides the pieces until they drop -->
        <g data-cover>
          <path fill="url(#steel)" data-cover-base />
          <path class="spazzolato" fill="url(#brush)" data-cover-brush />
          <path class="bordo-lastra" data-cover-edge />
        </g>
        <!-- the cut: the glow, the hot line, the line cooling to red, the cold kerf -->
        <g data-kerf>
          <g class="taglio-alone" filter="url(#glow)" data-kerf-glow></g>
          <g class="taglio-freddo" data-kerf-cool></g>
          <g class="taglio-tiepido" data-kerf-warm></g>
          <g class="taglio-caldo" data-kerf-hot></g>
        </g>
        <ellipse fill="url(#hotspot)" data-hotspot />
        <g class="scintille" data-sparks></g>

        <!-- the machine: two rails, the bridge that rides on them, the head that rides on the bridge -->
        <g data-rails></g>
        <g data-bridge></g>
        <g data-head></g>

        <g data-smoke></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.

47 values to change

Open the Playground

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 laser-cut logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

On a dark workshop background stands the bed of a laser cutting machine, with its slats and two rails at the sides. A plate of brushed steel slides in from the left and settles with a little wobble and a dull knock; from above drops the yellow bridge with its head, bounces on its springs and the head sways before it stops. Then the cut: the bridge runs along the rails, the head runs along the bridge and the copper nozzle follows the outline of every letter of a made-up brand, Kerfly. At every letter the beam first pierces the plate with a burst of sparks, then goes all the way round: behind the nozzle the cut is white and orange, red-hot, then it turns dark red and finally a cold, dark line. The sparks are short streaks that jump up, fall back on the plate and bounce, losing strength, from yellow to orange to red; a thread of smoke rises and spreads. Like a real machine, the holes inside (the eye of the e) are cut before the outline. When the cut is done the bridge leaves upwards, the letters sink a hair into the plate and the gap shows all round them; then, one after the other, they come loose with a snap, rise, turn a full circle showing their thickness and their polished edge, which flashes as they turn, and stay floating above the plate, tipped a little towards us, with their shadow below. The plate keeps the empty logo: through the holes you see the cut walls and the slats of the bed, with a brown heat tint round them. The letters float, each bobbing on its own, and a glint passes over them now and then; after a few seconds the plate leaves to the right with the letters and a new one comes in, with sparks and smoke a little different. A click restarts it. A picture can take the place of the word: its dark or coloured parts are cut out the same way.

How it works

The outline, taken from a canvas

To cut, you need the outline of the letters, which a text element does not give. So the logo is drawn on a hidden canvas (the word in its typeface, or the picture), every pixel becomes a value from 0 to 1 and the marching squares algorithm follows the line where the value crosses 0.5: the point is interpolated inside the pixel, so the outline is smooth even from a small picture. Out come closed rings, thinned with Ramer-Douglas-Peucker. A ring inside an odd number of others is a hole: it goes to the piece that holds it, and every piece is a path with fill-rule evenodd.

The cut that cools

Every ring has four identical strokes: a blurred glow, the red-hot stroke, the red one and the cold one. Each shows a different stretch of the outline with stroke-dasharray (the length of the stretch, then a gap longer than the ring) and stroke-dashoffset (where it starts). The red-hot one runs from where the nozzle was 0.22 seconds ago to where it is now, the red one from 0.8 seconds ago to 0.22, the cold one from the start to 0.8: so the colour cools with time, even after the nozzle has moved on to the next ring. Holes are cut first, then the outline, and every ring starts at the point nearest the nozzle.

One clock

The whole cut is a timetable worked out once: moves with the beam off, piercing, the trip round the outline, at a speed chosen so that it all fits in the seconds of CUT. The timeline moves a single number, the clock, and one function draws the moment: where the nozzle, the bridge and the head are, the strokes of the cut, the light on the plate. Sparks and smoke are born once too, from a seeded random generator (the first round is always the same, for the poster): every spark has a birth, a direction and a speed, and its height is worked out by hand, bounces included. The timeline can be stopped and rewound anywhere.

Thickness and the polished edge

The holed plate has a copy of itself underneath, pushed down by the thickness: inside the holes it becomes the cut wall, below the edge the side of the plate. Until the letters come loose the whole plate sits on top of them, so no seam shows. A piece turning round its horizontal axis is its face squashed in height by the cosine of the angle, with a stack of copies below it shifted by the thickness times the sine: that is the edge. Every copy has a different grey that slides with the angle, so the edge flashes as the piece turns. When the cosine goes negative the stack changes order and the face becomes the back, darker.

Direction and your logo

The timeline has the labels start, arrive, cut, drop, snap, lift, reveal, rest and leave, and timeScale for the speed. Coming loose is a sink of twelve hundredths of a second, a snap upwards with power4.out and the rise with back.out, while the turn lasts longer with power2.inOut; the pieces leave one after the other from the left. At rest the bobbing grows from zero and every piece has its own phase. If IMAGE holds an address the picture is cut: its dark or coloured parts become pieces; a light logo on a transparent background is cut by its shape. 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	`'Kerfly'`	The logo as a word: every letter is cut out of the plate.
`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 its dark or coloured parts are cut out.
`CUT`	script.js	`3.6`	How many seconds the laser takes to cut the whole logo.
`SPARKS`	script.js	`1`	How many sparks fly from the cut: 0 none, 2 a shower.
`THICK`	script.js	`1`	How thick the plate is: how much of the walls in the holes and of the polished edge of the letters shows.
`FLIP`	script.js	`1`	How many times the letters turn over as they rise (0 = they only tilt).
`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 the plate leaves.
`LOOP`	script.js	`true`	Whether the plate leaves and a new one is cut. With false the letters stay floating, bobbing and glinting.

Try them in the Playground

When to use it

To present a logo with a gesture that smells of workshops and precision: the opening of the site of an engineering firm, a laser-cutting shop, an industrial design studio or a brand of metal goods, 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: on a tall screen the plate is taller and narrower, the rails thinner and the letters rise higher. A tap restarts it.

With reduced motion

Nothing moves and there are no sparks or smoke: the plate fades in, then the cut, already cold; the whole plate fades away and the holes and the letters, already floating, fade in in its place. If the animation starts again, everything leaves with a fade.

Pitfalls

With nothing on top, the plate showed the logo before the cut had even started: the heat tint round the holes and the dark line on the edge of the pieces already draw every letter. Until the pieces come loose the whole plate, without holes, sits on top of them, then it disappears.
With many outlines (a long name, a picture) the small moves between one ring and the next, with their minimum length, ran over the time of CUT: in the end the whole timetable is squeezed back into CUT. The waits between one piece and the next have a ceiling too, so the intro stays under nine seconds.
Sparks and smoke simulated frame by frame would be wrong when the timeline is rewound (and in the poster): they are all born once, from a seed, and where they are is a function of time, bounces included.
Sparks drawn on top of the machine looked like dirt on the head: they sit under the bridge and the head, and you see the ones that shoot sideways and fall back on the plate.
A picture from another site without CORS permission can't be read from the canvas (getImageData throws): it is loaded with crossOrigin first and, if that fails, cut as a plain rectangle.

Libraries

GSAP 3.15.0, Archivo (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 17 KB; the libraries: GSAP 28 KB.

Testing

Tested on 11 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.