div.grid
div
div
div
div
div
div
div
div
div
View Compiled
:root {
--theme: #FF9800;
--deg: 45deg;
--gride-size: 120px;
}
html, body {
height: 100%;
margin: 0;
overflow: hidden;
}
body {
display: flex;
align-items: center;
justify-content: center;
background: #333;
}
.grid {
width: calc(var(--gride-size) * 3);
margin: 0 auto;
display: grid;
border: 5px solid var(--theme);
box-shadow: 0 0 8px 1px var(--theme) inset;
grid-template-columns: repeat(3, 120px);
grid-template-rows: repeat(3, 120px);
overflow: hidden;
background-color: #fff;
}
.grid div {
background-color: var(--theme);
transition: all 1s ease-in;
}
const setRAFInterval = (cb, interval) => {
let now = Date.now;
let startTime = now();
let endTime = startTime;
let loop = () => {
this.intervalTimer = requestAnimationFrame(loop);
endTime = now();
if (endTime - startTime >= interval) {
startTime = now();
endTime = startTime;
cb();
}
}
this.intervalTimer = requestAnimationFrame(loop);
return this.intervalTimer;
};
const getPolygon = (a = 3/2, b = 0) => {
const deg = 2 * Math.PI / 15;
const points = [];
for (let i = 0; i < 15; i++) {
let x = Math.sin(i) * 100 + 10;
let y = Math.sin(a * i + b) * 100 + 35;
points.push(`${x}% ${y}%`);
}
return `polygon(evenodd, ${ points.join(',') })`;
};
const getRandomNum = (max) => Math.random() * Math.floor(max);
const randomColor = () => {
const color = Math.floor(Math.random()*16777215).toString(16);
return color.length !== 6 ? `f${color}` : color;
};
const root = document.documentElement;
const divs = document.querySelectorAll('.grid > div');
setRAFInterval(() => {
theme = randomColor();
divs.forEach(div => {
div.style.setProperty('clip-path', `${getPolygon(getRandomNum(3), getRandomNum(2))}`);
div.style.setProperty('background-color', `#${randomColor()}`);
root.style.setProperty('--theme', `#${randomColor()}`);
});
}, 2000);
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.