<div id="screen">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="-268.5 -100 1282 1482">
<defs>
<mask id="mask-straight-yellow" maskUnits="userSpaceOnUse">
<path d="M683.21,158.12a65.25,65.25,0,0,0-92.28-92.28l-172.12,172,92.28,92.28Z" fill="#fff" />
<path d="M683.21,1123.34,200.66,640.8,326.53,514.94l-92.29-92.29L62.12,594.53a65.22,65.22,0,0,0,0,92.28L590.93,1215.5a65.21,65.21,0,1,0,92.28-92.16Z" fill="#fff" />
</mask>
<mask id="mask-straight-grey" maskUnits="userSpaceOnUse">
<path d="M62.12,1123.34a65.26,65.26,0,1,0,92.29,92.29l172-172-92.28-92.28-172,172Z" fill="#fff" />
<path d="M683.23,594.54,154.41,65.85a65.26,65.26,0,0,0-92.29,92.28L544.67,640.68l-125.86,126,92.28,92.28,172-172A65.28,65.28,0,0,0,683.23,594.54Z" fill="#fff" />
</mask>
</defs>
<path mask="url(#mask-straight-grey)" id="straight-grey" class="line" d="M110.66,112.67,328.23,330.12,512.79,514.94,638.67,640.8,110.89,1168.56" fill="none" stroke="#a39c95" stroke-linecap="round" stroke-linejoin="round" stroke-width="126" />
<path mask="url(#mask-straight-yellow)" id="straight-yellow" class="line" d="M638.67,112.67,421.09,330.12,236.53,514.94,110.66,640.8l527.78,527.76" fill="none" stroke="#fac11c" stroke-linecap="round" stroke-linejoin="round" stroke-width="126" />
</svg>
</div>
<h1>Click To Repeat</h1
body {
background-color: #374452;
}
#screen {
width: 100%;
margin: 0 auto;
max-width: 500px;
svg {
// Show viewbox
// border: 1px solid plum;
}
}
h1 {
color: white;
font-family: sans-serif;
text-align: center;
}
This Pen doesn't use any external CSS resources.