var c = document.createElement( 'canvas' ), cx = c.getContext( '2d' ), angle = 0; document.body.appendChild( c ); c.width = c.height = 400; cx.lineWidth = 3; cx.translate( 200, 200 ); for ( angle = 0; angle <= 360; angle += 18 ) { cx.save(); cx.rotate( angle * Math.PI/180 ); cx.moveTo( 0, 0 ); cx.lineTo( -30, -200 ); cx.quadraticCurveTo( 0, -170, 30, -200 ) cx.lineTo( 0, 0 ); cx.moveTo( -25, -160 ); cx.quadraticCurveTo( 0, -140, 25, -160 ) cx.moveTo( -18, -120 ); cx.quadraticCurveTo( 0, -100, 18, -120 ) cx.moveTo( -12, -80 ); cx.quadraticCurveTo( 0, -60, 12, -80 ) cx.moveTo( -6, -40 ); cx.quadraticCurveTo( 0, -20, 6, -40 ) cx.restore(); } cx.stroke();