homepage: https://aydos.com/wormhole/
wormhole
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <svg width="960" height="500"></svg> | |
| <script src="https://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var svg = d3.select("svg") | |
| var sw = +svg.attr("width") | |
| var sh = +svg.attr("height") | |
| var cx = sw / 2 // center x | |
| var cy = sh / 2 // center y | |
| var cs = [] // circles | |
| var numc = 0 // number of circles | |
| var dr = 12 // delta r | |
| var minr = 12 // min r | |
| var maxr = Math.sqrt(cx*cx+cy*cy) | |
| var ind = 0 // color indice | |
| var loop1dur = 80 | |
| var loop2dur = 2400 | |
| var color = d3.scale.category20b() | |
| // creating circles | |
| for (var r=minr; r<maxr+dr; r+=dr) { | |
| cs[numc] = svg.append("circle") | |
| .attr("cx", cx) | |
| .attr("cy", cy) | |
| .attr("r", r+6*dr) | |
| .style("fill", "none") | |
| .style("stroke-width", 12*dr) | |
| numc++ | |
| } | |
| var log = d3.scale.log().domain([numc,1]) | |
| // change color | |
| function loop1() { | |
| for (var i=0; i<numc; i++) { | |
| cs[i].style("stroke", color(ind - i)) | |
| } | |
| cs[0].style("fill", color(ind)) | |
| ind++ | |
| setTimeout(loop1, loop1dur) | |
| } | |
| // change end of hole position | |
| function loop2() { | |
| var lx = Math.floor(Math.random()*sw) | |
| var ly = Math.floor(Math.random()*sh) | |
| cs[0].transition().ease("linear") | |
| .duration(loop2dur) | |
| .attr("cx", lx ) | |
| .attr("cy", ly ) | |
| for (var i=1; i<numc; i++) { | |
| cs[i].transition() | |
| .duration(loop2dur).ease("linear") | |
| .attr("cx", cx + (lx - cx) * log(i+1) ) | |
| .attr("cy", cy + (ly - cy) * log(i+1) ) | |
| } | |
| setTimeout(loop2, loop2dur) | |
| } | |
| loop1() | |
| loop2() | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment