JSFiddle - React, Tailwind, and code Playground

by Léo Durand

HTML

<svg id="frame_svg" viewBox="0 0 1367 490" preserveAspectRatio="none">



	<path class="svg" d="M335.6,164.2c-18.9-18.3-44.7-29.6-73.1-29.6c-58,0-105,47-105,105c0,58,47,105,105,105
		c31.9,0,60.5-14.2,79.7-36.7"/>
	<line class="svg" x1="385.5" y1="134.6" x2="385.5" y2="344.6"/>
	<polyline class="svg" points="445.5,344.5 445.5,134.5 605.5,344.5 605.5,134.5 	"/>
	<polyline class="svg" points="769.9,134.5 665,134.5 665,226.7 748.9,226.7 665,226.7 665,344.6 769.9,344.6 	"/>
	<polyline class="svg" points="816.3,344.6 816.5,134.3 909.4,289.3 1002.4,134.5 1002.4,344.3 	"/>
	<polyline class="svg" points="1037.1,344.3 1125.4,134.5 1182.1,269 1068.8,269 1182.1,269 1214,344.3 	"/>
</svg>

CSS

#frame_svg {
    position: fixed;
    left: 10vw; top: 10vh;
    width: 80vw; height: 80vh;
}
.svg{
    fill:none;
    stroke:#333333;
    stroke-width:5vh;
    vector-effect:non-scaling-stroke;
    stroke-linejoin:bevel;
    stroke-linecap:square;
}