kirjavascript/.block

## .block
height: 1000

## index.html
<!doctype html>
<html class="no-js" lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="x-ua-compatible" content="ie=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="theme-color" content="#000000">
        <script src="//d3js.org/d3.v4.min.js"></script>
    </head>
    <body>
    <script>

var size = {
    x: 40,
    y: 40
};

var len = 25;

var svg = d3.select(document.body)
    .append('svg')
    .attr('width', size.x*len)
    .attr('height', size.y*len);

var visited = [{ x: 0, y: 0 }];
var stack = [{ x: 0, y: 0 }];
var currentPos = { x: 0, y: 0 };
var delay = 25;
var rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([0, (size.x * size.y)/3]);

var loop = setInterval(function() {

    var nextPos = getNextPosition(currentPos);

    while (!nextPos && stack.length) {
        currentPos = stack.pop();
        nextPos = getNextPosition(currentPos);
    }

    if (!nextPos) {
        clearInterval(loop);
    }
    else {
        svg.append('line')
            .style('stroke', rainbow(stack.length))
            .style('stroke-width', '5')
            .style('stroke-linecap', 'round')
            .attr('x1', (currentPos.x*len)+(len/2))
            .attr('y1', (currentPos.y*len)+(len/2))
            .attr('x2', (currentPos.x*len)+(len/2))
            .attr('y2', (currentPos.y*len)+(len/2))
            .transition()
            .duration(delay)
            .attr('x2', (nextPos.x*len)+(len/2))
            .attr('y2', (nextPos.y*len)+(len/2))

        currentPos = nextPos;

        stack.push(currentPos);
        visited.push(currentPos);
    }

}, delay);

function checkValidPosition(pos) {

    var inBounds = pos.x >= 0 && pos.y >= 0 && pos.x < size.x && pos.y < size.y;
    var notVisited = visited.findIndex(datum => {
        return datum.x == pos.x && datum.y == pos.y;
    }) == -1;

    return inBounds && notVisited;
}

function getNextPosition(currentPos) {

    var valid = [

        {x:currentPos.x+1,y:currentPos.y},
        {x:currentPos.x-1,y:currentPos.y},
        {x:currentPos.x,y:currentPos.y+1},
        {x:currentPos.x,y:currentPos.y-1},

    ].filter(checkValidPosition);

    if (!valid.length) {
        return false;
    }
    else {
        return valid[((Math.random()*valid.length)|0)];
    }

}
</script>
    </body>
</html>
	<!doctype html>
	<html class="no-js" lang="en">
	<head>
	<meta charset="utf-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<title></title>
	<meta name="description" content="">
	<meta name="theme-color" content="#000000">
	<script src="//d3js.org/d3.v4.min.js"></script>
	</head>
	<body>
	<script>

	var size = {
	x: 40,
	y: 40
	};

	var len = 25;

	var svg = d3.select(document.body)
	.append('svg')
	.attr('width', size.x*len)
	.attr('height', size.y*len);

	var visited = [{ x: 0, y: 0 }];
	var stack = [{ x: 0, y: 0 }];
	var currentPos = { x: 0, y: 0 };
	var delay = 25;
	var rainbow = d3.scaleSequential(d3.interpolateRainbow).domain([0, (size.x * size.y)/3]);

	var loop = setInterval(function() {

	var nextPos = getNextPosition(currentPos);

	while (!nextPos && stack.length) {
	currentPos = stack.pop();
	nextPos = getNextPosition(currentPos);
	}

	if (!nextPos) {
	clearInterval(loop);
	}
	else {
	svg.append('line')
	.style('stroke', rainbow(stack.length))
	.style('stroke-width', '5')
	.style('stroke-linecap', 'round')
	.attr('x1', (currentPos.x*len)+(len/2))
	.attr('y1', (currentPos.y*len)+(len/2))
	.attr('x2', (currentPos.x*len)+(len/2))
	.attr('y2', (currentPos.y*len)+(len/2))
	.transition()
	.duration(delay)
	.attr('x2', (nextPos.x*len)+(len/2))
	.attr('y2', (nextPos.y*len)+(len/2))

	currentPos = nextPos;

	stack.push(currentPos);
	visited.push(currentPos);
	}

	}, delay);

	function checkValidPosition(pos) {

	var inBounds = pos.x >= 0 && pos.y >= 0 && pos.x < size.x && pos.y < size.y;
	var notVisited = visited.findIndex(datum => {
	return datum.x == pos.x && datum.y == pos.y;
	}) == -1;

	return inBounds && notVisited;
	}

	function getNextPosition(currentPos) {

	var valid = [

	{x:currentPos.x+1,y:currentPos.y},
	{x:currentPos.x-1,y:currentPos.y},
	{x:currentPos.x,y:currentPos.y+1},
	{x:currentPos.x,y:currentPos.y-1},

	].filter(checkValidPosition);

	if (!valid.length) {
	return false;
	}
	else {
	return valid[((Math.random()*valid.length)\|0)];
	}

	}
	</script>
	</body>
	</html>