Spotify's new brand identity using feColorMatrix SVG filters
José M. Pérez / February 14, 2016
2 min read • ––– views
This is a short post where I show how to use SVG and a
feColorMatrix filter to apply a duotone effect to an image.
Demo & Code: https://codepen.io/jmperez/pen/LGqaxQ
You may have seen that the Spotify's new brand identity is full of duotone images. My colleague Thodoris described how to achieve this effect in JS and in iOS.
The JS version uses
<canvas>, and after reading A List Apart's Finessing feColorMatrix, where they also mention the duotone images used in Spotify's Year in Music, I forked Thodoris' pen and used
The code consists of a
<svg/> that has an
<image/> to which we apply a
<filter />. The filter uses a
feColorMatrix, and its values are calculated using JS, though if you already know the range of colours you want to apply there is no need to run JS, just set them in the markup. If you have any issues understanding how the matrix is calculated, check this question on StackOverflow.