Skip to content
← Back to Community
🌟 CSS Solar System 🌍
Profile icon
KobeFF

The Solar System

By KobeFF

Have you ever wanted to see the solar system IN MOTION!?

Well, I just learned how to do CSS animations from W3Schools. You can create neat little animations without javascript or flash (Which doesn't matter because its going away soon οΌˆβ—žβ€Έβ—ŸοΌ‰)!

πŸͺ¦R.I.P Adobe Flash

Anyways, yaaaaayy! A recreation of the solar system. It's extremely accurate in speed but...

Size?

No.

The size in this cartoon solar system is WAY off. Like way, WAY off. Practically all the planets are the same size. Fun fact: In real life, the sun is nearly a million times larger than the earth. In my solar system, they're nearly the same size (not like I could make the sun a million times larger than the earth and have it still fit in your itty-bitty computer screen. Sheesh.

But speedwise, yessir! Its nearly the same exact correlation between the planets in real life. Take Mercury for example. It takes mercury 88 days to circle the sun, also called a year smh so in my simulation, it takes Mercury 0.88 seconds to circle my little cartoon sun.

Ngl, It really takes the difference between real-life planets' speed into action. In my animation, the fastest planet (Mercury), takes less than a second to do a full lap around the sun. Neptune, well, takes over 10 minutes to do just one lap.

Neptune u little slowpoke


Features

  • It looks like a solar system!
  • It acts like a solar system!
  • The speed is like a solar system!
  • It has planets, like a solar system!
  • It has a space background, just like a solar system!
  • The background has stars, just like a solar system!
  • It's seems like a solar system!
Lmfao.

Updates

  • Added Favicon!

Note: The CSS animation works only on Chrome, Firefox 16+, IE 10+, ad Safari 5. If it doesn't work, then, well, sorry! It's not exactly something I can fix...


Well, without further ado, I present you a CSS solar system!

Voters
Profile icon
RandyGistinger
Profile icon
elizurfk
Profile icon
BryanHuie
Profile icon
maxina
Profile icon
SelenaYang1
Profile icon
FrancisPan
Profile icon
KadenGarner
Profile icon
Emphices
Profile icon
JWZ6
Profile icon
Mack5
Comments
hotnewtop
Profile icon
CuriousMonkey

Screen Shot 2021-02-03 at 8.20.42 PM

THE TIME FOR THE END OF THE WORLD THE PLANETS HAVE ALIGNED

Profile icon
FlaminHotValdez

@CuriousMonkey Oh crap time to retreat into my emergency apocalypse bunker.

Profile icon
SleepySid

@CuriousMonkey noo I am gonna first eat some pizzas after that I dont care if the world ends or not

Profile icon
GhostKing007

@CuriousMonkey - lmao ragnarok has started :)

Profile icon
KobeFF
Profile icon
peternielsen112

@CuriousMonkey AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

Profile icon
peternielsen112

@CuriousMonkey "Fun isn't exactly what one considers when bringing balance to the universe, but this... does put a smile on my face."

I'm sorry, little one.
Profile icon
ryanjbwang

Hmm... Nobody told me that Saturn's rings and Uranus's rings would be touching! Even Super Saturn (J1407b) would be lots of AUs (Astronomical Unit) away.

Profile icon
KobeFF

@ryanjbwang They're doing a ring-five

like a high-5 get it lol
Profile icon
Pizzaz4me

no pls don't eat me @SudhanshuMishra

Profile icon
SleepySid

@Pizzaz4me haha lol

Profile icon
ia13ru

@CuriousMonkey That is scientifically impossible so do not worry.

Profile icon
CuriousMonkey

@KobeFF SOOOO FOONNYY HIGH-5 HAHHAHAHAHHahAHahhah hahahah ha... this got awkward

Profile icon
[deleted]

@CuriousMonkey HARMOIC CONVERGENCE!

Profile icon
ryanjbwang
Profile icon
tylerAvery1

OH NO! AND I AM SUPPOSED TO BE WORKING ON MY OWN PROJECT! IS A METEOR GOING TO GO THROUGH OUR SOLAR SYSTEM?? I NEED TO TAKE COVER!!!

Profile icon
tylerAvery1

