Old school D3 from simpler times

All examples By author By category About

enjalot

Full window Github gist

hilbert filling

LSystem code lifted from this block by nitaku who has many fascinating d3 experiments

Built with blockbuilder.org

forked from enjalot's block: hilbert grid

forked from enjalot's block: hilbert grid marching

forked from enjalot's block: hilbert filling

<!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>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js