Appy SVG filters to any HTML Element

I just learned from the viewBox Newsletter: you can apply SVG filters to anly HTML Elements outside the SVG via CSS. Just define the filter in a (hidden) <svg> tag, give the filter an id and reference it anywhere in the document.

From the Example by viewBox:

<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.

There's also another technique, used in this awesome codepen by yuanchuan. And here's a tool to play around with SVG filters.

Want to learn more about the magical world of SVG? Subscribe to the viewBox Newsletter here.