Spotify's new brand identity using feColorMatrix SVG filters

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 feColorMatrix instead:

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.

Alternatives

You can also CSS blend modes to achieve a duotone effect, which doesn't require any JavaScript.