v0.18.4

Polygons

Polygons take a number of points and create a closed shape.

import { Mafs, Theme, Polygon, Coordinates, useMovablePoint } from "mafs"

function TrianglePool() {
  const a = [2, 0] as [number, number]
  const b = [-2, 0] as [number, number]
  const c = useMovablePoint([0, 2])

  return (
    <Mafs>
      <Coordinates.Cartesian />
      <Polygon
        points={[[c.x, -c.y], a, b]}
        strokeStyle="dashed"
      />
      <Polygon
        points={[c.point, a, b]}
        color={Theme.blue}
      />
      {c.element}
    </Mafs>
  )
}

Props

<Polygon ... />
View on GitHub
NameDescriptionDefault
svgPolygonProps
SVGProps<SVGPolygonElement>
β€”
points*
Vector2[]
β€”
color
string
β€”
weight
number
β€”
fillOpacity
number
β€”
strokeOpacity
number
β€”
strokeStyle
"solid" | "dashed"
β€”
import { Mafs, Theme, Polyline, Coordinates, useMovablePoint } from "mafs"

function LightningBolt() {
  const a = [-2, -2] as [number, number]
  const b = useMovablePoint([-1, 1])
  const c = useMovablePoint([1, -1])
  const d = [2, 2] as [number, number]

  return (
    <Mafs>
      <Coordinates.Cartesian />
      <Polyline
        points={[a, b.point, c.point, d]}
        color={Theme.blue}
      />
      {b.element}
      {c.element}
    </Mafs>
  )
}

Props

<Polyline ... />
View on GitHub
NameDescriptionDefault
svgPolylineProps
SVGProps<SVGPolylineElement>
β€”
points*
Vector2[]
β€”
color
string
β€”
weight
number
β€”
fillOpacity
number
β€”
strokeOpacity
number
β€”
strokeStyle
"solid" | "dashed"
β€”