폴리곤. 컬러 로테이션 hue-rotate

let container = document.querySelector('.container');
for (let i = 0; i < 12; i++){
	let row = document.createElement('div'); 
    row.classList.add('row');
	for (let j = 0; j < 20; j++){
    	let box = document.createElement('div'); box.classList.add('box');
		box.style.filter = `hue-rotate(${i * 36}deg)`; 
    	row.appendChild(box);
	}
	container.appendChild(row);
}

.row { display: inline-flex; margin-top: -32px; margin-left: -50px;}
.row:nth-child(even) { margin-left: 1px;}
.row .box {
    position: relative;
    width: 100px;
    height: 110px;
    background: #0c0c0c;
    margin: 2px;
    transition: 2s;
    clip-path: polygon (50% 0%, 100% 25%, 100% 75%, 50% 100%,0% 75%,0% 25%);}
.row .box:hover { 
	transition: 0s; 
    background: #0f0;}
.row .box::before {
    content: ''
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background: rgba(255,255,255,0.02);}