function gear({teeth, radius, annulus}) {
  const n = teeth;
  let r2 = Math.abs(radius);
  let r0 = r2 - toothRadius;
  let r1 = r2 + toothRadius;
  let r3 = holeRadius;
  if (annulus) r3 = r0, r0 = r1, r1 = r3, r3 = r2 + toothRadius * 3;
  const da = Math.PI / n;
  let a0 = -Math.PI / 2 + (annulus ? Math.PI / n : 0);
  const path = ["M", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)];
  let i = -1;
  while (++i < n) { // TODO Template literal.
    path.push(
      "A", r0, ",", r0, " 0 0,1 ", r0 * Math.cos(a0 += da), ",", r0 * Math.sin(a0),
      "L", r2 * Math.cos(a0), ",", r2 * Math.sin(a0),
      "L", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
      "A", r1, ",", r1, " 0 0,1 ", r1 * Math.cos(a0 += da / 3), ",", r1 * Math.sin(a0),
      "L", r2 * Math.cos(a0 += da / 3), ",", r2 * Math.sin(a0),
      "L", r0 * Math.cos(a0), ",", r0 * Math.sin(a0)
    );
  }
  path.push("M0,", -r3, "A", r3, ",", r3, " 0 0,0 0,", r3, "A", r3, ",", r3, " 0 0,0 0,", -r3, "Z");
  return path.join("");
}

var speed = 2,
holeRadius = 10,
toothRadius = 4,
radius = 45

{
  const height = 500;
  const width = 500;
  const x = Math.sin(2 * Math.PI / 3);
  const y = Math.cos(2 * Math.PI / 3);
  const start = Date.now();

  const svg = d3.select('svg').attr('width',width).attr('height',height);

  const frame = svg.append("g")
      .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")
    .append("g");

  const path = frame.selectAll("g")
    .data([
      {fill: "#c6dbef", teeth: 80, radius: -radius * 5, origin: [0, 0], annulus: true},
      {fill: "#6baed6", teeth: 16, radius: radius, origin: [0, 0]},
      {fill: "#9ecae1", teeth: 32, radius: -radius * 2, origin: [0, -radius * 3]},
      {fill: "#9ecae1", teeth: 32, radius: -radius * 2, origin: [-radius * 3 * x, -radius * 3 * y]},
      {fill: "#9ecae1", teeth: 32, radius: -radius * 2, origin: [radius * 3 * x, -radius * 3 * y]}
     ])
    .enter().append("g")
      .attr("transform", d => `translate(${d.origin})`)
    .append("path")
      .attr("stroke", "black")
      .attr("fill", d => d.fill)
      .attr("d", gear);



    var animate = function () { 
         let angle = (Date.now() - start) * speed;
        const transform = d => `rotate(${angle / d.radius})`;
        path.attr("transform", transform);
         requestAnimationFrame(animate)
    }
    requestAnimationFrame(animate)  
}

html 文件

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/favicon.ico">
    <title>d3</title>
    <script src="https://d3js.org/d3.v5.min.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but d3 doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
        <svg></svg>
    </div>
    <!-- built files will be auto injected -->
    <script src="1.js"></script>
  </body>
</html>