JSFiddle - React, Tailwind, and code Playground

HTML

<head>
    <div id = 'myDiv'></div>

<script type="text/javascript">
     var canvas = d3.select('#myDiv')
            .append('svg')
            .attr('width', '400px')
            .attr('height','400px');
            
     canvas.append('defs')
		.append('pattern')
		.attr('id', 'diagonalHatch')
		.attr('patternUnits', 'userSpaceOnUse')
		.attr('width', 4)
		.attr('height', 4)
		.append('path')
		.attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2')
		.attr('stroke', '#010101')
		.attr('stroke-width', 1)
		.attr("opacity",0.5);
     
    var polygon = canvas.append('polygon')
        .attr('fill','none')        .attr('points','282.0000915527344,104,280.0001220703125,165.00009155273438,349,174.99998474121094,345.00006103515625,105.99999237060547,282.0000915527344,104')
        .attr('stroke','black')
        .attr('stroke-width','2')
        .style('fill','url(#diagonalHatch)')   
    
   
</script>
</head>

<body>
    
</body>