moving gradient example

colors.html

<svg version="1.1" xmlns="http://w3.org/2000/svg">
	<defs>
		<linearGradient id="gradient"
			x1="0%" y1="0%"
			x2="100%" y2="100%">
			<stop id="s1" offset="5%" stop-color="#000"></stop> 
			<stop id="s2" offset="95%" stop-color="#fff"></stop>
		</linearGradient> 
	</defs> 

	<rect width="100%" height="100%"></rect> 
</svg> 

<style>
	svg, rect {
		position:fixed; 
		width:100%; 
		height:100%; 
		z-index:-1; 
	}
	
	rect {
		fill: url('http://samuelacuna.com/#gradient'); 
	}
</style> 

<script> 
// pool of colors for the gradient in rgb format [r,g,b] 
COLORS = [	[63,172,163], 
		[175,77,51], 
		[163,127,144], 
		[216,144,103], 
		[159,90,123], 
		[85,194,185]];
  
// Selected color index to compare 
var sel1 = choose_random_color(); 
var sel2 = choose_random_color(); 

// Selected colors to use and modify 
var cur1 = COLORS[sel1]; 
var cur2 = COLORS[sel2]; 

// Select color index current colors will be changing to
var sel1 = choose_random_color(); 
var sel2 = choose_random_color(); 

// compares color rgb values in array format 
function colors_equal(one,two) {
	var result = true; 
	for(var i = 0;i < one.length;i++) {
		result = result && (one[i]==two[i]); 
	}
	return result; 
}

// chooses a random index from the pool of colors 
function choose_random_color() {
	return Math.floor((10*Math.random())%COLORS.length); 
}
  

// returns a hex string value of an array of colors in rgb format
function array_to_color(array) {
	var color = "#"; 
	var v1,v2; 
	var val; 

	for(var i = 0; i < array.length; i++) {
		v1 = Math.floor(array[i]/16); // hex base 16 
		v2 = array[i]%16; // remainder from base 16

		val = (v1>9) ? String.fromCharCode(97+(v1%10)) : v1.toString(); 
		color += val; // first part of hex value 

		val = (v2>9) ? String.fromCharCode(97+(v2%10)) : v2.toString(); 
		color += val; // second part of hex value 
	}

	return color; 
} 

// change gradient color from current (cur1/cur2) to selected (sel1,sel2) color. 
function active_gradient() {
	var str1 = ""; 
	var str2 = ""; 
	var hex1,hex2; 

	// If colors match, get a new color 
	if(colors_equal(COLORS[sel1],cur1)) 
		sel1 = choose_random_color(); 
	if(colors_equal(COLORS[sel2],cur2)) 
		sel2 = choose_random_color(); 

	// Change colors 
	for(var i = 0; i < cur1.length; i++) {
		if(cur1[i] < COLORS[sel1][i]) cur1[i]++; // move current first color up 
		else if(cur1[i]==COLORS[sel1][i]) cur1[i] = cur1[i]; // wait (colors match) 
		else cur1[i]--; // move current first color down 

		if(cur2[i] < COLORS[sel2][i]) cur2[i]++; // move current second color up 
		else if(cur2[i]==COLORS[sel2][i]) cur2[i] = cur2[i]; // wait (colors match) 
		else cur2[i]--; // move current second color down 
	}	
}
  
// actual function to init process of changing colors 
function change_color() {
  // start changing colors 
	active_gradient(); 

	// Show new colors 
	hex1 = array_to_color(cur1); 
	hex2 = array_to_color(cur2); 
	$('#s1').attr('stop-color',hex1); 
	$('#s2').attr('stop-color',hex2); 
}

$(document).ready(function() {
    // pre-fill gradient with loaded colors 
    $('#s1').attr('stop-color',array_to_color(cur1)); 
    $('#s2').attr('stop-color',array_to_color(cur2)); 
    // update colors every 100ms 
    interval = window.setInterval("change_color()",100); 
}); 
</script>