random gradient

_.md

[ Launch: Tributary inlet ] 4758697 by roundrobin

config.json

{"description":"random gradient","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01}

inlet.js

var defs = g.append("defs");
                    
var gradient = defs.append('linearGradient')
	.attr({
	x1: '0%',
	x2: '0%',
	y1: '0%',
	y2: '100%',	
  spreadMethod: 'pad',
  id: 'gradient1'
	});

var radial = defs.append('radialGradient')
	.attr({
	cx: '50%',
	cy: '50%',
	fx: (50)+'%',
	fy: '50%',
	r:  '100%',
  spreadMethod: 'pad',
  id: 'gradient2'
	});
                                                      
                                                          
function r(min, max) {
    return Math.random() * (max - min) + min;
}         
var randomNumber = r(1,10);
var stepSize = 100 / randomNumber;
var colors = [];

for(var i= 0; i < randomNumber; i++){

  var color = '#'+Math.floor(Math.random()*16777215).toString(16);
  colors.push(color);
  gradient.append('stop')
	.attr({'stop-color': color, 'stop-opacity': '1', offset:(stepSize*i).toFixed(2)+'%'})

  
  radial.append('stop')
.attr({'stop-color':color, 'stop-opacity': '1', offset:(stepSize*i).toFixed(2)+'%'})


  
}    
                                                       
var attr ={
        fill: "#000000",
        x : 0,
        y: 300,
        "font-size": 14,
        "font-family": "Arial",
        "text-anchor": "start"
    };

var text = g.append('text')
.text(colors[i])
.attr(attr);

text.append("tspan")
.text("var colors = [")

for(var i= 0; i < randomNumber; i++){
  if(i> 0 &&i < randomNumber){
      text.append('tspan')
      .text(",")

  }
    text.append('tspan')
    .text(colors[i])

}  
text.append("tspan")
.text("]");

g.append("rect")
.attr({
		width: 200,
		height: 200,
		fill: "url(#gradient1)"
});



g.append("rect")
.attr({
		width: 200,
		height: 200,
  		x: 200,
		fill: "url(#gradient2)"
});
  
g.append("circle")
.attr({
	r: 100,
	cx: 500,
	cy: 100,
	fill: "#ff00ff",
    fill: "url(#gradient2)"
});

g.append('text')
.text("Lorem Ipsum")
.attr({
	fill: "#000000",
	x : 0,
	y: 405,
	"font-size": 120,
	"font-family": "Arial",
	"text-anchor": "start",    fill: "url(#gradient1)"
});