The neon-bent logo

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

A logo intro on a brick wall at night, with no characters: a glass tube flies in, a blue flame heats it and bends it letter by letter along the outline of the brand, then the transformer's lever flips, the box hums and the gas comes on in fits and starts until the pink light holds on the bricks. 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 neon-bent logo</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fontsource-variable/quicksand@5.3.0/index.css">
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <main class="scena">
    <!-- the stage: the script measures it, traces the logo into tubes, paints the bricks and builds the transformer -->
    <svg class="palco" data-stage role="img" aria-label="Lowlit" xmlns="http://www.w3.org/2000/svg">
      <defs>
        <!-- the brick wall: two tiles the script paints on a canvas, the wall in the dark and the wall lit by the sign -->
        <pattern id="bricks" patternUnits="userSpaceOnUse" width="200" height="200" data-bricks>
          <image width="200" height="200" preserveAspectRatio="none" data-bricks-image />
        </pattern>
        <pattern id="bricks-lit" patternUnits="userSpaceOnUse" width="200" height="200" data-bricks-lit>
          <image width="200" height="200" preserveAspectRatio="none" data-bricks-lit-image />
        </pattern>
        <!-- where the light of the sign reaches the wall: strong around the tubes, gone a little further out -->
        <radialGradient id="reach" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="portata" />
          <stop offset="0.55" class="portata portata--mezza" />
          <stop offset="1" class="portata portata--via" />
        </radialGradient>
        <mask id="light-mask" maskUnits="userSpaceOnUse" data-light-mask>
          <rect fill="url(#reach)" data-light-reach />
        </mask>
        <!-- the coloured air in front of the wall -->
        <radialGradient id="air" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="aria" />
          <stop offset="1" class="aria aria--via" />
        </radialGradient>
        <!-- the warm light of the torch on the wall while the glass is bent -->
        <radialGradient id="torch-light" cx="0.5" cy="0.5" r="0.5">
          <stop offset="0" class="luce-cannello" />
          <stop offset="1" class="luce-cannello luce-cannello--via" />
        </radialGradient>
        <!-- the dark corners of the night -->
        <radialGradient id="vignette" cx="0.5" cy="0.46" r="0.75">
          <stop offset="0.45" class="vignetta vignetta--via" />
          <stop offset="1" class="vignetta" />
        </radialGradient>
        <!-- the torch flame: deep blue at the base, light blue, then gone at the tip -->
        <linearGradient id="flame-outer" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" class="fiamma-stop fiamma-stop--base" />
          <stop offset="0.45" class="fiamma-stop" />
          <stop offset="1" class="fiamma-stop fiamma-stop--via" />
        </linearGradient>
        <linearGradient id="flame-inner" x1="0" y1="1" x2="0" y2="0">
          <stop offset="0" class="fiamma-cuore-stop" />
          <stop offset="1" class="fiamma-cuore-stop fiamma-cuore-stop--punta" />
        </linearGradient>
        <!-- the steel of the transformer -->
        <linearGradient id="box-steel" x1="0" y1="0" x2="0" y2="1">
          <stop offset="0" class="scatola-stop scatola-stop--luce" />
          <stop offset="1" class="scatola-stop" />
        </linearGradient>
        <!-- the glows: the script sizes their boxes and blurs to the letters -->
        <filter id="halo" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-halo-filter>
          <feGaussianBlur stdDeviation="20" data-halo-blur />
        </filter>
        <filter id="near" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-near-filter>
          <feGaussianBlur stdDeviation="5" data-near-blur />
        </filter>
        <filter id="heat" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB" data-heat-filter>
          <feGaussianBlur stdDeviation="4" result="b" data-heat-blur />
          <feMerge>
            <feMergeNode in="b" />
            <feMergeNode in="SourceGraphic" />
          </feMerge>
        </filter>
        <filter id="shade" filterUnits="userSpaceOnUse" data-shade-filter>
          <feGaussianBlur stdDeviation="3" data-shade-blur />
        </filter>
      </defs>

      <!-- the wall, in the dark and lit by the sign -->
      <rect fill="url(#bricks)" data-wall />
      <rect fill="url(#bricks-lit)" mask="url(#light-mask)" data-wall-lit />
      <rect class="aria-colore" fill="url(#air)" data-air />
      <rect class="aria-colore" fill="url(#torch-light)" data-torch-light />
      <rect fill="url(#vignette)" data-vignette />

      <!-- the transformer, the cable to the sign, the lever and the hum -->
      <g data-box-place>
        <g data-box>
          <g data-box-shake></g>
        </g>
      </g>
      <path class="cavo" data-cable />

      <!-- the sign: every outline of the logo is a glass tube, bent by the flame and then lit by the gas -->
      <g data-sign>
        <g class="ombra-tubo" filter="url(#shade)" data-shadows></g>
        <g data-flame-place>
          <g data-flame>
            <path class="fiamma" fill="url(#flame-outer)" d="M0 0C-0.2 -0.14 -0.2 -0.42 -0.1 -0.62C-0.05 -0.76 -0.02 -0.9 0 -1C0.02 -0.9 0.05 -0.76 0.1 -0.62C0.2 -0.42 0.2 -0.14 0 0Z" />
            <path class="fiamma" fill="url(#flame-inner)" d="M0 -0.03C-0.09 -0.1 -0.1 -0.3 -0.04 -0.46C-0.02 -0.54 0 -0.6 0 -0.62C0 -0.6 0.02 -0.54 0.04 -0.46C0.1 -0.3 0.09 -0.1 0 -0.03Z" />
          </g>
        </g>
        <g data-caps></g>
        <g class="vetro" data-glass></g>
        <g class="gas-alone" filter="url(#halo)" data-halo></g>
        <g class="gas-vicino" filter="url(#near)" data-near></g>
        <g class="gas-tubo" data-gas></g>
        <g class="gas-cuore" data-core></g>
        <g class="vetro-lucido" data-shine></g>
        <g filter="url(#heat)" data-hot></g>
        <g class="caldo-cuore" data-hot-core></g>
        <!-- the straight stretch of tube still to be bent, in the hands -->
        <g data-tail>
          <line class="ombra-tubo ombra-tubo--coda" filter="url(#shade)" data-tail-shadow />
          <line class="vetro-coda" data-tail-glass />
          <line class="vetro-lucido" data-tail-shine />
          <line class="caldo" filter="url(#heat)" data-tail-hot />
        </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.

