Fashion Visualisation with mix-blend-mode

Fashion-Visualisation-with-mix-blend-mode.markdown

Fashion Visualisation with mix-blend-mode

Shows different product options by using an SVG layer in mix-blend-mode to recolor an underlying image. Chrome users will need to enable experimental web features under chrome://flags Complete article

A Pen by Dudley Storey on CodePen.

License.

index.html

<div id="suit">
<section>
	<h1>The Modern Pinstripe</h1>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 838" id="suit-overlay">
<path d="M988.2,603.8c-1-0.4-0.3-0.4-0.3-1.5c-8-2.1-12.6-9.7-15.3-17.1
c0.5,0.4,1,0.8,1.5,1.2c1.9-13.8-5.7-19.1-16.2-21c-3.6-0.6-6.4,2.4-10,0.3c-15.3-8.7-20.5-25.5-45.4-25.1c-7-5.4-6.6-7.9-20.1-7.7
c0-0.1,0-0.2,0-0.3c1-0.2,2-0.4,2.9-0.6c-2.3-5.8-8.6-28.5-16.8-26.6c-2.3,1.5-4.5,3-6.8,4.4c-6-5.2-9.1-13.9-13.3-21
c-3.1-4.1-6.3-8.3-9.4-12.4c-1.4-2.8-1.4-5.5-2.9-8c-6.8-11.2-22.4-27.9-33.9-34.2c-1.1,2.5-2.2,4.9-3.2,7.4
c-8.9,4.2-9.9-6.1-13.3-9.4c-2.6-2.6-8.8-1.6-11.2-4.4c-5.3-6.2-6.5-16.9-10-24.8c-1.4-3.1-4-4.9-5.9-7.4c-1.7-2.3-1.4-4.4-2.1-6.5
c-1.5-2-2.9-3.9-4.4-5.9c-4.3,0-5.5,1.6-9.1,2.7c0.1,3.2,0.8,8.1,2.7,9.7c1.1,3.9-2.9,9.5-3.8,12.7c-0.5,0.5-1,1-1.5,1.5
c0.7,0,1.4,0,2.1,0c0,0.1,0,0.2,0,0.3c-3.9,1.2-9.2,4.4-12.4,3.2c-1.2-2.1,0.5-3-0.3-5.9c-0.6-1.7-1.2-3.3-1.8-5
c0.1-6.1,0.2-12.2,0.3-18.3c-1.5-6.4-2.9-12.8-4.4-19.2c-2,0-3.9,0-5.9,0c-5.5-12.8-8.9-36.6,7.1-39.2c0.2-0.3,0.4-0.6,0.6-0.9
c-12.1,0-14.9,4.2-23.3,6.2c-4.1,0.9-7.2,0.8-10.6,3c-2.9,3-5.9,6.1-8.8,9.1c-4.1,0.1-8.3,0.2-12.4,0.3c-5,1.2-8.3,4.1-12.1,6.5
c-4-2.2-8,0.1-11.2-1.8c-6,9.1-9.9,1.7-20.1,3.8c-4.9,1.2-9.8,2.4-14.7,3.5c-5.2-1-12.1-7.3-18-9.4c-4.3-0.7-8.7-1.4-13-2.1
c-3-1.5-3.7-6-7.4-7.4c-8.7-3.2-15.6,4.6-23.3,5.6c-6.4,0.9-25.2-13.2-28.6-16.8c-0.2,0-0.4,0-0.6,0c2.2-2.7,4.3-5.3,6.5-8
c3.3-5.4,3.3-11.7,8.3-15.3c-0.1-0.7-0.2-1.4-0.3-2.1c-0.6,0.1-1.2,0.2-1.8,0.3c0.3-0.4,0.6-0.8,0.9-1.2
c-6.9-9.7-15.6-18.2-23.9-26.6c-3.2-3.2-5.2-8-10.6-8.9c-0.2-0.3-0.4-0.6-0.6-0.9c0.5-0.1,1-0.2,1.5-0.3
c-4.5-9.6-27-17.9-34.8-27.7c-4.3-5.4-8.6-15.1-15.9-17.1c-9-2.5-13.8,4.8-19.8,6.8c-0.1,8.3-3.5,13-4.7,19.8
c0.9,5.9,1.8,11.8,2.7,17.7c-2.8,4.7-5.5,9.4-8.3,14.2c-0.4,1.6-0.8,3.1-1.2,4.7c-0.1,0.1-0.2,0.2-0.3,0.3c-3.8,3.5-9.8,4.4-13,8.6
c-1.8,3.1-3.5,6.3-5.3,9.4c-3.6,2-7.3,3.9-10.9,5.9c-3.8,2.5-4.7,9.4-9.1,10.9c0.4,0.5,0.8,1,1.2,1.5c-1.6,2.1-3.1,4.1-4.7,6.2
c-9.1,11.5-20.7,22.6-26.8,37.2c-0.6,1.5,0.2,5.9-1.2,8.3c-2.6,4.6-6.8,10.1-10.9,13.3c-1.3,0.9-2.6,1.8-3.8,2.7
c-2.6,4.5-0.4,13,2.9,14.5c0.2,0.3,0.4,0.6,0.6,0.9c-0.5,0.5-1,1-1.5,1.5c6.2,17.4-8.4,39.1-12.4,52.2c-2.4,7.9-1,20.7-2.9,28.6
c-1.2,0.5-1.3,0.2-2.7-0.6c-0.1,0.1-0.2,0.2-0.3,0.3c0.3,0.5,0.6,1,0.9,1.5c-3.3,1.9-6.7,3.7-10,5.6c-4.9,3.5-5.6,11.3-8.8,16.5
c-3.6,5.8-8.4,9.2-11.2,16.5c-2.2,5.9-3.1,12.3-4.4,19.2c-0.4,3.1-0.8,6.3-1.2,9.4c-2.9,3.5-5.9,7.1-8.8,10.6
c-3.8,6.4-7.7,12.8-11.5,19.2c-8.1,10.7-18.9,19.5-27.1,30.4c-3,4.3-6.1,8.7-9.1,13c-2.4,4-2.9,9.6-6.5,12.4
c0.2-0.7,0.4-1.4,0.6-2.1c-0.3-0.2-0.6-0.4-0.9-0.6c-2.1,2.7-4.1,5.3-6.2,8c-0.4,1.8-0.8,3.5-1.2,5.3c-1.9,1.8-3.7,3.5-5.6,5.3
c-2.2,4-4.3,8.1-6.5,12.1c-4.1,5.8-11.5,9.8-13.9,17.1c-0.6,1.1-0.3,0.6,0.3,1.8c-5.2-0.4-5.9,5.4-8.6,8.6c-2.4,2-4.7,3.9-7.1,5.9
c-0.4,0.8-0.2,0.1,0.3,1.2c-1.2,0.6-2.4,1.2-3.5,1.8c0.5-0.6,1-1.2,1.5-1.8c-4.9,1.5-9.1,7.8-3.8,11.8c3.2,1.4,6.5,2.8,9.7,4.1
c3.6,2.4,7.3,4.7,10.9,7.1c3.1,1.3,6.3,2.6,9.4,3.8c3.4,2.9,6.9,5.7,10.3,8.6c4,2.6,12.2,4.4,12.7,10.3c1.6,0.9,3.6,1.3,6.2,1.2
c1.7-1.5,2.7-3.3,2.7-6.5c0.7-0.6,1.4-1.2,2.1-1.8c-0.2,0.5-0.4,1-0.6,1.5c11.8-3.7,20.3-22.5,27.4-31.9
c5.7-5.1,11.4-10.2,17.1-15.3c5.3-7.6,10.6-15.1,15.9-22.7c4.7-6.3,10.8-11.5,15-18.3c5.3-9.4,10.6-18.9,15.9-28.3
c1.4-1.8,3.7-2.7,5-4.7c9-13.4,13.9-33.6,26.5-43.4c0.2,13.1,2.9,23.4,5,33.9c0,2.2,0,4.3,0,6.5c1.9,2.8,3.7,5.5,5.6,8.3
c0.8,4,1.6,8.1,2.4,12.1c2.8,5.5,5.5,11,8.3,16.5c2.1,7.1,4.1,14.2,6.2,21.2c3.3,5.9,6.7,11.8,10,17.7c0.5,3.7,1,7.5,1.5,11.2
c3.4,10.4,15.1,16.1,15.9,28.9c6,0.1,12,0.2,18,0.3c21.7,4.2,43.5,8.5,65.2,12.7c9.3,1.7,17-2.6,23.9-3.8c2.7,0.2,5.3,0.4,8,0.6
c11.3-1.9,22.6-3.7,33.9-5.6c15.8-3.5,35.6-5.9,47.8-13c1.1-0.8,0.7-1.1,0.9-2.1c4.3-1.1,10.7-0.5,15.9-1.5
c9-1.7,28.7-5.1,33.9-10.3c5.4-5.4,1.5-14.2,2.7-22.1c3.3-23.4,0.4-49.6-4.4-70.2c-1.1-4.5-8.4-22.4-7.1-26.6
c2.6-4.4,5.1-8.9,7.7-13.3c4.4-7.3,8.8-14.6,13.3-21.8c4.8-6,12.2-10.2,18.3-15c3.9-4.9,7.9-9.8,11.8-14.8c0.3,0,0.6,0,0.9,0
c18.1,12.5,32.6,29.2,49.6,42.8c8.9,7.3,17.9,14.6,26.8,21.8c7.2,7.3,9.4,21.4,18,27.1c5.6,3.8,13.9,3.7,20.9,6.2
c9,4.1,18.1,8.3,27.1,12.4c10.1,3.9,21.5,4.7,29.8,10c-5.1,11.2,2.3,20.4,5,28.6c1.7,5.1-0.3,8.6,3.2,11.5c1.3,0.3,2.5,0.3,3.5-0.3
c2.4-1.2,4.5-5.6,5.3-8.3c2.1-2,4.1-3.9,6.2-5.9c4.6,6.6,6.5,2.9,13.6,6.2c3.1,2.4,6.3,4.7,9.4,7.1c0.1,2.1,0.2,4.1,0.3,6.2
c1.3,3.4,4.1,5.1,5,9.1c1.4,0.6,17.8-12.3,19.8-14.8c0.9-1.5,1.8-3,2.7-4.4c2.7-1.3,5.3-2.6,8-3.8c5.3-3.3,10-8.8,13.6-13.9
c4.6-7.5,9.2-15,13.9-22.4c2.1-6.2,4.1-12.4,6.2-18.6c0.1,0,0.2,0,0.3,0c2.1-2.4,7.3-1.8,10.3-3.2c0.9-0.8,1.8-1.6,2.7-2.4
C996.6,609.4,993.1,607.2,988.2,603.8z M549.6,509.1c-5.2,6.8-9.7,14.1-17.7,18c-1.6-1.9-0.5-3.5-1.2-5.3
c-3.3-8.9-10.3-20.5-19.5-23.6c-1.3-3.8,7.5-22.8,8.6-29.2c18.3-8.4,39-23.1,39.8-49.6c22.2,2.2,42.4,9.1,64,10.9
c-1,2.9-1.2,4.6-0.9,8.6c-13.1,14.5-31.9,23.7-45.1,38.1c-4.9,6.5-9.8,13-14.7,19.5C558.4,500.6,554,504.8,549.6,509.1z M636,697.3
c-1.3,0.9-2.9,1.1-4.4,2.1c-3.4,2.9-6.9,5.7-10.3,8.6c-5.8,3.1-14.1-3.1-20.1-1.8c-2.1,1.4-4.1,2.8-6.2,4.1
c-5.3,1.4-8.6-3.4-12.1-4.4c-4.3-1.3-8.7-1.8-12.4-3c-3.1-5.3,10-17.7,12.7-21.5c4.4-7,8.8-14,13.3-21c3.3-4.1,6.7-8.3,10-12.4
c3.4-6.6,6.9-13.2,10.3-19.8c2.7-4.5,6.2-8.3,9.1-12.4c0.7,0,1.4,0,2.1,0c1.3,2.2,0.6,5.4,1.5,8.6c1.1,1.9,2.2,3.7,3.2,5.6
c-0.1,2.9-0.2,5.7-0.3,8.6c0.9,3.7,3,7.7,3.8,12.4C639,666,636.2,682.7,636,697.3z"/>
</svg>
</section>

