Solar system model in CSS

13 May 2010

This is a brain-dump that got too big for the Idea section on the Science hack day wiki so I've moved it over here.

Incidentally, if you like hack days and you like science, you might be interested in finding out more about what's being planned for this inaugural Science Hack Day. Meanwhile, here's the idea:

Given an HTML document containing tables of solar system model data, build a stylesheet (using CSS3 transforms and transitions/animations) that can present it as an animated model of the solar system:

Finally, here's the extremely crappy and ill-conceived 10 minute non-starting point, which I've cunningly entitled Tiny dots going round a small dot (Webkit only of course). No, none of the table's data is used in the animations, all the values are hard-coded in CSS, and it's almost not worth showing. But anyway, if it was all done and dusted we'd have nothing to do on hack day.

See you there?