d3-turtle

Use the arrow keys to move the turtle. Don't get lost!

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
    body.out-of-bounds {
      background: tomato;
    }
    #state {
      background: rgba(255, 255, 255, .8);
      font-family: "Helvetica Neue", sans-serif;
      padding: 5px;
      position: absolute;
    }
    polygon {
      fill: steelblue;
    }
    path.selected {
      fill: green;
    }
  </style>
</head>
<body>
  <table id="state">
    <tr><td>Angle:</td><td id="angle"></td></tr>
    <tr><td>Position: <td id="position"></td></tr>
    <tr><td><input type="checkbox"> Fill path</td></tr>
  </table>
  <script src="https://d3js.org/d3.v5.min.js"></script>
  <script src="https://unpkg.com/geometric@1.0.0/build/geometric.min.js"></script>
  <script src="d3-turtle.js"></script>

var input = d3.select("input");
    input.on("change", _ => {
      d3.select("path").classed("selected", input.property("checked"));
    });
    
    d3.timer(_ => {
      d3.select("#position").text(turtle.position().map(d => Math.round(d)));
      d3.select("#angle").text(turtle.angle());
      d3.select("body").classed("out-of-bounds", !turtle.inBounds());
    });
  </script>
</body>
</html>

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

https://unpkg.com/geometric@1.0.0/build/geometric.min.js