The Line That Draws Itself

A single bezier curve traces its own existence. It does not wait for a hand to guide it — it moves because movement is its nature. Each iteration displaces slightly, never repeating, always the same.

In generative art, the simplest instruction — draw a curve — contains infinite variation. The paradox: the line is predetermined by its control points, yet appears spontaneous in its unfolding.

// The line that draws itself
const path = svg.append("path");
const len = path.getTotalLength();

path.style.strokeDasharray = len;
path.style.strokeDashoffset = len;

path.animate(
  [{ strokeDashoffset: len },
   { strokeDashoffset: 0 }],
  { duration: 4000, fill: "forwards" }
);

Stillness in Motion

One hundred and twenty lines radiate from a single point. Each oscillates at its own frequency. From afar, the form appears static — a frozen starburst. Look closer: it breathes.

The moiré pattern emerges not from any single line but from the interference between all of them. Stillness is an illusion created by overwhelming motion.

// Stillness from interference
for (let i = 0; i < 120; i++) {
  const angle = (i / 120) * Math.PI * 2;
  const freq = 0.5 + (i % 7) * 0.15;
  drawRadialLine(cx, cy, angle, freq);
}

The Shape of Nothing

Scatter points at random. Connect each to its nearest neighbor. The space between defines regions that no point requested — territories drawn by absence.

A Voronoi diagram is a map of influence. Each cell contains all points closer to its seed than to any other. Structure emerges from nothing but proximity.

// Structure from proximity
const seeds = Array.from(
  { length: 40 },
  () => [Math.random() * w, Math.random() * h]
);

const voronoi = d3.Delaunay
  .from(seeds)
  .voronoi([0, 0, w, h]);

Order from Chaos

Begin with noise — pure randomness rendered as scattered points. Apply a single rule: each point drifts toward the nearest spiral arm. Chaos organizes itself through attraction.

The golden spiral is not imposed from above. It emerges because rotation and growth, combined, produce this shape inevitably. Order is not the opposite of chaos — it is chaos with patience.

// Patience reveals pattern
function goldenSpiral(t) {
  const phi = 1.618033988749;
  const r = Math.pow(phi, t / Math.PI);
  return {
    x: r * Math.cos(t),
    y: r * Math.sin(t)
  };
}

The Circle That Is Not

A circle drawn with three points is a triangle. With four, a square. With twelve, a dodecagon. With a thousand? Still not a circle — merely a polygon patient enough to deceive.

The true circle exists only in mathematics, never in pixels. Every rendered curve is a lie told with sufficient conviction. In generative art, we trade truth for beauty at every resolution.

// Approaching the infinite
function polygon(sides, r) {
  return Array.from({ length: sides },
    (_, i) => {
      const a = (i / sides) * Math.PI * 2;
      return `${r*Math.cos(a)},${r*Math.sin(a)}`;
    }).join(" L ");
}