🚀 Free Solar System Simulation Code | Interactive CSS & JavaScript Project

Download a free interactive Solar System simulation code built with CSS, JavaScript, and HTML. Experience realistic planetary motion, shooting stars, asteroid fields, and space sound effects. Get the full source code on AlertCampusGenius.com!

Friday, March 7, 2025
🚀 Free Solar System Simulation Code | Interactive CSS & JavaScript Project

Explore the Solar System with Our Free Interactive Code (Full Source Included)

Introduction

Have you ever wondered what it would be like to travel through space and explore the vast Solar System? Now, with our interactive Solar System simulation, you can experience the beauty of celestial bodies in motion—right from your web browser. At AlertCampusGenius.com, we are providing you with a free and fully functional source code to help you learn, build, and customize your own planetary orbit system.

Whether you're a beginner in web development or an advanced programmer, this project is perfect for learning about CSS animations, JavaScript interactions, and astronomical representations. Let's dive deep into how this code works, its features, and how you can integrate it into your website!

Why This Solar System Code is Special?

This Solar System simulation is built with a combination of HTML, CSS, and JavaScript, making it lightweight, highly responsive, and ideal for educational or entertainment purposes. Here’s why it stands out:

✅ Realistic Orbits – Planets move around the sun in an orbital path using smooth animations. ✅ Customizable – You can modify planet speed, sizes, and colors easily. ✅ Optimized for Performance – Runs efficiently without slowing down the browser. ✅ Mobile-Friendly – Works on all screen sizes, including desktops, tablets, and mobile devices. ✅ Immersive Space Effects – Includes twinkling stars, shooting stars, asteroids, and a glowing nebula. ✅ Background Space Sound – Provides an ambient space experience with real audio effects. ✅ SEO-Optimized Code – Structured and well-commented, making it easy to understand and modify.

Features of the Solar System Code

1. Animated Planets with Smooth Orbits

Each planet is placed in a circular orbit around the Sun, moving in a realistic planetary motion. The animation is controlled using CSS keyframes and JavaScript, ensuring a smooth transition.

2. Glowing Stars and Shooting Stars for a Realistic Space Effect

To make the background look dynamic and realistic, we have added twinkling stars and shooting stars that move across the screen randomly.

3. Asteroids and a Glowing Nebula

Space isn’t just about planets! We’ve included asteroid fields and a nebula glow effect to enhance the depth and realism of the scene.

4. Interactive Sound Effects

To improve immersion, the Solar System simulation includes a space ambiance sound. Users can enable or disable the audio with a simple sound toggle button.

5. Fully Responsive and Mobile-Friendly Design

This project is designed with a mobile-first approach, ensuring that it works seamlessly across all screen sizes.

How to Use the Free Solar System Code?

We are providing this fully functional Solar System source code for free. Follow these steps to use it on your own website:

Step 1: Download the Source Code

You can download the full source code for free from our website (AlertCampusGenius.com).

Step 2: Extract and Open in a Code Editor

Once downloaded, extract the files and open them using any text editor like VS Code, Sublime Text, or Notepad++.

Step 3: Run the Code in Your Browser

Simply open the index.html file in your browser, and you’ll see the planets orbiting the Sun.

Step 4: Customize the Code (Optional)

Want to modify the simulation? You can tweak the CSS animations, JavaScript logic, or even add new celestial bodies!

FAQ (Frequently Asked Questions)

1️⃣ What is this Solar System Simulation?

This is an interactive Solar System project built with HTML, CSS, and JavaScript, featuring realistic planetary motion, shooting stars, asteroids, and space sound effects to create an immersive experience.

2️⃣ Is this Solar System Code Free to Use?

Yes! The full source code is 100% free to download and use from AlertCampusGenius.com. You can modify and customize it for personal or educational projects.

3️⃣ How Does the Animation Work?

The planets orbit using CSS keyframes, while JavaScript controls the movement of shooting stars, asteroids, and glowing nebula effects to create a dynamic space environment.

4️⃣ Can I Add More Planets or Customize the Code?

Absolutely! You can easily edit the CSS and JavaScript to add more planets, change their sizes, or even modify the orbit speed for a unique space simulation.

