0

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.

Grant
  • 1,822
  • 1
  • 21
  • 30
  • I have found similar questions after more digging. Not sure why this is getting downvoted when it's essentially the same question as: https://stackoverflow.com/questions/6672374/convert-rgb-to-rgba-over-white and https://stackoverflow.com/questions/12228548/finding-equivalent-color-with-opacity – Grant Apr 26 '19 at 02:53
  • Update your code. can you share one screenshot with expected output? – Saravana Apr 26 '19 at 04:32
  • @Saravana good question, I've expanded my original question to add more details about my expectation. – Grant Apr 26 '19 at 05:19

1 Answers1

1

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>
enxaneta
  • 31,608
  • 5
  • 29
  • 42
  • Wow that's clever. I'm really hoping for a color solution but this is definitely a fall back if nothing else can be found. Thanks for this direction! – Grant Apr 27 '19 at 15:14