An inlet to Tributary

_.md

[ Launch: An inlet to Tributary ] 4592717 by enoex
[ Launch Inlet ]
Gist #3200444

config.json

{"description":"An inlet to Tributary","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"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,"tab":"edit","display_percent":0.7,"hidepanel":false}

inlet.js

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

// Head
svg.append("rect")
  .attr("width", 600)
  .attr("height", 600)
  .attr("x", 100)
  .attr("y", 100)
  .attr("rx", 23)
  .style("fill", "#3D3D3D")
  .style("fill-opacity", 0.22)
  .style("stroke", "#535353")
  .style("stroke-width", 20)

// Mouth
svg.append("rect")
  .attr("width", 330)


  .attr("height", 54) // Change this to make him talk


  .attr("x", 224)
  .attr("y", 541)
  .attr("rx", 37)
  .style("fill", "#242424")
  .style("fill-opacity", 0.7656)
  .style("stroke-width", 0)
  .on('mouseenter', function(){ 
    d3.select(this).attr({ height: 90, width: 200, x: 280 });
})
.on('mouseleave', function(){ 
  d3.select(this).attr({ height: 54, width: 330, x: 224});
});


// Nose
svg.append("rect")
  .attr("width", 200)
  .attr("height", 103)
  .attr("x", 282)
  .attr("y", 375)
  .attr("rx", 23)
  .style("fill", "#F10E0E")
  .style("fill-opacity", 0.22)
  .style("stroke", "#535353")
  .style("stroke-width", 10)
  

// Eyes
svg.append("rect")
  .attr("width", 100)
  .attr("height", 103)
  .attr("x", 210)
  .attr("y", 193)
  .attr("rx", 23)
  .style("fill", "#FFFFFF")
  .style("fill-opacity", 0.7656)
  .style("stroke", "#535353")
  .style("stroke-width", 5)

svg.append("rect")
  .attr("width", 100)
  .attr("height", 103)
  .attr("x", 488)
  .attr("y", 193)
  .attr("rx", 23)
  .style("fill", "#FFFFFF")
  .style("fill-opacity", 0.7656)
  .style("stroke", "#535353")
  .style("stroke-width", 5)

// Pupils

svg.append("rect")
  .attr("width", 66)
  .attr("height", 53)
  .attr("x", 495)
  .attr("y", 231)
  .attr("rx", 37)
  .style("fill", "#242424")
  .style("fill-opacity", 0.7656)
  .style("stroke-width", 0)

svg.append("rect")
  .attr("width", 66)
  .attr("height", 53)
  .attr("x", 224)
  .attr("y", 231)
  .attr("rx", 37)
  .style("fill", "#242424")
  .style("fill-opacity", 0.7656)
  .style("stroke-width", 0)