The blown-glass logo

Intro, SVG, TextGSAPAdvancedCompressed weight: Demo 16 KBGSAP 28 KBFreeDownload the zip

A logo intro in a glassworks, with no characters: a gather of glowing glass arrives on the blowpipe, swells in three breaths, is rolled on the steel table into a bar, the pipe pulls away with its thread and the letters rise out of the bar, then cool from orange to red to clear glass, with a sheen and a ring of light. 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 blown-glass logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/rubik@5.2.8/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, builds the blowpipe, the gather of molten glass and the letters -->
    <svg class="palco" data-stage role="img" aria-label="Glowen" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the light of the furnace behind, warm while the glass is hot -->
        <radialGradient id="furnace-light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="luce-forno" />
          <stop offset="1" class="luce-forno luce-forno--via" />
        </radialGradient>
        <!-- the cold light of the room, once the glass has cooled -->
        <radialGradient id="room-light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="luce-fredda" />
          <stop offset="1" class="luce-fredda luce-fredda--via" />
        </radialGradient>
        <!-- the steel table, the marver, where the gather is rolled -->
        <linearGradient id="marver" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="banco-stop banco-stop--velo" />
          <stop offset="0.3" class="banco-stop banco-stop--su" data-marver-mid />
          <stop offset="1" class="banco-stop" />
        </linearGradient>
        <!-- the glow the hot glass throws on the table -->
        <radialGradient id="table-glow" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="riverbero" />
          <stop offset="1" class="riverbero riverbero--via" />
        </radialGradient>
        <!-- the bubble of air inside the gather: less glass there, so it glows less, with a soft edge -->
        <radialGradient id="bubble-fill" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="bolla-stop" />
          <stop offset="0.7" class="bolla-stop bolla-stop--mezzo" />
          <stop offset="1" class="bolla-stop bolla-stop--via" />
        </radialGradient>
        <!-- the steel of the blowpipe, lit from above -->
        <linearGradient id="pipe-steel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="canna-stop canna-stop--luce" />
          <stop offset="0.45" class="canna-stop" />
          <stop offset="1" class="canna-stop canna-stop--buio" />
        </linearGradient>
        <!-- the end of the pipe, red from the glass -->
        <linearGradient id="pipe-hot" x1="0" y1="0" x2="1" y2="0">
          <stop offset="0" class="canna-calda canna-calda--via" />
          <stop offset="1" class="canna-calda" />
        </linearGradient>
        <!-- the pipe turns all the time: a spiral of marks runs along it -->
        <pattern id="pipe-turn" patternUnits="userSpaceOnUse" width="14" height="14" data-turn>
          <path class="canna-giro" d="M-4 18L10 -4M10 18L24 -4" data-turn-path />
        </pattern>

        <!-- the molten glass. Everything hot sits in one group, painted white; a piece that cools gets fainter. This
             filter melts the pieces together (blur, then cut the blur at nearly half height: the goo) and paints them
             like hot glass from the blur itself: deep inside a thick, hot piece it is pale yellow, then orange, red at
             the thin edges and on a fading piece, a last dull ember before it goes; and a glow around. The script
             writes the colours from the page into the tables -->
        <filter id="molten" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-molten>
          <feGaussianBlur in="SourceGraphic" stdDeviation="6" result="soft" data-goo-blur />
          <feColorMatrix in="soft" type="matrix" values="0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 20 -9" result="goo" />
          <feColorMatrix in="soft" type="matrix" values="0 0 0 1 0  0 0 0 1 0  0 0 0 1 0  0 0 0 1 0" result="depth" />
          <feComponentTransfer in="depth" result="paint">
            <feFuncR type="table" data-map-r />
            <feFuncG type="table" data-map-g />
            <feFuncB type="table" data-map-b />
            <feFuncA type="table" data-map-a />
          </feComponentTransfer>
          <feComposite in="paint" in2="goo" operator="in" result="hot" />
          <feGaussianBlur in="hot" stdDeviation="14" result="halo" data-glow-blur />
          <feComponentTransfer in="halo" result="glow">
            <feFuncA type="linear" slope="1.4" data-glow-strength />
          </feComponentTransfer>
          <feMerge>
            <feMergeNode in="glow" />
            <feMergeNode in="hot" />
          </feMerge>
        </filter>
        <!-- the glint at the end: soft around its rays -->
        <filter id="flare-soft" x="-50%" y="-50%" width="200%" height="200%">
          <feGaussianBlur stdDeviation="1.2" result="b" data-flare-blur />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
      </defs>

      <!-- the room: the furnace light, the cold light, the table with the glow and the reflection of the glass -->
      <rect class="forno" fill="url(#furnace-light)" data-furnace />
      <rect class="stanza" fill="url(#room-light)" data-room />
      <rect class="banco" data-table-base />
      <g data-reflection>
        <use href="#glass-all" />
        <g class="riflesso-caldo" data-reflection-hot></g>
      </g>
      <!-- the steel over the reflection: it lets it through at the edge and covers it further down -->
      <rect fill="url(#marver)" data-table />
      <rect class="banco-bordo" data-table-edge />
      <ellipse fill="url(#table-glow)" data-table-glow />

      <!-- the shimmer of the hot air over the glass -->
      <g class="aria-calda" data-haze></g>

      <!-- the blowpipe; its tip is the point 0 0, the pipe runs off to the left -->
      <g data-pipe>
        <g data-pipe-body></g>
      </g>

      <!-- the clear glass, one group per letter, under the hot glass that covers it while it cools -->
      <g id="glass-all" data-glass></g>

      <!-- the hot glass: the gather, the bar on the table, the thread that snaps, the letters -->
      <g filter="url(#molten)" data-hot>
        <rect data-gather />
        <path class="filo" data-thread />
        <circle data-stub />
        <g data-hot-letters></g>
      </g>
      <!-- the bubble of air blown inside the gather -->
      <ellipse class="bolla" fill="url(#bubble-fill)" data-bubble />
      <path class="bolla-luce" data-bubble-light />

      <!-- the glint and the ring of the glass when it is done -->
      <g data-flare-place>
        <g data-flare filter="url(#flare-soft)">
          <path class="lampo" data-flare-rays />
        </g>
        <g data-rings></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.

