Vectors | Display | Mafs: React components for interactive math

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, CartesianCoordinates, 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>
      <CartesianCoordinates />
      <Vector tip={vec1} />
      <Vector tail={vec1} tip={vec2} />
      <Vector tail={vec2} tip={vec3} />

      {tip.element}
    </Mafs>
  )
}

Props

<Vector ... />

Name	Description	Default
`tail`	`Vector2`	`[0, 0]`
`tip`	`Vector2`	—
`svgLineProps`	`SVGProps<SVGLineElement>`	`{}`
`color`	`string`	`var(--mafs-fg)`
`opacity`	`number`	`1`
`weight`	`number`	`2`
`style`	`"solid" \| "dashed"`	`solid`