32 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 neon-bent logo” from Animorio and fit it into my site

Connect Animorio to Claude Code

What it does

A brick wall in the dark, with bricks of different shades, dark mortar and blacker corners. A transformer drops onto the wall from above, a small steel box with a label plate and vents, bounces and stops. From the left a straight, clear glass tube flies in, turning over, lands where the first letter of a made-up brand, Lowlit, begins, and sways a moment longer; a blue flame snaps on under its tip, lighting the bricks around it orange, and the glass reddens. Then the bending: the flame follows the point where the tube bends and the glass takes the shape of the outline of each letter, orange where the flame has just been and clear again behind, while the straight piece still to be bent turns in the hands following the curves. At the end of each outline the flame hops in a little arc to the start of the next, the dark electrodes snap on at the two ends of the tube and each finished letter swells a touch and settles with a spring. With the logo done the flame goes out, the cable runs down from the tube to the box, the lever flips and the box shakes and hums, with arcs coming out of its sides. The gas runs into the tubes letter by letter and the light comes on in fits and starts: it goes out, comes back half way, goes out again, one letter stays dark and tries twice before it lights, and in the end the light holds: pink with a white heart, the glow around it and the bricks lit pink near the sign. The logo stays lit and now and then a letter trembles; then the lever goes back down, the light goes out in jerks, the tubes wind back one after the other, the box leaves and it all starts again. A click restarts it. A picture can take the place of the word: the outline of its dark or coloured parts becomes the tubes.

How it works

The outline of the letters

The logo is drawn on a canvas (the word in its typeface, or the picture) and every pixel becomes a value from 0 to 1; marching squares follow the line where the value crosses one half and give smooth, closed outlines, which Ramer-Douglas-Peucker thins out. Glass can't make a sharp corner: every corner becomes a small quadratic curve. The pieces are sorted left to right and pieces stacked one over the other (the dot of the i) stay in the same letter. Each outline starts at its lowest point, runs to the right and leaves a small gap between its two ends, where the electrodes go.