31 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 blown-glass logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A glassworks in the dark, with a steel table at the bottom. From the left a blowpipe swings in, polished steel that keeps turning (a spiral of marks runs along it) with its tip red with heat; on its end it carries a gather of molten glass, orange with a pale yellow heart and a red edge, which trails behind as it arrives, stretches and then catches up with a jelly wobble. The light of the furnace follows it and warms the room. Then three breaths: with each one the gather swells with a jolt, sways and settles a little bigger, the pipe gives a little, the glow flares, and inside grows the bubble of air, darker, with a thin highlight. The pipe lowers the gather onto the table: it touches, squashes and goes flat underneath; the table lights up with its glow. It is rolled into a long glowing bar, which stretches past the logo and springs back. The pipe pulls: between its tip and the bar a thread of glass stretches, pinches in the middle and snaps, a blob stays on the tip and the pipe leaves; the bar, pulled, bounces back. Out of the bar rise the letters of the logo of a made-up brand, Glowen, from the middle outwards, like pulled taffy: they stretch past their height, drop back and wobble, while the bar melts into their feet. Then the glass cools, one letter after another: from yellow to orange to red, the thin parts first, to a last dark ember, and in its place stays clear glass with a thick green-blue edge, a lit side, the dark side of the refraction and two slanting reflections; when a letter sets it gives a tiny tick. The table reflects the hot letters first, then the glass; the light in the room turns from warm to cold and the shimmering air over the glass settles. At the end a sheen runs across the logo, a star of light flashes on the corner of the last letter with a ring of small arcs, and the letters shiver a little, like struck glass. The logo stays on show with a sheen now and then; then it heats up again, slumps into the bar, the bar turns back into a gather and the light goes out, and it all starts again. A click restarts it. A picture can take the place of the word: it rises out of the molten glass with its own outline and, once cool, keeps its colours with the reflections of glass.

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 bar on the table is as long as the logo plus half a letter, the gather after the last breath has a radius of almost a letter and hangs above the place of the logo, the table starts where the letters stand. The size is chosen so that the gather above and the reflection below both fit.

Molten glass in a filter

