How to render clip-path hexagons (bestagons), this function creates the clip-path polygon function values for you, with vmax so it always acts like background cover algorithm

render-bestagons.js

const RowStep = 14.39
const ColumnStep = RowStep * 5/6; // 37.5;
const HexMax = ColumnStep * 4/3;
const HexMin = ColumnStep * 2/3;
const Rows = Math.ceil(100 / RowStep);
const Columns = Math.ceil(100 / ColumnStep);

function renderBestagons(t = 1) {
	let polygons = [];
	let r = Rows;
	while(r --> 0)
	{
		let c = Columns;
		while(c --> 0)
		{
			let x = ColumnStep * c;
			let y = (RowStep * 0.5 * (c%2)) + (RowStep * r);
			if(t <= 0)
			{
				polygons.push(`
					${x}vmax ${y}vmax,
					${x}vmax ${y}vmax,
					${x}vmax ${y}vmax,
					${x}vmax ${y}vmax,
					${x}vmax ${y}vmax,
					${x}vmax ${y}vmax,
					${x}vmax ${y}vmax,
					0 0`);
			}
			else if(t >= 1)
			{
				polygons.push(`
					calc(${x}vmax + ${-HexMax * 0.5}vmax) ${y}vmax,
					calc(${x}vmax + ${-HexMin * 0.5}vmax) calc(${y}vmax + ${-RowStep * 0.5}vmax),
					calc(${x}vmax + ${HexMin * 0.5}vmax) calc(${y}vmax + ${-RowStep * 0.5}vmax),
					calc(${x}vmax + ${HexMax * 0.5}vmax) ${y}vmax,
					calc(${x}vmax + ${HexMin * 0.5}vmax) calc(${y}vmax + ${RowStep * 0.5}vmax),
					calc(${x}vmax + ${-HexMin * 0.5}vmax) calc(${y}vmax + ${RowStep * 0.5}vmax),
					calc(${x}vmax + ${-HexMax * 0.5}vmax) ${y}vmax,
					0 0`);
			}
			else
			{
				polygons.push(`
					calc(${x}vmax + ${-HexMax * 0.5}vmax * ${t}) ${y}vmax,
					calc(${x}vmax + ${-HexMin * 0.5}vmax * ${t}) calc(${y}vmax + ${-RowStep * 0.5}vmax * ${t}),
					calc(${x}vmax + ${HexMin * 0.5}vmax * ${t}) calc(${y}vmax + ${-RowStep * 0.5}vmax * ${t}),
					calc(${x}vmax + ${HexMax * 0.5}vmax * ${t}) ${y}vmax,
					calc(${x}vmax + ${HexMin * 0.5}vmax * ${t}) calc(${y}vmax + ${RowStep * 0.5}vmax * ${t}),
					calc(${x}vmax + ${-HexMin * 0.5}vmax * ${t}) calc(${y}vmax + ${RowStep * 0.5}vmax * ${t}),
					calc(${x}vmax + ${-HexMax * 0.5}vmax * ${t}) ${y}vmax,
					0 0`);
			}
		}
	}
	return `polygon(${polygons.join(',\n')})`;
}


// Example
let page = document.querySelector('main.page');
page.style.clipPath = renderBestagons(0.99);
console.log(`Rendered bestagons ${Columns} x ${Rows} grids`);

// DevTools Usage, paste into css animation after running each line
// copy('clip-path: ' + renderBestagons(0));
// copy('clip-path: ' + renderBestagons(1));