stolen from the great
I made these new paths partially by hand...
<!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> |