Everything hot (the gather, a rectangle with corners as round as half its side, the thread, the blob on the tip and the letters) sits in one white group under a single filter. A feGaussianBlur and a feColorMatrix that cuts the alpha just under half melt the pieces that are close together (the goo). From the same blur a second feColorMatrix copies the alpha into the colours, and a feComponentTransfer with four tables turns it into colour: pale yellow where the glass is thick and hot, then orange, red at the thin edges, a dark ember just over the cut. A feComposite clips it to the goo and a second blur makes the glow. The script writes the tables from the colours in :root.

The cooling

Each letter has its own heat, from 1 to 0, and the heat becomes its opacity in the hot group, from 1 to 0.44. So the filter, which reads the blurred alpha, paints it redder and redder, and the thin parts, where the blur is lower, drop under the cut first: the glass cools from its edges, like real glass. Underneath is the letter in cold glass, which shows as the heat goes: an almost clear body and, inside a clipPath of the letter, the thick edge, the lit side and the shaded side (the letter itself moved a touch and stroked) and the reflections. The reflection in the table is a use of all the glass turned upside down, covered more and more by the steel.

The gather, the pipe and the thread

The gather is an object with a place, a width and a height; the pipe has no place of its own: on every frame it sets itself on the left side of the gather along its own slant, so it follows it as it swells, lands and stretches into a bar. The thread that snaps is a filled path, thick at both ends and thin in the middle: as the middle gets thinner, the goo pinches it and snaps it by itself. The jolts, springs and wobbles of the letters are elastic.out, softer or stiffer with WOBBLE.

Direction and your logo

The whole intro is one timeline, with the labels start, arrive, blow, marver, snap, rise, cool, ting, rest and leave and timeScale for the speed; a gsap.ticker redraws the scene and writes only the attributes that change, and the filter's box follows the hot glass, so the work is done only where it is needed. If IMAGE holds an address, the logo becomes that picture: a filter turns it into a shape (its dark and coloured parts, not the light ones or the transparent background) that rises out of the molten glass, and once cool it keeps its colours under the reflections. 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	`'Glowen'`	The logo as a word: each letter rises out of the molten glass and cools into clear glass.
`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.
`BREATHS`	script.js	`3`	How many breaths blow up the gather of glass, from 1 to 5: with more breaths it also grows bigger.
`COOLING`	script.js	`2.2`	How many seconds the glass takes to cool from orange to clear.
`WOBBLE`	script.js	`1`	How soft the molten glass is: how far it stretches, melts together and wobbles (0 = stiff, 2 = very soft).
`GLINT`	script.js	`1`	How strong the sheen across the glass, the star of light and the ring at the end are (0 = none).
`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 glass logo stays on show before it is melted again.
`LOOP`	script.js	`true`	Whether the logo melts down and a new one is blown. With false it stays in glass, with a sheen now and then.

Try them in the Playground

When to use it

To present a logo with a crafted, glowing gesture: the opening of the site of a glassworks, a design brand, jewellery, perfume or glassware, a cocktail bar or an elegant hotel, 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 logo is almost as wide as the screen, the gather is a little bigger compared with the letters and hangs above them. A tap restarts it.

With reduced motion

Nothing moves: the pipe with the blown gather fades in and away, the glowing logo fades in in its place and only changes colour as it cools into clear glass. If the animation starts again, the glass leaves with a fade.

Pitfalls

With a filter of blurs over the whole window every frame cost too much: the filter's box follows the hot glass on every frame (gather, thread and the letters that have risen) with a margin for the glow, the hot group switches off when nothing is hot, and attributes are written only when they change.
Cold glass with three masks per letter (and its copy in the reflection) was as slow as the filter: the edge, the lit side and the shaded side are made inside a clipPath, with the letter itself moved and stroked, which costs much less than a mask.
The reflection in the table was the cold glass, so under a letter still red a glass letter was already mirrored: there is a hot reflection too, an orange copy of each letter that fades with the heat.
The snapping thread, drawn as a line of even thickness, vanished all at once inside the goo: it is a filled path, thin in the middle, so it pinches there and its two ends pull back.
The handover from hot to cold must not flicker: the heat is the letter's opacity in the hot group and the goo cuts at 0.45, so from 0.5 down to 0.44 the hot letter fades slowly like an ember, while the cold glass underneath has already appeared.

Libraries

GSAP 3.15.0, Rubik (font variabile) 5.2.8.

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

Testing

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