css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Here is a true time scaled solar-system, which means that every objects have a time relative to an Earth year.


  1. You and me share one thing in common. PHYSICS :D

  2. Really impressive use of CSS!

  3. Very nice.

    But I miss Pluto. :(

  4. This is beautiful. Nice work!

  5. Brilliant! The asteroids are a nice attention to detail.

  6. This is so awesome, however Dr Tyson wouldn't agree adding pluto

  7. That's great! It'd be amazing if I could use it as my screensaver!

  8. Is there any possibilty to make this as a screen saver with clock? :)

  9. beautiful! amazing!

  10. The real fun is in setting the year-in-seconds variable : 1886976000 (which equals to apprx. one Earth year)

  11. amazing work...just one detail that planet venus moves the other way around.. :D

  12. Coooooooooooool!

  13. Great,amazing!

  14. Pure CSS... pretty impressive but the compiled CSS is pretty huge!

    This would be nice for some kind of landing page.

  15. Uncredible... awasome with css... very very good work!!!

  16. Awesome! I love the asteroid belt!

  17. This is outstanding! I created a bunch of mixins to refactor this to make more sense. @daljeet In my fork, I made Venus rotate the correct direction.


  18. @kowlor really appreciated your update man.... you figured out a way, gr8 work . this is just so effing great

  19. This is fantastic, well done. I can see a lot of love went into this!

  20. my god...this is awesome!

  21. Dear Malik,

    which date the alignment starts from ....can it go reverse as well ?
    can it show the respective date as well ?

  22. Dear malik:

    Very impressive design, truly amazing!! clap clap.. i'm just making a website from the space+movies and i love be able to use this pen in the site. please if you let me use it contact me

  23. @RosLauga You can do it, but please credit this pen ! ;)

  24. Hey dude, this looks awesome! Really like the style. I'm creating my own solar system - hope you don't mind if I link to it here:


  25. I set it to 1 year = 31557600 seconds for a real-time view.

  26. Love what you have done is there any way to pull the live time and add it to the earth then you should get actual positions of all the planets

  27. Really awesome. So elegant and simple that blows your mind!

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.