Unlimited WordPress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
FREELessons:8Length:1.6 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Neon Light

Now that we’ve been through some styling methods with SVG, we’re going to start moving into some fancier designs. In this project, we’ll create a (slightly cyber punk) neon light text style.

Related Links

2.3 Neon Light

Hey, welcome back to Five SVG Text Projects. In this project, we're gonna be creating this neon light text effect that you see right now. So once again, on your live preview, look for the neonlight link here and open that up. Just starting with some pink text on a black background and open up that same neonlight.html file in your code editor. And now the first thing that we're gonna do is filling the background with the brick texture that you saw and that is this brick texture that you downloaded earlier. In the last lesson, we used a filter to fill a background rectangle. This time, we're going to use a pattern and we're gonna use that pattern as the fill for our background rectangles. So we already have a background rectangle here. And what we're gonna do in our definitions, is we're gonna create a pattern element. So pattern, we're going to give it an id, make that id bricks. We're gonna say patternUnits=userSpaceOnUse. And just once again, let's make sure that everything is sized correctly. Actually, sorry, that's patternUnits, plural. Then we're gonna give it a width of 512 and a height of 500. Now inside our pattern element, we're gonna setup an image element and that is gonna fetch the image from our source folder. So we're gonna set the href to the file name of that bricks texture. We give it an x position of 0 and a y position of 0. And we're gonna reuse the width and height that we put on our pattern element. And then we'll close that element off. So now that is gonna give us a seamless brick texture fill on anything that we apply it to. So down at our rectangle, we're going to just say fill="url". And once again, we're gonna target the ID, so we'll say #bricks. Now, let's see what our result is. All right, so there we go. We have our bricks in the background. We're seeing a couple of little lines in between the tiles but once we put the rest of the effects in place, you won't see those lines any longer. Now we want this to have a look like it's nighttime. So right now these bricks look like they have full sunlight on them. We want to have it look like there's just a little bit of moonlight on the bricks instead. So we're gonna had a filter to our background rectangle, as well as the bricks fill that we already have, so add filter= and we're gonna call url. And we're gonna call this filter WallDarken. What we're gonna do here is just like we've done a couple times so far, we're gonna flood fill that whole rectangle with a darker color. And then we're gonna use a blend primitive to combine that fill color with our background image using the multiplier blend mode. So make sure we're just gonna paste in this whole filter because you've used all of the type of code that's included in here. So we'll add in this filter, so we've got our ID set to WallDarken, the same sizing and positioning code here. We've got a flood primitive. Here's a slightly transparent dark blue color. Then we are taking that multiply color and we're blending it with our source graphic using the multiply blend mode. You'll notice here we're not using an feMerge primitive at the end and that's because there aren't multiple layers that we need to merge with one another. This filter is just gonna output the last result in this stack of primitives. So let's see how that looks. We'll save, there we go, now we've got a nice kind of a moonlit look. Now, right now, we've got some pretty stark edges with our brick texture here. What we're gonna do is soften this all up by adding a vignette around this rectangle. So we're going to have a soft black coming all around here in an oval shape. And to do that, we're gonna create another rectangle to go on the background here. So we just copy and paste the rectangle that we already have. And for this one, we don't need a filter, we only need a fill because we're just gonna use a radio gradient to create this vignette effect. The vignette is gonna have the id Vignette and then we'll go ahead and create our radialGradient. So we've given it the id Vignette, this works in the same way that the linearGradient we made earlier does. The only difference is you need to say radialGradient, instead of linearGradient. But other than that, you just adding stops for each point that you want the color to change. So now we're taking this radial gradient and we're applying it to this rectangle. Let's see what we've got. So we'll save and there we go. Now we've got a nice soft edge all the way around. You can't see that stark change between the bricks and the black background. And on top of that, it just makes it a little bit more atmospheric. So now, we can go ahead and start creating the neon effect applied to our text. So first up, let's add a filter onto our text. With the URL and this one, we'll give the id of neon too. And we are already have a pink fill color here. We're actually gonna be incorporating this pink fill as part of our overall neon effect. Now, let's add in our neon filter. This is just the same as the other filters that we have set up so far. The first thing we are actually going to do with this one is set up a feMerge primitive. And the reason why we are doing this first is because we want to incorporate the source graphic. We're gonna be stacking some layers above and below our source graphic. So we'll add feMergeNode in=SourceGraphic. And now, the first thing we want to add into this effect is a small, soft glow around the outside of our pink lattice. You can probably guess how we are gonna do this, based on what we have done so far and that is with a blur of our original text. So there's not much code required to create this little glow. All we need is a Gaussian Blur primitive, so we're putting our SourceGraphic, we're blurring it by 3 pixels and then we're outputting the result smallglow. So now we can add that in to our Merge. Just plug the small glow in there, we'll save. And there's our soft glow. Now, we're gonna create a glow on the inside of our neon light. We want it to look like the neon light on the inside is growing brighter and lighter. And we can see, in a finished example here, we've got this lighter color in the center. So let's step through how to do that now. The first thing that we're gonna do is create another Gaussian Blur primitive. This time, we're taking the SourceAlpha, which as you recall is a just a black version of our text and we're blurring it by 1 pixel. Now, we wanna take that blurred text and we want to shrink it. So you can see in our finished result that this inner light here is shrunk down smaller than the overall text itself. So we're gonna shrink the blur that we just created with a morphology primitive. So we're taking that blurred alpha, this time, we're using the operator erode. So instead of making the text fatter, it's gonna make it thinner. And we're gonna make it thinner by 2 pixels. So let's plug that in to our merge node and just check out what we've got so far. We'll save, and then you can see we've got that inner just starting to come together. Obviously, we don't wanna be black though, we want to be a bright color. So just like we had before, when we wanna re-color something, we'll add a flood primitive and there is our bright color. And we'll add a composite primitive that takes that black inner that we just saw and mixes it with the inner color that we just created to give us a full inner glow. So let's check that out. We'll save and there we go. And now we've got this nice bright sort of hot white inner to our neon light. So that's created the kind of globe section of the lettering. Now we wanna make it look like that lettering is coming away from the wall. So you can see in our finished project, we're doing that weird drop shadow behind our letters. You've already done a drop shadow in the bevel tutorial, so we're just doing the exact same thing again here. So we're gonna create a Gaussian blur of a SourceAlpha. We're blurring it by 10 pixels this time, a fairly large blur. And then we're offsetting that blurred black text by 10 pixels in both directions to give us that drop shadow. So add in another node. We'll make that our dropshadow, we want it to be behind everything else. We'll save our work and there we go. Now you could see we've got this dropshadow, so it makes it look like you don't just have this flat text plastered on to the background. It brings it forward for you. And finally, the last thing that we need to do is add this pink back light, so that we can actually see the effect of this pink light radiating off our neon light. And this we're gonna do in pretty much the same way that we created the vignette. The vignette has a radio gradient, that's transparent in the middle and has a color on the outside. For the lighting, we're going to create a radial gradient that has a color on the inside and goes to transparent on its outer edges. So were gonna need another rectangle. Just copy and paste this one. And they all want to have this rectangle a little smaller than the one for the vignette to make sure that our pink lighting sits inside of our vignette effect. So we're gonna change its width and height to 90% and then we're gonna offset its x and y position by 5%. And now, we'll change the id of the field that we're gonna use to backlight. And now we're just going to add in another radial gradient for our backlight. So here is the soft pink that's going to be in the center. We're just making it gradually fade out until it becomes transparent on the very edges. So once again, we'll save our work and there is our pink glow and that completes our neon light project. In the next lesson, we're gonna create this cool vintage title effect. So once again, we're gonna be building on some of the things that we've done already but we're gonna get into some more in-depth stuff. You can see that we have a textured background on here. This is not actually done with an image. We're gonna create this from scratch inside the SVG. You can also see we have a diagonal line pattern inside these letters. We'll be doing that from scratch inside the SVG as well. And you can see we have this big chunky extrude that's making these letters look really thick. And we're gonna learn how to do that as well. So that's all coming in the next lesson. I'll see you there.

Back to the top