<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dynamic Radial Pixel Grid</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }

        .grid {
            display: grid;
            grid-template-columns: repeat(15, 1fr); /* Adjust as necessary */
            grid-template-rows: repeat(15, 1fr); /* Adjust as necessary */
            gap: 0; /* No gap */
        }

        .grid-item {
            display: flex; /* Use flexbox to center contents */
            justify-content: center; 
            align-items: center;
            position: relative; /* Position relative for child elements */
        }

        .pixel {
            box-sizing: border-box;
            border-radius: 50%; /* Make pixels circular */
        }
    </style>
</head>

<body>
    <div class="grid" id="pixelGrid"></div>

    <script>
        const radialDownscaleFromTheCenter = [
            "       0       ",
            "      010      ",
            "     01210     ",
            "    0123210    ",
            "   012343210   ",
            "  01234543210  ",
            " 0123456543210 ",
            "012345676543210",
            " 0123456543210 ",
            "  01234543210  ",
            "   012343210   ",
            "    0123210    ",
            "     01210     ",
            "      010      ",
            "       0       ",
        ];

        const generateGrid = (structure) => {
            const grid = document.getElementById('pixelGrid');
            grid.innerHTML = ''; // Clear existing elements
            structure.forEach((row) => {
                row.split('').forEach((character) => {
                    const div = document.createElement('div');
                    const size = getPixelSize(character); // Get size based on character
                    const pixel = document.createElement('div');
                    pixel.className = 'pixel'; // Set class for pixel styling
                    pixel.style.width = `${size}px`; // Set dynamic width
                    pixel.style.height = `${size}px`; // Set dynamic height
                    pixel.style.backgroundColor = getPixelColor(character); // Set color

                    div.className = 'grid-item'; // Assign grid item class
                    div.appendChild(pixel); // Append pixel to grid item
                    grid.appendChild(div); // Append grid item to grid
                });
            });
        };

        const getPixelSize = (char) => {
            switch (char) {
                case '0': return 10; // Size for center
                case '1': return 15; // Size for first ring
                case '2': return 20; // Size for second ring
                case '3': return 25; // Size for third ring
                case '4': return 30; // Size for fourth ring
                case '5': return 35; // Size for fifth ring
                case '6': return 40; // Size for sixth ring
                case '7': return 45; // Size for seventh ring
                case '8': return 50; // Size for eighth ring
                case '9': return 55; // Size for ninth ring
                default: return 0; // No size for undefined characters
            }
        };

        const getPixelColor = (char) => {
            switch (char) {
                case '0': return '#FFC107'; // Center
                case '1': return '#FF5722'; // First ring (eyes)
                case '2': return '#8BC34A'; // Second ring (hair)
                case '3': return '#3F51B5'; // Third ring (hair)
                case '4': return '#FFEB3B'; // Fourth ring (hair)
                case '5': return '#303F9F'; // Fifth ring (hair)
                case '6': return '#FF5722'; // Sixth ring (eyes)
                case '7': return '#FF5722'; // Seventh ring (eyes)
                case '8': return '#FF5722'; // Eighth ring (eyes)
                case '9': return '#FF5722'; // Ninth ring (eyes)
                default: return 'transparent'; // No color
            }
        };

        // Generate the radial downscale grid on load
        generateGrid(radialDownscaleFromTheCenter);
    </script>
</body>

</html>