Example 9

HTML

<svg height="200" width="400">
  <rect ry="20" rx="20" height="192" width="392" id="background" x="4" y="4" /> 
  <g transform="translate(200,100)">
    <circle r="75" cx="0" cy="0">
      <title>Say “what” again.</title>
    </circle>
    <line x1="-15" y1="40.5" x2="15" y2="40.5" stroke="#000" stroke-width="1" />
  </g>

  <g transform="translate(165,95)" class="eye left">
    <circle r="15" cx="0" cy="0" class="iris" />
    <circle r="7" cx="0" cy="0" class="pupil" />
  </g>
  <g transform="translate(165,95)" class="eye right">
    <circle r="15" cx="60" cy="0" class="iris" />
    <circle r="7" cx="60" cy="0" class="pupil" /> 
  </g>
  <line />
  <text x="200" y="190" text-anchor="middle">I am the one who knocks</text>
  <g transform="translate(8,50),scale(.5)">
    <path d="M 0 0 L 10 20 L 0 40 L 10 60 L 0 80 L 10 100 L 0 120 L 10 140 L 0 160 L 10 180 L 0 200 z"></path>
  </g>
  <g transform="translate(392,150),scale(.5),rotate(180)">
    <path d="M 0 0 L 10 20 L 0 40 L 10 60 L 0 80 L 10 100 L 0 120 L 10 140 L 0 160 L 10 180 L 0 200 z"></path>
  </g>  
</svg>

CSS

#background {
  fill: #bada55;
  stroke: #fa7a55;
  stroke-width: 8px;
}

g circle {
  fill: #fff;
  stroke: #33c;
  stroke-width: 2px;
}

g circle.iris {
  stroke-width: 0;
  fill: #f00;
}

path {
  stroke-width: 0;
  fill: #fa7a55
}

g circle.pupil {
  stroke-width: 0;
  fill: #000;
}

JavaScript

var rightEye = d3.select('.right.eye .pupil'),left = 

setInterval(function(){
    var minLeft = 50 ,
        maxLeft = 70,
        level = 3,
        currentLeft = rightEye.attr('cx'),
        nextLeft,
        l;
    l = currentLeft + level;
    nextLeft = l > maxLeft ? minLeft : l;
    // console.log(currentLeft);
    
    leftEye.attr('cx', nextLeft);
}, 1000);