Duotone Demo

duotone-demo.markdown

Duotone Demo

Live demo for SVG duotone filters article: https://css-tricks.com/using-svg-to-create-a-duotone-image-effect/

A Pen by Lentie Ward on CodePen.

License.

index.html

<!-- Duotone Article Demo -->

<svg xmlns="http://www.w3.org/2000/svg" class="svg-filters">
  <filter id="duotone_peachypink">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_magenta_gold">
      <feFuncR type="table" tableValues="0.7411764706 0.9882352941"></feFuncR>
      <feFuncG type="table" tableValues="0.0431372549 0.7333333333"></feFuncG>
      <feFuncB type="table" tableValues="0.568627451 0.05098039216"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>
  
  <filter id="duotone_navyorange">
    <feColorMatrix type="matrix" result="grayscale"
      values="1 0 0 0 0
              1 0 0 0 0
              1 0 0 0 0
              0 0 0 1 0" />
    
    <feComponentTransfer color-interpolation-filters="sRGB" result="duotone_navy_orange">
      <feFuncR type="table" tableValues="0.05490196078 1"></feFuncR>
      <feFuncG type="table" tableValues="0.1568627451 0.5921568627"></feFuncG>
      <feFuncB type="table" tableValues="0.1647058824 0.003921568627"></feFuncB>
      <feFuncA type="table" tableValues="0 1"></feFuncA>
    </feComponentTransfer> 
  </filter>   
</svg>

<img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Original Image'>

<img class="img duotoned--peachy" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Duotoned Image'>

<hr>

<img class="img" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/jardin-majorelle-small.jpg' alt='Original Image'>

<img class="img duotoned--navy" src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/jardin-majorelle-small.jpg' alt='Duotoned Imaged'>

style.scss

body {
  background: #1d1f20;
  padding: 20px;
  text-align: center;
}

.svg-filters {
  height: 0;
  left: -9999em;
  margin: 0;
  padding: 0;
  position: absolute;
  width: 0;
}

.img {
  margin: 5px;
  width: 350px;
}

hr {
  border: solid 1px #191919;
}

.duotoned--peachy {
  filter: url('#duotone_peachypink');
}

.duotoned--navy {
  filter: url('#duotone_navyorange');
}