54 lines
1.1 KiB
HTML
54 lines
1.1 KiB
HTML
|
<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>
|