Illusionistic Pattern Making using the basic html,css and javascript. Follow for more....

Full code for the above pattern is: ` Infinity Grid Illusion * { margin: 0; padding: 0; box-sizing: border-box; } body { background: black; overflow: hidden; display: flex; align-items: center; justify-content: center; height: 100vh; } canvas { position: absolute; } 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(); `

Mar 16, 2025 - 09:02

Illusionistic Pattern Making using the basic html,css and javascript. Follow for more....

Full code for the above pattern is:
`

Infinity Grid Illusion

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
background: black;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
}
canvas {
position: absolute;
}