Generative art

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var width = 960;
    var height = 500;
    var svg = d3.select('body').append('svg')
      .attr('width', width)
      .attr('height', height)

var currentPath = 'M100,100 200,100';
    var pos = {x: 200, y: 100};
    var direction = getNewDirection();
    var boundary = {
      top: 0, bottom: height, left: 0, right: width
    }

svg.append('path')
      .attr('class', 'special--line')
      .attr('d', currentPath)
      .attr('stroke', 'purple')
      .attr('fill', 'none')    
      .attr('stroke-width', 1)

function updateLine(){
      direction = getNewDirection(direction);
      pos = getNewLocation(pos, direction);
      currentPath = `${currentPath} ${pos.x},${pos.y}`;

d3.select('.special--line')
        .transition()
        .attr('d', currentPath);
    }

function getNewDirection(current) {
      if (current === 'right') return 'down';
      if (current === 'down') return 'left';
      if (current === 'left') return 'up';
      return 'right';
    }

setInterval(updateLine, 10)
  </script>
</body>

https://d3js.org/d3.v4.min.js