5️⃣ Does It Work on Mobile Devices?

Yes! The Solar System simulation is fully responsive, working seamlessly on desktops, tablets, and mobile devices without any performance issues.

6️⃣ How Can I Enable or Disable the Space Sound Effect?

A toggle button is provided in the code to turn the space ambiance sound on or off according to user preference.

7️⃣ Will This Project Help Me Learn Web Development?

Yes! This project is an excellent way to learn CSS animations, JavaScript interactions, and responsive design while working on an exciting space-themed project.

8️⃣ How Can I Integrate This Into My Website?

Simply download the source code from AlertCampusGenius.com, extract the files, and embed them into your existing web project.

9️⃣ How Can I Make This Project More Realistic?

You can add 3D effects using WebGL, incorporate real-time planet positions using APIs, or include a space travel mode for user interaction.





HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Solar System</title>
</head>
<body>
    <div class="space-container">
        <div class="stars"></div> 
        <div class="shooting-stars"></div> 
        <div class="nebula"></div> 
        <div class="asteroids-container"></div> 
    </div>

    <!-- Animated Title -->
    <h1 class="animated-title">Explore the Solar System</h1>

    <div class="layout">
        <ol class="solar-system">
            <li class="orbit">
                <div class="label">Sun</div>
                <div class="planet sun"></div>
            </li>
            <li class="orbit">
                <div class="label">Mercury</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet mercury"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Venus</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet venus"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Earth</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet earth"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Mars</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet mars"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Jupiter</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet jupiter"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Saturn</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet saturn"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Uranus</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet uranus"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Neptune</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet neptune"></div>
                </div>
            </li>
            <li class="orbit">
                <div class="label">Pluto</div>
                <div class="orbit-ring"></div>
                <div class="axis">
                    <div class="planet pluto"></div>
                </div>
            </li>
        </ol>
    </div>

    <!-- Space Sound -->
    <audio id="space-audio" loop>
        <source src="space-sound.mp3" type="audio/mpeg">
    </audio>
    <button id="sound-toggle">🔊 Sound On</button>
</body>
</html>

CSS Code

* {
  box-sizing: border-box;
  margin: 0;
}

