An infinite number of combinations of gray.
by zono
HTML
<div id="gradientDiv">
</div>
<hr/>
An infinite number of combinations of gray.
If you like this can find me. My skype id is
gonaumov .
CSS
#gradientDiv {
border: 1px sold blue;
}
JavaScript
setTimeout(function changeGradient(){
function getRandomInt (min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomGrayCollor() {
var value = Math.random() * 0xFF | 0;
var grayscale = (value << 16) | (value << 8) | value;
return '#' + grayscale.toString(16);
}
var numbers = [];
while(numbers.length < 3) {
var sum;
if(numbers.length > 0) {
sum = numbers.reduce(function(prev, cur) {
return prev + cur;
});
} else {
sum = 1;
}
numbers.push(getRandomInt(1,100-sum));
}
var sum = numbers.reduce(function(prev, cur) {
return prev + cur;
});
if(sum < 100) {
numbers[numbers.length-1] = numbers[numbers.length-1] + (100-sum);
}
var newDiv = $("<div/>").appendTo("#gradientDiv");
if(getRandomInt (0, 1) === 0) {
newDiv.attr("style", "width: 200px; height: 200px;background: linear-gradient(" + getRandomInt(1,359) + "deg," + getRandomGrayCollor() + " " + numbers.shift() + "% ," + getRandomGrayCollor() + " " + numbers.shift() + "% , " + getRandomGrayCollor() + ");");
} else {
newDiv.attr("style", "width: 200px; height: 200px;background: radial-gradient(" + getRandomGrayCollor() + " " + numbers.shift() + "% ," + getRandomGrayCollor() + " " + numbers.shift() + "% , " + getRandomGrayCollor() + " " + numbers.shift() + "%);");
}
setTimeout(changeGradient, 1000);
}, 100);