JSFiddle - React, Tailwind, and code Playground

by Umair Rafiq

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Animating Cube</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #000;
        }
        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="cubeCanvas"></canvas>

    <script>
        const canvas = document.getElementById('cubeCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = 800;
        canvas.height = 800;

        const cubeSize = 10;
        const gridSize = 10;
        const grid = [];
        const cubeColors = [];

        // Initialize grid with random sizes and colors
        for (let x = 0; x < gridSize; x++) {
            grid[x] = [];
            cubeColors[x] = [];
            for (let y = 0; y < gridSize; y++) {
                grid[x][y] = [];
                cubeColors[x][y] = [];
                for (let z = 0; z < gridSize; z++) {
                    grid[x][y][z] = Math.random();
                    cubeColors[x][y][z] = `hsl(${Math.random() * 360}, 70%, 50%)`;
                }
            }
        }

        let time = 0;

        function render() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const cubeSpacing = 30;

            for (let x = 0; x < gridSize; x++) {
                for (let y = 0; y < gridSize; y++) {
                    for (let z = 0; z < gridSize; z++) {
                        const size = cubeSize * (1 + 0.5 * Math.sin(time + x + y + z));
                        const color = cubeColors[x][y][z];

                        const offsetX = (x - gridSize / 2) * cubeSpacing;
                        const offsetY = (y -...