index.html

## index.html
<html>
<head>
	<title></title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
</head>
<body>
	<div id="circles"></div>
<script type="text/javascript">
	var width = 1900, height = 900, aleatorioX, aleatorioY, aleatorioFont;
	var svg = d3.select("#circles")
				.append("svg")
				.attr("height", height)
				.attr("width", width)
				.on("mousemove", draw)
				.on("click", rain)
				//.append("g");
	setInterval(function(){
		bubbles();
	}, 1);
	setInterval(function(){
		text();
	}, 500);
	setInterval(function(){
		rain();
	}, 10000);
	function bubbles(){
		svg.append("circle")
			.attr("cx", Math.floor(Math.random()*1800)+1)
			.attr("cy", Math.floor(Math.random()*800)+1)
			.attr("r", 0)
			.style("opacity", "0.1")
			.attr("fill", randomColor)
			.transition()
		     .duration(1500)
		     .ease("quad")
		     .attr("r", Math.floor(Math.random()*150)+50)
		     .style("opacity", "0")
		     .attr("stroke", "white")
		     .remove();
	}
	function rain(){
		for (var i = 0; i <= 10; i++) {
			aleatorioY = Math.floor(Math.random()*100)-150;
			aleatorioX = Math.floor(Math.random()*1800)+50;
			aleatorioFont = Math.floor(Math.random()*100)+20;
			svg.append("text")
			.style("opacity", "0")
			.transition()
		     .attr("fill", randomColor)
			.text(getRandomChar())
			.attr("x",  aleatorioX)
			.attr("y", aleatorioY)
			.attr("font-size", aleatorioFont)
			.style("opacity", "0.5")
			.transition()
		     .duration(2000)
		     .ease("bounce")
		     .attr("y", "1200")
			.transition()
		     .duration(1000)
			.ease("exp")
			.style("opacity", "0")
		     .remove();
		}
	}
	function text(){
		svg.append("text")
			.style("opacity", "0.3")
			.attr("fill", randomColor)
			.text(getRandomChar())
			.attr("x", Math.floor(Math.random()*1500)+100)
			.attr("y", Math.floor(Math.random()*700)+100)
			.attr("font-size", Math.floor(Math.random()*100)+20)
			.transition()
		     .duration(1000)
			.ease("exp")
			.style("opacity", "0")
		     .remove();
	}
	function draw(){
		svg.append("circle")
			.attr("cx", d3.event.pageX)
			.attr("cy", d3.event.pageY)
			.style("opacity", ".9")
			.attr("r", "0")
			.attr("fill", "none")
		     .transition()
		     .ease("bounce")
		     .attr("fill", randomColor)
		     .transition()
		     .duration(800)
		     .attr("r", 50)
		     .transition()
		     .duration(250)
			.attr("r", 60)
			.transition()
			.style("opacity", "0.2")
			.transition()
			.duration(100)
			.attr("r", 0)
			.transition()
			.duration(100)
			.style("opacity", "0")
			.remove();
	}
	function getRandomNumber(lowerBound,upperBound){
		aleatorio = Math.floor(Math.random() * (upperBound - lowerBound)) + lowerBound;
		return aleatorio;
	}
	function getRandomChar() {
		var lowerChars = "abcdefghijklmnopqrstuvwxyz";
		var upperChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
		var charSet = "";
		charSet += lowerChars;    charSet += upperChars;
		caracter = charSet.charAt(Math.floor(Math.random()*charSet.length));
		return caracter;
	}
	var randomColor = (function(){
	var golden_ratio_conjugate = 0.618033988749895;
	var h = Math.random();

	var hslToRgb = function (h, s, l){
	 var r, g, b;

	 if(s == 0){
	     r = g = b = l; // achromatic
	 }else{
	     function hue2rgb(p, q, t){
	         if(t < 0) t += 1;
	         if(t > 1) t -= 1;
	         if(t < 1/6) return p + (q - p) * 6 * t;
	         if(t < 1/2) return q;
	         if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
	         return p;
	     }

	     var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
	     var p = 2 * l - q;
	     r = hue2rgb(p, q, h + 1/3);
	     g = hue2rgb(p, q, h);
	     b = hue2rgb(p, q, h - 1/3);
	 }

	 return '#'+Math.round(r * 255).toString(16)+Math.round(g * 255).toString(16)+Math.round(b * 255).toString(16);
	};

	return function(){
	h += golden_ratio_conjugate;
	h %= 1;
	return hslToRgb(h, 0.5, 0.60);
	};
	})();


	/* .attr("stroke", function() {
    				return "hsl(" + Math.random() * 360 + ",100%,50%)";
    			})*/

</script>

</body>
</html>

## thumbnail.png

      
          Raw
        
        
              thumbnail.png