JSFiddle - React, Tailwind, and code Playground

by Andres Abadia

HTML

<svg class="overlay-polygon" height="750" width="1000">
  <polygon points="220,10 600,10 250,570 -130,570" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

<svg class="overlay-polygon" height="932" width="1918">
                            <polygon points="652,10 1616,10 -13,932 950,932"></polygon>
                        </svg>

CSS

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
}
body{
  background: url(https://images.pexels.com/photos/161172/cycling-bike-trail-sport-161172.jpeg?cs=srgb&dl=biker-holding-mountain-bike-on-top-of-mountain-with-green-161172.jpg&fm=jpg);
  background-size: cover;  
}
svg{
  position: absolute;
  top:0;
  left: 0;
}

JavaScript

/*
jQuery(document).ready(function() {

  console.log( jQuery('svg').attr("height"));
  jQuery('svg').attr('height',jQuery('body').height());
 jQuery('svg polygon').attr('points',
 	120 + ','+0 +
  ' 520,10 420,500 120,500');
});
*/