auto-accept/hexagon.html

54 lines
1.1 KiB
HTML
Raw Permalink Normal View History

<style>
*{
background: #555;
}
</style>
<svg height="1000" width="1000" id="svg">
</svg>
<script>
// remember to put browser on full-screen
// define hexagon params here
let center_X = 400,
center_Y = 300,
radius = 200;
let hexa = hexa_vertices(center_X, center_Y, radius);
let svg = document.getElementById('svg');
let hexagon = document.createElementNS('http://www.w3.org/2000/svg','polygon');
hexagon.setAttribute("points",
`${hexa[0].x},${hexa[0].y}
${hexa[1].x},${hexa[1].y}
${hexa[2].x},${hexa[2].y}
${hexa[3].x},${hexa[3].y}
${hexa[4].x},${hexa[4].y}
${hexa[5].x},${hexa[5].y}
`);
hexagon.style="fill: #e5e5e5";
svg.append(hexagon)
function hexa_vertices(cX, cY, r){
let verts = [];
verts[0] = {x: cX+r*Math.cos(0), y: cY+r*Math.sin(0)};
for(let i=1; i<=6; i++){
verts[i] = {x: cX+r*Math.cos(i*2*Math.PI/6), y: cY+r*Math.sin(i*2*Math.PI/6)};
}
return verts;
}
</script>