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