body {
  font-family: system-ui, sans-serif;
  color: white;
  background: linear-gradient(to bottom, #112, #223);
}

.layout {
  min-height: 100vh;
  display: grid;

  & > .solar-system {
    align-self: end;
  }
}

.solar-system {
  --sun-diameter: 12dvh;
  --sun-spacing: 0.15;

  /* Define planet sizes (not to scale) */
  --mercury-size: 0.2;
  --venus-size: 0.25;
  --earth-size: 0.25;
  --mars-size: 0.25;
  --jupiter-size: 0.75;
  --saturn-size: 0.6;
  --uranus-size: 0.4;
  --neptune-size: 0.4;
  --pluto-size: 0.1;

  /* Define orbital periods (to scale) */
  --mercury-period: 0.24;
  --venus-period: 0.615;
  --earth-duration: 5s;
  --mars-period: 1.88;
  --jupiter-period: 11.86;
  --saturn-period: 29.46;
  --uranus-period: 84;
  --neptune-period: 164;
  --pluto-period: 248;

  padding: 1rem 0 0 0;
  overflow: hidden;

  /* Set up the grid layout */
  display: grid;
  gap: calc(var(--sun-diameter) * 0.15);
  grid-template-rows: repeat(10, auto);
  grid-template-areas:
    "pluto"
    "neptune"
    "uranus"
    "saturn"
    "jupiter"
    "mars"
    "earth"
    "venus"
    "mercury"
    "sun";

  .orbit {
    --sun-margin: calc(var(--sun-diameter) * var(--sun-spacing));
    --planet-diameter: max(var(--planet-size) * var(--sun-diameter), 1rem);

    grid-column: 1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: subgrid;
    justify-items: center;

    &:has(.sun) {
      --planet-size: 1;
      grid-area: sun;
      padding-block: var(--sun-margin);
      .label {
        color: transparent;
      }
    }
    &:has(.mercury) {
      --planet-size: var(--mercury-size);
      --planet-duration: calc(var(--earth-duration) * var(--mercury-period));
      grid-row: mercury-start / sun-end;
      .planet,
      .label {
        grid-area: mercury;
      }
    }
    &:has(.venus) {
      --planet-size: var(--venus-size);
      --planet-duration: calc(var(--earth-duration) * var(--venus-period));
      grid-row: venus-start / sun-end;
      .planet,
      .label {
        grid-area: venus;
      }
    }
    &:has(.earth) {
      --planet-size: var(--earth-size);
      --planet-duration: var(--earth-duration);
      grid-row: earth-start / sun-end;
      .planet,
      .label {
        grid-area: earth;
      }
    }
    &:has(.mars) {
      --planet-size: var(--mars-size);
      --planet-duration: calc(var(--earth-duration) * var(--mars-period));
      grid-row: mars-start / sun-end;
      .planet,
      .label {
        grid-area: mars;
      }
    }
    &:has(.jupiter) {
      --planet-size: var(--jupiter-size);
      --planet-duration: calc(var(--earth-duration) * var(--jupiter-period));
      grid-row: jupiter-start / sun-end;
      .planet,
      .label {
        grid-area: jupiter;
      }
    }
    &:has(.saturn) {
      --planet-size: var(--saturn-size);
      --planet-duration: calc(var(--earth-duration) * var(--saturn-period));
      grid-row: saturn-start / sun-end;
      .planet,
      .label {
        grid-area: saturn;
      }
    }
    &:has(.uranus) {
      --planet-size: var(--uranus-size);
      --planet-duration: calc(var(--earth-duration) * var(--uranus-period));
      grid-row: uranus-start / sun-end;
      .planet,
      .label {
        grid-area: uranus;
      }
    }
    &:has(.neptune) {
      --planet-size: var(--neptune-size);
      --planet-duration: calc(var(--earth-duration) * var(--neptune-period));
      grid-row: neptune-start / sun-end;
      .planet,
      .label {
        grid-area: neptune;
      }
    }
    &:has(.pluto) {
      --planet-size: var(--pluto-size);
      --planet-duration: calc(var(--earth-duration) * var(--pluto-period));
      grid-row: pluto-start / sun-end;
      .planet,
      .label {
        grid-area: pluto;
      }
    }
  }

  .planet {
    height: var(--planet-diameter);
    aspect-ratio: 1;
    border-radius: 50%;
    /* Planet background color and shadow */
    z-index: 1;
    background-image: radial-gradient(
      circle at center 80%,
      rgb(255 255 255 / 0.4),
      rgb(255 255 255 / 0) 50%
    );

    &.sun {
      /* Sun specific styles */
      --sun-color: #ffd800;
      background-color: var(--sun-color);
      background-image: none;
      box-shadow: 0 0 42px 0
        color-mix(in oklch, transparent, var(--sun-color) 50%);
    }
    &.mercury {
      background-color: #989494;
    }
    &.venus {
      background-color: #e1d59d;
    }
    &.earth {
      background-color: #008bb3;
    }
    &.mars {
      background-color: #dfa272;
    }
    &.jupiter {
      background-color: #af7045;
    }
    &.saturn {
      background-color: #d3b57c;
    }
    &.uranus {
      background-color: #77aac4;
    }
    &.neptune {
      background-color: #3a80a4;
    }
    &.pluto {
      background-color: #989494;
    }
  }

  .orbit-ring {
    /* Orbit ring around each planet */
    grid-area: 1 / 1 / -1 / -1;
    height: calc(
      2 *
        (
          100% - var(--planet-diameter) / 2 - var(--sun-diameter) / 2 -
            var(--sun-margin)
        )
    );
    aspect-ratio: 1;
    translate: 0 calc(var(--planet-diameter) / 2);
    border-radius: 50%;
    border: 1px solid rgb(255 255 255 / 0.5);
    z-index: 0;
  }

  .axis {
    /* Rotation axis for planets */
    grid-area: 1 / 1 / -1 / -1;
    display: grid;
    grid-template-rows: subgrid;
    transform-origin: center
      calc(100% - var(--sun-diameter) / 2 - var(--sun-margin));
    animation: orbit var(--planet-duration) linear infinite;
  }

  .label {
    align-self: center;
    translate: 0 -0.5lh;
    z-index: 2;
  }
}

@keyframes orbit {
  from {
    rotate: 0turn;
  }
  to {
    rotate: 1turn;
  }
}



body {
  background: black;
  overflow: hidden;
  margin: 0;
  text-align: center;
}

/* Animated Title */
.animated-title {
  font-size: 3rem;
  font-weight: bold;
  color: white;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  animation: title-glow 4s infinite alternate;
}

@keyframes title-glow {
  0% { color: white; text-shadow: 0 0 10px rgba(255, 255, 255, 0.8); }
  50% { color: cyan; text-shadow: 0 0 15px cyan; }
  100% { color: magenta; text-shadow: 0 0 20px magenta; }
}

/* Space Elements */
.stars, .shooting-stars, .nebula, .asteroids-container {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  pointer-events: none;
}

/* Small Twinkling Stars */
.stars span {
  position: absolute;
  width: 2px;
  height: 2px;
  background: white;
  border-radius: 50%;
  opacity: 0.2;
  animation: twinkle 3s infinite alternate;
}

@keyframes twinkle {
  0%, 100% { opacity: 0.2; }
  50% { opacity: 1; }
}

/* Shooting Stars */
.shooting-stars span {
  position: absolute;
  width: 3px;
  height: 20px;
  background: white;
  border-radius: 50%;
  opacity: 0;
  animation: shooting 4s infinite;
}

@keyframes shooting {
  0% { opacity: 1; transform: translateY(0px) translateX(0px); }
  100% { opacity: 0; transform: translateY(100vh) translateX(-50vw); }
}

/* Sound Toggle Button */
#sound-toggle {
  position: fixed;
  bottom: 10px;
  right: 10px;
  padding: 10px 15px;
  background: #333;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

JavaScript Code

      document.addEventListener("DOMContentLoaded", () => {
    const starContainer = document.querySelector(".stars");
    const shootingStarsContainer = document.querySelector(".shooting-stars");
    const asteroidContainer = document.querySelector(".asteroids-container");
    const audio = document.getElementById("space-audio");
    const soundToggle = document.getElementById("sound-toggle");

    // Create Stars
    for (let i = 0; i < 100; i++) {
        let star = document.createElement("span");
        star.style.left = Math.random() * 100 + "vw";
        star.style.top = Math.random() * 100 + "vh";
        star.style.animationDuration = Math.random() * 3 + 2 + "s";
        starContainer.appendChild(star);
    }

    // Create Shooting Stars
    for (let i = 0; i < 5; i++) {
        let shootingStar = document.createElement("span");
        shootingStar.style.left = Math.random() * 100 + "vw";
        shootingStar.style.animationDuration = Math.random() * 4 + 2 + "s";
        shootingStarsContainer.appendChild(shootingStar);
    }

    // Create Asteroids
    for (let i = 0; i < 10; i++) {
        let asteroid = document.createElement("div");
        asteroid.classList.add("asteroid");
        asteroid.style.left = Math.random() * 100 + "vw";
        asteroid.style.top = Math.random() * 100 + "vh";
        asteroid.style.animationDuration = Math.random() * 10 + 5 + "s";
        asteroidContainer.appendChild(asteroid);
    }

    // Ensure audio plays when the user interacts (Fix autoplay issue)
    soundToggle.addEventListener("click", () => {
        if (audio.paused) {
            audio.play();
            soundToggle.textContent = "🔇 Sound Off";
        } else {
            audio.pause();
            soundToggle.textContent = "🔊 Sound On";
        }
    });

    // Enable audio on first user interaction
    document.body.addEventListener("click", () => {
        if (audio.paused) {
            audio.play();
        }
    }, { once: true });
});

PHP Code

NO Need
Show Result

Conclusion

The Solar System Simulation Code is an excellent educational and entertainment project for web developers, astronomy enthusiasts, and programmers. With its realistic planetary motion, immersive space effects, and interactive features, this project is a must-have for any space lover!

💡 Download the free source code now and start your journey into space today! 🚀

📢 Share this article with your friends and community if you find it useful. Let’s make space exploration accessible to everyone!






Leave a Comment: 👇