JSFiddle - React, Tailwind, and code Playground

by Marco Abate

HTML

<div class='pitch'>
	<svg id="snap" viewBox="0 0 100 100" preserveAspectRatio="none">
		<g>
			<path d="M 0,100 Q 50 50 100,0" id="mainPath" fill="#00000000" stroke="#ffffff" style="stroke-width: 1;"></path>
		</g>
	</svg>
</div>

SCSS

.pitch {
	background-color: rgb(0,32,0);
    width: 100%;
    padding-bottom: 50%;
    position: relative;
    -webkit-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-transform-origin: bottom;
    -ms-transform-origin: bottom;
    transform-origin: bottom;
    -webkit-transition: -webkit-transform 0.3s ease;
    -webkit-transition: transform 0.3s ease;
    transition: transform 0.3s ease;
    -webkit-transform: rotateX(60deg);
    -ms-transform: rotateX(60deg);
    transform: rotateX(60deg);
    background-color: rgb(1,95,1);
    padding-bottom: 50%;
	#snap {
		width: 100%;
		height: 100%;
    	position: absolute;
	}
}

JavaScript

let path = document.getElementById('mainPath');
console.log(path.getPointAtLength(33));