Multiple Gradients

_.md

[ Launch: Laurel Asset ] 8078023 by roundrobin
[ Launch: SF Typeface ] 5022579 by roundrobin
[ Launch: Gradient big ] 4736823 by roundrobin
[ Launch: Tributary inlet ] 4736799 by roundrobin

asset.svg

config.json

{"description":"Multiple Gradients","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"asset.svg":{"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,"thumbnail":"http://i.imgur.com/paQwmJY.png"}

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'
	});
gradient.append('stop')
.attr({'stop-color':'#00115C', 'stop-opacity': '1', offset:'0%'})

gradient.append('stop')
.attr({'stop-color':'#B6006D', 'stop-opacity': '0', offset:'100%'})


var gradient2 = defs.append('linearGradient')
	.attr({
	x1: (-5)+'%',
	x2: '100%',
	y1: '0%',
	y2: '0%',	
  spreadMethod: 'pad',
  id: 'gradient2'
	});
gradient2.append('stop')
.attr({'stop-color':'#343E44', 'stop-opacity': '1', offset:'0%'})

gradient2.append('stop')
.attr({'stop-color':'#00FFD6', 'stop-opacity': '0', offset:'200%'})

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

g.append("rect")
.attr({
		width: tributary.sw,
		height: tributary.sh,
		fill: "url(#gradient2)"
});