<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.