February 14 2016

Spotify's new brand identity using feColorMatrix SVG filters

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: http://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:

See the Pen Duotone effect (Spotify Duotone) - Using feColumnMatrix by José Manuel Pérez (@jmperez) on CodePen.

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.