Waves

to generate a new and unique variation

Source Code

Every variart piece is open source, you can see exactly how it is drawn from the code.

var foregroundColors = ['#4d7f86', '#174369'];
var backgroundColor = '#143446';
var amplitude = intVariable('amplitude', 10, 20);
var frequency = intVariable('frequency', 50, 100);

s.rect(0, 0, width, height).attr({fill: backgroundColor});

function sineWave(originX, originY, amplitude, rarity, freq, phase, color){
  var points = [];

  for (var i = -100; i < width * 2; i++) {
    var x1 = (i - 1) * rarity + originX;
    var y1 = Math.sin(freq * (i - 1 + phase)) * amplitude + originY;
    var x2 = i * rarity + originX;
    var y2 = Math.sin(freq * (i + phase)) * amplitude + originY;
    
    points.push(x1, y1, x2, y2);
  }
                
  return s.polyline(points).attr({fill: 'none', stroke: color, strokeWidth: 10});
}
                
var wave = sineWave(0, 0, amplitude, frequency/100, 0.1, 0, foregroundColors[0]);

for (var i = 1; i < 15; i += 1){
  wave.clone().transform(Snap.format('t{x},{y}r{r}', {x: 0, y: 50 * i, r: 180})).attr({stroke: foregroundColors[i % foregroundColors.length]}); 
}