Squiggle

svg {
	background: #40E0DF;
	background: -moz-linear-gradient(top,  #3FDF93 0%, #40E0DF 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#40E0DF), color-stop(100%,#3FDF93));
	background: -webkit-linear-gradient(top,  #3FDF93 0%,#40E0DF 100%);
	background: -o-linear-gradient(top,  #3FDF93 0%,#40E0DF 100%);
	background: -ms-linear-gradient(top,  #3FDF93 0%,#40E0DF 100%);
	background: linear-gradient(to bottom,  #3FDF93 0%,#40E0DF 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3FDF93', endColorstr='#40E0DF',GradientType=0 );
}

var Squiggle = function(thickness, rotation, yLoc, simple) {
  noise.seed(Math.random());
  var l = two.makeLine(two.width / 8, two.height / 2, 7 * two.width / 8, two.height / 2);
  l.translation.set(two.width / 2, yLoc);
  l.subdivide();
  var v = l.vertices;
  l.remove();

  var pts = [];
  for (var i = 0; i < v.length; i++) {
    var a = new Two.Anchor(v[i].x, v[i].y);
    pts.push(a);
  }

  this.simple = simple;

  // make curve with the points of this line
  this.c = two.makeCurve(pts, true);
  this.c.stroke = '#FFFFFF'; //#EFD050
  this.c.noFill();
  this.c.linewidth = thickness;
  this.c.cap = 'round';
  this.c.join = 'round';
  this.c.rotation = rotation;
  this.c.translation.set(two.width / 2, yLoc);
};


// Squish using noise function
Squiggle.prototype.squish = function(time) {
  for (var i = 0; i < this.c.vertices.length; i++) {
    var d = this.c.vertices[i];
    // From base
    // d.x = v[i].x + 25 * Math.random();
    // d.y = v[i].y + 10 * randomNumber(-1, 1);

    // Cumulative
    // d.y = d.y + 1 * randomNumber(-1, 1);

    // Noise Based
    if (this.simple)
      var value = noise.simplex3(this.c.vertices[i].x / 100, this.c.vertices[i].y / 100, time);
    else
      var value = noise.perlin3(this.c.vertices[i].x / 100, this.c.vertices[i].y / 100, time);

    d.y = (d.y + value);
  }
  squishing = false;
};

var squishing = false;

var type = 'svg'; //'webgl' 'canvas'
var two = new Two({
  type: Two.Types[type],
  fullscreen: true
}).appendTo(document.body);

Two.Resolution = 32;

var curves = [
  // new Squiggle(10, 0, two.height / 2 - 40),
  new Squiggle(10, 0, two.height / 2, true)
  // new Squiggle(10, 0, two.height / 2 + 40)
];

two
  .bind('update', function(frameCount) {
    if (!squishing) {
      squishing = true;
      for (var i = curves.length - 1; i >= 0; i--) {
        curves[i].squish(frameCount);
      };
    }
  }).play();

// Random number in range
function randomNumber(minimum, maximum) {
  return Math.round(Math.random() * (maximum - minimum) + minimum);
}