Duotoning

Using SVG filters to apply a duotone effect.

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<svg width="960" height="500">
  <defs>
    <filter id="duotone" color-interpolation-filters="sRGB">
      <feColorMatrix type="saturate" values="0" />
      <feColorMatrix type="matrix" />
    </filter>
  </defs>
  <image width="960" height="500" filter="url(#duotone)" xlink:href="bonneville.jpg"/>
</svg>
<script src="//d3js.org/d3.v4.min.js"></script>
<script>

var filter = d3.select("feColorMatrix:last-child"),
      matrix = [
        [ 0,  0,  0,  0,  0 ],
        [ 0,  0,  0,  0,  0 ],
        [ 0,  0,  0,  0,  0 ],
        [ 0,  0,  0,  1,  0 ],
      ];

d3.timer(function(t){

var bg,
        fg;

t = t % 7500 / 7500;
    if (t > 0.5) t = 1 - t;

fg = d3.rgb(d3.interpolateWarm(t)).darker(0.25);
    bg = d3.rgb(d3.interpolateCool(1 - t)).brighter(0.5);

["r", "g", "b"].forEach(function(d, i){
      matrix[i][i] = (bg[d] - fg[d]) / 255;
      matrix[i][4] = fg[d] / 255;
    });

filter.attr("values", matrix.join(" "));

});

</script>

https://d3js.org/d3.v4.min.js