D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
LuisSevillano
Full window
Github gist
Mouse event
<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>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js