magjac · August 3, 2017 22:55
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

  path {
  fill: none;
  stroke: #000;
  stroke-width: 1.5px;
  }

 </style>
 <body>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script>

    var width = 960,
        height = 500;

    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height);

    var d0 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100",
        d1 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100c100,0 0,100 100,100";

    svg.append("path")
        .attr("transform", "translate(180,150)scale(2,2)")
        .attr("d", d0)
        .call(transition, d0, d1);
    
    function transition(path, d0, d1) {
        console.time('Init -> start delay');
        path.transition()
            .delay(2000)
            .duration(2000)
            .attrTween("d", pathTween(path.node(), d1, 0.5))
            .on("start", function() {
                console.timeEnd('Init -> start delay');
                console.time('Start -> end delay');
            })
            .on("end", function() {
                console.timeEnd('Start -> end delay');
                path.call(transition, d1, d0);
            });
    }

    function pathTween(node, d1, precision) {
        console.time('Tween init');
        var path0 = node,
            path1 = path0.cloneNode(),
            n0 = path0.getTotalLength(),
            n1 = (path1.setAttribute("d", d1), path1).getTotalLength();

        // Uniform sampling of distance based on specified precision.
        var distances = [0], i = 0, dt = precision / Math.max(n0, n1);
        while ((i += dt) < 1) distances.push(i);
        distances.push(1);

        // Compute point-interpolators at each distance.
        var points = distances.map(function(t) {
            var p0 = path0.getPointAtLength(t * n0),
                p1 = path1.getPointAtLength(t * n1);
            return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
        });
        console.timeEnd('Tween init');

        return function() {
            return function(t) {
                return t < 1 ? "M" + points.map(function(p) { return p(t); }).join("L") : d1;
            };
        };
    }

 </script>
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	path {
	fill: none;
	stroke: #000;
	stroke-width: 1.5px;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>

	var width = 960,
	height = 500;

	var svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	var d0 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100",
	d1 = "M0,0c100,0 0,100 100,100c100,0 0,-100 100,-100c100,0 0,100 100,100";

	svg.append("path")
	.attr("transform", "translate(180,150)scale(2,2)")
	.attr("d", d0)
	.call(transition, d0, d1);

	function transition(path, d0, d1) {
	console.time('Init -> start delay');
	path.transition()
	.delay(2000)
	.duration(2000)
	.attrTween("d", pathTween(path.node(), d1, 0.5))
	.on("start", function() {
	console.timeEnd('Init -> start delay');
	console.time('Start -> end delay');
	})
	.on("end", function() {
	console.timeEnd('Start -> end delay');
	path.call(transition, d1, d0);
	});
	}

	function pathTween(node, d1, precision) {
	console.time('Tween init');
	var path0 = node,
	path1 = path0.cloneNode(),
	n0 = path0.getTotalLength(),
	n1 = (path1.setAttribute("d", d1), path1).getTotalLength();

	// Uniform sampling of distance based on specified precision.
	var distances = [0], i = 0, dt = precision / Math.max(n0, n1);
	while ((i += dt) < 1) distances.push(i);
	distances.push(1);

	// Compute point-interpolators at each distance.
	var points = distances.map(function(t) {
	var p0 = path0.getPointAtLength(t * n0),
	p1 = path1.getPointAtLength(t * n1);
	return d3.interpolate([p0.x, p0.y], [p1.x, p1.y]);
	});
	console.timeEnd('Tween init');

	return function() {
	return function(t) {
	return t < 1 ? "M" + points.map(function(p) { return p(t); }).join("L") : d1;
	};
	};
	}

	</script>