<div class="image">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="0">
<filter id="duotone">
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
<feFuncR type="table" tableValues="0.462745098 0.8196078431"></feFuncR>
<feFuncG type="table" tableValues="0.4509803922 0.9137254902"></feFuncG>
<feFuncB type="table" tableValues="0.6901960784 0.9215686275"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
<filter id="duotone2">
<feComponentTransfer color-interpolation-filters="sRGB" result="duotone">
<feFuncR type="table" tableValues="0.8705882353 0.9764705882"></feFuncR>
<feFuncG type="table" tableValues="0.3450980392 0.8431372549"></feFuncG>
<feFuncB type="table" tableValues="0.1803921569 0.2941176471"></feFuncB>
<feFuncA type="table" tableValues="0 1"></feFuncA>
</feComponentTransfer>
</filter>
<image x="25vw" y="25vh" width="50vw" height="50vh" xlink:href="https://upload.wikimedia.org/wikipedia/commons/8/82/Suricata.suricatta.6860.jpg"/>
</svg>
</div>
body {
margin: 0;
font-family: Roboto, sans-serif;
}
svg {
width: 100vw;
height: 100vh;
}
.image {
svg image {
filter: url(#duotone);
animation: switchTone 2s infinite alternate;
}
}
@keyframes switchTone {
0% {
filter: url(#duotone);
}
100% {
filter: url(#duotone2);
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.