kirantemojo/index.html

## index.html
<!DOCTYPE html>
<html>
<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
		fill:none;
		stroke:#000;
	}
	#xaxis text, #yaxis text {
		font-size: 12px;
	}
	#xaxis .domain{
		display:none;
	}
	</style>
</head>
<body>
        <button>Click Me</button>
	<div id="wrapper">

	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
		var svg = d3.select('#wrapper')
                        .append('svg')
                        .attr({'width':700,'height':500})
                        .append('g')
                        .attr('transform','translate(0,-30)scale(0.9)');

        function move(p) {
          return [" M", p.x, p.y].join(" ");
        }

        function lineSeg(p) {
          return [" L", p.x, p.y].join(" ");
        }

        function arcSeg(p) {
          //A r r rotation large-arc sweep x y
          return [" A", p.r, p.r, p.rot, p.c, p.d, p.x, p.y].join(" ");
        }

        function bezSeg(p) {
          //x1,y1 and x2,y2 are control points
          return [" C", p.x1, p.y1, p.x2, p.y2, p.x, p.y].join(" ");
        }
        function smoothSeg(p) {
          //x2,y2 is the control point
          return [" S", p.x2, p.y2, p.x, p.y].join(" ");
        }

        function qbezSeg(p) {
          //x1 y1 x y
          return [" Q", p.x1, p.y1, p.x, p.y].join(" ");
        }
        function qsmoothSeg(p) {
          //x y
          return [" T", p.x, p.y].join(" ");
        }


        var pathD = move({x: 224, y: 594})
        + lineSeg({x: 114, y: 279})
        + lineSeg({x: 166, y: 253})
        + lineSeg({x: 210, y: 359})
        + lineSeg({x: 222, y: 52})
        + lineSeg({x: 276, y: 47})
        + lineSeg({x: 276, y: 315})
        + lineSeg({x: 323, y: 42})
        + lineSeg({x: 377, y: 49})
        + lineSeg({x: 330, y: 307})
        + lineSeg({x: 425, y: 52})
        + lineSeg({x: 472, y: 69})
        + lineSeg({x: 397, y: 318})
        + lineSeg({x: 506, y: 136})
        + lineSeg({x: 532, y: 172})
        + lineSeg({x: 391, y: 497})
        + lineSeg({x: 391, y: 594})
        + 'Z';

            console.log(pathD)

        var path = svg.append("path")
          .attr("d", pathD)
          .style({
            fill: "none",
            stroke: "#000000",
            "stroke-width": 12,
            "stroke-linecap": "round",
            "stroke-linejoin": "round"
          });

        var len = path.node().getTotalLength();
        var offset = 0;

        path.attr({
          "stroke-dasharray": len + " " + len,
          "stroke-dashoffset": offset
        });

        d3.select('button').on('click',function(){
            path.transition()
            .duration(5044)
            .ease("linear")
            .attrTween('stroke-dashoffset',function(d,i){
              return function(t){
              return len*(1-t);
              }
            })
        });
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>Dsnap - Charts</title>
	<style>
	#xaxis .domain {
	fill:none;
	stroke:#000;
	}
	#xaxis text, #yaxis text {
	font-size: 12px;
	}
	#xaxis .domain{
	display:none;
	}
	</style>
	</head>
	<body>
	<button>Click Me</button>
	<div id="wrapper">

	</div>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var svg = d3.select('#wrapper')
	.append('svg')
	.attr({'width':700,'height':500})
	.append('g')
	.attr('transform','translate(0,-30)scale(0.9)');

	function move(p) {
	return [" M", p.x, p.y].join(" ");
	}

	function lineSeg(p) {
	return [" L", p.x, p.y].join(" ");
	}

	function arcSeg(p) {
	//A r r rotation large-arc sweep x y
	return [" A", p.r, p.r, p.rot, p.c, p.d, p.x, p.y].join(" ");
	}

	function bezSeg(p) {
	//x1,y1 and x2,y2 are control points
	return [" C", p.x1, p.y1, p.x2, p.y2, p.x, p.y].join(" ");
	}
	function smoothSeg(p) {
	//x2,y2 is the control point
	return [" S", p.x2, p.y2, p.x, p.y].join(" ");
	}

	function qbezSeg(p) {
	//x1 y1 x y
	return [" Q", p.x1, p.y1, p.x, p.y].join(" ");
	}
	function qsmoothSeg(p) {
	//x y
	return [" T", p.x, p.y].join(" ");
	}


	var pathD = move({x: 224, y: 594})
	+ lineSeg({x: 114, y: 279})
	+ lineSeg({x: 166, y: 253})
	+ lineSeg({x: 210, y: 359})
	+ lineSeg({x: 222, y: 52})
	+ lineSeg({x: 276, y: 47})
	+ lineSeg({x: 276, y: 315})
	+ lineSeg({x: 323, y: 42})
	+ lineSeg({x: 377, y: 49})
	+ lineSeg({x: 330, y: 307})
	+ lineSeg({x: 425, y: 52})
	+ lineSeg({x: 472, y: 69})
	+ lineSeg({x: 397, y: 318})
	+ lineSeg({x: 506, y: 136})
	+ lineSeg({x: 532, y: 172})
	+ lineSeg({x: 391, y: 497})
	+ lineSeg({x: 391, y: 594})
	+ 'Z';

	console.log(pathD)

	var path = svg.append("path")
	.attr("d", pathD)
	.style({
	fill: "none",
	stroke: "#000000",
	"stroke-width": 12,
	"stroke-linecap": "round",
	"stroke-linejoin": "round"
	});

	var len = path.node().getTotalLength();
	var offset = 0;

	path.attr({
	"stroke-dasharray": len + " " + len,
	"stroke-dashoffset": offset
	});

	d3.select('button').on('click',function(){
	path.transition()
	.duration(5044)
	.ease("linear")
	.attrTween('stroke-dashoffset',function(d,i){
	return function(t){
	return len*(1-t);
	}
	})
	});
	</script>
	</body>
	</html>