the planets are not revolving around sun and not following the drawn orbit! <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Solar System Animation</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #000;
        }

        #solar-system {
            width: 100vw;
            height: 100vh;
            position: relative;
        }

        .sun {
            width: 50px;
            height: 50px;
            background: #ff9933;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .planet {
            position: absolute;
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }

        .asteroid {
            width: 8px;
            height: 8px;
            background: #4a992b;
            border-radius: 50%;
            position: absolute;
        }

        .orbit {
            position: absolute;
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
    <div id="solar-system"></div>

    <script>
        const solarSystem = document.getElementById('solar-system');

        // Planet and asteroid arrays
        let planets = [];
        const asteroids = [];

        function createPlanet(size, color) {
            const planet = {
                element: document.createElement('div'),
                color,
                size: size,
                radius: Math.random() * 10 + 5,
                orbitRadius: Math.random() * 75 + 25,
                speed: Math.random() * 0.01 + 0.03,
                x: solarSystem.clientWidth / 2,
                y: solarSystem.clientHeight / 2
            };

            planet.element.style.width = `${size}px`;
            planet.element.style.height = `${size}px`;
            planet.element.style.backgroundColor = color;
            planet.element.classList.add('planet');

            // Add orbit path
            const orbit = document.createElement('div');
            orbit.className = 'orbit';
            orbit.style.width = `${2 * Math.PI * planet.orbitRadius}px`;
            orbit.style.height = `${2 * Math.PI * planet.orbitRadius}px`;
            solarSystem.appendChild(orbit);

            planets.push({
                ...planet,
                element: planet.element,
                orbit: orbit
            });

            // Position on orbit path
            let angle = 0;

            function animate() {
                const xPos = Math.cos(angle) * planet.orbitRadius + planet.x;
                const yPos = Math.sin(angle) * planet.orbitRadius + planet.y;

                planet.element.style.left = `${xPos}px`;
                planet.element.style.top = `${yPos}px`;

                if (angle < 360) {
                    angle += planet.speed;
                    window.requestAnimationFrame(animate);
                }
            }

            animate();

            solarSystem.appendChild(planet.element);
        }

        function createAsteroid(size, color) {
            const asteroid = {
                element: document.createElement('div'),
                color,
                size: size,
                x: Math.random() * (solarSystem.clientWidth / 2),
                y: Math.random() * (solarSystem.clientHeight / 2)
            };

            asteroids.push({
                ...asteroid,
                element: asteroid.element
            });

            solarSystem.appendChild(asteroid.element);
        }

        // Create Sun
        const solarSun = document.createElement('div');
        solarSun.style.position = 'absolute';
        solarSun.style.width = '50px';
        solarSun.style.height = '50px';
        solarSun.style.background = '#ff9933';
        solarSun.style.borderRadius = '50%';
        solarSun.style.top = '50%';
        solarSun.style.left = '50%';
        solarSun.style.transform = 'translate(-50%, -50%)';
        solarSystem.appendChild(solarSun);

        // Create planets and asteroids
        for (let i = 0; i < 9; i++) {
            createPlanet(15 + i * 8, `hsl(${Math.random() * 360}, 70%, 50%)`);
        }

        for (let i = 0; i < 20; i++) {
            createAsteroid(4, `hsl(${Math.random() * 360}, 70%, 50%)`);
        }

    </script>
</body>
</html>