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?That’s the one.
Indeed, this is not supported, at all, by mobile Safari.
UPDATE:
Well, initially, there was a red cross through the safari icon, but I think this must have been related to non mobile Safari, because when I tried the tests at:
developer.mozilla.org/en-US/docs/W...
They all worked on my iPhone.
So, it isn’t that property.
It works in mobile Safari on my iPhone, iOS 17.5.1 🤷♂️
OK. It must be something to do with my version of iOS at 16.7?
UPDATE:
I have a feeling it maybe something to do with the unit cqi.
Now it says that it came in in iOS 16, but it might have been 16.8 or something.
Whatever is going on, my version doesn’t seem to be understanding the correct location of each planet’s rotational centre, which I guess is the centre of the canvas, where the sun is.
Very strange.
Maybe I will update my iOS to 16.7.10. This is the highest version I can update to on my iPhone 8+.
This is what I see, after I have turned the animation off:
Weird, seems like it understands
offset-path, but notcontent-box, which might have been added later to the specs?!Yes. It might be the
content-boxissue:I have added a value that
path-offsetunderstands, and I get this, which is on the right track, but still not right:codepen.io/charles1971/pen/gONjrJa
The planets are now all gas giants! 😀
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
PLUTON!?
It’s not a planet anymore 🤓
no it is :I
Awesome animation and nice use of ChatGPT for the orbits!
Thanks!
As for learning purpose this article is awesome! Thank you! 👏🏼👏🏼👏🏼👏🏼👏🏼
Happy to hear that — thank you!
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...
Bravo, that's really cool.
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!
Here is my effort from a few years ago, using GSAP & CSS:
codepen.io/charles1971/pen/BaNyqYE
It is only the inner planets 🙂
Nice!
This is amazing & very cool.
Thank you!
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 😉
Brilliant
Thanks!!
Wow
Thanks!
✅
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!
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.