Add a Light Source with CSS and the fePointLight SVG Filter
The CSS filter property lets us apply the power of SVG filter effects to HTML elements. One little-known effect included in modern browsers is <fePointLight>. We'll use it together with <feDiffuseLighting> to add a light source to an <h1 /> element.
Instructor: [0:00] We can use the filter CSS property to change how an element looks. For example, we can blur the element or add a shadow. One special filter we can use is the URL function. It takes an ID as an argument. That's the idea of a special filter.
[0:19] Somewhere on the HTML, we need an SVG element with a filter, and that filter should have the ID from the CSS. Inside the filter, we need to add effects. We can have a basic effect like a blur, or we can have something very complex combining several effects. We're going to focus on the point light effect.
[0:44] First, it doesn't seem to do too much. Let's see what happens when we change the set parameter. We have a light source at the top left of the h1. We moved it closer to the viewer, away from the web page.
[1:01] The diffuse lighting effect is taking the h1's alpha channel and using it as a bump map. That means that the opaque part of the h1 detects, and border are higher than the background, which is transparent, so the browser is taking the height map and the position of the light source to calculate the output.
[1:24] We can change the height of the opaque part using the surface scale. Now the letters and the border are closer to the viewer. We can also change the light color, and we can move the light source to a different position. Here, we are using pixels. We can change the primitiveUnits property of the filter to offset bounding box. Now, instead of pixels, we can use fractions of the h1 size.