Polygons

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>
  )
}

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>
  )
}