<svg id="svg"></svg>

@import "compass/css3";

$background:#43A27F;
html,body, #svg{
  height:100%;
  width:100%;
}
body{
  @include background-image(linear-gradient(left top, lighten($background,20%), darken($background,20%)));
}

var snap = Snap('#svg');
window.onload = function () {
  draw();
};

function draw(){
  var circ = snap.circle(5,5,5)
            .attr({fill:'#eee'})
  
  var cpat = circ.pattern(0,0,25,25)
             .attr({patternTransform: 'rotate(45)'})
  
  var rect = snap.rect(-35,-35,70,70)
              .attr({fill: cpat});
  
  var rpat = rect.pattern(0,0,35,35)
  
  snap.rect(0,0,'100%','100%').attr({fill: rpat})
    .mousemove(function(e){
      var x = (1 - e.clientX / window.innerWidth) * 300;
      var y = (1 - e.clientY / window.innerHeight) * 300;
     
      rect.attr({transform:'t'+[x%35,y%35]});
  });
}