Generating a night sky with Javascript and CSS

I wanted to share a project I was working on this past weekend. I wanted to generate a night sky for use on a web page, using Javascript and CSS to enhance my knowledge of both.

The goal was originally to use cartoon-style stars in the form of SVG images and randomize their position on the web page. I used Inkscape to draw a simple one in a fun blue color.

cartoon star image

During the process, I decided that using simple 2px by 2px DIV elements in various colors looked better. Below is the CSS code I used for the star elements.

    #normalstar {
        width: 2px;
        height: 2px;
        background-color: white;
        border: 4px dotted "#EEEEEE";
        border-radius: 1px;
        position: absolute;
        animation-iteration-count: infinite;
        animation-name: zoom_out;
    }

For the animation of the CSS star elements, I used the selectors nth-of-type (odd) and (even) to set different delays for the animation duration, and transform: scale settings making for a subtle pulsating star effect.

 #normalstar:nth-of-type(odd) { animation-duration:  15s;  }   
 #normalstar:nth-of-type(even) { animation-duration:  5s; }

    @keyframes zoom_out {
        0% { transform: scale(1); }
        50% {transform: scale(.5);}
        100% {transform: scale(1);}
    }

For the star color, Javascript code randomizes that as well as the location of the stars. We have either yellow, light blue or white to randomly choose from. In my example, we have between 400 and 900 stars.

First, we have the general purpose randomization function to give us a nice random integer when provided a min and max argument.

function getRndInteger(min, max) {
 				 return Math.floor(Math.random() * (max - min + 1) ) + min;
				}

Then we use the function putStars() which handles the actual night sky generating business. It is called on page load.

function putStars()
{
var w = window.innerWidth;
var h = window.innerHeight;
var i = 1;
var starColor = "orange";

            while(i < limit) {
                var topPosition = getRndInteger(1, h);
                var leftPosition = getRndInteger(1, w);
                var scale = getRndInteger(1,10) / 10;
                var starRand = getRndInteger(1,3);
                if(starRand == 1) { 
                    starColor = "yellow"; 
                }
                else if(starRand == 2) { 
                    starColor = "lightblue"; 
                }
                else { 
                    starColor = "white"; 
                }
                starNormal(starColor, topPosition, leftPosition, scale);
                i++;
            }

        }

You can see the live example on our server at http://redub.io/stars

It looks something like this:

Javascript generated night sky
Every page load randomizes the star field.

Of course, the amount of stars can be customized from within the putStars function. You can change the getRndInteger(400, 900) function call to use different min and max numbers of stars. The browser has to render and animate that many different DIV elements, so the higher the number the more impact it will have on your system.

You can also easily customize the star colors, size, background gradient, etc. While we used viewport width as a property to use the whole browser window, you could constrain it to a smaller element for a different effect.

For ease of experimentation, check it out on CodePen:

If you have any questions or suggestions, let us know in the comments below. Thanks for reading!

Leave a Reply

Your email address will not be published. Required fields are marked *