Use CSS blend modes and SVG to dynamically change the color of your product images

A few days ago, I saw an example written by @Kyle Wetton on Codepen, which used CSS blending modes and SVG to change the color of the sofa. A very interesting case. This reminds me of its application in some actual business scenarios. For example, there are similar scenarios in some beauty applications. Do you want to know more about how to achieve this effect? If yes, then please continue reading.

Using CSS blend modes and SVG to change the color of the sofa

The following demo is from an effect written by @Kyle Wetton on Codepen:

Try changing to color and you will see different sofa colors:

Isn’t it interesting?

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

If you want to know the implementation principle or effect, please continue reading.

Basic knowledge you need

If you want to successfully implement the effects of the above examples, you need to have a little basic knowledge. For example, CSS mixed mode, SVG and so on.

Using different property values ​​of CSS blend modes, we can easily change the effect of an image:

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

In addition, you also need to have the skills of cutting out pictures. But I think this should not be a problem for the front end.

How to reskin the sofa

Next, let’s put this into practice and analyze @Kyle Wetton’s case first. This example is very simple, there are three parts in the HTML:

• There is a bunch of SVG code, which looks dense and dense. For students who don’t know SVG, it will definitely bring a sense of fear (dear, don’t panic)
• There is a picture
• There are several controls that allow the user to select a color

Let’s analyze this SVG code briefly.

<svg id="js-couch" class="couch__overlay" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="1000" height="394">
    <defs>
        <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

Summarize

The above is what I introduced to you about using CSS blending modes and SVG to dynamically change the color of product images. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website!
If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!