Angular Motion

main.js

rgb.js

const SVG = cm.SVG;
const width = 640;
const height = 240;

let rotation = 0;
let angleVelocity = 0;
let angleAcceleration = 0.001;

const app = cm.render({
  width,
  height,
  viewBox: [-width / 2, -height / 2, width, height],
  loop: true,
  draw: () => {
    angleVelocity += angleAcceleration;
    rotation += angleVelocity;
    return [
      SVG.g({
        transform: `rotate(${rotation})`,
        strokeWidth: 2,
        stroke: rgb(0),
        children: [
          SVG.line({x1: -60, y1: 0, x2: 60, y2: 0, stroke: "black"}),
          SVG.circle({cx: -60, cy: 0, r: 10, fill: rgb(127)}),
          SVG.circle({cx: 60, cy: 0, r: 10, fill: rgb(127)}),
        ],
      }),
    ];
  },
});

document.getElementById("root").append(app.node());

function rgb(n) {
  return `rgb(${n}, ${n}, ${n})`;
}