Can I join you with my family? @FlaminHotValdez

Profile icon
Sebmm

@CuriousMonkey Time to travel to another planet like proxima centauri b

Profile icon
FlaminHotValdez

@tylerAvery1 Sure! We can sustain ~10 more people, 20 more if we ration our food.

Profile icon
12mxu

@CuriousMonkey OH NO!!!!!!
This is an emergency with the Status Code DAPLANETSHAVEALIGNED!!!!!
Countdown to evac: 5, 4, 3, 2, ..... KBOOM!!!

Profile icon
FLyingPenguin

@CuriousMonkey ok attach rockets to some of the planets and then they're not going to be aligned

Profile icon
randomcodingdude

@FlaminHotValdez you too read percy jackson?

Profile icon
FlaminHotValdez

@aarav170109 yes. also like 5 other book series but...whatever

Profile icon
EveSnapdragon

Oh! that's how they sent Voyager and Voyager II into space!

@CuriousMonkey

Profile icon
randomcodingdude

@FlaminHotValdez Yeah same here I've read every single book of rick riordan related to mytholigies like magnus chase, kane chronicles etc.

Profile icon
ComputingSquid

same here lol @aarav170109

Profile icon
CuriousMonkey

@aarav170109 @FlaminHotValdez @ComputingSquid me 2 =D Im on trials of apollo book 2 (library books take so long to come during these covid times)

Profile icon
ComputingSquid

ikr just use overdrive lol
you can get them faster
i read the fifth like a month ago
lololol
:p
i wont spoil anything ok
im nice that way lol
@CuriousMonkey

Profile icon
FlaminHotValdez

@CuriousMonkey it goes downhill

Profile icon
randomcodingdude

@CuriousMonkey Oh yeah I liked that one, I've finished trials of Apollo like last month. It's a great series

Profile icon
noway15

The series itself is pretty good @CuriousMonkey although there are a few parts that are a bit strange but whatever the books are still good even with them.

Profile icon
CuriousMonkey

@noway15 @ComputingSquid @FlaminHotValdez @aarav170109 well tbh my friend spoiled like the whole plot and everything ik who dies and bla bla (for example when i was on first book of original series he told me percy looses memory im like: whos percy)

Profile icon
noway15

o o f l o l @CuriousMonkey

Profile icon
randomcodingdude
Profile icon
randomcodingdude

@CuriousMonkey @ComputingSquid @noway15 @FlaminHotValdez
I have a friend who read percy jackson and other series WAY before me so,
He: Gives me a 1 hour lecture till the end of heroes of olympus
me: (at first book) Bruh.

(Based on a true incident)

Profile icon
CuriousMonkey
Profile icon
randomcodingdude

@CuriousMonkey Yeah well now I'm the one who gives an 1 hour lecture to others who haven't even started Rick riordan πŸ€£πŸ˜…

Profile icon
writeblankspace

@ia13ru I think it is? I mean, in maths at some point in time, everything gets a common multiple

Profile icon
OldWizard209

Mr.Merury looks like his head is spinnin' like mad around the chubby and cute sun.

Profile icon
KobeFF
Profile icon
SleepySid

@OldWizard209 haha good one

Profile icon
[deleted]

I like ur attitude keep it up [email protected]

Profile icon
IronStarkMan
Profile icon
Bookie0
Profile icon
KobeFF

@Bookie0 Lol thanks!

Profile icon
Bookie0

@KobeFF np! ;)

Profile icon
SilvermoonCat

nice :> did u draw those?

Profile icon
KobeFF

@SilvermoonCat Nope lol i suck at drawing

Profile icon
SilvermoonCat

