JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
</div>

JavaScript

function calculatePolygon(centreX, centreY, radius, numberOfPoints, angleOffset) {
    
    var list = [];
    for (var i = 0; i < 6; i++)
    {
                
        y = centreY + radius * Math.sin((2 * Math.PI * i/numberOfPoints) - (2 * Math.PI * angleOffset/360));
        x = centreX + radius * Math.cos((2 * Math.PI * i/numberOfPoints)  - (2 * Math.PI * angleOffset/360));
        
        list.push({"x":x, "y":y});
    }
    
    return list;
}

function injectHex() {
    
    var radius = 50;
    var startY = 50;
    var width = radius * Math.sqrt(3);
    
    
    
    var svg = "<svg width='";
    svg += width;
    svg +="' height='100'> <polygon xmlns='http://www.w3.org/2000/svg' id='0' style='fill:#6C6;' points='";
    
    var list = calculatePolygon(width/2, 50, 50, 6, 30);
    for(var i = 0; i < list.length; i++)
    {
        svg += list[i].x +"," + list[i].y + " ";
    }
    
    svg += "'/></svg>";
    
    $(".container").html(svg + svg);    
}

;(function() {
    injectHex();
})();