<html> <body> <script> // the dropper math figure function dropper(u,v) { var svg = document.createElementNS("http://www.w3.org/2000/svg", "svg"); var height = document.body.clientHeight; var width = document.body.clientWidth; svg.setAttribute("width", width); svg.setAttribute("height", height); var radius = 0.8 * Math.min(height,width) / 2; var nblines = Math.floor(Math.min(height,width))/2; for (var i = -nblines ; i < nblines; i++) { var line = document.createElementNS("http://www.w3.org/2000/svg","line"); line.setAttribute("id","line2"); line.setAttribute("x1",Math.cos(u * i) * radius + width/2); line.setAttribute("y1",Math.sin(u * i) * radius + height/2); line.setAttribute("x2",Math.cos(v * i) * radius + width/2); line.setAttribute("y2",Math.sin(v * i) * radius + height/2); line.setAttribute("stroke", "black"); line.setAttribute("stroke-opacity", (nblines - Math.abs(i)) / nblines); svg.appendChild(line); } return svg; }
// time for animation const timer = ms => new Promise(res => setTimeout(res, ms)) // choose two starting points for the dropper var u = 3.141596 * (100 - Math.floor(Math.random()*200) / (Math.floor(Math.random()*100)+1)); var v = 3.141596 * (100 - Math.floor(Math.random()*200) / (Math.floor(Math.random()*100)+1)); // and choose two linear speeds for these points var uv = 2e-5 - Math.random() * 4e-5; var vv = 2e-5 - Math.random() * 4e-5;
async function run() { while(true) { var svg = dropper(u,v); document.body.appendChild(svg); await timer(40); document.body.removeChild(svg); // then starting points must evolve slowly but constently u += uv; v += vv; } } run(); </script> </body> </html>