@KobeFF oh :( anytime you need art ask me lol

Profile icon
KobeFF

@SilvermoonCat do u draw on paper or computer?

Profile icon
SilvermoonCat

@KobeFF both i luv art

Profile icon
KobeFF
Profile icon
arivvid27

WAIT! wheres moon? Hes missing!!!!

Screenshot 2021-02-08 100641

Profile icon
CuriousMonkey

@arivvid27 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO NOOOTTTT MOOOOOONNN

Screen Shot 2021-02-13 at 2.52.26 PM

Profile icon
BillNyeScience

Screen Shot 2021-02-05 at 09.11.37

the sun has lost its eyyess

Profile icon
KobeFF

@BiIINye It just blinks lol

Profile icon
ShAdOwZxd

@BiIINye ooooooof

Profile icon
Skittleman

uhh if this happens fork the thing
Screenshot 2022-02-02 5.00.28 PM

Profile icon
EveSnapdragon
Profile icon
[deleted]

The great conjunction of Jupiter and Saturn is here!

image

Profile icon
Wilke000

I have to say:
** THAT IS A CUTE SUN!!! **

Profile icon
FlaminHotValdez

@Wilke000 you're alive

Profile icon
Wilke000

I am? @FlaminHotValdez
Wait! I AM!!!!!!!!!!!!
YAY!!
LOL

Profile icon
FlaminHotValdez

before the cookie says it:

POG

Profile icon
glitchish

@KobeFF kewl!

Profile icon
KobeFF
Profile icon
glitchish
Profile icon
lilykhan

so cute :0

Profile icon
Breeze0505

DOPE

Profile icon
KobeFF
Profile icon
BobTheTomatoPie

what would someone call this besides modern art, this is beautiful

Profile icon
KobeFF

@BobTheTomatoPie lol the beauty of colored balls moving in circles...

Profile icon
SleepySid
Profile icon
BobTheTomatoPie
Profile icon
SleepySid
Profile icon
AlianaYee
Profile icon
NinjaCoderz

How do i add the logo on the tab like on repl it has the logo on the tab and in this project you had a star on the tab

Profile icon
KobeFF

@NinjaCoderz It's called a favicon.
https://www.lcn.com/blog/beginners-guide-favicons/

If you just want the code:

<link rel="icon" href="myImage.png" />
Profile icon
SwaritChoudhari

AMONG US GUY CYAN IN CORNER! SMART!

Profile icon
mesquite2234

image
Why was this in images?

Profile icon
SwaritChoudhari

@mesquite2234 becuz there was among us guy in corner really small

Profile icon
HummingCosmo
Profile icon
[deleted]

when saturn goes off the page...

Screenshot 2021-02-07 133013

Profile icon
[deleted]

very smooooth

Profile icon
mastersage722008

actually i saw mars crashing into jupiter.
but did anyone notice the rings of saturn went into jupiter
@KobeFF

a

Profile icon
[deleted]

Super great conjunction of Jupiter and Saturn, @ANIRANJAN

Profile icon
mastersage722008

@Hacky k
lol

Profile icon
mastersage722008

@Hacky it looked like the rings of saturn were crashing
lol

Profile icon
[deleted]

fun fact: The ring of saturn is made up of rocks,
fu fact: saturn is so light that it can float in water(If there is that large ocean)
fun fact: ur reading a fun fact!

Profile icon
[deleted]

did anyone notice the among us character?

image

Profile icon
noway15

I saw it @Hacky

Profile icon
BananaJellyfish

well... a few planets are dragging a few stars with them, even though they're light years away, but its really, really cool! you should make it so you can click on planets and they explode

Profile icon
BananaJellyfish

@BananaJellyfish oh wait... or are they stationery moons?

Profile icon
noway15

RIP Adobe Flash, let's all take a moment to spam "RIP" in the comment section, in order to give it a final goodbye before it passes on (β•―_β•°)

Profile icon
ComputingSquid

rip lol @noway15

Profile icon
RhinoRunner

Um is it just me or does this look like a butt

οΌˆβ—žβ€Έβ—ŸοΌ‰

Profile icon
FlaminHotValdez
Profile icon
SleepySid

@RhinoRunner delete that before any mod finds it

Profile icon
IntellectualGuy

Maybe add moons.

Profile icon
KobeFF

@IntellectualGuy Neptune and Uranus are already included! Uranus is the one after saturn (it has rings too) and Neptune is after that. I'll add the moon tho, ty.

Profile icon
IntellectualGuy

@KobeFF Yeah i didn't see that before

Profile icon
KobeFF
Profile icon
applicationUFO

cool! why is neptune so slow?

Profile icon
KobeFF

@applicationUFO because its the slowest planet in our solar system lol

Profile icon
johnnyfrancis

LOL Earth crashed into mars!