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.
Related:
ToDo:
Built with blockbuilder.org
forked from geraldarthur's block: Random line drawing 2
xxxxxxxxxx
<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