Use CSS mixed mode and SVG to dynamically change the color of product pictures


I saw an example written by @ Kyle wetton in codepen two days ago, which uses CSS mixed mode and SVG to change the color of sofa. A very interesting case. This reminds me of the application in some practical business scenarios, such as some beauty applications, there are similar scenarios. I wonder if you want to know more about how to achieve this effect? If so, read on.

Use CSS mixed mode and SVG to change sofa color case

The following demo is from an effect written by @ Kyle wetton on codepen:

Try changing it to a different color, and you’ll see different sofa colors:


Isn’t it very interesting.

In fact, there are similar effects in the actual scene, such as some beauty applications:


If you want to know how it works, please read on.

Basic knowledge you need

If you want to achieve the effect of the above example smoothly, you need to have a little basic knowledge. For example, CSS hybrid module, SVG, etc.

Using different property values of CSS’s mixed mode, we can change the effect of a picture very lightly:


CSS mixed mode can achieve many other effects, which will not be described here.

In addition, you need to be able to click on the map. However, I think this is not a problem for the front end.

How to skin the sofa

Next, let’s fight it out. First, let’s analyze @ Kyle wetOn’s case. The case is very simple. There are three parts in HTML:

  • There is a pile of SVG code, which looks dense. It will definitely bring a sense of fear to students who don’t know SVG (pro, don’t panic)
  • There’s a picture
  • There are several controls that let the user choose a color

After a brief analysis, you can see a bunch of SVG Codes:

<svg id="js-couch" class="couch__overlay" xmlns="" xmlns:xlink="" preserveAspectRatio="none" width="1000" height="394">
        <path d="M996.35 77.55q-1.85-1.95-8.65-3.75l-62.4-17.1q-9.3-2.75-12.15-2.5-1.8.15-2


The above is the use of CSS mixed mode and SVG to dynamically change the color of product pictures introduced by Xiaobian. I hope it can help you. If you have any questions, please leave me a message, and Xiaobian will reply to you in time. Thank you very much for your support of the developepaer website!
If you think this article is helpful to you, welcome to reprint, please indicate the source, thank you!