SVG Filters - The Crash Course

on YouTube ↗48m

" summary

Claim: SVG filters let you recreate Photoshop‑grade effects in the browser using concrete primitives and sequences. Examples include a drop shadow built from feOffset + feGaussianBlur + feFlood + feComposite + feMerge, outline text via feMorphology, displacement maps using feImage → feColorMatrix → feGaussianBlur → feDisplacementMap, and textured lighting from feTurbulence + feDiffuseLighting. Notes: browsers add ~10% filter padding by default, turbulence uses baseFrequency and up to 5 octaves, and filters are animatable via CSS.

AI-written summary · about

" chapters (9)

1. 0:00Start
2. 6:32THE FILTER REGION
3. 11:33CREATING A DROP SHADOW
4. 15:05FEMORPHOLOGY
5. 22:37APPLYING TEXTURE
6. 29:07CREATING TEXTURE
7. 34:38LIGHTING
8. 40:38IMAGE COLOR MANIPULATION EFFECTS
9. 40:50POSTER EFFECT

" related talks

• 49mSVG Filters: The Crash CourseSara Soueidan · Beyond Tellerrand Munich 2018
• 30mSVG FiltersYuliya Bukhvalova · Я ❤ Frontend 2019
• 40mFilter Effects & Blend ModesDivya Manian · CSS Day 2013
• 43mSmartWeb 2016 - Una KravetsUna Kravets · SmartWeb 2016
• 22mSVG Can Do That?!Brenna O'Brien · CSSConf Oakland 2014
• 30mDown the SVG Rabbit HoleRobyn Larsen · JSUnconf 2018
• 07mAnimation & EffectsVikram Jit Singh · Meta Refresh 2015
• 59mThe web design cheat code: Using SVG to bridge CSS’ gapsLea verou · Frontend United 2019