JSFiddle - React, Tailwind, and code Playground

HTML

<html>

<head>

</head>

<body>
  <figure id="imagemap">
    <svg id="box" viewBox="0 0 1700 1020">
    </svg>
  </figure>
  <script src="main.js"></script>
</body>
</html>

JavaScript

var createHtml = () => {    
    const svg = document.querySelector('svg');    
    var svgNS = svg.namespaceURI;

   for (let index = 0; index < 10; index++) {       
    var link = document.createElement("a");

    var poly = document.createElement("polygon");
    poly.setAttribute("opacity", 1);
    poly.setAttribute("points", [0,0,0,500,500,500,500,0]);
    link.appendChild(poly);

    svg.appendChild(link);
   } 

}
createHtml();