SVGの要素を動的に追加する createElementNS

const myCircle = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "circle"
);

myCircle.setAttribute("cx", "100");
myCircle.setAttribute("cy", "100");
myCircle.setAttribute("r", "100");
myCircle.setAttribute("fill", "#ffffff");

const mySvg = document.getElementById("mySvg");
mySvg.appendChild(myCircle);

let hue = 0;
changeColor();

function changeColor() {
  if (hue === 255) {
    hue = 0;
  }
  hue += 1;
  console.log(hue);
  myCircle.style.fill = `rgb(${hue}, 128, 128)`;
  // myCircle.style.fill = `hsl(${hue},10%,10%)`;
  requestAnimationFrame(changeColor);
}