onload= ()=>{
let sides = 5; // no. of data points (increment this to add more data)
let units = 4; // no. of graphs + 1 (increment this to add more graph)
let vertices = (new Array(units)).fill(""); 
let percents = new Array(units);
percents[0] = (new Array(sides)).fill(100); // for the polygon's grid
// each graph's data points in the order [B, C, D... A] 
percents[1] = [100, 50, 60, 50, 90]; 
percents[2] = [100, 80, 30, 90, 40];
percents[3] = [100, 10, 60, 60, 80];
// (add to percents[] to add a new graph's data points)
let gradient = "conic-gradient(";
let angle = 360/sides;

/* calculate vertices */
with(Math){for(i=0,n=2*PI;i<sides;i++,n+=2*PI){
	for(j=0;j<units;j++){
		let x = (round(cos(-1*PI/2 + n/sides) * percents[j][i]) + 100) / 2; 
 		let y = (round(sin(-1*PI/2 + n/sides) * percents[j][i]) + 100) / 2; 
		vertices[j] += `${x}% ${y}${i==sides-1 ? '%':'%, '}`;
	}
	gradient += `white ${(angle*(i+1))-1}deg,#ddd ${(angle*(i+1))-1}deg,#ddd ${(angle*(i+1))+1}deg,white ${(angle*(i+1))+1}deg,`;
}}

/* draw polygons (grids + graphs) */
document.querySelectorAll('.graphs>div').forEach((graph,i)=>{graph.style.clipPath =`polygon(${vertices[i+1]})`;});
document.querySelectorAll('.grids>div').forEach((grid,i)=>{grid.style.clipPath =`polygon(${vertices[0]})`;});
document.querySelector('.grids:nth-of-type(1)>div').style.background =`${gradient.slice(0, -1)})`;
}