D3 Examples - hilbert filling

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <script src="lsystem.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; 
    background-color: #b7fefd;}
    svg { width: 100%; height: 100%; }
    
  </style>
</head>
​
<body>
  <svg></svg>
  <script>
    var side = 14;
    var revealDuration = 5000;
    var revealOffset = 15;
    var steps = 5;
​
    var hilbertConfig = {
      steps: steps,
      axiom: 'A',
      rules: {
        A: '-BF+AFA+FB-',
        B: '+AF-BFB-FA+'
      }
    }
    var test = LSystem.fractalize(hilbertConfig);
    
    var angle = -Math.PI / 2;
    var testCurve = LSystem.path({
      fractal: test,
      side: side,
      angle: angle,
    })
    
    var testGrid = LSystem.grid({
      fractal: test,
      side: side,
      angle: angle
    })
    
    var color = d3.scale.linear()
      .domain([0, testGrid.length])
      .range(["#65a0ff", "#cc4e00"])
      .interpolate(d3.interpolateHcl)
    
    var path = d3.svg.line()
    .x(function(d) {
      return d.x
    })
    .y(function(d) {
      return d.y
    })
    .interpolate("basis")
    
    
    
    
    var svg = d3.select("svg")
    
    var g = svg.append("g")
    .attr("transform", "translate(260, 20)")
    
    
    
    g.append("path").classed("curvy", true)
    .attr({
      d: path(testGrid),
      fill: "none",
      stroke: "#0e93e1",
      "stroke-width": 12,
      "stroke-linecap": "round"
    })
    var duration = testGrid.length * revealOffset;
    g.append("path").classed("curve", true)
    .attr({
      d: path(testGrid),
      "stroke-dasharray": function() {
        var tracklength = this.getTotalLength();
        return tracklength + " " + tracklength;
      },
      "stroke-dashoffset": function() {
        return this.getTotalLength();
      },
      "stroke": "#b7fefd",
      fill:"#0f3770",
      "stroke-width": 6,
       "stroke-linecap": "round",
    })
    .transition()
      .duration(duration)
      .ease("linear")
      .attrTween("stroke-dashoffset", revealAlong)
​
function revealAlong(d, i, a) {
  var l = this.getTotalLength();
  return function(t) {
    if(t > 1) { t = 1}
    return l * (1-t);
  };
};
​
    
  </script>
</body>
​
    