I want to apply a svg filter to different elements, but for the different elements I want to adjust the value of a certain property. Is there a way to pass a variable for each instance?
I know I can set a variable to the filter itself, but then it will change the original and applies that to all instances.
Here my example (codepen). I'd like to add a different 'lighting-color' per instance Is there a way to accomplish this without creating multiple filters?
.paper {
display: inline-block;
width: 200px;
height: 200px;
filter: url(#paper-texture);
}
.paper.blue { --paper-color: blue; } /*does not work*/
.paper.red { --paper-color: red; } /*does not work*/
#paper-texture { /*effects the original filter for all instances*/
--paper-color: blue;
}<div class="paper blue"></div>
<div class="paper red"></div>
<!-- svg -->
<svg width="0" height="0">
<devs>
<!-- paper-texture -->
<filter id='paper-texture' x='0' y='0' width='100%' height="100%">
<feTurbulence type="fractalNoise" baseFrequency='0.03' result='noise' numOctaves="5" />
<feDiffuseLighting in='noise' lighting-color="var(--paper-color)" surfaceScale='2'>
<feDistantLight azimuth='30' elevation='60' />
</feDiffuseLighting>
</filter>
</devs>
</svg>