The Solar System with Orbit CSS

Inspired by the diverse and creative solar system visualizations I've seen on Dev.to, I thought it would be great to add another one to the universe 🙂. In this case using Orbit CSS framework.

Disclaimer: This project is a simplified representation of our Solar System, featuring the major planets (excluding dwarf planets) and is not intended to be a precise astronomical simulation.

Step 1: Project Setup

Begin by creating an HTML file where you will insert the code for our solar system. Also, link the Orbit CSS file in the head of your HTML document.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>The Solar System</title>
   <link rel="stylesheet" href="https://unpkg.com/@zumer/orbit@latest/dist/orbit.css">
</head>
<body>
   <div class="bigbang">
   <!-- Solar system here -->
   </div>
</body>
</html>

Alternatively, you can use the Codepen Orbit starter template

Step 2: HTML Structure of the Solar System

Inside the div with the class .bigbang, we start adding elements that represent the planets, their orbits, and satellites. To do that, we will use some Orbit elements.

<div class="bigbang">
  <div class="gravity-spot from-3x">
    <div class="orbit-0">
      <div class="satellite sun grow-3x"></div>
    </div>
    <div class="orbit-1">
      <div class="satellite mercury shrink-60"></div>
    </div>
  </div>
</div>

In the above code, the .bigbang class is the origin of our project. Inside it, we added a .gravity-spot that represents a gravitational center, and .orbit-0 that is an orbit at the center of the gravitational force. After that, we added a .satellite and .sun to present our Sun. Next, we created .orbit-1 that is an orbit close to the center with a small radius. And inside it we put Mercury.

Observe that there are some Orbit utility classes like from-3x, .grow-3x, and shrink-60. Those are used to adjust the radial layout and element sizes. For instance, .from-3x indicates that orbits will start with an offset of three orbit lengths. .grow-3x indicates that the Sun will have a size of three orbits, and .shrink-60 indicates that Mercury has a size of 40% of an orbit.

After completing all orbits and planets, we will have this:

Adding Moons, Rings and Asteroids
Some planets, like Earth, Mars, Jupiter, Saturn, Uranus, and Neptune, have moons. These can be put inside an element with class .gravity-spot to simulate the planet's gravity. Keep into account that we will create just some moons, not all of them.

<div class="orbit-3">
    <div class="satellite earth">
       <div class="gravity-spot">
          <div class="orbit-1 shrink-30 ">
            <div class="satellite shrink-70 moon"></div>
          </div>
       </div>
    </div>
</div>

Here we created the Moon in our planet and used some utilities classes to adjust layout and sizes.

Now it is time to add rings to Saturn and Neptune.

<div class="orbit-14">
   <div class="satellite neptune grow-0.1x">
      <div class="gravity-spot ring">
         <div class="orbit-1 shrink-30"></div>
      </div>
    </div>
</div>

Finally, we add a lot of asteroids to recreate the asteroid belt

<div class="orbit-6 asteroid-belt">
   <div class="satellite shrink-90"></div>
   <div class="satellite shrink-70"></div>
   <div class="satellite shrink-80"></div>
   <div class="satellite shrink-90"></div>
   <!— … —>
</div>
<div class="orbit-6 from-40 asteroid-belt"></div>
<div class="orbit-6 from-20 asteroid-belt"></div>
<!— … —>

Here we use one new utility class: from-* that allow setting a starting angle and generating an illusion of random asteroids.

After adding all moons, rings and asteroids we have this:

Step 3: Styling the Solar System

Here we will need some real images of the Sun and planets. At first, I tried to move those images to simulate the internal rotation, but animating background-position property is very expensive for CPUs, so I decido use animated gifs to avoid frying CPUs and mantain a smooth animation. In Orbit there is a special class called .capsule that is used inside a satellite, to add rich content.

Earth

    <div class="orbit-3">
      <div class="satellite earth">
        <div class="capsule ">
          <div class="surface"></div>
        </div>
      </div>
    </div>

.earth .surface {
  background: url("https://media.tenor.com/0we9sWcmUtYAAAAi/wingedratsecrettag-earth.gif");
  background-size: auto 100%;
}

3D effect

To generate a 3D illusion we use some css gradients:

.sun:before,
.surface:before {
  content: "";
  position: absolute;
  top: 1%;
  left: 5%;
  width: 90%;
  height: 90%;
  border-radius: 50%;
  background: radial-gradient(
    circle at 50% 0px,
    yellow,
    rgba(255, 255, 255, 0) 58%
  );
  -webkit-filter: blur(5px);
  z-index: 2;
}
.sun:after,
.surface:after {
  content: "";
  position: absolute;
  border-radius: 50%;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: radial-gradient(
    circle at 50% 30%,
    rgba(245, 237, 48, 0),
    rgba(200, 190, 20, 0.2) 50%,
    #575300 100%
  );
}

After we placed all images, we obtain this:

Step 4: Animating the Solar System

Use CSS animations to make the planets and their moons orbiting around the Sun. First create a @keyframe animation:

@keyframes rotate {
  to {
    rotate: 360deg;
  }
}

Then add animation property to each planet and the Sun. Have in mind that it is neccessary to include a "counter" animation on planet .capsule class to allow them be estabilized. Note that since the Sun only rotates on its axis is not necessary to include a .capsule and a "counter" animation.

.earth {
  --t: 6315.79ms;
  animation: rotate var(--t, 20s) linear reverse infinite;
}

.capsule {
  animation: rotate var(--t, 20s) linear infinite;
}

Now we have an animated 2D solar system:

Step 5: Perspective

To be more realistic we can use a perspective on .bigbang and a trasnform: rotateX property on the Sun, moon orbits ,and planets to generate a pseudo 3D effect.

.bigbang {
  perspective: 150px;
  perspective-origin: 50% 100%;
}

.gravity-spot {
  transform: rotateX(10deg);
   transform-style: preserve-3d;
}

.orbit-0 {
  transform: rotateX(-5deg);
}

Congratulations!! This is the final representation of our Solar System.

Conclusion

This tutorial has guided you through creating an animated solar system using HTML, CSS, and the Orbit CSS framework. I hope you found it interesting and fun. Orbit is designed to create almost any kind of radial interfaces, so take a look and let me know if you create something with it!

Blog

The Solar System with Orbit CSS

Juan Martin

Step 1: Project Setup

Step 2: HTML Structure of the Solar System

Step 3: Styling the Solar System

Step 4: Animating the Solar System

Step 5: Perspective

Conclusion

Credits:

Join Our Newsletter. No Spam, Only the good stuff.

Related