The SVG Filter and why it’s awesome

I had the honour to write a post over at smashing magazine, where I take a closer look at SVG filters and the phantastic possibilties they offer for us designers to create astonishing type effects.

So head over to Smashing Magazine and read my article there:

Demos

Here are local copies of my demos from the article:

Outlined and filled with pattern

• SVG only
• Applied to HTML

Extruded and filled with pattern

• SVG only
• Applied to HTML

Extruded and illuminated

• SVG only
• Applied to HTML

Used, grungy look with the help of fractal filters

• SVG only
• Applied to HTML

feTurbulence to achieve a spilled water effect

• SVG only
• Applied to HTML

Some “pop-arty” color effects

• SVG only
• Applied to HTML

Sketchy style

• SVG only
• Applied to HTML

Basic techniques

• Outline
• Offset
• Colorfill
• Imagefill
• Noisefill
• Torn out look
• Lighting Effect
• Extruded bevel

Code

Here are links to the Codepen and GitHub Repositories

• Play with code on Codepen
• Download Code from Github