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 ... />
NameDescriptionDefault
center
Vector2
β€”
radius
number
β€”
svgEllipseProps
SVGProps<SVGEllipseElement>
β€”
color
string
β€”
weight
number
β€”
fillOpacity
number
β€”
strokeOpacity
number
β€”
strokeStyle
"solid" | "dashed"
β€”