veltman/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" width="960" height="500" viewBox="0 0 30.4 36.16">
  <title>C</title>
  <g id="Layer_2" data-name="Layer 2">
    <g id="Layer_1-2" data-name="Layer 1">
      <path d="M4.8,4.27A14.22,14.22,0,0,1,15.42,0Q24,0,28,5.72a12.46,12.46,0,0,1,2.37,6.45H23.18a9.84,9.84,0,0,0-1.77-3.75,7.12,7.12,0,0,0-5.72-2.25A7,7,0,0,0,9.61,9.34q-2.23,3.18-2.23,9T9.73,27a7.37,7.37,0,0,0,6,2.89,6.77,6.77,0,0,0,5.66-2.48,10.91,10.91,0,0,0,1.79-4h7.17a15.56,15.56,0,0,1-4.74,9.19,13.8,13.8,0,0,1-9.77,3.54q-7.37,0-11.59-4.78T0,18.21Q0,9.16,4.8,4.27Z"/>
    </g>
  </g>
  <path id="dolphin" style="display: none;" d="M0.1,24.1c-0.3-0.8,0.9-1.3,0.8-2c-0.1-0.8,0.6-2.5,1.2-2.9c0.6-0.4,0.4-1.4,4.1-3.5c4.4-2.5,5.7-0.9,8-3.4
  	c0.2-0.2,2.5-2.9,3.1-2.2c0.3,0.4-2,2.4,0.2,3.6c2.8,1.5,3.5,1.7,6.2,3.8c4,3.2,3.3,5.6,4,6c1,0.7,1.7,0.8,2.6,2.4
  	c0.7,1.2-0.5-0.2-1.5,0c-0.3,0-0.7,0.2-1,0c-0.5,0.2-1.1-0.6-1.3,0.3c-0.1,0.7-0.9-0.6-0.8-1.8c0.1-1.2-0.2-0.8-2.7-2.5
  	c-3.7-2.6-5.4-1.8-9.6-1.3c-0.3,0-2,0-2.2,0.5c0,0,0,0.1,0.1,0.1c0.3-0.1,0.7-0.2,1-0.2c0,0,0,0,0.1,0.1c-0.2,1.2-3,1.6-5,0.7
  	c-0.7-0.3-2.1,0.5-2.8,0.7C2.1,23.2,0,25.3,0.1,24.1L0.1,24.1z"/>
</svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

// Turn both paths into arrays of coordinates
var letterC = polygonize(document.querySelector("path"), 200),
    dolphin = polygonize(document.getElementById("dolphin"), 200);

d3.select("path")
  .call(animateBetween, letterC, dolphin);

// Given a path element and a number of points n,
// Return an array of n points that approximates
// the path as an n-sided polygon
function polygonize(path, numPoints) {
  var length = path.getTotalLength();

  return d3.range(numPoints).map(function(i){
    var point = path.getPointAtLength(length * i / numPoints);
    return [point.x, point.y];
  });

}

function animateBetween(sel, start, end) {
  sel.attr("d", "M" + start.join("L") + "Z")
    .transition()
    .duration(2500)
    .attr("d", "M" + end.join("L") + "Z")
    .on("end", function(){
      sel.call(animateBetween, end, start);
    });
}

</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8" />
	</head>
	<body>
	<svg xmlns="http://www.w3.org/2000/svg" width="960" height="500" viewBox="0 0 30.4 36.16">
	<title>C</title>
	<g id="Layer_2" data-name="Layer 2">
	<g id="Layer_1-2" data-name="Layer 1">
	<path d="M4.8,4.27A14.22,14.22,0,0,1,15.42,0Q24,0,28,5.72a12.46,12.46,0,0,1,2.37,6.45H23.18a9.84,9.84,0,0,0-1.77-3.75,7.12,7.12,0,0,0-5.72-2.25A7,7,0,0,0,9.61,9.34q-2.23,3.18-2.23,9T9.73,27a7.37,7.37,0,0,0,6,2.89,6.77,6.77,0,0,0,5.66-2.48,10.91,10.91,0,0,0,1.79-4h7.17a15.56,15.56,0,0,1-4.74,9.19,13.8,13.8,0,0,1-9.77,3.54q-7.37,0-11.59-4.78T0,18.21Q0,9.16,4.8,4.27Z"/>
	</g>
	</g>
	<path id="dolphin" style="display: none;" d="M0.1,24.1c-0.3-0.8,0.9-1.3,0.8-2c-0.1-0.8,0.6-2.5,1.2-2.9c0.6-0.4,0.4-1.4,4.1-3.5c4.4-2.5,5.7-0.9,8-3.4
	c0.2-0.2,2.5-2.9,3.1-2.2c0.3,0.4-2,2.4,0.2,3.6c2.8,1.5,3.5,1.7,6.2,3.8c4,3.2,3.3,5.6,4,6c1,0.7,1.7,0.8,2.6,2.4
	c0.7,1.2-0.5-0.2-1.5,0c-0.3,0-0.7,0.2-1,0c-0.5,0.2-1.1-0.6-1.3,0.3c-0.1,0.7-0.9-0.6-0.8-1.8c0.1-1.2-0.2-0.8-2.7-2.5
	c-3.7-2.6-5.4-1.8-9.6-1.3c-0.3,0-2,0-2.2,0.5c0,0,0,0.1,0.1,0.1c0.3-0.1,0.7-0.2,1-0.2c0,0,0,0,0.1,0.1c-0.2,1.2-3,1.6-5,0.7
	c-0.7-0.3-2.1,0.5-2.8,0.7C2.1,23.2,0,25.3,0.1,24.1L0.1,24.1z"/>
	</svg>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script>

	// Turn both paths into arrays of coordinates
	var letterC = polygonize(document.querySelector("path"), 200),
	dolphin = polygonize(document.getElementById("dolphin"), 200);

	d3.select("path")
	.call(animateBetween, letterC, dolphin);

	// Given a path element and a number of points n,
	// Return an array of n points that approximates
	// the path as an n-sided polygon
	function polygonize(path, numPoints) {
	var length = path.getTotalLength();

	return d3.range(numPoints).map(function(i){
	var point = path.getPointAtLength(length * i / numPoints);
	return [point.x, point.y];
	});

	}

	function animateBetween(sel, start, end) {
	sel.attr("d", "M" + start.join("L") + "Z")
	.transition()
	.duration(2500)
	.attr("d", "M" + end.join("L") + "Z")
	.on("end", function(){
	sel.call(animateBetween, end, start);
	});
	}

	</script>