JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<div class="svg-container">
	<svg viewbox="0 0 800 400" class="svg">

		<defs>
			<pattern id="img1" patternUnits="userSpaceOnUse" width="100%" height="100%">
				<image class='twombly' xlink:href="img/header-bg.png" x="-60" y="0"
					   width="100%" height="100%" />
			</pattern>

		</defs>

		<path id="curve" fill="url(#img1)" d="M 800 300 Q 400 350 0 300 L 0 0 L 800 0 L 800 300 Z">
		</path>
	</svg>
</div>