Moon&Star

index.pug

.space
.moon
 .hole
 .hole
 .hole
 .hole
.moon2
.blue
.yellow

.trace1
.trace2

moon-star.markdown

Moon&Star

A Pen by ivan on CodePen.

License.

script.js

var time=0;
var stars=[
  {
    el: ".blue",
    r: 280,
    speed: 0.6,
    width: 50
  },
   {
    el: ".yellow",
    r: 340,
    speed: 0.2,
    width: 70
  }
];

function update(){
  stars.forEach(function(star){        
  var r = star.r ; 
  var angle = star.speed*time*2;
  var x = r*Math.cos((angle/360)*(Math.PI*2)) -25 ;
  var y = r*Math.sin((angle/360)*(Math.PI*2)) -25 ;
  $(star.el).css("transform","translate("+x+"px,"+y+"px)")
  
  time+=1; 
                console.log(time);  
                });
  
}
setInterval(update,30);

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

style.sass

$color_space: #33425B

@mixin size($w,$h)
  width: $w
  height: $h
@mixin pos($l,$t)
  left: $l
  top: $t
  
@mixin ab_center
  position: absolute
  left: 50%
  top: 50%
  transform: translate(-50%,-50%)

@mixin circle($r)
  +size($r,$r)
  border-radius: 50%  



html,body
  height: 100%
  width: 100%
  padding: 0
  margin: 0
  background-color: $color_space
.hole
  +circle(90px)
  background-color: #ccc
  box-shadow: 10px 10px darken(#ccc,10) inset
  +ab_center
  &:nth-child(1)
    +circle(100px)
    +pos(120px,130px)
  &:nth-child(2)
    +circle(50px)
    +pos(170px,290px)
  &:nth-child(3)
    +circle(80px)
    +pos(260px,260px)
  &:nth-child(4)
    +circle(40px)
    +pos(280px,150px)
  
   
.space
  width: 700px
  height: 700px
  border-radius: 50%
  background-color: lighten( $color_space,10)
  filter : blur(50px)
  position: absolute
  left: 50%
  right: 50%
  transform: translate(-50%,0)
  
.moon
  background-color: #fff
  +circle(400px)
  +ab_center
  box-shadow: -40px -40px darken(#fff,10) inset,0px 0px 40px rgba(black,0.3)
  
.blue
  background-color: #F98903
  +circle(50px)
  +ab_center
  box-shadow: -10px -10px darken(#F98903,10) inset
  
.yellow
  background-color: #C62727
  +circle(70px)  
  +ab_center
  box-shadow: -10px -10px darken(#C62727,10) inset
  
.trace1
  +circle(680px)
  border: dashed 1px white
  +ab_center
  opacity: 0.6
  
.trace2
  +circle(568px)
  border: dashed 1px white
  +ab_center
  opacity: 0.6