Skip to content

Instantly share code, notes, and snippets.

@erikhazzard
Forked from ejfox/_.md
Created January 22, 2013 07:07
Show Gist options
  • Save erikhazzard/4592717 to your computer and use it in GitHub Desktop.
Save erikhazzard/4592717 to your computer and use it in GitHub Desktop.
An inlet to Tributary
{"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}
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)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment