Add Warping Or Ripping Effects With The feDisplacementMap Filter Primitive

If you like to play around with warping effects in your favorite graphic editor, you might find you you enjoy experimenting with the feDisplacementMap filter.

Continue reading

The feMorphology And feTurbulence Filter Primitives

For the last few weeks I’ve been talking about two types of SVG filter primitives. First were those that help us add color effects, like feColorMatrix and feComponentTransfer followed by those that help us add lighting effects, like feDiffuseLighting and feSpecularLighting.

Continue reading

Create SVG Lighting Effects With The feSpecularLighting Filter Primitive

One type of light illuminates an object and another type highlights it. Today we’ll talk about the latter, specifically the filter primitive feSpecularLighting, which is used to create highlights on an SVG image or graphic.

Continue reading

Create SVG Lighting Effects With The feDiffuseLighting Filter Primitive

Lighting effects can be used to show the 3-dimensionality of an object, to brighten an object, or to illuminate a specific part of an object or background.

Continue reading

An Introduction To SVG Lighting Filters And Light Sources

While current trend in web design favors a flat look, I have no doubt that depth will return and we’ll once again see 3-dimensional design elements. When that time comes, SVG will have us covered with a handful of filter primitives that work together to create different lighting effects and bring back the missing dimension into and out of the screen.

Continue reading