Vectors & Vector Fields

<Vector> draws a single arrow between two points in math coordinates, while <VectorField> visualizes a two-dimensional field of arrows defined by a function.

0.00s / 2.97s · F0

Vector Props

Prop	Type	Default	Description
`from`	`[number, number]`	`[0, 0]`	Start point in math coordinates
`to`	`[number, number]`	—	End point in math coordinates
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the coordinate origin
`scale`	`number`	`40`	Pixels per unit
`color`	`string`	`'currentColor'`	Arrow color
`strokeWidth`	`number`	`2`	Stroke width
`label`	`string`	`undefined`	Text label rendered near the arrow
`labelOffset`	`[number, number]`	`[0, -10]`	Pixel offset for the label

VectorField Props

Prop	Type	Default	Description
`fn`	`(x: number, y: number) => [number, number]`	—	Function mapping each point to a direction
`domain`	`[number, number]`	`[-5, 5]`	x-range of the field
`range`	`[number, number]`	`[-5, 5]`	y-range of the field
`origin`	`[number, number]`	`[200, 200]`	Pixel position of the coordinate origin
`scale`	`number`	`40`	Pixels per unit
`color`	`string`	`'#4f46e5'`	Arrow color
`arrowScale`	`number`	`1`	Multiplier for arrow length
`normalize`	`boolean`	`false`	Normalize all arrows to the same length
`spacing`	`number`	`1`	Grid spacing between arrows in math units

Code Example

elements: {
  axes: {
    id: 'axes',
    type: 'axes',
    props: { type: 'axes', origin: [250, 200], xRange: [-4, 4], yRange: [-3, 3], scale: 50, color: '$foreground', labelColor: '$foreground' },
  },
  vector: {
    id: 'vector',
    type: 'vector',
    props: { type: 'vector', from: [0, 0], to: [3, 2], origin: [250, 200], scale: 50, color: '$accent', strokeWidth: 2.5, label: 'v' },
  },
}