just another inlet to tributary

_.md

[ Launch Inlet ]
Gist #3200444

config.json

{"endpoint":"","display":"svg","public":true,"require":[],"tab":"edit","display_percent":0.4851562500000002,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var svg = d3.select("svg");

var d0 = "M10,10c100,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";

var path0 = svg.append("path")
    .attr("transform", "translate(180,150)scale(2,2)")
    .attr("d", d0)
    .style("stroke" ,"red")
    .style("fill", "none");

var path1 = svg.append("path")
    .attr("transform", "translate(180,150)scale(2,2)")
    .attr("d", d1)
    .style("stroke" ,"steelblue")
    .style("fill", "none");

var n0 = path0.node().getTotalLength(),
    n1 = path1.node().getTotalLength();

// play with t0 and t1
var t0 = 0.31181,
    t1 = 0.21563;

var p0 = path0.node().getPointAtLength(t0 * n0),
    p1 = path1.node().getPointAtLength(t1 * n1);

var dd3 = "M" + [[p0.x, p0.y], [p1.x, p1.y]].map(function(p) { return p; }).join("L");

var path1 = svg.append("path")
    .attr("transform", "translate(180,150)scale(2,2)")
    .attr("d", dd3)
    .style("stroke" ,"purple")
    .style("fill", "none");