Generative art with dashes

forked from jonsadka's block: 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; }
    path {
      animation: dash 2s linear infinite;
    }
    @keyframes dash {
      to {
        stroke-dashoffset: -16;
      }
    }    
  </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)

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

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

dash.fill += 5
      dash.space += 1

d3.select('.special--line')
        .transition()
        .attr('stroke-dasharray', `${dash.fill} ${dash.space}`)
        .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, 60)
  </script>
</body>

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