Creating an animated SVG Neon light effect

Full Tutorial — From Illustrator to Sketch to SVG

Look here, to see the animation in action. And yeahh this one right here is a GIF… 1.5MB, I know, not a good solution :-)

We at 9elements organize an annual JavaScript conference called RuhrJS. The key visual shows a shaft tower and the conference name executed with a neon light effect. The main page features the full visual with flickering lights. This effect is created by using a video loop in the background. Our visual designer (Tommi Gutscher) also created some lovely images for all the sections on the website. So when the website was built, our frontend developer asked me to export some transparent .png files for her, so she can insert them in the header region.

I took a look at the files and saw that a lot of blur and shadow effects were used to create the neon light effect. To export a transparent file my first attempt was the good old:
cmd+shift+c copy merged
cmd+n create new file
cmd+v paste from clipboard
cmd+option+shift+s export for web
(pretty old school I know).

When exported as transparent png, filesize is about 80KB

The resulting image was about 80KB large and not crisp on my high-resolution MacBook. Also, 80KB are a hell lot of bytes, especially when you’re at the conference and want to look up the schedule on a poor data plan. Somehow while doing all this, I had a strange feeling. It all felt like being thrown back about ten years.

Switching to SVG

A little frustrated I had another look at the project folder and found an Illustrator file with some very nice and clean vector paths for all the various header images. This was when I thought that maybe SVG would yield a better result. And maybe it also wouldn’t have to be static.

The original Vector Illustrations done for the Header images.

I don’t want to keep you on tenterhooks. The final result is about 10KB in file size, crisp on every resolution and on top of that, it’s also animated. To me, this seems much better and up do date.

Final Result

If you want to see the results just visit some of the sub-pages:

• RuhrJS — Tickets
• RuhrJS — Speakers
• RuhrJS — Schedule & Location
• RuhrJS — Sponsors

Step by step walktrough

I will take you through every step of building an animated neon sign with glow filters for yourself. You should have some basic knowledge of SVG, CSS, and Sketch. The first part is done in Illustrator and Sketch, so if you’re more of a frontend developer, just grab my demo files and start with part two.

If you’re a graphic designer and afraid of code (psssst… don’t be), it may still be interesting for you to at least read part one, because you will learn some things, your developer is going to love you for.

Part one: Graphic Design

1.1 From Illustrator to Sketch

I never really got comfortable with Illustrator, so my first step here will be to copy the paths from Illustrator to Sketch. So select the group you need and hit cmd + c, then switch to Sketch and press cmd + v. I don’t know when this started, but lately, when you copy from Illustrator to Sketch, it automatically creates a new Artboard. So what you see should look somewhat like this:

1.2 Deleting unused clipping masks

When you look at the layer panel, you see some groups with a layer named clip and another layer inside. The clip-rectangle has the exact same width and height as the layer above it and is set to Use as Mask. This happens quite often when you copy and paste paths from Illustrator to Sketch. Since both layers have the same dimensions, there is no actual masking happening so you can simply delete the clip elements and the groups. After that, your layer list will look a bit more clean:

1.3 Name and combine your layers

When you export an Artboard as SVG, the layer names get converted to id names inside the SVG. Since we want to animate some paths, it is better to know which path represents which character(s). Right now all layers are named “Fill XX” which doesn’t help much. So let’s give all of them a name, that describes their content and also change the order.

Now it’s time to think about the final image and you have to decide which elements will be animated. I chose to only animate the capital letters and the Ampersand. The other elements don’t necessarily have to be a single layer and can be combined to one shape. Again, this makes it easier when we export the file as SVG. In this example, I combined o, cation, i-dot, and n so that I have a single layer that can be named ocation. My preferred way to do the combining is by simply dragging one layer onto another.

Finally, you have a very organized and neatly named layer list, that impatiently waits for some glow effects. Mine looks like this. I could have gone further and also combine chedule and ocation into a single layer, but I kept them for better readability.

1.4 Adding some glow

So far our image is a little flat. I added five shadows in total to get the desired glow effect. Three white shadows for the main glow, a black shadow to add a more depth and finally a turquoise one to cool everything down a little. After applying the shadows, we have to expand the Artboard so that everything is visible. Luckily there is the Resize to Fit option in Sketch, so the Artboard gets just the perfect size.

Here, you can see the settings I used for the glow effect

Resize the Artboard to make sure, that the whole shadow is visible. I used a dark background to better see the effect in place, but make sure you don’t export it.

Now everything is ready to be exported as SVG. Select the Artboard, hit make exportable, choose SVG and click on export.

Hip hip hurray…part one is done. Now it’s time to leave Sketch and open your preferred text-editor.

Part Two: Frontend Development

2.1 Understanding the main SVG structure

Now that we have our SVG, we have to optimize the exported code. The main structure looks like this:

So what is going on here? When you take a look at the <defs> area, you’ll see that there is a repeating pattern with a <path> and a <filter> element. Further down you’ll find another repeating pattern that contains a group (<g>) with two <use> Tags inside.