<p id="coloroptions">Available in: <span data-value="#00f">Blue</span><span data-value="#fff">Ivory</span><span data-value="#555">Charcoal</span>
<small style="display: block">Chrome users require "Experimental Web Features" enabled in chrome://flags</small>
</div>

script.js

function changecolor() {
	suitpath.style.fill = this.value;
}

function suitstyles(element) {
 element.addEventListener('click', changecolor, false);
}
var suit = document.querySelector("#suit-overlay"),
suitpath = suit.getElementsByTagName("path")[0],
coloroptions = document.querySelectorAll("#coloroptions span"),
supportsBlend = CSS.supports("mix-blend-mode", "multiply");

if (supportsBlend == true) {
	suit.style.display = "block";
	for (var i=0;i<coloroptions.length;i++) {
		var buttonconvert = document.createElement("button");
		buttonconvert.innerHTML = coloroptions[i].innerHTML;
		buttonconvert.value = coloroptions[i].getAttribute("data-value")
		coloroptions[i].parentNode.replaceChild(buttonconvert, coloroptions[i]);
	}
	var buttons = [].slice.call(document.getElementsByTagName("button"));
buttons.forEach(suitstyles);
}

style.css

#suit { 
  font-family: Avenir, Helvetica, Arial, sans-serif;
  background: #d0d1cc;
  max-width: 800px;
  margin: 0 auto;
  margin-bottom: 2rem;
}
#suit section { 
  position: relative; 
  padding-top: 70%; 
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/modern-pinstripe.jpg);
  background-size: contain;
}
#suit h1 {
  position: absolute; 
  top: 10px;
  left: 10px;
  font-size: 3rem; 
  margin-top: 0; 
  font-weight: 100;
}
#suit svg { 
  mix-blend-mode: multiply;
  position: absolute; 
  width: 100%;
  height: 100%;
  top: 0;
  display: none;
}
#suit p { 
  margin-left: 1rem;
  padding-bottom: 1rem;
}
#suit button, #suit span {   
  margin: .5rem; 
}
#suit svg path {
  fill: transparent;
}
@media all and (max-width: 600px) {
  #suit h1 {
    font-size: 2rem;
  }
}