mbostock · August 10, 2024 04:03
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <svg width="960" height="500">
  <path transform="translate(180,150)scale(2,2)" fill="none" stroke="black" stroke-width="1.5"></path>
 </svg>
 <script src="https://d3js.org/d3.v4.min.js"></script>
 <script>

 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";

 d3.select("path")
    .attr("d", d0)
  .transition()
    .duration(2000)
    .on("start", function repeat() {
      d3.active(this)
          .attrTween("d", pathTween(d1, 4))
        .transition()
          .attrTween("d", pathTween(d0, 4))
        .transition()
          .on("start", repeat);
    });

 function pathTween(d1, precision) {
  return function() {
    var path0 = this,
        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]);
    });

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

 </script>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<svg width="960" height="500">
	<path transform="translate(180,150)scale(2,2)" fill="none" stroke="black" stroke-width="1.5"></path>
	</svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	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";

	d3.select("path")
	.attr("d", d0)
	.transition()
	.duration(2000)
	.on("start", function repeat() {
	d3.active(this)
	.attrTween("d", pathTween(d1, 4))
	.transition()
	.attrTween("d", pathTween(d0, 4))
	.transition()
	.on("start", repeat);
	});

	function pathTween(d1, precision) {
	return function() {
	var path0 = this,
	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]);
	});

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

	</script>