1D Alternating Fold

Folding a 1-dimensional line with alternating creases (mountains and valleys).

// Create random creases in a unit interval [0, 1].
var data = d3.range(d3.randomUniform(7, 12)() | 0).map((d, i, arr) => {
  return d3.randomUniform()();
}).sort((a, b) => a - b).filter((d, i, arr) => {
  // Ensure minimum distance between creases to avoid vertex overlaps.
  return i === 0 || (X(d) - X(arr[i - 1]) > 3 * radius);
});

data = [0].concat(data).concat([1]);

var chain = svg;

// Create nested chain of groups.
for (let i = 0; i < data.length - 1; i++) {
  chain = chain.selectAll("g")
      .data([data[i]])
    .enter().append("g")
      .attr("transform", translate((i > 0 ? X(data[i] - data[i - 1]) : X(data[i])), 0))
      .style("fill", (i % 2 === 0) ? "#FF0000" : "#0000FF")

chain.append("line")
      .attr("x1", 0)
      .attr("y1", 0)
      .attr("y2", 0)
      .attr("x2", X(data[i + 1]) - X(data[i]));

// The endpoints are not creases.
  if (i > 0 && i < data.length - 1) {
    chain.append("circle")
        .attr("cx", 0)
        .attr("cy", 0)
        .attr("r", radius);
  }
}

var stopped = false;
// Keep the segments centered in the viewport.
var timer = d3.timer(function() {
  let bbox = svg.node().getBBox();
  let center = [bbox.x + bbox.width / 2, bbox.y + bbox.height / 2];
  svg.transition()
    .ease(d3.easeLinear)
    .duration(1000) // Provide a little hysteresis.
    .attr("transform", (d, i) => {
      return translate(width / 2 - center[0], height / 2 - center[1]);
    });
  
  if (stopped) timer.stop();
});

// Perform alternating pleated fold.
svg.select("g").selectAll("g")
  .transition()
    // .ease(d3.easeCubicOut)
    .duration(5000)
    .delay((d, i) => 1000 * (data.length - 2 - i))
    .attr("transform", (d, i) => {
      return translate((i > 0 ? X(data[i + 1] - data[i]) : X(data[i + 1])), 0)
           + rotate(180 * ((i % 2 === 0) ? 1 : -1));
    })
    .style("fill", "#000000")
    .on("end", function(d, i) {
      // First crease has finished folding.
      if (i === 1) {
        window.setTimeout(() => { stopped = true; }, 1000);
      }
    });

function translate(x, y) {
  return "translate(" + x + "," + y + ")";
}

function rotate(degrees) {
  return "rotate(" + degrees + ")";
}

</script>

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