Vectors

Vectors are a handy line-and-arrow shape for visualizing direction and magnitude.

Mafs ships with a small selection of common linear algebra functions (for both vectors and matrices), exposing them as vec. Those utilities are used extensively here.

import { Mafs, Coordinates, useMovablePoint, Vector, vec } from "mafs" function VectorExample() { const tip = useMovablePoint([0.4, 0.6]) const vec1 = tip.point const angle = Math.atan2(tip.y, tip.x) const vec2 = vec.add(vec1, vec.rotate(vec1, angle)) const vec3 = vec.add(vec1, vec.rotate(vec2, -2 * angle)) return ( <Mafs> <Coordinates.Cartesian /> <Vector tip={vec1} /> <Vector tail={vec1} tip={vec2} /> <Vector tail={vec2} tip={vec3} /> {tip.element} </Mafs> ) }

Props

<Vector ... />
NameDescriptionDefault
tail
Vector2
[0, 0]
tip
Vector2
svgLineProps
SVGProps<SVGLineElement>
{}
color
string
var(--mafs-fg)
opacity
number
1
weight
number
2
style
"solid" | "dashed"
solid