Animate Pattern
Mouseover on above canvas to play animation
<canvas id="canvas" width="220" height="220" style="background-color:#f9f9f9;cursor:pointer;"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var angle=0,pangle=0,centerw=canvas.width/2,centerh=canvas.height/2,animation;
var ctx = canvas.getContext("2d");
function pattern(){
ctx.clearRect(0,0,canvas.width,canvas.height)
ctx.lineWidth=.5;
ctx.save();
ctx.translate(centerw,centerh);
ctx.rotate(angle*Math.PI/180);
ctx.translate(-centerw,-centerh);
while(pangle<360){
ctx.save();
ctx.translate(centerw,centerh);
ctx.rotate(pangle*Math.PI/180);
ctx.translate(-centerw,-centerh)
ctx.beginPath();
ctx.strokeStyle="teal";
ctx.moveTo(centerw-10,centerh);ctx.lineTo(centerw,20);ctx.stroke();
ctx.beginPath();
ctx.strokeStyle="red";
ctx.moveTo(centerw-30,centerh);ctx.lineTo(centerw,20);ctx.stroke();
ctx.restore();
pangle%=360;
pangle+=30;
}
ctx.restore();
angle%=360;
angle+=3;
pangle=0;
animation = requestAnimationFrame(pattern);
}
canvas.addEventListener('mouseover', function() {
animation = requestAnimationFrame(pattern);
});
canvas.addEventListener('mouseout', function() {
cancelAnimationFrame(animation);
});
</script>