ivarvong · April 9, 2015 17:38
diff --git a/gistfile1.html b/gistfile1.html
 <!doctype html>

 <svg width="400px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <path id="p" d="" fill="black" stroke="none" stroke-width="1"  />
 </svg>

 <script>

 var width  = 400;
 var height = 400; 
 var centerX = width/2;
 var centerY = height/2;
 var radius = width/2;
 var arcWidth = 10;

 var drawSection = function(destRatio) {

    var polarToCartesian = function(centerX, centerY, radius, angleRatio) {
        var angleInRadians = ((angleRatio*2)-0.5) * Math.PI;
        var x = centerX + radius * Math.cos(angleInRadians);
        var y = centerY + radius * Math.sin(angleInRadians);
        return [x, y];
    }
    var arc = function(radius, rotation, large_arc_flag, sweep_flag, x, y) {
        return ["A", radius, radius, rotation, large_arc_flag, sweep_flag, x, y].join(" ")
    }

    var destRatio = destRatio % 1;

    var path = document.getElementById('p');

    var outsidePt = polarToCartesian(centerX, centerX, radius,          destRatio);
    var insidePt  = polarToCartesian(centerX, centerX, radius-arcWidth, destRatio);
        
    var commands = []
    commands.push("M"+centerX+",0");

    commands.push(arc(
        radius, 
        0,                          // rotation, 0 == clockwise
        (destRatio >= 0.5 ? 1 : 0), // large arc flag
        1,                          // sweep flag
        outsidePt[0], outsidePt[1])
    );

    commands.push("L " + insidePt.join(" "));

    commands.push(arc(
        radius-arcWidth, 
        0, 
        (destRatio >= 0.5 ? 1 : 0), // large arc flag 
        0, 
        centerX, arcWidth)
    );

    commands.push("Z");    

    return commands.join("\n");

 }

 var path = document.getElementById('p')
 destRatio = 0;

 setInterval(function() {
    p.setAttribute('d', drawSection(destRatio));
    destRatio += 0.02;
 }, 16)
 </script>
	<!doctype html>

	<svg width="400px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg">
	<path id="p" d="" fill="black" stroke="none" stroke-width="1" />
	</svg>

	<script>

	var width = 400;
	var height = 400;
	var centerX = width/2;
	var centerY = height/2;
	var radius = width/2;
	var arcWidth = 10;

	var drawSection = function(destRatio) {

	var polarToCartesian = function(centerX, centerY, radius, angleRatio) {
	var angleInRadians = ((angleRatio2)-0.5) Math.PI;
	var x = centerX + radius * Math.cos(angleInRadians);
	var y = centerY + radius * Math.sin(angleInRadians);
	return [x, y];
	}
	var arc = function(radius, rotation, large_arc_flag, sweep_flag, x, y) {
	return ["A", radius, radius, rotation, large_arc_flag, sweep_flag, x, y].join(" ")
	}

	var destRatio = destRatio % 1;

	var path = document.getElementById('p');

	var outsidePt = polarToCartesian(centerX, centerX, radius, destRatio);
	var insidePt = polarToCartesian(centerX, centerX, radius-arcWidth, destRatio);

	var commands = []
	commands.push("M"+centerX+",0");

	commands.push(arc(
	radius,
	0, // rotation, 0 == clockwise
	(destRatio >= 0.5 ? 1 : 0), // large arc flag
	1, // sweep flag
	outsidePt[0], outsidePt[1])
	);

	commands.push("L " + insidePt.join(" "));

	commands.push(arc(
	radius-arcWidth,
	0,
	(destRatio >= 0.5 ? 1 : 0), // large arc flag
	0,
	centerX, arcWidth)
	);

	commands.push("Z");

	return commands.join("\n");

	}

	var path = document.getElementById('p')
	destRatio = 0;

	setInterval(function() {
	p.setAttribute('d', drawSection(destRatio));
	destRatio += 0.02;
	}, 16)
	</script>