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!
Top comments (0)