<div class="contrast"></div>
body {
  margin:0;
}
.contrast {
  height:100vh;
  display:flex;
  background:
    repeating-linear-gradient(#fff 0 10px,#0000 0 15px) calc(25% - 1px) 50%/5px 100%,
    linear-gradient(#565656 0 0) calc(25% - 12.5px) 50%/50px 100%,
    repeating-linear-gradient(#fff 0 10px,#0000 0 15px) calc(75% + 1.5px) 50%/5px 100%,
    linear-gradient(#565656 0 0) calc(75% + 12.5px) 50%/50px 100%,
    #c79c5d;
  background-repeat:no-repeat;
}

.contrast:before {
  content:"";
  height:300px;
  margin:auto auto  auto 0;
  flex-basis:50%;
  --c:#565656;
}

.contrast:before {
  --g:#0000 calc(100% - 50px),var(--c) 0 99%,#0000;
  background:
    radial-gradient(farthest-side,#fff 98%,#0000)calc(50% - 62px) 12%/5px 5px,
    radial-gradient(farthest-side,#fff 98%,#0000)calc(50% - 56px) 9%/5px 5px,
    radial-gradient(farthest-side,#fff 98%,#0000)calc(50% - 51px) 14%/5px 5px,
    radial-gradient(farthest-side,#fff 98%,#0000)calc(50% - 46px) 11%/5px 5px,
    radial-gradient(farthest-side,#fff 98%,#0000)calc(50% - 33px) 14%/10px 10px,
    radial-gradient(farthest-side,#fff 98%,#0000)calc(50% - 17px) 13%/10px 10px,
    radial-gradient(farthest-side,#fff 98%,#0000)calc(50% - 5px) 11%/10px 10px,
    radial-gradient(farthest-side at bottom right,#0000 44%,#fff 0% 50%,#0000 0) calc(50% - 233px) -2%/112px 82px,
    radial-gradient(farthest-side at bottom left,#0000 44%,#fff 0% 50%,#0000 0) calc(50% + 207px) 19%/80px 80px,
    radial-gradient(farthest-side at top,#0000 44%,#fff 0% 50%,#0000 0) calc(50% - 190px) 114%/170px 70px,
    linear-gradient(to top left,#0000 calc(45% - 7px),#fff 0 44%,#0000 0) calc(50% - 75px) 57%/200px 200px, 
    repeating-linear-gradient(90deg,#fff 0 10px,#0000 0 15px) calc(50% - 125px) 12%/100px 5px,
    repeating-linear-gradient(90deg,#fff 0 10px,#0000 0 15px) calc(50% + 152px) 80%/100px 5px,
    repeating-linear-gradient(90deg,#fff 0 10px,#0000 0 15px) calc(50% + 94px) 80px/131px 5px,
    repeating-linear-gradient(#fff 0 10px,#0000 0 15px) calc(50% - 230px) 68%/5px 59%,
    repeating-linear-gradient(#fff 0 10px,#0000 0 15px) calc(50% + 204px) 69%/5px 39%,
    repeating-linear-gradient(#fff 0 10px,#0000 0 15px) top/5px 10%,                
    repeating-linear-gradient(#fff 0 10px,#0000 0 15px) bottom/5px 20%,                   
    radial-gradient(farthest-side,var(--c) 98%,#0000 ) calc(50% - 60px) 7%/25px 25px,    
    radial-gradient(farthest-side,var(--c) 98%,#0000 ) calc(50% - 44px) 9%/25px 25px,    
    radial-gradient(farthest-side,var(--c) 98%,#0000 ) calc(50% - 58px) 13%/20px 20px,    
    radial-gradient(farthest-side,var(--c) 98%,#0000 ) calc(50% - 40px) 14%/30px 30px,    
    radial-gradient(farthest-side at top left,var(--g)) calc(50% - 5px) 11%/60px 30px,    
    linear-gradient(var(--c) 0 0) calc(50% - 91px) 24px/50px 21px,    
    radial-gradient(farthest-side at bottom right,var(--g)) calc(50% - 186px) 10%/140px 60px,    
    linear-gradient(var(--c) 0 0) calc(50% - 230px) 64%/50px 60%,    
    radial-gradient(farthest-side at top,var(--g)) calc(50% - 190px) 107%/130px 60px,        
    linear-gradient(to top left,#0000 calc(50% - 50px*0.707),var(--c) 0 50%,#0000 0) calc(50% - 75px) 57%/200px 200px,        
    linear-gradient(var(--c) 0 0) calc(50% + 71px) 26%/40px 20px,        
    linear-gradient(var(--c) 0 0) calc(50% + 45px) 23%/40px 50px,        
    linear-gradient(var(--c) 0 0) calc(50% + 120px) 23%/60px 50px,        
    radial-gradient(farthest-side at bottom left,var(--g)) calc(50% + 190px) 26%/80px 80px,        
    linear-gradient(var(--c) 0 0) calc(50% + 205px)70%/50px 35%,            
    linear-gradient(var(--c) 0 0) calc(50% + 151px)100%/37px 50px,            
    radial-gradient(farthest-side at top left ,var(--g)) calc(50% + 200px) 100%/60px 60px,            
    radial-gradient(farthest-side at top right,var(--g)) calc(50% + 105px) 100%/60px 60px,            
    radial-gradient(farthest-side at bottom,var(--g)) calc(50% + 50px) 74%/150px 75px,                
    linear-gradient(var(--c) 0 0) top/50px 10%,                
    linear-gradient(var(--c) 0 0) bottom/50px 20%,    
    #c79c5d;
  background-repeat:no-repeat;
}


.contrast:after {
    content: "";
    position: absolute;
    width: 102px;
    height: 55px;
    box-sizing: border-box;
    border: 5px dashed #fff;
    border-bottom: 0;
    border-radius: 100px 100px 0 0;
    bottom: calc(50% - 89px);
    left: calc(25% - 2px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.