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.