Skip to content

Instantly share code, notes, and snippets.

@idettman

idettman/index.haml

Last active October 29, 2025 04:58
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save idettman/0c2372a344bff94d2a4116b2b2d8a606 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save idettman/0c2372a344bff94d2a4116b2b2d8a606 to your computer and use it in GitHub Desktop.
Download ZIP
Solar System animation - Pure CSS
Raw
index.haml
.description
%h1 Solar System
%hr/
%p
Here is a true time scaled solar-system, which means that every object has a time relative to an Earth year.
You can change the number in second of the
%br/
%code $year-in-second
variable to increase the speed of revolutions. Here 1 year = 30 seconds.
%p.hide
Note the css tricks for the Saturn rings (box-shadow) and reverse animation to compensate the orbit.
%hr/
%p.author
Made with
%i.fa.fa-heart
by Malik Dellidj
%p.links
%a.fa.fa-codepen.icon{:href => "https://codepen.io/kowlor/", :target => "_blank"}
%a.fa.fa-github-alt.icon{:href => "https://github.com/KOWLOR", :target => "_blank"}
%a.fa.fa-twitter.icon{:href => "https://twitter.com/Dathink", :target => "_blank"}
.solar-syst
.sun
.mercury
.venus
.earth
.mars
.jupiter
.saturn
.uranus
.neptune
.pluto
.asteroids-belt
Raw
solar-system-animation-pure-css.markdown

Solar System animation - Pure CSS

Here is a true time scaled solar-system, which means that every objects have a time relative to an Earth year.

A Pen by Malik Dellidj on CodePen.

License.

