JSFiddle - React, Tailwind, and code Playground

by fajjet

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="svg-light" preserveAspectRatio="none" height="1000" width="300">
		  <path stroke="green" stroke-width="50" style="" filter="url(#f1)" fill="url(#myLinearGradient1)" d="M200 -30 L100 800 L300 800 Z" />
		   <defs>
			<filter id="f1" x="0" y="0">
			  <feGaussianBlur in="SourceGraphic" stdDeviation="0" />
			</filter>
			 <linearGradient id="myLinearGradient1"
				x1="0%" y1="0%"
				x2="0%" y2="100%"
				spreadMethod="pad">
			  <stop offset="0%"   stop-color="red" stop-opacity="1"/>
			  <stop offset="100%" stop-color="red" stop-opacity="0"/>
			</linearGradient>
		  </defs>
		</svg>

CSS

svg{
  overflow:visible;
}