Skip to content

Instantly share code, notes, and snippets.

@wboykinm

wboykinm/README.md

Forked from veltman/README.md
Created August 30, 2016 02:30
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wboykinm/7906460e3c508a3f9ab09d9a25163c05 to your computer and use it in GitHub Desktop.
Save wboykinm/7906460e3c508a3f9ab09d9a25163c05 to your computer and use it in GitHub Desktop.
Download ZIP
Duotoning
Raw
README.md

Using SVG filters to apply a duotone effect.

Raw
index.html
<!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]) / 256;
matrix[i][4] = fg[d] / 256;
});
filter.attr("values", matrix.join(" "));
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment