QL.com SVG header

svg-header.js

//= require snap.svg-min

(function(){
  var defaultCoordMultiplier = 50;
  var shapeSpacingMultiplier = .45;
  var tilt = 3;
  var height = 8;
  var width = 4;
  var origin = { x: 0, y: 0 };

  var color = {
    next: function nextColor(){
      return this.list[++this.pointer % this.list.length];
    },
    pointer: 0,
    list: ['#ff0000','#ff7f00','#ffff00','f7fff00','#00ff00','#00ff7f','#00ffff','#007fff','#0000ff','#7f00ff','#ff00ff','#ff007f']
  }

  function Path(snap, shape, coordMultiplier, offsetX){
    this.shape = shape;
    this.coordMultiplier = coordMultiplier;
    this.offsetX = offsetX;
    this.offsetY = 0;

    this.path = snap.path(this.make());
  }

  Path.prototype.make = function makePath(){
    var self = this;

    var path = "M";
    path += [this.offsetX, this.offsetY].join(',');
    path += 'm';
    path += $.map(this.shape,function(coords){
      return self.getCoordPair(coords);
    }).join('l');
    path += 'z';

    return path;
  }

  Path.prototype.getCoordPair = function getCoordPair(coords){
    var first = coords[0] * this.coordMultiplier;
    var second = coords[1] * this.coordMultiplier;
    return [first,second].join(',');
  }

  Path.prototype.mouseover = function(handler){
    var self = this;
    return this.path.mouseover(function(){
      return handler.apply(self,arguments);
    });
  }

  Path.prototype.mouseout = function(handler){
    var self = this;
    return this.path.mouseout(function(){ 
      return handler.apply(self,arguments);
    });
  }

  Path.prototype.attr = function(){
    return this.path.attr.apply(this.path, arguments);
  }

  Path.prototype.flipHorizontally = function(){
    $.each(this.shape, this._reverseX);
    this.attr('d', this.make());
  }

  Path.prototype._reverseX = function(i, coords){
    var X = 0;
    coords[X] *= -1;
  }

  function addColor(e){
    $(e.target).attr('fill', color.next());
  }

  function removeColor(e){
    $(e.target).attr('fill', '#000'); 
  }

  // get rid of center line by making them all the same height (2nd attr)
  var defaultShapes = [
    [[tilt,origin.x],[-tilt,height],[width,0],[tilt,-height]], // =>  /_/
    [[tilt,origin.x],[-tilt,height],[.5,0],[tilt,-height]], // => /
    [[origin.x, origin.y],[tilt,height],[width,0],[-tilt,-height]], // => \_\
    [[origin.x,height / 2],[tilt,-height/2],[width,0],[tilt,height/2]], // => /__\
    [[origin.x,height/4],[tilt,height / 2],[width,0],[tilt,-height / 2]], // => /__\
    [[tilt,origin.x],[-tilt,height / 4],[width,0],[tilt,-height / 4]], // => \__/
    [[origin.x,height / 2],[tilt,height/2],[width,0],[tilt,-height/2]], // => \__/
    [[origin.x,3 * height / 4 ],[tilt, - height / 2],[width,0],[tilt, height / 2]], // => /__\
    [[tilt,height],[-tilt,-3 * height / 4],[width,0],[tilt,3 * height / 4]] // => \__/
  ];

  var alternateShapes = [
    [[tilt,origin.x],[-tilt,height],[width,0],[tilt,-height]], // =>  /_/
    [[tilt,origin.x],[-tilt,height],[.5,0],[tilt,-height]], // => /
    [[origin.x, origin.y],[tilt,height],[width,0],[-tilt,-height]], // => \_\
    [[origin.x,height],[tilt,height / 2],[width,0],[tilt,-height / 2]] // => /__\
  ];


  function randomShape(shapes){
    var len = shapes.length
    return shapes[Math.ceil(Math.random() * len) % len];
  }

  function randomOpacity(){
    return Math.random() / 4;
  }

  function fill(selector, useAlternateShapes){
    var $el = $(selector);
    if ( !$el.length ) return;

    $el.width($el.parent().outerWidth()); // needed for FF to size SVGs with percentage widths correctly
    $el.empty(); // empty out previous snap setup

    var snap = Snap(selector);
    var offsetX = -100, maxWidth = $(selector).outerWidth();
    var shapes = useAlternateShapes === true ? alternateShapes : defaultShapes;

    while (offsetX < maxWidth) {
      var shape = randomShape(shapes);

      var path = new Path(snap, shape, defaultCoordMultiplier, offsetX);
      path.attr('opacity', randomOpacity());

      path.mouseover(addColor);
      path.mouseout(removeColor);
      path.mouseout(path.flipHorizontally);

      offsetX += defaultCoordMultiplier * shapeSpacingMultiplier;
    }
  }

  function setupFractals(){
    fill('.section_header');
    fill('.case_study_fractal', true);
  }

  setupFractals();
  $(window).on('resize', _.debounce(function() {
    setupFractals();
  }, 100));
})();