Full code for the above pattern is:
`<!DOCTYPE html>
Infinity Grid Illusion
<br> * { margin: 0; padding: 0; box-sizing: border-box; }<br> body {<br> background: black;<br> overflow: hidden;<br> display: flex;<br> align-items: center;<br> justify-content: center;<br> height: 100vh;<br> }<br> canvas {<br> position: absolute;<br> }<br>
<script>
const canvas = document.getElementById("gridCanvas");
const ctx = canvas.getContext("2d");
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
let cols = 20, rows = 20;
let cellSize = Math.min(canvas.width, canvas.height) / cols;
let time = 0;
function getColor(x, y) {
const colors = ["#FF0077", "#00FFD1", "#FFAA00", "#8822FF", "#00CCFF"];
return colors[(Math.floor(x / cellSize) + Math.floor(y / cellSize) + Math.floor(time * 2)) % colors.length];
}
function drawGrid() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.lineWidth = 2;
for (let i = -1; i < cols; i++) {
for (let j = -1; j < rows; j++) {
let x = i * cellSize;
let y = j * cellSize;
let dx = x - canvas.width / 2;
let dy = y - canvas.height / 2;
let dist = Math.sqrt(dx * dx + dy * dy);
// Warping effect
let warpFactor = Math.sin(dist * 0.015 + time) * 15;
let offsetX = warpFactor * Math.cos(time * 0.5);
let offsetY = warpFactor * Math.sin(time * 0.5);
ctx.strokeStyle = getColor(x, y);
ctx.beginPath();
ctx.rect(x + offsetX, y + offsetY, cellSize, cellSize);
// Random flickering effect on some cells
if (Math.random() > 0.97) {
ctx.fillStyle = ctx.strokeStyle;
ctx.fill();
}
ctx.stroke();
}
}
time += 0.02;
requestAnimationFrame(drawGrid);
}
drawGrid();
</script>
`
Top comments (0)