A tiny model solar system in SVG

Project URL: https://tiny-orrery.glitch.me/ :ringer_planet: :earth_africa: :telescope: :dizzy:

I’ve been learning about SVG animations, so I put this together over the weekend!

It’s a tiny model of the solar system (mostly just made to look cute, and help people figure out how to get started with SVG animation), but you can also turn on proportionally accurate orbiting times (and adjust the speed!) to see the rates at which our system’s planets orbit the sun.

It’s a super simple demo of animating SVG through SMIL and CSS, with a little Javascript for the UI. SMIL seems to be in its sunset years, but I wanted to play with it while we could – but if anyone wants to make this more forward (or more backward) compatible, I’d be excited to see what you came up with :slightly_smiling_face: !

4 Likes

I can’t see it at all, maybe it’s not compatible with Brave? Just shows a black background.

1 Like

@God Oh thank you! I’ll look into that!

@God Found it!!! It’s breaking because of flexbox styles – if you size it down to below 1000px vw, it’s visible (but also I’ll fix this so it should be visible at whatever width shortly.) Thank you again!

EDIT: Fixed! Seems like a pretty common flexbox default error: since I didn’t have a width explicitly set on the SVG, it was collapsing down to 0x0. After setting width: 100% on the SVG, it seems to be consistently visible.

Would also be nice to be able to set a custom amount of days per second or even real time. I don’t know why, but seems like a nice feature.