When writing a page representing the inner solar system at scale, the following markup and style could be used.
<div id=space>
<div class=celestial-body id=sun data-color=yellow
data-radius=2.3ls>
<div class=celestial-body id=mercury data-color=lightgray
data-radius=0.0081ls data-semimajor-axis=193ls data-orbital-period=6.278ftn></div>
<div class=celestial-body id=venus data-color=#FFD881
data-radius=0.020ls data-semimajor-axis=361ls data-orbital-period=16.05ftn></div>
<div class=celestial-body id=earth data-color=blue
data-radius=0.021ls data-semimajor-axis=499ls data-orbital-period=26.09ftn>
<div class=celestial-body id=moon data-color=#E0E0E0
data-radius=0.0057ls data-semimajor-axis=1.28ls data-orbital-period=2.109ftn></div>
</div>
<div class=celestial-body id=mars data-color=#AD674D
data-radius=0.011ls data-semimajor-axis=760ls data-orbital-period=49.07ftn></div>
</div></div>
<style>
#space {
background:black;
overflow:hidden;
position: relative;
}
.celestial-body {
position:absolute;
left: 50%; top: 50%;
border-radius: 50%;
border-style:solid attr(data-radius length, 0) attr(data-color color, white);
margin: calc(-1 * attr(data-radius length, 0));
transform-origin: attr(data-radius length, 0)
calc(attr(data-radius length, 0) + attr(data-semimajor-axis length, 0));
animation: orbit linear infinite attr(data-orbital-period time, 0);
}
@keyframes orbit {
from { transform: translateY(calc(attr(data-semimajor-axis length, 0) * -1)) rotate(0); }
to { transform: translateY(calc(attr(data-semimajor-axis length, 0) * -1)) rotate(-360deg); }
}
</style>
The following is a disappointingly small sample rendering (not at scale)
of what this would look like.
With the new units and more space than this specification can offer,
this would instead be overwhelmingly awesome.