Waves
to generate a new and unique variation
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]});
}
Copyright © 2014–2025 Kevin Marsh. All rights reserved. Questions? Comments? hello@variart.io