so, what do we have here?: <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ultimate Supreme God con</title>
    <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+Devanagari:wght@400;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans Devanagari', sans-serif;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 100vh;
            margin: 0;
            overflow: hidden;
            background-color: #000;
        }

        #bgCanvas {
            position: absolute;
            width: 100%;
            height: 100%;
        }

        .circle-container {
            position: relative;
            width: 500px;
            height: 500px;
            margin: 0 auto;
            z-index: 1;
        }

        .circle-container span {
            display: block;
            position: absolute;
            text-align: right;
            line-height: 0;
        }

        .circle-container span:before {
            content: '';
            display: inline-block;
            vertical-align: middle;
            width: 4px;
            height: 4px;
            margin-left: 10px;
            background: currentColor;
            border-radius: 100%;
            margin-right: 3px;
        }

        .circle-container span a {
            display: inline-block;
            text-decoration: none;
            color: inherit;
        }

        .circle-container span a sub {
            font-size: 0.5rem;
          
        }

        .clock {
            animation: rotate 120s infinite linear;
        }

        @keyframes rotate {
            0% { transform: rotate(0)scale(3);}
            100% { transform: rotate(360deg)scale(3);}
        }
    </style>
</head>
<body>
    <canvas id="bgCanvas"></canvas>
    <div class="circle-container clock" id="circle">
        
    </div>
    <script>
const canvas = document.getElementById('bgCanvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
const ctx = canvas.getContext('2d');
const con = [
    { priority: true, name: 'ब्रह्मा', description: '(Brahma, Hinduism)', color: '#FFD700' },
    { priority: false, name: 'יהוה‎', description: '(Yahweh, Judaism)', color: '#292421' },
    { priority: true, name: 'الله‎', description: '(Allah, Islam)', color: '#008878' },
    { priority: false, name: 'ईश्वर', description: '(Ishvara, Hinduism)', color: '#632c12' },
    { priority: true, name: 'オーム', description: '(Aum, Hinduism)', color: '#2E74B5' },
    { priority: false, name: '道', description: '(Dao, Taoism)', color: '#5C552E' },
    { priority: true, name: 'אֵל‎', description: '(El, Canaanite)', color: '#DAA520' },
    { priority: false, name: 'アマテラス', description: '(Amaterasu, Shinto)', color: '#E60026' },
];

function fractal(x, y, size) {
    if (size < 0.5) return;
    ctx.fillStyle = 'rgba(' +
        Math.floor(Math.random() * 256) + ',' +
        Math.floor(Math.random() * 256) + ',' +
        Math.floor(Math.random() * 256) + ', 1)';
    ctx.fillRect(x, y, size, size);
    const newSize = size / 3;
    for (let i = 0; i < 3; i++) {
        for (let j = 0; j < 3; j++) {
            if (i === 1 && j === 1) continue;
            fractal(x + newSize * i, y + newSize * j, newSize);
        }
    }
}

function createCon() {
    const circle = document.getElementById('circle');
    for (let i = 0, len = con.length; i < len; i++) {
        let angle = 360 / len;
        let el = document.createElement('span');

        el.innerHTML = '<a href="#" style="color:' + con[i].color + ';">' + con[i].name + '<sub>' + con[i].description + '</sub></a>';
        
        el.style.transform = 'translate(-50%, -50%) rotate(' + (angle * i) + 'deg) translateY(-50%)';
        el.style.top = '50%';
        el.style.left = '50%';
        circle.appendChild(el);
    }
}

function drawFractal() {
    const size = Math.min(canvas.width, canvas.height) / 0.3;
    const x = (canvas.width - size) / 2;
    const y = (canvas.height - size) / 2;
    fractal(x, y, size);
}

function init() {
    createCon();
    drawFractal();
}
window.addEventListener('resize', () => {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    drawFractal();
});

init();
    </script>
</body>
</html>