var animcanvas = document.createElement( 'canvas' ), animctx = animcanvas.getContext( '2d' ), container = document.querySelector('section'), height = width = 300, halfwidth = width / 2, halfheight = height / 2, offset = i = x = 0, radius = height / 2 - 10; animcanvas.width = width; animcanvas.height = height; container.appendChild(animcanvas); function loop(){ animctx.clearRect( 0, 0, width, height ); animctx.save(); animctx.translate( halfwidth, halfheight ); offset += 0.06; animctx.rotate( offset ); while( radius > 10 ) { animctx.fillStyle = i % 2 === 0 ? '#000' : '#fff'; radius -= 6; x = Math.sin( i / 2 ) * 10; animctx.beginPath(); animctx.arc( x, 0, radius, 0, Math.PI * 2 ,true ); animctx.closePath(); animctx.fill(); i++; } radius = height / 2 - 10; i=0; animctx.restore(); requestAnimationFrame( loop, 60 ); } /** * Provides requestAnimationFrame in a cross browser way. * http://paulirish.com/2011/requestanimationframe-for-smart-animating/ */ if ( !window.requestAnimationFrame ) { window.requestAnimationFrame = ( function() { return window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback, fps ) { window.setTimeout( callback, 1000 / fps ); }; } )(); } loop();
<section></section>