mix-blend-mode clips

clip-path

by jpeter06

HTML

<div class="container">
	<div class="clipParent clipParentColor">
    <div  class="semicircle clip-semi-circle clipColor"></div>
    <div  class="palo1 clip-bottom clipColor transitDelay_025"></div>
    <div  class="palo2 clip-bottom clipColor transitDelay_025"></div>
    <div  class="semicircle2 clip-semi-circle clipParentColor"></div>
    <div  class="acento clip-polygon clipColor transitDelay_075"></div>
    <div  class="punto clip-circle clipColor transitDelay_0"></div>
  </div>
</div>

CSS

html,body{width:100%;height:100%; margin:0px; padding:0px; overflow:hidden;
  color:#58f;
  font-family:-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
background:lightblue;}

.container {
  width:100%;  height:100%;
  position:relative;
  background: url( https://www.w3schools.com/css/img_5terre.jpg);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/** CLIPPARENT AND CLIPS
 https://bennettfeely.com/clippy/ 
 https://codepen.io/stoumann/pen/abZxoOM
 https://nurturedigital.com/
 **/
.clipParent {
  width:90%;  height:90%;  margin:5%;
  mix-blend-mode: screen; /*IMPORTANT!!!*/
  position:relative;
  --top-dist: 40%;
  --speed: 1s;
}
.clipParent  *{
  transition: clip-path var(--speed);
  position:absolute;
}

.transitDelay_0 {transition-delay: calc(var(--speed) * 0);}
.transitDelay_025 {transition-delay: calc(var(--speed) * 0.25);}
.transitDelay_05 {transition-delay: calc(var(--speed) * 0.5);}
.transitDelay_075 {transition-delay: calc(var(--speed) * 0.75);}
.transitDelay_1 {transition-delay: var(--speed);}
.transitDelay_125 {transition-delay: calc(var(--speed) * 1.25);}

/* Color de los clips */
.clipColor {background-color: #555; }
/* color de container y el anula clip */
.clipParentColor { background-color: rgb(255 255 25 / 90%);}

/*CLIP ELEMENTS*/
.semicircle{top:calc(var(--top-dist) + 110px); 
            left:100px; width:160px;  height:160px; }
.palo1{     top:var(--top-dist); 
            left:100px; width:60px;  height:110px; }
.palo2{     top:var(--top-dist); 
            left:200px; width:60px;  height:110px; }
.semicircle2{top:calc(var(--top-dist) + 110px); 
            left:160px; width:40px;  height:40px; }
.acento{    top:calc(var(--top-dist) - 70px); 
            left:180px; width:60px;  height:60px; }
.punto{     top:calc(var(--top-dist) + 50px); 
            left:160px; width:40px;  height:40px; }
 
 /*CLIP...