The Solar System has been done in CSS a lot of times — just search Codepen! So why do it again?
Because things get better and simpler — and we can...
For further actions, you may consider blocking this person and/or reporting abuse
Can you give us the link to the final codepen?
It’s the embedded Pen, I didn’t upload a Pen with the AU-version.
Hmmm. It’s just that there is no rotation, around the sun, in the embedded pen.
The planets are only rotating around their centres.
But maybe that’s because I am viewing it via mobile Safari on an iPhone 8+ [iOS 16.7]
Yes,
offset-pathwas added to mobile Safari in iOS 17 😟Well it works on my iPhone here:
developer.mozilla.org/en-US/docs/W...
So, it must be something else?
Not sure?
offset-distance, maybe?It's great that you're providing the defaults in case a browser doesn't understand CSS variables, but I don't that any browser that has that problem would understand cqi. (I could be wrong, but I would think cqi to be to "new')
Supported in all browsers:
caniuse.com/css-container-query-units
As for learning purpose this article is awesome! Thank you! 👏🏼👏🏼👏🏼👏🏼👏🏼
Happy to hear that — thank you!
Awesome animation and nice use of ChatGPT for the orbits!
Thanks!
What is cqi?
It’s a container-query (the “cq”) unit, for the inline (“i”) dimension. If you use
contanter-type: inline-size, then100cqiis the total width of the container.Thank you!
Further reading if you're interested
developer.mozilla.org/en-US/docs/W...
PLUTON!?
It’s not a planet anymore 🤓
no it is :I
Not bad, but Jupiter is too small relative to Saturn, Uranus and Neptune
Well, ditto the sun. And where's the Jupiter spot? And where is the Saturn ring, and, and, and...
I know, see the Update 😉
I know, see the Update 😉
Bravo, that's really cool.
Thanks!
Wow
Thanks!
Brilliant
Thanks!!
This is amazing & very cool.
Thank you!
Here is my effort from a few years ago, using GSAP & CSS:
codepen.io/charles1971/pen/BaNyqYE
It is only the inner planets 🙂
Nice!
2d version == Flatlands! Or… flat spaces?
Though I will say, toy projects/demos like this are one of the times where using id selectors makes sense, imo. Same net result.
Great stuff!
Thanks!
✅
This CSS Solar System demo showcases how simple techniques can create a visually appealing model. Leveraging grid and offset-path is a clever way to achieve smooth animations and responsive design.
Thank you!
Nice project for my learners!
Great!
Mindfully blown, wow. Animators are.....
A way
Cool, thanks!
This is really cool
Thanks!
I especially like how the animation is handled with offset-path, keeping the movement smooth and intuitive. I also created my website using html and css. give it a view and share your suggestions where it needs improvement.