Animated Neon Signs With SVG and CSS

Ben Hatsor — Thu, 04 Feb 2021 08:25:44 +0000

In this article, I'll show some of the techniques I used to create this sign:

First off, we need to get an SVG. In this case, the popper.

I used The Noun Project, which is a large collection of SVGs you can use for free. Here's the SVG I used.

Now that we have the SVG, let's make it glow!

We'll create a duplicate of the popper, put it behind the popper, and blur it.

First, we create an SVG <filter> with an ID of glow-red.

<svg>
  <defs>
      <filter id="glow-red" height="122%"></filter>
  </defs>
</svg>

Then, we define the filter, setting it to blur using <feGaussianBlur>, and changing the blur radius with the stdDeviation property.

<feGaussianBlur stdDeviation="5">

We also add some additional properties that control the position (dx, dy) and color (flood-color) of the blur.

<feOffset in="blur" dx="0" dy="0" result="offsetBlur">
<feOffset dx="1" dy="1" result="offsetblur">

<feFlood flood-color="red" result="offsetColor">

Finally, we create a duplicate of the popper with the <use> element, and apply our filter.

<use xlink:href="#popper" filter="url(#glow-red)">

Here's what we have so far:

<svg viewBox="0 0 125 120">
    <defs>
      <filter id="glow-red" height="122%">
        <feGaussianBlur in="SourceAlpha" stdDeviation="5"></feGaussianBlur> 
        <feOffset in="blur" dx="0" dy="0" result="offsetBlur"></feOffset>
        <feOffset dx="1" dy="1" result="offsetblur"></feOffset>
        <feFlood flood-color="red" flood-opacity="1" result="offsetColor"></feFlood>
        <feComposite in="offsetColor" in2="offsetBlur" operator="in" result="offsetBlur"></feComposite>
      </filter>
    </defs>
    <use xlink:href="#popper" filter="url(#glow-red)"></use>
    <path d="..." id="popper" class="popper"></path>
</svg>

Now we have our glow. But what if we wanted it to flicker, like an actual neon sign?

We can do that using CSS animations:

Here, we're making each popper appear at a certain time in the animation.

The first popper appears at 1/3 of the animation (33%), the second popper appears at 2/3, and so on.

Here's how you would write that in CSS:

@keyframes first-popper-appear {
  0%, 33.33% {
    opacity: 1;
  }
  33.99%, to {
    opacity: .1;
  }
}

/* And so on... */

End result:

Thanks for reading!

DEV Community: Ben Hatsor

Animated Neon Signs With SVG and CSS