Sputnik Day 30



Okay, so I’ve been planning to do this project for a while now. I love space and now that I sorta am kinda familiar with CSS animation I thought okay I might be able to do this now.

Today’s project is mostly a design process. I love the NASA posters so, I decided to do one but giving tribute to the Russian space program. Especially Sputnik the first satellite in space. Okay, I can go on and on about space, so let me just jump straight to the project.

The color pallets for this project is

I started with the moon. [which took a freakin while] and I still don’t like it, but I had to move on.

So then I moved on to the stars. I started with a single one, to try the style and animation

Now that I like how it looks, I wanted to generate many stars using the DOM and well it turned out well.

Now, I have to also work with their sizes because let’s be real not all stars are the same size.



Okay, now it’s more believable. Now let’s make it look a bit like the NASA posters so

Yay! I’m happy with it thus far. Now we move on to the difficult part which is the actual satellite. I’ll show you the process



Whew. That took some time. Now this is what I have thus far

and then comes the animation part. Ummm…. it was kinda hard. I tried so hard to make it believable but oh well. [starting the animation]

This is my final product

I’m still proud of what I did. I started this with no idea how to make it or how it would turn out but yay. It was fun though. You can check it out here on my site. Also, I made it up in this post where it’s detailed [given the lack of details in the last couple of posts].

I guess that is it for today, till then, happy coding 🙂

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

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