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