18

<canvas id="c" width="64" height="64"></canvas><script type="text/javascript">var q=document.getElementById('c').getContext('2d');function a(i,z){q.beginPath();q.arc(0,-21,z,0,Math.PI,true);q.arc(0,-11,z,0,Math.PI,false);q.closePath();if(z==2){q.fillStyle="rgb("+(255-(i*10))+","+(255-(i*10))+","+(255-(i*10))+")";}else{q.fillStyle="rgb("+(150+(z*20))+","+(150+(z*20))+","+(150+(z*20))+")";}q.fill();q.fillRect(-z,-21,z*2,10);}function c(z){for(var i=0;i<12;i++){a(i,z);q.rotate(-Math.PI*(1/6));}}function b(){q.clearRect(-48,-48,142,142);c(5);c(4);c(3);c(2);q.rotate(Math.PI*(1/6));}q.translate(30,30);setInterval(b,50);</script>