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)