Raw
style.scss
/*
Malik Dellidj - @Dathink
Solar System orbit animation true time scaled
Revolution of planets in earth days (from Wikipedia)
Mercury : ~87,5 days
Venus : ~224,7 days
Earth : ~365,2563 days
+ Moon : ~27,3216 days (around earth)
Mars : ~687 days (~1,8 year)
Jupiter : ~4 331 days (~12 years)
Saturn : ~10 747 days (~30 years)
Uranus : ~30 589 days (~84 years)
Neptune : ~59 802 days (~165 years)
Pluto : ~90 580 days (~248 years)
*/
$year-in-second : 30; // 1 Earth year = 30 sec
@function revolution($pl-year-in-days){
@return $pl-year-in-days * $year-in-second / 365.2563 + s //Earth reference
}
@function alphaRandom(){
@return random(1000)*.001;
}
@function stars($s, $max-area, $min-area : 0, $star-size : 0){
$stars : #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px 0 #{$star-size}px rgba(255,255,255, alphaRandom());
@for $i from 1 to $s{
$stars: '#{$stars} , #{$min-area + random($max-area)}px #{$min-area + random($max-area)}px 0 #{$star-size}px rgba(255,255,255, #{alphaRandom()})'
}
@return unquote($stars);
}
$sun: 40px;
$mercury-orb : 70px; $mercury-pl: 4px;
$venus-orb : 100px; $venus-pl: 8px;
$earth-orb : 145px; $earth-pl: 6px;
$mars-orb : 190px; $mars-pl: 6px;
$jupiter-orb : 340px; $jupiter-pl: 18px;
$saturn-orb : 440px; $saturn-pl: 12px;
$uranus-orb : 520px; $uranus-pl: 10px;
$neptune-orb : 630px; $neptune-pl: 10px;
$pluto-orb : 780px; $pluto-pl: 3px;
$asteroids-belt-orb : 300px; $asteroids-belt-pl: 210px;
*, *:before, *:after{
padding:0;
margin:0;
box-sizing:border-box;
}
html, body{
height:100%;
width:100%;
}
body{
font:normal 1em/1.45em "Helvetica Neue", Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
color:#fff;
background: radial-gradient(ellipse at bottom, #1C2837 0%, #050608 100%);
background-attachment:fixed;
}
h1{
font-weight:300;
font-size:2.5em;
text-transform:uppercase;
font-family: Lato;
line-height:1.6em;
letter-spacing:.1em;
}
a, a:visited{
text-decoration:none;
color:white;
opacity:.7;
&:hover{
opacity:1
}
&.icon{
margin-right:2px;
padding:3px;
}
}
.description{
padding:30px;
position:absolute;
top:0;
left:0;
width:25%;
z-index:999;
p{
font-size:.9em;
& + p{
margin-top:20px;
}
&.author{
font-size:.7em;
.fa-heart{
color:#860014;
}
}
}
}
hr{
margin:26px 0;
border:0;
border-top:1px solid white;
background:transparent;
width:25%;
opacity:.1;
}
code{
color: #ae94c0;
font-family:Menlo, Monaco, Consolas, 'Courier New', monospace;
font-size:.9em;
}
.solar-syst{
&:after{
content:"";
position:absolute;
height:2px;
width:2px;
top:-2px;
background:white;
box-shadow: stars(500, 1800);
border-radius:100px;
}
margin:0 auto;
width:100%;
height:100%;
position:relative;
div{
border-radius:1000px;
top:50%;
left:50%;
position:absolute;
z-index:999;
&:not(.sun){
border: 1px solid rgba(102, 166, 229, 0.12);
&:before{
left:50%;
border-radius:100px;
content:"";
position:absolute;
}
}
&:not(.asteroids-belt){
&:before{
box-shadow: inset 0 6px 0 -2px rgba(0, 0, 0, 0.25);
}
}
}
}
.sun{
background:radial-gradient(ellipse at center, #ffd000 1%,#f9b700 39%,#f9b700 39%,#e06317 100%);
height:$sun;
width:$sun;
margin-top: -$sun / 2;
margin-left: -$sun / 2;
background-clip: padding-box;
border:0 !important;
background-position: -28px -103px;
background-size: 175%;
box-shadow: 0 0 10px 2px rgba(255, 107, 0, 0.4), 0 0 22px 11px rgba(255, 203, 0, 0.13);
}
.mercury{
height: $mercury-orb;
width: $mercury-orb;
margin-top: -$mercury-orb / 2;
margin-left: -$mercury-orb / 2;
animation: orb revolution(87.5) linear infinite;
&:before{
height:$mercury-pl;
width:$mercury-pl;
background: #9f5e26;
margin-top: -$mercury-pl / 2;
margin-left: -$mercury-pl / 2;
}
}
.venus{
height: $venus-orb;
width: $venus-orb;
margin-top: -$venus-orb / 2;
margin-left: -$venus-orb / 2;
animation: orb revolution(224.7) linear infinite;
&:before{
height:$venus-pl;
width:$venus-pl;
background:#BEB768;
margin-top: -$venus-pl / 2;
margin-left: -$venus-pl / 2;
}
}
.earth{
height: $earth-orb;
width: $earth-orb;
margin-top: -$earth-orb / 2;
margin-left: -$earth-orb / 2;
animation: orb revolution(365.2563) linear infinite;
&:before{
height:$earth-pl;
width:$earth-pl;
background:#11abe9;
margin-top: -$earth-pl / 2;
margin-left: -$earth-pl / 2;
}
&:after{
position: absolute;
content: "";
height: 18px;
width: 18px;
left: 50%;
top: 0px;
margin-left: -9px;
margin-top: -9px;
border-radius: 100px;
box-shadow: 0 -10px 0 -8px grey;
animation: orb revolution(27.3216) linear infinite;
}
}
.mars{
height: $mars-orb;
width: $mars-orb;
margin-top: -$mars-orb / 2;
margin-left: -$mars-orb / 2;
animation: orb revolution(687) linear infinite;
&:before{
height:$mars-pl;
width:$mars-pl;
background:#cf3921;
margin-top: -$mars-pl / 2;
margin-left: -$mars-pl / 2;
}
}
.jupiter{
height: $jupiter-orb;
width: $jupiter-orb;
margin-top: -$jupiter-orb / 2;
margin-left: -$jupiter-orb / 2;
animation: orb revolution(4331) linear infinite;
&:before{
height:$jupiter-pl;
width:$jupiter-pl;
background:#c76e2a;
margin-top: -$jupiter-pl / 2;
margin-left: -$jupiter-pl / 2;
}
}
.saturn{
height: $saturn-orb;
width: $saturn-orb;
margin-top: -$saturn-orb / 2;
margin-left: -$saturn-orb / 2;
animation: orb revolution(10747) linear infinite;
&:before{
height:$saturn-pl;
width:$saturn-pl;
background:#e7c194;
margin-top: -$saturn-pl / 2;
margin-left: -$saturn-pl / 2;
}
&:after{
position: absolute;
content: "";
height: 2.34%;
width: 4.676%;
left: 50%;
top: 0px;
transform: rotateZ(-52deg);
margin-left: -2.3%;
margin-top: -1.2%;
border-radius: 50% 50% 50% 50%;
box-shadow: 0 1px 0 1px #987641, 3px 1px 0 #987641, -3px 1px 0 #987641;
animation: orb revolution(10747) linear infinite;
animation-direction: reverse; // compensate to reverse main orbit animation
transform-origin: 52% 60%;
}
}
.uranus{
height: $uranus-orb;
width: $uranus-orb;
margin-top: -$uranus-orb / 2;
margin-left: -$uranus-orb / 2;
animation: orb revolution(30589) linear infinite;
&:before{
height:$uranus-pl;
width:$uranus-pl;
background:#b5e3e3;
margin-top: -$uranus-pl / 2;
margin-left: -$uranus-pl / 2;
}
}
.neptune{
height: $neptune-orb;
width: $neptune-orb;
margin-top: -$neptune-orb / 2;
margin-left: -$neptune-orb / 2;
animation: orb revolution(59802) linear infinite;
&:before{
height:$neptune-pl;
width:$neptune-pl;
background:#175e9e;
margin-top: -$neptune-pl / 2;
margin-left: -$neptune-pl / 2;
}
}
.asteroids-belt{
opacity:.7;
border-color: transparent !important;
height: $asteroids-belt-orb;
width: $asteroids-belt-orb;
margin-top: -$asteroids-belt-orb / 2;
margin-left: -$asteroids-belt-orb / 2;
animation: orb revolution(2191) linear infinite;
overflow:hidden;
&:before{
top:50%;
height:$asteroids-belt-pl;
width:$asteroids-belt-pl;
margin-left: -$asteroids-belt-pl / 2;
margin-top: -$asteroids-belt-pl / 2;
background: transparent;
border-radius:140px !important;
box-shadow: stars(390, 290, -290/2, -104);
}
}
.pluto{
height: $pluto-orb;
width: $pluto-orb;
margin-top: -$pluto-orb / 2 + -60;
margin-left: -$pluto-orb / 2 + 70;
animation: orb revolution(90580) linear infinite;
&:before{
height:$pluto-pl;
width:$pluto-pl;
background:#fff;
margin-top: -$pluto-pl / 2;
margin-left: -$pluto-pl / 2;
}
}
.hide{
display:none;
}
.links{
margin-top:5px !important;
font-size:1em !important;
}
@keyframes orb{
from {
transform:rotate(0deg)
}
to{
transform:rotate(-360deg)
}
}
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment