CODEWITHSUNDEEP
csssvg
Grant
Grant

Reputation: 1994

Layered opaque element together make new color

I have a design:

enter image description here

I want to have 2 svg polygons that overlap. Is it possible to have polygon 2, when overlapping other elements, creates a darker color and while overlapping white creates the same color as the non-opaque elements?

enter image description here

UPDATE

The markup is irrelevant because I'm just interested in the color values. I want to know the color value with an opacity value (alpha) that matches rgb(0, 92, 150) when the background color is white.

body {
  background: white;
}

.container {
  background: rgb(0, 92, 150);
}

.polygon-1 {
  fill: rgb(0, 92, 150);
}

.polygon-2 {
  fill: [a color value that has an alpha that, when it's over white, creates the same color as rgb(0, 92, 150) and creates the darker color effect when it overlays rgb(0, 92, 150)];
}

I guess this question is essentially the same as mine.

According to the JS solution provided in that question, it takes the lowest number of the rgb to calculate the alpha. In my case, it's 0. The generated rgba value is rgba(0, 92, 150, 1) (no opacity). Does this mean that that particular color cannot create the desired effect?

var min, a = (255 - (min = Math.min(r, g, b))) / 255;

In my case, Math.min(0, 92, 150) is 0, (255 - 0) / 255 is 1, so my alpha value turns out to be 1. I need it to be less than 1 (at least a little bit).

UPDATE 2

To further question downvotes, here is a crude codepen to illustrate my point.

Upvotes: 0

Views: 131

Answers (1)

enxaneta
enxaneta

Reputation: 33044

This is how I would do it: I'm adding a third shape: a rect instead of the blue .container and I'm using <clipPath> to clip between the polygons. In the example I'm filling red but you may fill it with whatever you like.

I hope it helps.

.outer-container {
  background: white;
  padding-top: 10rem;
}

.outer-container * {
  box-sizing: border-box;
}

.container {
  
  width: 300px;
  padding: 4px 10px 25px 10px;
  text-align: center;
  color: white;
  margin: 0 auto;
  position: relative;
}

h3 {
  font-size: 1.5rem;
  font-family: sans-serif;
  font-weight: 300;
  z-index: 10;
  position: relative;
}

svg {
  width: 100%;
  position: absolute;
  top: -5rem;
  left: 0;
  z-index: 1;
}

.polygon-1,
.polygon-2,
.polygon-3{
   fill: rgb(0, 92, 150);
}
<div class="outer-container">
  <div class="container">
    <h3>Education</h3>
    
    <svg viewBox="0 0 100 60">
      <defs>
      <polygon id="p1" points="10,40 72,0 85,25 15,53"></polygon>
      <polygon id="p2" points="10,10 90,25 80,55 25,53"></polygon> 
      <rect id="p3" y="40%" width="100%" height="60%" />
        
       <clipPath id="clip1">
       <use xlink:href="#p1"></use>    
       </clipPath>
       <clipPath id="clip2">
       <use xlink:href="#p3"></use>
       </clipPath>
      </defs>
      <use xlink:href="#p1" class="polygon-1"></use>
      <use xlink:href="#p2" class="polygon-2"></use>
      <use xlink:href="#p3" class="polygon-3"></use>
      <g fill="red">
      <use xlink:href="#p2" clip-path="url(#clip1)"  /> 
      <use xlink:href="#p2" clip-path="url(#clip2)"  />
      </g>
      
    </svg>
  </div>
</div>

Upvotes: 1

Related Questions