Animation along an Arc

by Michael Rovinsky

HTML

<svg width="400" height="400">
  <circle cx="200" cy="200" stroke="green" r="160" stroke-width="20" fill="none" />
  <path d="M 286.6,250 A 100,100 0 0 1 113.4,250" fill="none" stroke="gray" stroke-width="5" />
  <circle cx="300" cy="200" stroke="gray" stroke-width="5" r="10" fill="white" transform="rotate(30, 200, 200)" />
  <circle cx="300" cy="200" stroke="gray" stroke-width="5" r="10" fill="white" transform="rotate(150, 200, 200)" />
  <g id="button" transform="translate(200, 200) rotate(60)">
  <circle cx="0" cy="100" stroke="blue" stroke-width="5" r="10" fill="white" cursor="pointer"/>  
  </g>
    
</svg>

JavaScript

const button = d3.select("#button");
let angle = 60;

button.on("click", () => {
	angle = -angle;
  button.transition().duration(1000).attr("transform", `translate(200, 200) rotate(${angle})`);
});