turbine-in-move

script.js

var M = Math,
    PI = M.PI,
    TWOPI = PI * 2,
    HALFPI = PI / 2,
    canvas = document.createElement( 'canvas'),
    ctx = canvas.getContext( '2d' ),
    width = canvas.width = 1250,
    height = canvas.height = 550,
    cx = width / 2,
    cy = height / 2,
    count = 400,
    sizeBase = 1,
    sizeDiv = 5,
    tick = 0;

ctx.translate( cx, cy );

(function loop() {
  requestAnimationFrame( loop );  
  ctx.clearRect( -width / 2, -height / 2, width, height );
  ctx.fillStyle = '#fff';  
  var angle = tick / 8,
      radius = -50 + M.sin( tick / 15 ) * 20,
      size;
  
  for( var i = 0; i < count; i++ ) {
    angle += PI / 64;
    radius += i / 1;
    size = sizeBase + i / sizeDiv;
    
    ctx.beginPath();
    ctx.arc( M.cos( angle ) * radius, M.sin( angle ) * radius, size, 0, TWOPI, false );
    ctx.fillStyle = 'hsl(200, 70%, 50%)';
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc( M.cos( angle ) * -radius, M.sin( angle ) * -radius, size, 0, TWOPI, false );
    ctx.fillStyle = 'hsl(320, 70%, 50%)';
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc( M.cos( angle + HALFPI ) * radius, M.sin( angle + HALFPI ) * radius, size, 0, TWOPI, false );
    ctx.fillStyle = 'hsl(60, 70%, 50%)';
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc( M.cos( angle + HALFPI ) * -radius, M.sin( angle + HALFPI ) * -radius, size, 0, TWOPI );
    ctx.fillStyle = 'hsl(0, 0%, 100%)';
    ctx.fill();
  }
  
  tick++;
})();

document.body.appendChild( canvas );

style.css

body {
  background: #111;
  overflow: hidden;
}

canvas {
  bottom: 0;
  left: 0;
  margin: auto;
  position: absolute;
  right: 0;
  top: 0;
}

turbine-in-move.markdown

turbine-in-move

A Pen by Rishi Giri on CodePen.

License.