Polygons ​

<script setup lang="ts">
import { Mafs, Cartesian, Polygon, MovablePoint, useMovablePoint, Theme, vec } from 'mafs-vue'

const a:vec.Vector2 = [2, 0]
const b:vec.Vector2 = [-2, 0]
const c = useMovablePoint([0, 2])
</script>

<template>
    <Mafs :height="300">
        <Cartesian />
        <Polygon :points="[[c.point[0], -c.point[1]], a, b]" :filled="{ strokeStyle: 'dashed' }" />
        <Polygon :points="[c.point, a, b]" :filled="{ color: Theme.blue }" />
        <MovablePoint :ctx="c" />
    </Mafs>
</template>

<script setup lang="ts">
import { Mafs, Cartesian, Polyline, MovablePoint, useMovablePoint, Theme, vec } from 'mafs-vue'

const a: vec.Vector2 = [-2, -2]
const b = useMovablePoint([-1, 1])
const c = useMovablePoint([1, -1])
const d: vec.Vector2 = [2, 2]
</script>

<template>
    <Mafs :height="300">
        <Cartesian />
        <Polyline :points="[a, b.point, c.point, d]" :filled="{ color: Theme.blue }" />
        <MovablePoint :ctx="b" />
        <MovablePoint :ctx="c" />
    </Mafs>
</template>