|
<!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> |
