I first discovered this effect on Instagram. I was thrilled to implement it myself! I began with Dan's tutorial. Then I wondered if I could draw multiple waves simultaneously!

Finally, I progressively add circles to the canvas, causing the waves to gradually form beautiful curved stripes!

iShot_2025-02-19_14.05.19.mp4

During this process, I abandoned Charming's fine-grained reactivity for animation and interaction. The main reason was the frustration of deciding which variables should be normal state values. While this approach works well for frontend development due to simple data-view relationships, I opted to use virtual DOM for incremental updates instead. Since the scene tree is relatively flat, performance isn't a major concern for the diff algorithm.

const step = 0.02;
const startR = 75;
const height = startR * 5;
const startX = 250;
const startY = height / 2;
const curveX = startX + startR * 2;
const paths = Array.from({ length: count }, () => []);
const color = d3.scaleLinear([0, count], [1, 0]);
const strokeWidth = d3.scaleLinear([0, count], [5, 1.5]);
const strokeOpacity = d3.scaleLinear([0, count], [0.7, 1]);
const shared = {
  stroke: (d, i) => d3.interpolatePuRd(color(i)),
  "stroke-width": (d, i) => strokeWidth(i),
  "stroke-opacity": (d, i) => strokeOpacity(i)
};

let time = -0.1;
while (true) {
  time += step;
  const links = [];
  const circles = [];
  const points = [];

  let px = startX;
  let py = startY;
  const max = Math.min(count, ((time / (Math.PI * 2)) | 0) + 1);
  for (let i = 0; i < max; i++) {
    const n = i * 2 + 1;
    const radius = startR * (4 / (n * Math.PI));
    const x = px + radius * Math.cos(n * time);
    const y = py + radius * Math.sin(n * time);
    links.push({ x1: px, y1: py, x2: x, y2: y });
    circles.push({ x: px, y: py, r: radius });
    points.push([x, y]);
    paths[i].unshift(y);
    px = x;
    py = y;
  }

  for (const Y of paths) if (Y.length > width) Y.pop();

  yield SVG.svg({
    width,
    height,
    style: "background:black",
    stroke: "white",
    "stroke-width": 1.5,
    children: [
      SVG.circle(circles, {
        cx: (d) => d.x,
        cy: (d) => d.y,
        r: (d) => d.r,
        ...shared
      }),
      SVG.line(links, {
        x1: (d) => d.x1,
        y1: (d) => d.y1,
        x2: (d) => d.x2,
        y2: (d) => d.y2,
        ...shared
      }),
      SVG.path(paths, {
        d: (Y) =>
          d3
            .line()
            .x((d, i) => curveX + i)
            .y((d) => d)(Y),
        fill: "none",
        ...shared
      }),
      SVG.line(points, {
        x1: (d) => d[0],
        y1: (d) => d[1],
        x2: curveX,
        y2: (d) => d[1],
        ...shared
      })
    ]
  });
}