Share your repls and programming experiences

← Back to all posts
🌟 CSS Solar System 🌍
KobeFF (1266)

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!

Comments
hotnewtop
CuriousMonkey (46)

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

FlaminHotValdez (600)

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

SudhanshuMishra (235)

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

GhostKing007 (27)

@CuriousMonkey - lmao ragnarok has started :)

peternielsen112 (41)

@CuriousMonkey AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

peternielsen112 (41)

@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.
ryanjbwang (10)

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.

KobeFF (1266)

@ryanjbwang They're doing a ring-five

like a high-5 get it lol
ia13ru (43)

@CuriousMonkey That is scientifically impossible so do not worry.

CuriousMonkey (46)

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

[deleted]

@CuriousMonkey HARMOIC CONVERGENCE!

tylerAvery1 (0)

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!!!

tylerAvery1 (0)

Can I join you with my family? @FlaminHotValdez

Sebmm (0)

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

FlaminHotValdez (600)

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

12mxu (0)

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

FLyingPenguin (0)

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

FlaminHotValdez (600)

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

EveSnapdragon (3)

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

@CuriousMonkey

aarav170109 (8)

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

CuriousMonkey (46)

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

ComputingSquid (47)

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

aarav170109 (8)

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

noway15 (90)

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.

CuriousMonkey (46)

@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)

aarav170109 (8)

@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)

aarav170109 (8)

@CuriousMonkey Yeah well now I'm the one who gives an 1 hour lecture to others who haven't even started Rick riordan 🤣😅

jeanenchanted (17)

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

OldWizard209 (1286)

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

arivvid27 (27)

WAIT! wheres moon? Hes missing!!!!

CuriousMonkey (46)

@arivvid27 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO NOOOTTTT MOOOOOONNN

BiIINye (59)

the sun has lost its eyyess

SilvermoonCat (434)

nice :> did u draw those?

KobeFF (1266)

@SilvermoonCat Nope lol i suck at drawing

SilvermoonCat (434)

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

KobeFF (1266)

@SilvermoonCat do u draw on paper or computer?

[deleted]

The great conjunction of Jupiter and Saturn is here!

Wilke000 (626)

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

Wilke000 (626)

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

FlaminHotValdez (600)

before the cookie says it:

POG

BobTheTomatoPie (3368)

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

NinjaCoderz (22)

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

KobeFF (1266)

@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" />
SwaritChoudhari (85)

AMONG US GUY CYAN IN CORNER! SMART!

mesquite2234 (279)


Why was this in images?

SwaritChoudhari (85)

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

[deleted]

when saturn goes off the page...

[deleted]

very smooooth

ANIRANJAN (5)

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

[deleted]

Super great conjunction of Jupiter and Saturn, @ANIRANJAN

ANIRANJAN (5)

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

[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!

[deleted]

did anyone notice the among us character?

BananaJellyfish (208)

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

BananaJellyfish (208)

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

noway15 (90)

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 (╯_╰)

RhinoRunner (861)

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

(◞‸◟)

KobeFF (1266)

@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.

IntellectualGuy (771)

@KobeFF Yeah i didn't see that before

applicationUFO (5)

cool! why is neptune so slow?

KobeFF (1266)

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

FrancisPan (26)

nice! its cute too