Circles

import { Mafs, Circle, CartesianCoordinates, useMovablePoint, vec } from "mafs"

function MovableCircle() {
  const pointOnCircle = useMovablePoint([
    Math.sqrt(2) / 2,
    Math.sqrt(2) / 2,
  ])
  const r = vec.mag(pointOnCircle.point)

  return (
    <Mafs viewBox={{ y: [-2, 2] }}>
      <CartesianCoordinates />
      <Circle center={[0, 0]} radius={r} />
      {pointOnCircle.element}
    </Mafs>
  )
}