JSFiddle - React, Tailwind, and code Playground

by theneuralbit

HTML

<svg></svg>

JavaScript

//The data for our line
var lineData = Array();

for(var i=0; i < 1000; i++){
	lineData.push(i);
}
function get_rand() {
  return Math.round(Math.random()*9 + 0.5);
}
var a = get_rand();
var b = get_rand();

//This is the accessor function we talked about above
function lineFunction(delta_x, delta_y) {
  return d3.svg.line()
         .x(function(d) { 
            return 100*Math.cos(a*2*Math.PI*d/180 + delta_x) + 125; 
         })
         .y(function(d) { 
           return 100*Math.sin(b*2*Math.PI*d/180 + delta_y) + 125; 
         })
         .interpolate("linear");
}

function randomLineFunction(lineData) {
	return lineFunction(randomOdd(), randomOdd())(lineData);
}

//The SVG Container
var svgContainer = d3.select("svg")
                     .attr("width", 300)
                     .attr("height", 300);

//The line SVG Path we draw8
var lineGraph = svgContainer.append("path")
                            .attr("d", lineFunction(0, 0)(lineData))
                            .attr("stroke", "blue")
                            .attr("stroke-width", 2)
                            .attr("fill", "none");

curr_offset = 0;

function updateCurve() {
	curr_offset += Math.PI/8;
  lineGraph
    .transition()
    .ease(d3.ease('linear'))
    .duration(500)
    .attr("d", lineFunction(curr_offset, 0)(lineData));
  setTimeout(updateCurve, 500);
}
setTimeout(updateCurve, 1000);