DEV Community

Cover image for Animated Neon Signs With SVG and CSS
Ben Hatsor
Ben Hatsor

Posted on • Updated on

Animated Neon Signs With SVG and CSS

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>
Enter fullscreen mode Exit fullscreen mode

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

<feGaussianBlur stdDeviation="5"> 
Enter fullscreen mode Exit fullscreen mode

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">
Enter fullscreen mode Exit fullscreen mode
<feFlood flood-color="red" result="offsetColor">
Enter fullscreen mode Exit fullscreen mode

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

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

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>
Enter fullscreen mode Exit fullscreen mode

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... */
Enter fullscreen mode Exit fullscreen mode

End result:

Thanks for reading!

Top comments (0)