02. SVG filters for HTML elements

Did you know that you can use SVG filters to style any HTML element?

Include your SVG filter in your HTML and visually hide from the page. Don't use display: none; as Firefox will not apply your filter. Use another technique to hide your SVG like position: fixed; opacity: 0;.

Now you can refer to your SVG filter in CSS with the filter CSS property: filter: url(#mySVGFilter);

Apply a duotone effect on an image

<svg class="hidden">
  <filter id="duotone">
    <feColorMatrix type="matrix" values=".33 .33 .33 0 0
	    .33 .33 .33 0 0
	    .33 .33 .33 0 0
	    0 0 0 1 0">
	  </feColorMatrix>
	<feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0.58 0.64"/>
	  <feFuncG type="table" tableValues="0.45 1"/>
	  <feFuncB type="table" tableValues="0.78 0.89"/>
	</feComponentTransfer>

</svg>
<img src="./assets/img/tokyo.jpg" style="filter: url(#duotone)" alt="Streets of Tokyo" />

Hover to remove the filter

Create a Squiggly Text effect

This effect was inspired from this demo by Lucas Bebber

<svg class="hidden">
  <filter id="squiggly">
    <feTurbulence id="turbulence" baseFrequency="0.02" numOctaves="3" result="noise" seed="0">
      <animate attributeName="seed" from="1" to="10" dur="1s" repeatCount="indefinite" />
    </feTurbulence>
	<feDisplacementMap id="displacement" in="SourceGraphic" in2="noise" scale="6" />
  </filter>
</svg>
<p class="squiggly-text" style="filter: url(#squiggly)">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab, placeat iste temporibus soluta, mollitia quisquam. Esse, tempore dignissimos minima, voluptatem facere perspiciatis laborum suscipit.
</p>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non ab, placeat iste temporibus soluta, mollitia quisquam. Esse, tempore dignissimos minima, voluptatem facere perspiciatis laborum suscipit.