JSFiddle - React, Tailwind, and code Playground

by Cyril Cherian

JavaScript

//Width and Height
var w = 500;
var h = 500;

//Create SVG Element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .on("mousemove", mousemove);

function generateLines() {
    var line = svg.append("line")
        .attr("stroke", "orange")
        .attr("stroke-width", 7)
        .attr("class", "line")
        .attr("x1", generateRandomPoints())
        .attr("y1", generateRandomPoints())
        .attr("x2", generateRandomPoints())
        .attr("y2", generateRandomPoints())
        .attr("fill", "none");
}


function mousemove() {
    var t = d3.mouse(this);

    svg.selectAll(".line").attr("x1", t[0]).attr("y1", t[1])
}
//make random points
function generateRandomPoints() {
    return parseInt(Math.random() * 500);
}
//this will generate random lines after an interval of 3 secs
setInterval(function () {
    generateLines();
}, 3000);