CODEWITHSUNDEEP
javascripthtmlcsssvgmask
Jodast
Jodast

Reputation: 1299

How do I make it so that any part of a background image that is under an svg has a duotone?

I have a background image and want to have a border around the screen that has a duotone of the image, (not a manually edited duotone made in photoshop, I plan on animating this) how would I achieve this so that any part of the background image that is underneath a certain svg is affected by this? I plan on animating the svg so that it moves, and the parts of the image that ARE duotone change.

This is an example of the duotone: 

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');
}
<!-- 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.3411764706 0.1082352941"></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
              1 0 0 0 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'>

This photo attached is a manual background I created in photoshop, and the example of the effect I want to achieve. The goal is to have it so the top of the border moves down and that anything within the border as it moves down is duotone. image

edit: For example, here, the third example has only the part of the image inside the star showing. what I want is so only the part of the image inside an svg has a duotone effect.

Upvotes: 1

Views: 90

Answers (1)

Paul LeBeau
Paul LeBeau

Reputation: 101820

The simplest approach is probably to stack the two images on top of one another, then apply a sppropriately-shaped clip to the top one.

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

.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');
}

.diamond-clip {
  clip-path: url(#diamond-clip);
}

.stack {
  position: relative;
}

.stack img {
  position: absolute;
  top: 0;
  left: 0;
}
<!-- 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.3411764706 0.1082352941"></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>
  
  <clipPath id="diamond-clip" clipPathUnits="objectBoundingBox">
    <polygon points="0.5,0, 1,0.5, 0.5,1, 0,0.5"/>
  </clipPath>

</svg>

<div class="stack">
  <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 diamond-clip"
                   src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/127610/sifnos-chrisopigi.png' alt='Duotoned Image'>
</div>

Upvotes: 1

Related Questions