The bending tube

Every outline is an open path drawn several times (shadow, glass, highlight, gas, glow), and the part already bent is a stroke-dasharray as long as the progress. The straight piece still to be bent is a line that starts at the bend and points at a spot on the outline 0.3 letters further on: following that direction instead of the exact tangent, it turns smoothly through the curves. It is never longer than the outline left to bend and never leaves the stage.

The hot glass and the flame

The orange stretch is the same path with a single dash: a stroke-dasharray as long as the heat and a negative stroke-dashoffset so that it ends right on the bend; a feGaussianBlur with feMerge gives it its glow and a shorter yellow stroke the hottest point. The heat of each outline goes from 1 to 0 after the flame has passed, so the glass turns clear again from behind. The flame is two drops with a blue gradient; their scale and tilt flicker with sines of the timeline's clock.

The gas and the wall

Lit, every tube is a wide blurred glow, a near glow, the pink tube and an almost white heart, with an opacity given by how much gas there is, how lit that letter is and the power. The bricks are painted on a canvas twice with the same seeds: in the dark and lit pink. The lit one sits on top, with a radial-gradient mask around the sign and an opacity equal to how lit the sign is on average, so the wall follows every flicker.

Direction and your logo

The whole intro is one timeline, with the labels start, bend, cool, switch, light, rest and leave, and timeScale for the speed. The flickers are a series of sets on the power and on the letters, written as pairs of time and value and softened by FLICKER; the first time the stubborn letter is always the same, then it changes. If IMAGE holds an address, the outline of the dark or coloured parts of the picture (or its shape, if it is light on transparent) becomes the tubes. 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	`'Lowlit'`	The logo as a word: the outline of every letter becomes a glass tube.
`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 outline of its dark or coloured parts becomes the tubes.
`BEND`	script.js	`3.4`	How many seconds the flame takes to bend the tube into the whole logo.
`FLICKER`	script.js	`1`	How much the gas stutters before the light holds: 0 comes on clean, 2 is a fight, with more jolts.
`GLOW`	script.js	`1`	How strong the glow is, around the tubes and on the bricks (0 = just the lit tubes).
`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 lit before it is switched off.
`LOOP`	script.js	`true`	Whether the sign switches off, the tubes wind back and a new one is bent. With false the logo stays lit, with a tremble now and then.

Try them in the Playground

When to use it

To present a logo with the mood of a place at night: the opening of the site of a cocktail bar, a pizzeria, a club, a barber, a festival or a brand that wants an after-dark feel, a preview for a client, a loading screen, a social post. It works with a written wordmark and with a picture of simple shapes.

On phones

The same animation with the sizes adapted: the logo is almost as wide as the screen, the bricks keep their size and the tube being bent never goes past the edges. A tap restarts it.

With reduced motion

Nothing moves: the sign, already bent, and the transformer fade in on the wall, then the light comes up slowly, with no flicker. If the animation starts again, the light fades out and the sign fades away.

Pitfalls

The CSS rule that takes the fill off the tube paths (fill: none) also applied to the flame and beat its fill attribute with the gradient: the flame vanished. CSS wins over presentation attributes, so the rule leaves the flame out with :not(.fiamma).
A closed outline drawn with stroke-dasharray has no ends: for the electrodes the path is opened with a small gap at its lowest point, otherwise the finished tube closes on itself and you can't see where it goes into the wall.
The hot stretch ends on the bend with a negative stroke-dashoffset; at the start of an outline it would be longer than the part already bent and show up at the other end of the path: its length is at most the part already bent.
The dot of the i is a piece of its own: without grouping it with the stem, the stubborn letter or the end-of-letter spring could take the stem without its dot. Pieces stacked one over the other belong to the same letter.
The mask of the lit wall reached more than a letter and a half beyond the sign and, with light bricks, the whole wall turned pink: the sign lost its contrast. Darker bricks in the dark and a light that reaches about one letter from the tubes.

Libraries

GSAP 3.15.0, Quicksand (font variabile) 5.3.0.

Compressed with gzip, the three demo files weigh 18 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.