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