initials by pstuffa

index.html

<!DOCTYPE html>
<!-- Paul Buffa 2015
  -->
<meta charset="utf-8">
<style>

path {
  fill: none;
  stroke: #000;
  stroke-width:3px;
  stroke-opacity:1;
}
</style>

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var width = 500,
    height = 500;

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

var d1 = "M 106.48322,118.06365 C 128.75318,102.7609 197.23759,27.659103 177.30807,23.891558 C 164.93298,21.552128 127.58533,121.66061 149.68843,117.65978 C 165.14119,114.8627 174.15522,74.707534 174.15522,74.707534 C 184.00421,77.737992 196.94679,75.907089 196.94679,75.907089 H 250 V 150 H 100 V 118.06365 H 106.48322",
	d2 = "M 202.16854,70.958921 C 198.57614,85.277923 180.01346,128.52952 161.06784,114.68407 C 143.3402,101.72872 160.9037,72.034949 202.16854,70.958921 z M 201.41487,73.792083 C 190.682,103.97039 180.42264,133.35951 218.05082,108.98958",
	d0 = "M 100, 150 V 75 H 250 V 150 H 99",
	d5 = "M 50, 100 V 25 H 200 V 100 H 50",
	d4 = "M 101.67479,107.0918 C 117.17457,99.62475 136.79162,78.08541 147.87906,58.96524 M 113.73383,155.21721 L 148.08557,58.54112 z M 140.50143,79.76857 C 144.18143,67.20857 166.60293,53.59332 171.98143,71.08857 C 179.36124,95.17369 145.94143,126.24857 136.90143,91.36857";

svg.append("path")
    .attr("transform", "translate(-50,-50)scale(1.5,1.5)")
    .attr("d", d0)
    .call(transition, d0, d4);

svg.append("path")
    .attr("transform", "translate(160,0)")
    .attr("d", d0)
    .call(transition, d0, d1);


function transition(path, d0, d1) {
  path.transition()
      .duration(4000)
      // .delay(1000)
      .ease(function(d) { return 10 * Math.pow(d,25); })
      .attrTween("d", pathTween(d1,1))
      .each("end", function() { d3.select(this).call(transition, d1, d0); });
}

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>