Random line drawing 2

Refresh page to pseudo-randomly generate a new line. d3 creates some random invisible points within a bounding box in the center of the screen and then draws through those points.

Random line drawing 1 (step-after interpolation)
Random line drawing 2 (basis interpolation)
Random line drawing 3 (bundle interpolation)

ToDo:

Ensure that no two points are placed too close to one another
Make this slight more interesting...

Built with blockbuilder.org

forked from geraldarthur's block: Random line drawing 2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0;background:#323d4d; }
    svg { margin:0 auto; width:100%; height: 100% }
  </style>
</head>

<body>
  <script>
    var dataset = [];
    var midWidth = window.innerWidth/2;
    var midHeight = window.innerHeight/2;
    
    var maxWidthDev = midWidth * 1.2;
    var minWidthDev = midWidth / 1.2;
    var maxHeightDev = midHeight * 1.2;
    var minHeightDev = midHeight / 1.2;
    var randomPoints = Math.floor((Math.random()*(10 - 2 + 1))) + 4;
    
    for (var i = 0; i < randomPoints; i++) {            
      var x = Math.floor((Math.random()*(maxWidthDev - minWidthDev + 1))) + minWidthDev;
      var y = Math.floor((Math.random()*(maxHeightDev - minHeightDev + 1))) + minHeightDev;  
      dataset.push({"x":x, "y":y});            
		};
    dataset.unshift({"x":midWidth, "y":-2});
    dataset.push({"x":midWidth, "y": window.innerHeight-100});
    var svg = d3.select("body").append("svg")
    	.attr('width', midWidth)
    	.attr('height', midHeight);

var defs = svg.append("defs")

defs.append("marker")
				.attr({
					"id":"arrow",
					"viewBox":"0 -5 10 10",
					"refX":5,
					"refY":0,
					"markerWidth":6,
					"markerHeight":6,
					"orient": "auto",
      		"fill": "#ed4224"
				})
				.append("path")
					.attr("d", "M0,-5L10,0L0,5")
					.attr("class","arrowHead");
    
    var line = d3.svg.line()
      .x(function(d) { return d.x; })
      .y(function(d) { return d.y; })
      .interpolate('basis');
    
    var path = svg.append("path")
				.datum(dataset)
				.attr({
      		"d": line,
					"stroke": "#ed4224",
          "stroke-width": 4,
          "stroke-linecap": "butt",
					"fill": "none"
    		})
    
    var totalLength = path.node().getTotalLength();
    
    path.attr("stroke-dasharray", totalLength + " " + totalLength)
      .attr("stroke-dashoffset", totalLength)
      .transition()
        .duration(400)
        .ease("linear")
        .attr("stroke-dashoffset", 0)
    		.each('end', function(){
      		path.attr("marker-end", "url(#arrow)")
    		});
    
    d3.select('body')
      .append('div')
    	.style({
      	"position": "absolute",
      	"bottom": "1em",
      	"background": "#4b494b",
      	"color": "#fff",
      	"width": "100%",
      	"height": "2em",
      	"text-align": "center",
      	"line-height": 1.7,
      	"text-transform": "uppercase",
      	"font-family": "helvetica neue",
      	"cursor": "pointer",
      	"letter-spacing": 10
    	})
    	.text("⚡️REDRAW⚡️")
      .on('click', function(){
      	location.reload();
    	});
  </script>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js