v0.21.0

Circles

Circles take a center vector and a radius.

import { Mafs, Circle, Coordinates, 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] }}>
      <Coordinates.Cartesian />
      <Circle center={[0, 0]} radius={r} />
      {pointOnCircle.element}
    </Mafs>
  )
}

Props

<Circle ... />
View on GitHub
NameDescriptionDefault
center*
Vector2
β€”
radius*
number
β€”
svgEllipseProps
SVGProps<SVGEllipseElement>
β€”
color
string
β€”
weight
number
β€”
fillOpacity
number
β€”
strokeOpacity
number
β€”
strokeStyle
"solid" | "dashed"
β€”