drag clip path

_.md

[ Launch: nodes ] 8440621 by DeBraid

config.json

{"description":"drag clip path","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/ltBDNxf.png"}

inlet.js

var w = 666,
    h = 255,
    margin = 5;
    
var drag = d3.behavior.drag()
    .on("drag", function() {
        var clippy = d3.select('#clip circle');
        clippy.attr('cx', +clippy.attr('cx') + d3.event.dx);
        clippy.attr('cy', +clippy.attr('cy') + d3.event.dy);
    });

  var svg = d3.select("svg")
      .attr("width", w + 2*margin)
      .attr("height", h + 2*margin)
    .append('g')
      .attr('transform', 'translate('+margin+','+margin+')');

  var clip = svg.append("svg:clipPath")
      .attr("id", "clip")
    .append("svg:circle")
      .attr('cx', w/2)
      .attr('cy', h/2)
      .attr('r', 64);

svg.append('svg:rect')
      .attr('width', w)
      .attr('height', h)
      .attr('rx', 15)
      .attr('ry', 15)
      .attr("clip-path", function(d,i) { return "url(#clip)"; })
      .style("fill", d3.rgb(0, 230, 0))
      .style("stroke", d3.rgb(0, 0, 0))
      .call(drag);

style.css

.tributary_svg {
	background: red;
}