Share your repls and programming experiences

← Back to all posts
🌟 CSS Solar System 🌍
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
elizurfk
BryanHuie
maxina
SelenaYang1
FrancisPan
KadenGarner
Emphices
JWZ6
Mack5
tiagomiranda123
Comments
hotnewtop
CuriousMonkey

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

FlaminHotValdez

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

SudhanshuMishra

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

GhostKing007

@CuriousMonkey - lmao ragnarok has started :)

KobeFF
peternielsen112

@CuriousMonkey AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA

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

KobeFF

@ryanjbwang They're doing a ring-five

like a high-5 get it lol
Pizzaz4me

no pls don't eat me @SudhanshuMishra

SudhanshuMishra

@Pizzaz4me haha lol

ia13ru

@CuriousMonkey That is scientifically impossible so do not worry.

CuriousMonkey

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

[deleted]

@CuriousMonkey HARMOIC CONVERGENCE!

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

tylerAvery1

Can I join you with my family? @FlaminHotValdez

Sebmm

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

FlaminHotValdez

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

12mxu

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

FLyingPenguin

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

aarav170109

@FlaminHotValdez you too read percy jackson?

FlaminHotValdez

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

EveSnapdragon

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

@CuriousMonkey

aarav170109

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

ComputingSquid

same here lol @aarav170109

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)

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

FlaminHotValdez

@CuriousMonkey it goes downhill

aarav170109

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

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.

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)

noway15

o o f l o l @CuriousMonkey

aarav170109
aarav170109

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

CuriousMonkey

sad life @aarav170109

aarav170109

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

jeanenchanted

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

OldWizard209

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

KobeFF
SudhanshuMishra

@OldWizard209 haha good one

xmasboy

I like ur attitude keep it up [email protected]

IronStarkMan

Lol XD XD @OldWizard209

Bookie0

Cute sun!!

KobeFF

@Bookie0 Lol thanks!

Bookie0

@KobeFF np! ;)

SilvermoonCat

nice :> did u draw those?

KobeFF

@SilvermoonCat Nope lol i suck at drawing

SilvermoonCat

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

KobeFF

@SilvermoonCat do u draw on paper or computer?

SilvermoonCat

@KobeFF both i luv art

KobeFF
arivvid27

WAIT! wheres moon? Hes missing!!!!

CuriousMonkey

@arivvid27 NOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO NOOOTTTT MOOOOOONNN

BillNyeScience

the sun has lost its eyyess

KobeFF

@BiIINye It just blinks lol

ShAdOwZxd

@BiIINye ooooooof

EveSnapdragon

Look!

[deleted]

The great conjunction of Jupiter and Saturn is here!

Wilke000

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

FlaminHotValdez

@Wilke000 you're alive

Wilke000

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

FlaminHotValdez

before the cookie says it:

POG

iocoder

@KobeFF kewl!

KobeFF
iocoder
lilykhan

so cute :0

Breeze0505

DOPE

KobeFF
BobTheTomatoPie

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

KobeFF

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

SudhanshuMishra
BobTheTomatoPie
SudhanshuMishra
AlianaYee


high five

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

KobeFF

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

If you just want the code:

SwaritChoudhari

AMONG US GUY CYAN IN CORNER! SMART!

mesquite2234


Why was this in images?

SwaritChoudhari

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

HummingCosmo

[deleted]

when saturn goes off the page...

[deleted]

very smooooth

ANIRANJAN

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

@Hacky k
lol

ANIRANJAN

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

noway15

I saw it @Hacky

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

BananaJellyfish

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

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

ComputingSquid

rip lol @noway15

RhinoRunner

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

(◞‸◟)

FlaminHotValdez
SudhanshuMishra

@RhinoRunner delete that before any mod finds it

IntellectualGuy

Maybe add moons.

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.

IntellectualGuy

@KobeFF Yeah i didn't see that before

KobeFF
applicationUFO

cool! why is neptune so slow?

KobeFF

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

johnnyfrancis

LOL Earth crashed into mars!

FrancisPan

My imagination: