JSFiddle - React, Tailwind, and code Playground

HTML

<svg xmlns="http://www.w3.org/2000/svg" x="0" y="0" 
	 viewBox="-100 0 800 600">
<defs>
	<style>
	#line > rect, #line > line {
		fill: none;
		stroke: black;
		stroke-width: 60px;
		color: black;
	}
	#line > line {
		stroke: currentColor;
		stroke-linecap: round;
	}
  #line > rect {
    stroke: red;
    stroke-width: 60px;
    mask-image: url(#opening);
  }
	#dark:target ~ #line {
		color: gold;
	}
	</style>
	<symbol id="link" viewBox="-165 -120 330 240" x="-165" y="-120" width="330" height="240">
		<path fill="none" stroke="currentColor" stroke-width="60"
			d="M-135,-39v-1 a50,50 0,0,1 50,-50 h170 a50,50 0,0,1 50,50 
				v80 a50,50 0,0,1 -50,50 h-170 a50,50 0,0,1 -50,-50 v-1">
		</path>
	</symbol>
  <mask id="opening" maskContentUnits="objectBoundingBox">
    <rect x="-0.4" y="-1" width="1.8" height="2" stroke="none" fill="white"></rect>
    <rect x=".50" y=".3" width="0.9" height="0.4" stroke="none" fill="black"></rect>
  </mask>
</defs>
<rect x="0" y="50" width="270" height="180" rx="70" stroke="gold" stroke-width="60" fill="none"></rect>
<line x1="210" x2="320" y1="140" y2="140" stroke="#e0e0e0" stroke-width="90"></line>


<g id="dark"></g>
<g id="line" transform="translate(300,400) rotate(0) scale(1)">
	<use href="#link" transform="translate(180,0) rotate(0)"></use>
  <rect x="-315" y="-90" width="270" rx="60" height="180"></rect>
	<line x1="-120" x2="120" y1="0" y2="0"></line>
</g>

</svg>

CSS

body {
  margin: 8px;
  padding: 0;
  height: calc(100vh - 16px);
}
svg {
  display: block;
  outline: thin solid hotpink;
  max-height: calc(100vh - 16px); 
  height: 320px;
}