<ul class="series" data-series=""> <li class="series_item"> <span class="seriesitemtitle"><a href="https://tympanus.net/codrops/2019/01/15/svg-filters-101/">SVG Filters 101</a></span> <div class="seriesitemdescription"> The first article in a series on SVG filters. This guide will help you understand what they are and show you how to use them to create your own visual effects. </div> </li> <li class="seriesitem"> <span class="seriesitemtitle"><a href="https://tympanus.net/codrops/2019/01/22/svg-filter-effects-outline-text-with-femorphology/">SVG Filter Effects – Outline Text with <code><feMorphology></code></a></span> <div class="seriesitemdescription"> In this second part of the SVG Filter series you'll learn all about the <code>feMorphology</code> filter, how it works and how you can use it to create paint-like image effects and proper text outlines. </div> </li> <li class="seriesitem"> <span class="seriesitemtitle"><a href="https://tympanus.net/codrops/2019/01/29/svg-filter-effects-poster-image-effect-with-fecomponenttransfer/">SVG Filter Effects – Poster Image Effect with <code><feComponentTransfer></code></a></span> <div class="seriesitemdescription"> In this third article in the series of articles about SVG Filters you'll learn all about the powerful <code>feComponentTransfer</code> operation and how it can be used to control the individual R/G/B/A components on a pixel level independently. As a practical example, we will be creating a poster image effect by using this primitive to limit the number of colors in an image. </div> </li> <li class="seriesitem"> <span class="seriesitemtitle"><a href="https://tympanus.net/codrops/2019/02/05/svg-filter-effects-duotone-images-with-fecomponenttransfer/">SVG Filter Effects – Duotone Images with <code><feComponentTransfer></code></a></span> <div class="seriesitemdescription"> In this fourth article in the series of articles about SVG Filters you'll learn how to use <code>feComponentTransfer</code> to recreate Photoshop’s duotone image effect and control an image's luminance and color contrast. </div> </li> <li class="seriesitem"> <span class="seriesitemtitle"><a href="https://tympanus.net/codrops/2019/02/12/svg-filter-effects-conforming-text-to-surface-texture-with-fedisplacementmap/">SVG Filter Effects – Conforming Text to Surface Texture with <code><feDisplacementMap></code></a></span> <div class="seriesitemdescription"> In this fifth article in the series of articles about SVG Filters you'll learn how to conform text to surface texture using an SVG displacement map similar to how you would do in graphics editors like Photoshop. </div> </li> <li class="seriesitem"> <span class="seriesitemtitle"><a href="https://tympanus.net/codrops/2019/02/26/svg-filter-effects-moving-forward/">SVG Filter Effects — Moving Forward</a></span> <div class="seriesitem_description"> In this last article of the SVG Filter Effects series, I’ll share a list of useful resources and experiments to learn more about SVG Filters to start creating your own effects. </div> </li> </ul>
The SVG Filters Series
Read the full piece at https://www.sarasoueidan.com/blog/svg-filters-series/