Pattern
<canvas id="canvas" width="220" height="220"></canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var angle=0,centerw=canvas.width/2,centerh=canvas.height/2;
function pattern(){
var ctx = canvas.getContext("2d");
ctx.lineWidth=.5;
ctx.globalCompositeOperation="lighter";
while(angle<360){
ctx.save();
ctx.translate(centerw,centerh);
ctx.rotate(angle*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-20,centerh);ctx.lineTo(centerw,20);ctx.stroke();
ctx.restore();
angle%=362;
angle+=20;
}
}
pattern();
</script>