papa face

_.md

[ Launch: papa face ] 5790309 by enjalot

config.json

{"description":"papa face","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"face.svg":{"default":true,"vim":false,"emacs":false,"fontSize":12},"mac.svg":{"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}},"fullscreen":false,"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,"thumbnail":"http://i.imgur.com/sfsy1kF.png"}

face.svg

inlet.js

var svg = d3.select("svg");
var bg = svg.append("rect")
.attr({
  width: "100%",
  height: "100%",
  opacity: 0
})

var duration = 1000;


var macScale = 1.4;
var papaScale = 0.5;

var mac = svg.select("#mac")
.attr("transform", "scale(" + macScale + ")")
.each(moveToFront)
var macface = svg.select("#face")
.attr("transform", "scale(" + macScale + ")")
.each(moveToFront)
.attr("opacity", 1)

var papaface = svg.select("#papaface")
.attr("stroke", "#000000")
.attr("transform", "translate(" + [98, 66] + ")scale(" + papaScale + ")")
.attr("fill-opacity", 0)
.attr("stroke-opacity", 0)
.each(moveToFront)


function moveToFront() {
  this.parentNode.appendChild(this);
}

bg.on("mouseover", function() {
  macface.transition()
  .duration(duration)
  .attr("opacity", 0)
  
  papaface.selectAll("path")
    .attr("stroke-opacity", 1)
    .attr("stroke-dasharray", function() {
      return "0," + this.getTotalLength();
    })
    .transition()
    .delay(duration)
    .duration(duration)
    .attrTween("stroke-dasharray", tweenDash)
    .transition()
    .duration(duration)
    .attr("fill-opacity", 1)

})
bg.on("mouseout", function() {
  papaface.selectAll("path")
  .transition()
    .duration(duration)
    .attr("fill-opacity", 0)
  .attr("stroke-opacity", 0)

  macface.transition()
  .delay(duration)
   .duration(duration)
   .attr("opacity", 1) 
  
  
})

function tweenDash() {
  var l = this.getTotalLength(),
      i = d3.interpolateString("0," + l, l + "," + l);
  return function(t) { return i(t); };
}

mac.svg