svg logo changing on mouseover, as seen on http://salty-taiga-4319.herokuapp.com/

_logo.html.haml

%svg#logo{:height => "173", :version => "1.1", :width => "222", :xmlns => "http://www.w3.org/2000/svg"}
  %g#layer1{:transform => "translate(0,-879.36218)"}
    %g#g3325{"clip-path" => "url(#clipPath3327)", :transform => "matrix(1.25,0,0,-1.25,-65.45499,1103.171)"}
      %g#logo-topleft{:transform => "translate(53.4551,178.2993)"}
        %path#logo-topleft-line{:d => "M 0,0 44,-34", :style => "fill:none;stroke:#000000;stroke-width:1.125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"}/
      %g#logo-topright{:transform => "translate(229.3887,178.2993)"}
        %path#logo-topright-line{:d => "M 0,0 -44,-34", :style => "fill:none;stroke:#000000;stroke-width:1.125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"}/
      %g#logo-bottomleft{:transform => "translate(100,75)"}
        %path#logo-bottomleft-line{:d => "M 0,0 -44,-34", :style => "fill:none;stroke:#231f20;stroke-width:1.125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"}/
      %g#logo-bottomright{:transform => "translate(185.4063,74.7671)"}
        %path#logo-bottomright-line{:d => "M 0,0 44,-34", :style => "fill:none;stroke:#000000;stroke-width:1.125;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:10;stroke-opacity:1"}/
      %g#logotype
        %g#g3347{:transform => "translate(114.1094,114.0142)"}
          %path#path3349{:d => "m 0,0 2.135,0 0,-4.252 L 6.086,0 8.672,0 4.711,-4.126 8.85,-9.729 l -2.569,0 -3.017,4.141 -1.129,-1.168 0,-2.973 L 0,-9.729 0,0 z", :style => "fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"}/
        %g#g3351
          %g#g3353{"clip-path" => "url(#clipPath3355)"}
            %g#g3359{:transform => "translate(129.6719,109.2896)"}
              %path#path3361{:d => "m 0,0 c 1.045,0 1.641,0.555 1.641,1.374 l 0,0.032 C 1.641,2.322 1,2.795 -0.041,2.795 l -2.127,0 L -2.168,0 0,0 z m -4.311,4.725 4.452,0 C 1.377,4.725 2.336,4.379 2.973,3.74 3.518,3.196 3.811,2.431 3.811,1.515 l 0,-0.027 c 0,-1.572 -0.852,-2.559 -2.086,-3.018 l 2.375,-3.474 -2.5,0 -2.084,3.113 -1.684,0 0,-3.113 -2.143,0 0,9.729 z", :style => "fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"}/
            %g#g3363{:transform => "translate(144.0586,109.1235)"}
              %path#path3365{:d => "m 0,0 0,0.025 c 0,1.669 -1.223,3.059 -2.947,3.059 -1.723,0 -2.918,-1.363 -2.918,-3.03 l 0,-0.029 c 0,-1.666 1.222,-3.055 2.945,-3.055 C -1.197,-3.03 0,-1.671 0,0 m -8.104,0 0,0.025 c 0,2.767 2.18,5.032 5.184,5.032 3.002,0 5.156,-2.239 5.156,-5.003 l 0,-0.029 c 0,-2.763 -2.183,-5.031 -5.183,-5.031 -3.004,0 -5.157,2.238 -5.157,5.006", :style => "fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"}/
            %g#g3367{:transform => "translate(149.0332,114.0142)"}
              %path#path3369{:d => "m 0,0 2.139,0 0,-3.852 3.949,0 0,3.852 2.142,0 0,-9.729 -2.142,0 0,3.907 -3.949,0 0,-3.907 L 0,-9.729 0,0 z", :style => "fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"}/
            %g#g3371{:transform => "translate(160.4277,114.0142)"}
              %path#path3373{:d => "m 0,0 1.979,0 4.558,-5.991 0,5.991 2.108,0 0,-9.729 -1.817,0 -4.717,6.184 0,-6.184 L 0,-9.729 0,0 z", :style => "fill:#231f20;fill-opacity:1;fill-rule:nonzero;stroke:none"}/

interactive-logo.js.coffee

class InteractiveLogo
  j_el = false
  top_offset = 0
  left_offset = 0
  constructor: () ->
    logo = this
    this.j_el = $('#logo')
    this.tl = document.getElementById('logo-topleft-line')
    this.tr = document.getElementById('logo-topright-line')
    this.bl = document.getElementById('logo-bottomleft-line')
    this.br = document.getElementById('logo-bottomright-line')
    this.logotype = document.getElementById('logotype')
    offset = this.j_el.offset()
    this.left_offset = offset.left
    this.top_offset = offset.top
    this.j_el.bind('mousein mousemove', (event)->
      logo.follow_mouse(event)
    )
    this.j_el.bind('mouseout', (event)->
      logo.reset_position()
    )
  reset_position: () ->
    this.tl.setAttribute('d','M 0,0 44,-34')
    this.tr.setAttribute('d','M 0,0 -44,-34')
    this.bl.setAttribute('d','M 0,0 -44,-34')
    this.br.setAttribute('d','M 0,0 44,-34')
    this.logotype.setAttribute('transform','translate(0,0)')
  follow_mouse: (move_event) ->
    horizontal_pos = move_event.pageX - this.left_offset - 110
    if horizontal_pos > 60
      horizontal_pos = 60
    else if horizontal_pos < -60
      horizontal_pos = -60
    page_y =- move_event.pageY
    vertical_pos   = page_y - this.top_offset + 170
    if vertical_pos > 64
      vertical_pos = 64
    else if vertical_pos < -64
      vertical_pos = -64

    this.logotype.setAttribute('transform','translate(' + horizontal_pos + ',' + vertical_pos + ')')

    horizontal_percentage = ((horizontal_pos + 60) / 120) * 100
    vertical_percentage = ((vertical_pos + 64) / 160) * 100

    this.tl.setAttribute('d', 'M 0,0 ' + horizontal_percentage + ',' + (vertical_percentage - 80))
    this.tr.setAttribute('d', 'M 0,0 ' + (horizontal_percentage - 100) + ',' + (vertical_percentage - 80))
    this.bl.setAttribute('d', 'M ' + (horizontal_percentage - 44) + ',' + (vertical_percentage - 34) + ' -44,-34')
    this.br.setAttribute('d', 'M ' + (horizontal_percentage - 56) + ',' + (vertical_percentage - 34) + ' 44,-34')


 $(document).ready(
   # ::TODO:: only activate if SVG is supported and on non-touch devices
   interactive_logo = new InteractiveLogo()
 )