Rotating Star Effect

Hari

just the rotating background without text would just work fine. i want to save this effect on page for now so i can refer to it later.

can we find something on their github?

https://github.com/gatsbyjs/gatsby

phenomlab

@Hari said in Rotating Star Effect:

can we find something on their github?

Have you checked there already?

crazycells

@Hari it looks very cool, I hope there is an easy way to achieve this background.

Panda

Im on mobile, is there anyone who can paste this into one of those jsfiddle / codepen sites, to make a clickable demo from this very basic version1
I will add some matrix sin/cos to make it rotate round rather than flat in v2

<!DOCTYPE html>
<html>  
  <body>
    <canvas id="canvas" width="600" height="400"></canvas>

    <script>
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var s=[],i
 for(i=0;i<200;i++){
        s[i]={x: Math.random()*600,
              y: Math.random()*400,
              r: Math.random()*3}
 }
      
setInterval(draw,30)

 function draw() {
          for(i=0;i<200;i++){
            ctx.beginPath()
            ctx.fillStyle='white'
            ctx.arc(s[i].x, s[i].y, 5, 0, 6.3)
            ctx.fill()
            ctx.beginPath()
            ctx.fillStyle='black'

            s[i].x+=1
            if(s[i].x>610){s[i].x=-5}
            ctx.arc(s[i].x, s[i].y, s[i].r, 0, 6.3)
            ctx.fill()
        }
    }
        
    </script>
  </body>
</html>