The elements inside the <defs> tag will not be rendered on the SVG-canvas. Paths and filters are defined in this section, so that they can be referenced from within the <use> tags.

In every <g> the same path is linked in both <use> tags (xlink:href="#path-1"). The first one is responsible for the glow. It is filled black and gets a filter attribute that links to a <filter> already specified in the <defs> section (filter="url(#filter-2)"). The second one is placed on top without any filter, but filled in white (fill="#FFFFFF"). Without it, you’d only see the blur but not the actual form. Maybe this sounds a little confusing, but I think when you look at the simplified code above, you will understand what is going on.

2.2 Getting comfortable with the filters

Let’s take a closer look at one of the <filter> tags. Again, you can identify some elements that form some kind of repeating pattern:

Every shadow we applied in Sketch is built with three SVG filters that are combined. First there is the offset <feOffset>, then the result gets blurred <feGaussianBlur> and finally the blurred result is given a color via <feColorMatrix>. In the end, the four shadows are merged — this happens in the <feMerge> section. If you are not completely happy with the final glow effect, you can try editing the shadows directly inside the SVG instead of going back to Sketch. The stdDeviation attribute, for example, handles the blur amount while dx and dy are responsible for the x and y offset. You can also try to change the values inside the ColorMatrix, but this one is not really self-explanatory 😅.

2.3 Optimizing your SVG

Now that we understood how the SVG is structured, we can do some optimizations. The biggest one here is reducing the number of filters. Since we defined the same shadow for all paths in Sketch, one would assume, that you also only need one filter in the SVG. Sadly Sketch is not smart enough to do that, so we have to do it manually.

When you compare the defined filters, you’ll see, that they are 99% the same. So let’s try and see, what happens when we use the same filter on all <use> tags. Like this:

The image still looks the same, with the same filter applied to all paths. And this is exactly what we want.

Now all the other filters that are not used anymore can be deleted. And the <defs> section will look nicely structured:

<defs>
  <filter ...>
  <path ...>
  <path ...>
  <path ...>
  <path ...>
  <path ...>
</defs>

One final word on filters: When you export filters from Sketch, the width, height, x and y attributes of the filter get some values that don’t really make sense to me. First of all, we can change the filterUnits value from objectBoundingBox to userSpaceOnUse. The filter coordinates are now calculated from the top left of the whole SVG and not from the object that uses the filter. Now we can set the width and height to 100% and the starting x and y attributes to zero.

<filter id="glow" width="100%" height="100%" x="0" y="0" filterUnits="userSpaceOnUse">

In the end, I named the filter “glow” instead of “filter-2” to make it a bit more readable. You could also rename the paths, but having the IDs in the groups was enough for me. The only thing I did was correcting the numbers of the paths so that you have nice ascending numbers.

Of course, you can (and should) use something like SVGOMG to further reduce file size. But be careful and don’t use the Clean IDs option. This will rename all your IDs to single character names and then it will be very hard to read. With accessibility in mind I’d also recommend to leave the <title> in place and write something meaningful in there.

Here you can see the final code of the static SVG:

2.4 Adding animation

We’ll use CSS to animate parts of the image. If you’re planning to insert the final image via <img> you have to write your CSS directly inside the SVG file. If you want to have the styles inside your general CSS file, you need to inline the SVG, because otherwise you don’t have access to its paths.

The keyframe animation is quite simple. All you have to do is switch the opacity from something like 0.4 to 1. We want to create the effect of an old neon sign, that flickers from time to time. To achieve this, simply insert a lot of steps from 0% to 10% and then a pause to 100%:

@keyframes flicker {
  0%    { opacity: 1;   }
  3%    { opacity: 0.4; }
  6%    { opacity: 1;   }
  7%    { opacity: 0.4; }
  8%    { opacity: 1;   }
  9%    { opacity: 0.4; }
  10%   { opacity: 1;   }
  100%  { opacity: 1;   }
}

Once this is defined, you can use it on every element you want to animate. Let’s say we want to use the defined flicker animation, and we want it to have a duration of 6 seconds. The whole animation should be played in an infinite loop and in order to mimic a flickering neon light, we don’t want to ease between the steps, but “jump” directly from one state to the next. Sounds complicated, but it is actually just one line of CSS:

#L { 
  animation: flicker 6s infinite step-end; 
}

For the & I chose a duration of 5 seconds and added a delay of 2 seconds. With the two different duration timings, the whole animation looks a little more random and natural.

#et { 
  animation: flicker 5s infinite 2s step-end; 
}

Well and that’s it. Our animated neon sign SVG is ready. Here you can see the full code.

Over to you: I hope this tutorial has been useful and I’d certainly love to see some of your results.

If you’ve enjoyed this piece and would like to see more, you might want to check out our Website, follow us on Twitter or subscribe to our Newsletter.

Edit 07.Aug 2018

hoorahforsnakes improved my pen by adding another keyframe animation and applying it to the glow component inside the letter groups. The opacity in this animation is set to 0 and not only to 0.4. Looks a little more realistic, because there is no glow visible during the flickering.

Originally published at 9elements.com on July 25, 2018.