<div id="div1"><div id="div2"><canvas id="canvas" height="400" width="800"></canvas></div></div>
<script type="text/javascript" src="..\Javascript\script.js"></script>

body {
  background-color: #fff;
}

#div1 {
  position: absolute;
  bottom: 50%;
  width: 100%;
}

#div2 {
  width: 200px;
  margin: auto;
}

canvas {
  display: block;
  width: 100%;
}

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

ctx.translate(400, 200);

var tau = Math.PI * 2,
  colorCounter = 0,
  red = 255,
  green = 255,
  blue = 0,
  increase = tau / 75,
  counter1 = increase * -16,
  r1 = 21.75,
  y1 = 100,
  counter2 = increase * -8,
  r2 = 27.75,
  y2 = 50,
  counter3 = 0,
  r3 = 30,
  y3 = 0,
  counter4 = increase * 8,
  r4 = 27,
  y4 = -50,
  counter5 = increase * 16,
  r5 = 21,
  y5 = -100,
  counter6 = increase * -44,
  r6 = 9.75,
  y6 = -125,
  counter7 = increase * -36,
  r7 = 9,
  y7 = -75,
  counter8 = increase * -28,
  r8 = 12.75,
  y8 = -25,
  counter9 = increase * -20,
  r9 = 18.75,
  y9 = 25,
  counter10 = increase * -12,
  r10 = 24.75,
  y10 = 75,
  setIntervalTime = 17;

function moveSphere() {
  ctx.clearRect(-400, -200, 800, 800);
  ctx.fillStyle = 'rgb(' + red + ', ' + green + ', ' + blue + ')';

  ctx.beginPath();
  ctx.arc(-300, y1, r1, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(-150, y2, r2, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(0, y3, r3, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(150, y4, r4, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(300, y5, r5, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(-300, y6, r6, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(-150, y7, r7, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(0, y8, r8, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(150, y9, r9, 0, tau);
  ctx.fill();

  ctx.beginPath();
  ctx.arc(300, y10, r10, 0, tau);
  ctx.fill();
}

function spin() {
  moveSphere();

  counter1 += increase;
  counter2 += increase;
  counter3 += increase;
  counter4 += increase;
  counter5 += increase;
  counter6 += increase;
  counter7 += increase;
  counter8 += increase;
  counter9 += increase;
  counter10 += increase;

  y1 = (Math.sin(counter1)) * 100;
  y2 = (Math.sin(counter2)) * 100;
  y3 = (Math.sin(counter3)) * 100;
  y4 = (Math.sin(counter4)) * 100;
  y5 = (Math.sin(counter5)) * 100;
  y6 = (Math.sin(counter6)) * 100;
  y7 = (Math.sin(counter7)) * 100;
  y8 = (Math.sin(counter8)) * 100;
  y9 = (Math.sin(counter9)) * 100;
  y10 = (Math.sin(counter10)) * 100;

  if (y1 > 40.01) {
    r1 -= .75;
  } else if (y1 < -40.01) {
    r1 += .75;
  }

  if (y2 > 40.01) {
    r2 -= .75;
  } else if (y2 < -40.01) {
    r2 += .75;
  }

  if (y3 > 40.01) {
    r3 -= .75;
  } else if (y3 < -40.01) {
    r3 += .75;
  }

  if (y4 > 40.01) {
    r4 -= .75;
  } else if (y4 < -40.01) {
    r4 += .75;
  }

  if (y5 > 40.01) {
    r5 -= .75;
  } else if (y5 < -40.01) {
    r5 += .75;
  }

  if (y6 > 40.01) {
    r6 -= .75;
  } else if (y6 < -40.01) {
    r6 += .75;
  }

  if (y7 > 40.01) {
    r7 -= .75;
  } else if (y7 < -40.01) {
    r7 += .75;
  }

  if (y8 > 40.01) {
    r8 -= .75;
  } else if (y8 < -40.01) {
    r8 += .75;
  }

  if (y9 > 40.01) {
    r9 -= .75;
  } else if (y9 < -40.01) {
    r9 += .75;
  }

  if (y10 > 40.01) {
    r10 -= .75;
  } else if (y10 < -40.01) {
    r10 += .75;
  }
}

function colorShift() {
  if (colorCounter >= 255 && colorCounter <= 305) {
    green += 5;
    colorCounter += 1;
  } else if (colorCounter >= 204 && colorCounter < 255) {
    blue -= 5;
    colorCounter += 1;
  } else if (colorCounter >= 153 && colorCounter < 204) {
    red += 5;
    colorCounter += 1;
  } else if (colorCounter >= 102 && colorCounter < 153) {
    green -= 5;
    colorCounter += 1;
  } else if (colorCounter >= 51 && colorCounter < 102) {
    blue += 5;
    colorCounter += 1;
  } else if (colorCounter < 51 && colorCounter >= 0) {
    red -= 5;
    colorCounter += 1;
  } else if (colorCounter === 306) {
    colorCounter = 0;
  }
}

setInterval(function() {
  spin();
  colorShift();
}, setIntervalTime);