sabha/index.html

## index.html
<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");

function circle(x,y,r){
  ctx.beginPath();
  ctx.arc(x,y,r,0,2*Math.PI);
  ctx.stroke();
}

function line(p1,p2){
  ctx.beginPath();
  ctx.moveTo(p1.x,p1.y);
  ctx.lineTo(p2.x,p2.y);
  ctx.stroke();
}


function color() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
 }

var w = c.width, h = c.height, cx = w/2, cy = h/2;

var r1 = 10, r2 = r1, angle = 0 , angle2 = 0, lv = .5 ;
ctx.strokeStyle = color();

setInterval(function(){

	//ctx.clearRect(0,0,w,h);
    ctx.lineWidth=lv;
	//circle(cx,cy,r1);
    var cx1 = (r2*Math.cos(angle*Math.PI/180)) + cx, cy1 = (r2*Math.sin(angle*Math.PI/180)) + cy ;
    //circle(cx1,cy1,r2);
    angle+=10;

    if(angle === 361) angle = 0;

    //line({x: cx, y:cy}, {x: cx1, y:cy1});
    angle2+=150;
    line({x: cx1, y:cy1}, {
    	x: cx1+(r2*Math.cos(angle2-10*Math.PI/180)),
    	y: cy1+(r2*Math.sin(angle2-10*Math.PI/180))
    });

    line({x: cx1-10, y:cy1-10}, {
    	x: cx1+((r2*40)*Math.cos(angle2-10*Math.PI/180)),
    	y: cy1+((r2*40)*Math.sin(angle2-10*Math.PI/180))
    });

    //lv -= 2;
    //if(lv <= .5) lv = .5;

}, .1)

</script>

</body>
</html>
	<!DOCTYPE html>
	<html>
	<body>

	<canvas id="myCanvas" width="600" height="600" style="border:1px solid #d3d3d3;">
	Your browser does not support the HTML5 canvas tag.</canvas>

	<script>
	var c = document.getElementById("myCanvas");
	var ctx = c.getContext("2d");

	function circle(x,y,r){
	ctx.beginPath();
	ctx.arc(x,y,r,0,2*Math.PI);
	ctx.stroke();
	}

	function line(p1,p2){
	ctx.beginPath();
	ctx.moveTo(p1.x,p1.y);
	ctx.lineTo(p2.x,p2.y);
	ctx.stroke();
	}


	function color() {
	var letters = '0123456789ABCDEF';
	var color = '#';
	for (var i = 0; i < 6; i++) {
	color += letters[Math.floor(Math.random() * 16)];
	}
	return color;
	}

	var w = c.width, h = c.height, cx = w/2, cy = h/2;

	var r1 = 10, r2 = r1, angle = 0 , angle2 = 0, lv = .5 ;
	ctx.strokeStyle = color();

	setInterval(function(){

	//ctx.clearRect(0,0,w,h);
	ctx.lineWidth=lv;
	//circle(cx,cy,r1);
	var cx1 = (r2Math.cos(angleMath.PI/180)) + cx, cy1 = (r2Math.sin(angleMath.PI/180)) + cy ;
	//circle(cx1,cy1,r2);
	angle+=10;

	if(angle === 361) angle = 0;

	//line({x: cx, y:cy}, {x: cx1, y:cy1});
	angle2+=150;
	line({x: cx1, y:cy1}, {
	x: cx1+(r2Math.cos(angle2-10Math.PI/180)),
	y: cy1+(r2Math.sin(angle2-10Math.PI/180))
	});

	line({x: cx1-10, y:cy1-10}, {
	x: cx1+((r240)Math.cos(angle2-10*Math.PI/180)),
	y: cy1+((r240)Math.sin(angle2-10*Math.PI/180))
	});

	//lv -= 2;
	//if(lv <= .5) lv = .5;

	}, .1)

	</script>

	</body>
	</html>