diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
index c74ea70..cb6ba2a 100644
--- a/.github/FUNDING.yml
+++ b/.github/FUNDING.yml
@@ -1,3 +1,3 @@
 # These are supported funding model platforms
 
-github: ksassnowski
\ No newline at end of file
+github: ksassnowski
diff --git a/.github/workflows/commitlint.yml b/.github/workflows/commitlint.yml
index 4bd14c2..ff9fc59 100644
--- a/.github/workflows/commitlint.yml
+++ b/.github/workflows/commitlint.yml
@@ -8,4 +8,4 @@ jobs:
       - uses: actions/checkout@v4
         with:
           fetch-depth: 0
-      - uses: wagoid/commitlint-github-action@v5
\ No newline at end of file
+      - uses: wagoid/commitlint-github-action@v5
diff --git a/.github/workflows/release-please.yml b/.github/workflows/release-please.yml
index d0d463a..d380a76 100644
--- a/.github/workflows/release-please.yml
+++ b/.github/workflows/release-please.yml
@@ -25,4 +25,4 @@ jobs:
       - run: npm publish
         env:
           NPM_TOKEN: ${{secrets.NPM_TOKEN}}
-        if: ${{ steps.release.outputs.release_created }}
\ No newline at end of file
+        if: ${{ steps.release.outputs.release_created }}
diff --git a/.github/workflows/run-tests.yml b/.github/workflows/run-tests.yml
index 643fbc5..84c4327 100644
--- a/.github/workflows/run-tests.yml
+++ b/.github/workflows/run-tests.yml
@@ -13,4 +13,4 @@ jobs:
       - name: Install dependencies
         run: bun install
       - name: Run tests
-        run: bun test
\ No newline at end of file
+        run: bun test
diff --git a/.prettierrc b/.prettierrc
new file mode 100644
index 0000000..0967ef4
--- /dev/null
+++ b/.prettierrc
@@ -0,0 +1 @@
+{}
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 05051ed..9f597a9 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,86 +11,74 @@
 
 ## [1.1.1](https://github.com/ksassnowski/vueclid/compare/v1.1.0...v1.1.1) (2024-02-22)
 
-
 ### Bug Fixes
 
-* remove small gaps in function plot ([a960411](https://github.com/ksassnowski/vueclid/commit/a9604111d64c306f840769b8dc18617274796566))
-* scale arrow correctly for short vectors ([635e936](https://github.com/ksassnowski/vueclid/commit/635e936ac8c83869ee502d9b97a777846bb72a96))
+- remove small gaps in function plot ([a960411](https://github.com/ksassnowski/vueclid/commit/a9604111d64c306f840769b8dc18617274796566))
+- scale arrow correctly for short vectors ([635e936](https://github.com/ksassnowski/vueclid/commit/635e936ac8c83869ee502d9b97a777846bb72a96))
 
 ## [1.1.0](https://github.com/ksassnowski/vueclid/compare/v1.0.2...v1.1.0) (2024-01-30)
 
-
 ### Features
 
-* add rotation parameter to ellipse ([fa1bb9d](https://github.com/ksassnowski/vueclid/commit/fa1bb9ddba99b01991708d564052fb3872ed98a3))
+- add rotation parameter to ellipse ([fa1bb9d](https://github.com/ksassnowski/vueclid/commit/fa1bb9ddba99b01991708d564052fb3872ed98a3))
 
 ## [1.0.2](https://github.com/ksassnowski/vueclid/compare/v1.0.1...v1.0.2) (2024-01-30)
 
-
 ### Bug Fixes
 
-* fix typescript type declarations (maybe) ([11eeec4](https://github.com/ksassnowski/vueclid/commit/11eeec4badf01098ff2326eb4f6c1334805980f9))
+- fix typescript type declarations (maybe) ([11eeec4](https://github.com/ksassnowski/vueclid/commit/11eeec4badf01098ff2326eb4f6c1334805980f9))
 
 ## [1.0.1](https://github.com/ksassnowski/vueclid/compare/v1.0.0...v1.0.1) (2024-01-30)
 
-
 ### Bug Fixes
 
-* point typescript to correct declaration file ([641877e](https://github.com/ksassnowski/vueclid/commit/641877e6aa351bb6b5fe99d2ae8b955e1f0212a3))
+- point typescript to correct declaration file ([641877e](https://github.com/ksassnowski/vueclid/commit/641877e6aa351bb6b5fe99d2ae8b955e1f0212a3))
 
 ## [1.0.0](https://github.com/ksassnowski/vueclid/compare/v0.1.0...v1.0.0) (2024-01-30)
 
-
 ### Features
 
-* allow vector to be constructed from a single value ([f07be5f](https://github.com/ksassnowski/vueclid/commit/f07be5f1a05aa8fcf4980e5310a7d44adfd06510))
-
+- allow vector to be constructed from a single value ([f07be5f](https://github.com/ksassnowski/vueclid/commit/f07be5f1a05aa8fcf4980e5310a7d44adfd06510))
 
 ### Miscellaneous Chores
 
-* release 1.0.0 ([e0f73bf](https://github.com/ksassnowski/vueclid/commit/e0f73bfc2243ac8f5b889a2d7ba3f3eff12575c2))
+- release 1.0.0 ([e0f73bf](https://github.com/ksassnowski/vueclid/commit/e0f73bfc2243ac8f5b889a2d7ba3f3eff12575c2))
 
 ## [0.1.0](https://github.com/ksassnowski/vueclid/compare/v0.0.7...v0.1.0) (2024-01-30)
 
-
 ### Features
 
-* add configuration function ([#21](https://github.com/ksassnowski/vueclid/issues/21)) ([aa5d554](https://github.com/ksassnowski/vueclid/commit/aa5d5546e91867d4a86ce40d4723a9b89aa3b02b))
-* make diagrams responsive ([#20](https://github.com/ksassnowski/vueclid/issues/20)) ([2b96c7c](https://github.com/ksassnowski/vueclid/commit/2b96c7c2d0e7149547de8c87ab4c6dfaec0ac331))
-* make setColors reactive ([9a0275e](https://github.com/ksassnowski/vueclid/commit/9a0275e0cd54aeff541c972f0914e57cd87b8855))
+- add configuration function ([#21](https://github.com/ksassnowski/vueclid/issues/21)) ([aa5d554](https://github.com/ksassnowski/vueclid/commit/aa5d5546e91867d4a86ce40d4723a9b89aa3b02b))
+- make diagrams responsive ([#20](https://github.com/ksassnowski/vueclid/issues/20)) ([2b96c7c](https://github.com/ksassnowski/vueclid/commit/2b96c7c2d0e7149547de8c87ab4c6dfaec0ac331))
+- make setColors reactive ([9a0275e](https://github.com/ksassnowski/vueclid/commit/9a0275e0cd54aeff541c972f0914e57cd87b8855))
 
 ## [0.0.7](https://github.com/ksassnowski/vueclid/compare/v0.0.6...v0.0.7) (2024-01-29)
 
-
 ### Bug Fixes
 
-* remove path alias ([acea770](https://github.com/ksassnowski/vueclid/commit/acea770ea5a54772299f4a8e0aee885bbe1574eb))
+- remove path alias ([acea770](https://github.com/ksassnowski/vueclid/commit/acea770ea5a54772299f4a8e0aee885bbe1574eb))
 
 ## [0.0.6](https://github.com/ksassnowski/vueclid/compare/v0.0.5...v0.0.6) (2024-01-29)
 
-
 ### Bug Fixes
 
-* export component types properly ([07deefe](https://github.com/ksassnowski/vueclid/commit/07deefe8f0c648a230ad3a1a0d7a6625e4e73b64))
+- export component types properly ([07deefe](https://github.com/ksassnowski/vueclid/commit/07deefe8f0c648a230ad3a1a0d7a6625e4e73b64))
 
 ## [0.0.5](https://github.com/ksassnowski/vueclid/compare/v0.0.4...v0.0.5) (2024-01-29)
 
-
 ### Bug Fixes
 
-* use correct name for type declarations file ([d688f8a](https://github.com/ksassnowski/vueclid/commit/d688f8af70a0f6677b3bdfcb2158956c822138b3))
+- use correct name for type declarations file ([d688f8a](https://github.com/ksassnowski/vueclid/commit/d688f8af70a0f6677b3bdfcb2158956c822138b3))
 
 ## [0.0.4](https://github.com/ksassnowski/vueclid/compare/v0.0.3...v0.0.4) (2024-01-29)
 
-
 ### Bug Fixes
 
-* generate type declaration file in correct location ([f7fb5b2](https://github.com/ksassnowski/vueclid/commit/f7fb5b2b81962a4e92e16759dc76598329accf02))
-
+- generate type declaration file in correct location ([f7fb5b2](https://github.com/ksassnowski/vueclid/commit/f7fb5b2b81962a4e92e16759dc76598329accf02))
 
 ### Miscellaneous Chores
 
-* release 0.0.3 ([e2733bb](https://github.com/ksassnowski/vueclid/commit/e2733bbf7c66d3b0288b1f2ce039369d94aa7da6))
-* release 0.0.4 ([0c4cc7a](https://github.com/ksassnowski/vueclid/commit/0c4cc7a74482e675bc2d590edbe99023db6ea72e))
+- release 0.0.3 ([e2733bb](https://github.com/ksassnowski/vueclid/commit/e2733bbf7c66d3b0288b1f2ce039369d94aa7da6))
+- release 0.0.4 ([0c4cc7a](https://github.com/ksassnowski/vueclid/commit/0c4cc7a74482e675bc2d590edbe99023db6ea72e))
 
 ## Changelog
diff --git a/bun.lockb b/bun.lockb
index 4396b7f..c405dbe 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/bunfig.toml b/bunfig.toml
new file mode 100644
index 0000000..083d96e
--- /dev/null
+++ b/bunfig.toml
@@ -0,0 +1,2 @@
+[test]
+preload = "./tests/setup.ts"
\ No newline at end of file
diff --git a/package.json b/package.json
index 29c1b1f..20fc19b 100644
--- a/package.json
+++ b/package.json
@@ -23,12 +23,13 @@
     "build": "vite build && vue-tsc --emitDeclarationOnly"
   },
   "devDependencies": {
+    "@happy-dom/global-registrator": "^13.4.1",
     "@types/node": "^20.11.5",
     "@vitejs/plugin-vue": "^4.5.2",
-    "vue": "^3.3.11",
     "prettier": "^3.2.4",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
+    "vue": "^3.3.11",
     "vue-tsc": "^1.8.25"
   }
 }
diff --git a/src/components/Angle.vue b/src/components/Angle.vue
index ff9828e..d5f5921 100644
--- a/src/components/Angle.vue
+++ b/src/components/Angle.vue
@@ -1,5 +1,5 @@
 <template>
-  <g>
+  <g v-bind="$attrs">
     <path
       v-if="fill"
       :d="`M ${scaledB.x} ${scaledB.y} L ${start.x} ${start.y} A ${scaledRadius} ${scaledRadius} 0 ${sweep} 0 ${end.x} ${end.y}`"
@@ -32,8 +32,9 @@ import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useGraphContext } from "../composables/useGraphContext.ts";
 import { Color } from "../types.ts";
 import { useColors } from "../composables/useColors.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { pointInsideSector } from "../utils/geometry.ts";
 import Label from "./Label.vue";
-import { TAU } from "../utils/constants.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -57,11 +58,15 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) =>
+  pointInsideSector(a.value, b.value, c.value, props.radius, point),
+);
 
 const a = computed(() => Vector2.wrap(props.a));
 const b = computed(() => Vector2.wrap(props.b));
@@ -73,25 +78,15 @@ const sweep = computed(() => {
     c.value.x * (a.value.y - b.value.y);
   return orientation > 0 ? 1 : 0;
 });
-const scaledB = computed(() =>
-  b.value.mul(new Vector2(1, -1)).mul(scale.value).add(offset.value),
-);
-const scaledRadius = computed(() => props.radius * scale.value.x);
+const scaledB = computed(() => b.value.transform(matrix.value));
+const scaledRadius = computed(() => props.radius * matrix.value.a);
 const start = computed(() => {
-  const direction = a.value.sub(b.value).normalized().mul(new Vector2(1, -1));
-  return b.value
-    .mul(new Vector2(1, -1))
-    .add(direction.scale(props.radius))
-    .mul(scale.value)
-    .add(offset.value);
+  const direction = a.value.sub(b.value).normalized();
+  return b.value.add(direction.scale(props.radius)).transform(matrix.value);
 });
 const end = computed(() => {
-  const direction = c.value.sub(b.value).normalized().mul(new Vector2(1, -1));
-  return b.value
-    .mul(new Vector2(1, -1))
-    .add(direction.scale(props.radius))
-    .mul(scale.value)
-    .add(offset.value);
+  const direction = c.value.sub(b.value).normalized();
+  return b.value.add(direction.scale(props.radius)).transform(matrix.value);
 });
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
@@ -99,13 +94,10 @@ const dashArray = computed(() =>
 const labelPosition = computed(() => {
   const bToA = a.value.sub(b.value);
   const bToC = c.value.sub(b.value);
-  const dot = bToA.dot(bToC);
-  const det = bToA.x * bToC.y - bToA.y * bToC.x;
-  const angle = (Math.atan2(det, dot) + TAU) % TAU;
   return bToA
     .normalized()
     .scale(props.radius)
-    .rotate(angle / 2)
+    .rotate(bToA.clockwiseAngleTo(bToC) / 2)
     .add(b.value);
 });
 </script>
diff --git a/src/components/Arc.vue b/src/components/Arc.vue
index bbbeb13..887f0bb 100644
--- a/src/components/Arc.vue
+++ b/src/components/Arc.vue
@@ -1,5 +1,6 @@
 <template>
   <Angle
+    v-bind="$attrs"
     :a="a"
     :b="position"
     :c="c"
@@ -15,10 +16,12 @@
 <script setup lang="ts">
 import { computed } from "vue";
 
-import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { DEG2RAD } from "../utils/constants.ts";
 import Angle from "../components/Angle.vue";
 import { useColors } from "../composables/useColors.ts";
+import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
+import { usePointerIntersection } from "../composables/usePointerIntersection.ts";
+import { distanceToArc } from "../utils/geometry.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -32,6 +35,7 @@ const props = withDefaults(
     radians?: boolean;
     label?: string;
     labelSize?: "small" | "normal" | "large";
+    highlightThreshold?: number;
   }>(),
   {
     from: 0,
@@ -41,11 +45,26 @@ const props = withDefaults(
     lineWidth: 1.25,
     radians: false,
     labelSize: "small",
+    highlightThreshold: 0.25,
   },
 );
 
 const { colors } = useColors();
 const color = computed(() => props.color ?? colors.value.stroke);
+const active = defineModel("active", { default: false });
+usePointerIntersection(active, (point) => {
+  const fromAngle = props.radians ? props.from : props.from * DEG2RAD;
+  const toAngle = props.radians ? props.to : props.to * DEG2RAD;
+  return (
+    distanceToArc(
+      Vector2.wrap(props.position),
+      fromAngle,
+      toAngle,
+      props.radius,
+      point,
+    ) <= props.highlightThreshold
+  );
+});
 
 const position = computed(() => Vector2.wrap(props.position));
 const a = computed(() => {
diff --git a/src/components/Circle.vue b/src/components/Circle.vue
index 6d57cf8..3770972 100644
--- a/src/components/Circle.vue
+++ b/src/components/Circle.vue
@@ -1,5 +1,6 @@
 <template>
   <circle
+    v-bind="$attrs"
     :cx="position.x"
     :cy="position.y"
     :r="scaledRadius"
@@ -34,19 +35,16 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
 
 const position = computed(() =>
-  new Vector2(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  new Vector2(props.position).transform(matrix.value),
 );
-const scaledRadius = computed(() => props.radius * scale.value.x);
+const scaledRadius = computed(() => props.radius * matrix.value.a);
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
 );
diff --git a/src/components/Ellipse.vue b/src/components/Ellipse.vue
index cb46e1e..39fd272 100644
--- a/src/components/Ellipse.vue
+++ b/src/components/Ellipse.vue
@@ -41,19 +41,18 @@ const props = withDefaults(
   },
 );
 
-const { offset, scale, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
 const fill = parseColor(toRef(props, "fill"));
 
 const position = computed(() =>
-  new Vector2(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  new Vector2(props.position).transform(matrix.value),
+);
+const scaledRadius = computed(() =>
+  new Vector2(props.radius).mul([matrix.value.a, Math.abs(matrix.value.d)]),
 );
-const scaledRadius = computed(() => new Vector2(props.radius).mul(scale.value));
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
 );
diff --git a/src/components/Graph.vue b/src/components/Graph.vue
index a6ed335..ab20068 100644
--- a/src/components/Graph.vue
+++ b/src/components/Graph.vue
@@ -120,6 +120,7 @@ import { computed, onMounted, provide, ref } from "vue";
 import { graphContext } from "../types.ts";
 import { PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import { useColors } from "../composables/useColors.ts";
+import { Matrix2D } from "../utils/Matrix2D.ts";
 
 const props = withDefaults(
   defineProps<{
@@ -181,6 +182,13 @@ const size = computed(() => {
 });
 const invScale = computed(() => Math.max(1, props.width / size.value.x));
 
+const matrixWorld = computed(() => {
+  const matrix = new Matrix2D();
+  matrix.translate([offset.value.x, offset.value.y]);
+  matrix.scale([scale.value.x, -scale.value.y]);
+  return matrix;
+});
+
 const context = {
   size,
   scale,
@@ -188,6 +196,7 @@ const context = {
   offset,
   domain,
   invScale,
+  matrix: matrixWorld,
 };
 
 provide(graphContext, context);
diff --git a/src/components/Label.vue b/src/components/Label.vue
index 6f3b920..7286291 100644
--- a/src/components/Label.vue
+++ b/src/components/Label.vue
@@ -2,10 +2,10 @@
   <g :transform="`rotate(${-rotation}, ${position.x}, ${position.y})`">
     <rect
       v-if="border"
-      :x="position.x - boxWidth / 2"
-      :y="position.y - boxHeight / 2 - 0.5"
-      :width="boxWidth"
-      :height="boxHeight"
+      :x="position.x - scaledBoxWidth / 2"
+      :y="position.y - scaledBoxHeight / 2 - 0.5"
+      :width="scaledBoxWidth"
+      :height="scaledBoxHeight"
       :fill="colors.labelBackground"
       :stroke="color"
       stroke-width="1.5"
@@ -59,26 +59,24 @@ const sizes = {
   large: 12,
 };
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { colors, parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
 
 const position = computed(() =>
-  new Vector2(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  Vector2.wrap(props.position).transform(matrix.value),
 );
-const boxWidth = computed(
-  () =>
-    Math.max(
-      (props.text.length + 1) * sizes[props.size],
-      sizes[props.size] * 2.5,
-    ) * invScale.value,
+const boxWidth = computed(() =>
+  Math.max(
+    (props.text.length + 1) * sizes[props.size],
+    sizes[props.size] * 2.5,
+  ),
 );
-const boxHeight = computed(
-  () => Math.min(sizes[props.size] * 3, boxWidth.value) * invScale.value,
+const scaledBoxWidth = computed(() => boxWidth.value * invScale.value);
+const boxHeight = computed(() =>
+  Math.min(sizes[props.size] * 3, boxWidth.value),
 );
+const scaledBoxHeight = computed(() => boxHeight.value * invScale.value);
 const fontSize = computed(() => fontSizes[props.size] * invScale.value);
 </script>
diff --git a/src/components/Line.vue b/src/components/Line.vue
index 46ba772..3e7f925 100644
--- a/src/components/Line.vue
+++ b/src/components/Line.vue
@@ -50,7 +50,7 @@ if (props.to === undefined && props.slope === undefined) {
   throw new Error("Line requires either a `to` prop or a `slope` prop");
 }
 
-const { domain, scale, offset, invScale } = useGraphContext();
+const { domain, matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
@@ -61,52 +61,32 @@ function clamp(x: number, min: number, max: number) {
 
 const from = computed(() => {
   if (props.from) {
-    return new Vector2(props.from)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value);
+    return new Vector2(props.from).transform(matrix.value);
   }
 
   if (props.to) {
-    return new Vector2(0, 0)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value);
+    return new Vector2(0, 0).transform(matrix.value);
   }
 
   let x = (domain.value.y.x - props.yIntercept) / props.slope!;
   x = clamp(x, domain.value.x.x, domain.value.x.y);
   const y = props.slope! * x + props.yIntercept;
-  return new Vector2(x, y)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value);
+  return new Vector2(x, y).transform(matrix.value);
 });
 const to = computed(() => {
   if (props.to) {
-    return new Vector2(props.to)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value);
+    return new Vector2(props.to).transform(matrix.value);
   }
 
   let x = (domain.value.y.y - props.yIntercept) / props.slope!;
   x = clamp(x, domain.value.x.x, domain.value.x.y);
   const y = props.slope! * x + props.yIntercept;
-  return new Vector2(x, y)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value);
+  return new Vector2(x, y).transform(matrix.value);
 });
 const labelPosition = computed(() => {
-  const localSpaceFrom = from.value
-    .sub(offset.value)
-    .div(scale.value)
-    .mul(new Vector2(1, -1));
-  const localSpaceTo = to.value
-    .sub(offset.value)
-    .div(scale.value)
-    .mul(new Vector2(1, -1));
+  const worldToLocal = matrix.value.inverse;
+  const localSpaceFrom = from.value.transform(worldToLocal);
+  const localSpaceTo = to.value.transform(worldToLocal);
   const diff = localSpaceTo.sub(localSpaceFrom);
   return localSpaceFrom.add(diff.normalized().scale(diff.length() / 2));
 });
diff --git a/src/components/Point.vue b/src/components/Point.vue
index b655812..f5eff1e 100644
--- a/src/components/Point.vue
+++ b/src/components/Point.vue
@@ -47,35 +47,33 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 const color = parseColor(toRef(props, "color"), "points");
 
 const padding = 25;
 const position = computed(() => new Vector2(props.position));
-const scaledPosition = computed(() =>
-  position.value.mul(new Vector2(1, -1)).mul(scale.value).add(offset.value),
-);
+const scaledPosition = computed(() => position.value.transform(matrix.value));
 const labelPosition = computed(() => {
   switch (props.labelPosition) {
     case "top":
       return new Vector2(
         position.value.x,
-        position.value.y + padding / scale.value.y,
+        position.value.y + padding / matrix.value.d,
       );
     case "bottom":
       return new Vector2(
         position.value.x,
-        position.value.y - padding / scale.value.y,
+        position.value.y - padding / matrix.value.d,
       );
     case "left":
       return new Vector2(
-        position.value.x - padding / scale.value.x,
+        position.value.x - padding / matrix.value.a,
         position.value.y,
       );
     case "right":
       return new Vector2(
-        position.value.x + padding / scale.value.x,
+        position.value.x + padding / matrix.value.a,
         position.value.y,
       );
   }
diff --git a/src/components/PolyLine.vue b/src/components/PolyLine.vue
index bc436fb..a4535a3 100644
--- a/src/components/PolyLine.vue
+++ b/src/components/PolyLine.vue
@@ -32,18 +32,13 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const color = parseColor(toRef(props, "color"), "stroke");
 
 const parsedPoints = computed(() =>
-  props.points.map((point) =>
-    Vector2.wrap(point)
-      .mul(new Vector2(1, -1))
-      .mul(scale.value)
-      .add(offset.value),
-  ),
+  props.points.map((point) => Vector2.wrap(point).transform(matrix.value)),
 );
 const dashArray = computed(() =>
   props.dashed ? [6 * invScale.value, 4 * invScale.value].join(",") : "0,0",
diff --git a/src/components/Polygon.vue b/src/components/Polygon.vue
index 63e1182..43645d7 100644
--- a/src/components/Polygon.vue
+++ b/src/components/Polygon.vue
@@ -48,7 +48,7 @@ if (props.vertices.length < 3) {
   throw new Error("A polygon must have at least 3 vertices");
 }
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { parseColor } = useColors();
 
 const stroke = parseColor(toRef(props, "color"), "stroke");
@@ -56,9 +56,7 @@ const fill = parseColor(toRef(props, "fill"));
 
 const vertices = computed(() => props.vertices.map((v) => Vector2.wrap(v)));
 const points = computed(() =>
-  vertices.value.map((v) =>
-    v.mul(new Vector2(1, -1)).mul(scale.value).add(offset.value),
-  ),
+  vertices.value.map((v) => v.transform(matrix.value)),
 );
 const angles = computed(() => {
   const result = [];
diff --git a/src/components/Sector.vue b/src/components/Sector.vue
index bb9eabc..441c402 100644
--- a/src/components/Sector.vue
+++ b/src/components/Sector.vue
@@ -40,19 +40,16 @@ const props = withDefaults(
   },
 );
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { color, fill } = toRefs(props);
 const { parseColor } = useColors();
 
 const strokeColor = parseColor(color, "stroke");
 const fillColor = parseColor(fill);
 const position = computed(() =>
-  Vector2.wrap(props.position)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  Vector2.wrap(props.position).transform(matrix.value),
 );
-const scaledRadius = computed(() => props.radius * scale.value.x);
+const scaledRadius = computed(() => props.radius * matrix.value.a);
 const from = computed(() =>
   props.radians ? props.from : props.from * DEG2RAD,
 );
diff --git a/src/components/Vector.vue b/src/components/Vector.vue
index ad59633..72da224 100644
--- a/src/components/Vector.vue
+++ b/src/components/Vector.vue
@@ -33,10 +33,12 @@
     :color="color"
     :size="labelSize"
   />
+
+  <slot />
 </template>
 
 <script setup lang="ts">
-import { computed } from "vue";
+import { computed} from "vue";
 
 import { type PossibleVector2, Vector2 } from "../utils/Vector2.ts";
 import Label from "../components/Label.vue";
@@ -65,27 +67,21 @@ const props = withDefaults(
 
 const id = Math.random().toString(16).slice(2);
 
-const { scale, offset, invScale } = useGraphContext();
+const { matrix, invScale } = useGraphContext();
 const { colors } = useColors();
 const color = computed(() => props.color ?? colors.value.stroke);
 
 const pixelVector = computed(() =>
-  Vector2.wrap(props.to).sub(props.from).mul(scale.value),
-);
-const from = computed(() =>
-  new Vector2(props.from)
-    .mul(new Vector2(1, -1))
-    .mul(scale.value)
-    .add(offset.value),
+  Vector2.wrap(props.to).transform(matrix.value).sub(from.value),
 );
+const from = computed(() => Vector2.wrap(props.from).transform(matrix.value));
 const to = computed(() => {
   const angle = pixelVector.value.angle;
   const magnitude = pixelVector.value.length();
   const newMagnitude = magnitude - arrowSize.value;
-
   return new Vector2(
     from.value.x + newMagnitude * Math.cos(angle),
-    from.value.y - newMagnitude * Math.sin(angle),
+    from.value.y + newMagnitude * Math.sin(angle),
   );
 });
 const labelPosition = computed(() => {
diff --git a/src/composables/useLocalToWorld.ts b/src/composables/useLocalToWorld.ts
new file mode 100644
index 0000000..fc9ed62
--- /dev/null
+++ b/src/composables/useLocalToWorld.ts
@@ -0,0 +1,19 @@
+import { Vector2 } from "../utils/Vector2.ts";
+import { computed, inject, provide } from "vue";
+import { parentToWorld } from "../types.ts";
+import {Matrix2D} from "../utils/Matrix2D.ts";
+
+export function useLocalToWorld(localPosition: Vector2) {
+  const parentMatrix = inject(
+      parentToWorld, 
+      computed(() => new Matrix2D()),
+  );
+
+  const transform = new Matrix2D();
+  transform.translate([localPosition.x, localPosition.y]);
+  const matrix = computed(() => parentMatrix.value.multiply(transform));
+
+  provide(parentToWorld, matrix);
+
+  return matrix;
+}
diff --git a/src/index.ts b/src/index.ts
index 1d0bd8b..bccc830 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -12,5 +12,6 @@ export { default as PolyLine } from "./components/PolyLine.vue";
 export { default as Sector } from "./components/Sector.vue";
 export { default as Vector } from "./components/Vector.vue";
 export { Vector2 } from "./utils/Vector2";
+export { Matrix2D } from "./utils/Matrix2D";
 export { useColors } from "./composables/useColors";
 export { configureGraphs } from "./utils/configureGraphs";
diff --git a/src/types.ts b/src/types.ts
index 4459d42..be3d9b9 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -1,5 +1,6 @@
 import type { ComputedRef, InjectionKey } from "vue";
 import { Vector2 } from "./utils/Vector2.ts";
+import {Matrix2D} from "./utils/Matrix2D.ts";
 
 export type Color = string | { light: string; dark: string };
 
@@ -10,4 +11,7 @@ export const graphContext = Symbol() as InjectionKey<{
   origin: ComputedRef<Vector2>;
   offset: ComputedRef<Vector2>;
   domain: ComputedRef<{ x: Vector2; y: Vector2 }>;
+  matrix: ComputedRef<Matrix2D>;
 }>;
+
+export const parentToWorld = Symbol() as InjectionKey<ComputedRef<Matrix2D>>;
diff --git a/src/utils/Matrix2D.ts b/src/utils/Matrix2D.ts
new file mode 100644
index 0000000..1a2908e
--- /dev/null
+++ b/src/utils/Matrix2D.ts
@@ -0,0 +1,197 @@
+import { PossibleVector2, Vector2 } from "./Vector2.ts";
+
+export type PossibleMatrix2D =
+  | number
+  | Matrix2D
+  | [number, number, number, number, number, number]
+  | { a: number; b: number; c: number; d: number; tx: number; ty: number }
+  | DOMMatrix;
+
+/**
+ * An optimized 2x3 matrix for 2D transformations.
+ */
+export class Matrix2D {
+  private _a: number = 1;
+  private _b: number = 0;
+  private _c: number = 0;
+  private _d: number = 1;
+  private _tx: number = 0;
+  private _ty: number = 0;
+
+  public static get identity() {
+    return new Matrix2D();
+  }
+
+  public static get zero() {
+    return new Matrix2D(0, 0, 0, 0, 0, 0);
+  }
+
+  public get isIdentity() {
+    return (
+      this._a === 1 &&
+      this._b === 0 &&
+      this._c === 0 &&
+      this._d === 1 &&
+      this._tx === 0 &&
+      this._ty === 0
+    );
+  }
+
+  public get a() {
+    return this._a;
+  }
+
+  public get b() {
+    return this._b;
+  }
+
+  public get c() {
+    return this._c;
+  }
+
+  public get d() {
+    return this._d;
+  }
+
+  public get tx() {
+    return this._tx;
+  }
+
+  public get ty() {
+    return this._ty;
+  }
+
+  public get inverse(): Matrix2D {
+    const { _a, _b, _c, _d, _tx, _ty } = this;
+    const det = this.determinant;
+    if (det === 0) {
+      return new Matrix2D();
+    }
+    return new Matrix2D(
+      _d / det,
+      -_b / det,
+      -_c / det,
+      _a / det,
+      (_c * _ty - _d * _tx) / det,
+      (_b * _tx - _a * _ty) / det,
+    );
+  }
+
+  public get determinant(): number {
+    return this._a * this._d - this._b * this._c;
+  }
+
+  public constructor();
+  public constructor(
+    a: number,
+    b: number,
+    c: number,
+    d: number,
+    tx: number,
+    ty: number,
+  );
+  public constructor(value?: PossibleMatrix2D);
+  public constructor(a?: any, b?: any, c?: any, d?: any, tx?: any, ty?: any) {
+    if (a === undefined) {
+      return;
+    }
+
+    if (Array.isArray(a)) {
+      this._a = a[0];
+      this._b = a[1];
+      this._c = a[2];
+      this._d = a[3];
+      this._tx = a[4];
+      this._ty = a[5];
+      return;
+    }
+
+    if (typeof a === "number") {
+      if (typeof b === "number") {
+        this._a = a;
+        this._b = b;
+        this._c = c;
+        this._d = d;
+        this._tx = tx;
+        this._ty = ty;
+      } else {
+        this._a = a;
+        this._b = a;
+        this._c = a;
+        this._d = a;
+        this._tx = a;
+        this._ty = a;
+      }
+      return;
+    }
+
+    if (a instanceof DOMMatrix) {
+      this._a = a.a;
+      this._b = a.b;
+      this._c = a.c;
+      this._d = a.d;
+      this._tx = a.e;
+      this._ty = a.f;
+      return;
+    }
+
+    if (typeof a === "object") {
+      this._a = a.a;
+      this._b = a.b;
+      this._c = a.c;
+      this._d = a.d;
+      this._tx = a.tx;
+      this._ty = a.ty;
+      return;
+    }
+  }
+
+  public translate(by: PossibleVector2) {
+    const v = Vector2.wrap(by);
+    this._tx += v.x;
+    this._ty += v.y;
+    return this;
+  }
+
+  public scale(by: PossibleVector2) {
+    const v = Vector2.wrap(by);
+    this._a *= v.x;
+    this._b *= v.x;
+    this._c *= v.y;
+    this._d *= v.y;
+    return this;
+  }
+
+  public rotate(angle: number) {
+    const cos = Math.cos(angle);
+    const sin = Math.sin(angle);
+    const { _a, _b, _c, _d } = this;
+    this._a = _a * cos - _b * sin;
+    this._b = _a * sin + _b * cos;
+    this._c = _c * cos - _d * sin;
+    this._d = _c * sin + _d * cos;
+    return this;
+  }
+
+  public multiply(other: Matrix2D) {
+    const { _a, _b, _c, _d, _tx, _ty } = this;
+    this._a = _a * other._a + _b * other._c;
+    this._b = _a * other._b + _b * other._d;
+    this._c = _c * other._a + _d * other._c;
+    this._d = _c * other._b + _d * other._d;
+    this._tx = _tx * other._a + _ty * other._c + other._tx;
+    this._ty = _tx * other._b + _ty * other._d + other._ty;
+    return this;
+  }
+
+  public equals(other: Matrix2D, threshold: number = 0.000001) {
+    return (
+      Math.abs(this._a - other._a) <= threshold + Number.EPSILON &&
+      Math.abs(this._b - other._b) <= threshold + Number.EPSILON &&
+      Math.abs(this._c - other._c) <= threshold + Number.EPSILON &&
+      Math.abs(this._d - other._d) <= threshold + Number.EPSILON &&
+      Math.abs(this._tx - other._tx) <= threshold + Number.EPSILON &&
+      Math.abs(this._ty - other._ty) <= threshold + Number.EPSILON
+    );
+  }
+}
diff --git a/src/utils/Vector2.ts b/src/utils/Vector2.ts
index bf29142..7a33733 100644
--- a/src/utils/Vector2.ts
+++ b/src/utils/Vector2.ts
@@ -1,7 +1,11 @@
+import { Matrix2D } from "./Matrix2D";
+import { TAU } from "./constants";
+
 export type PossibleVector2 =
   | number
   | Vector2
   | [number, number]
+  | { width: number; height: number }
   | { x: number; y: number };
 
 const RAD2DEG = 180 / Math.PI;
@@ -53,6 +57,28 @@ export class Vector2 {
     return new Vector2(r * Math.cos(angle), r * Math.sin(angle));
   }
 
+  /**
+   * An alias for the x component of the vector.
+   */
+  public get width() {
+    return this.x;
+  }
+
+  public set width(value: number) {
+    this.x = value;
+  }
+
+  /**
+   * An alias for the y component of the vector.
+   */
+  public get height() {
+    return this.y;
+  }
+
+  public set height(value: number) {
+    this.y = value;
+  }
+
   /**
    * Returns the angle of the vector with the x-axis in radians.
    */
@@ -85,22 +111,29 @@ export class Vector2 {
       if (typeof y === "number") {
         this.y = y;
       }
-    } else if (Array.isArray(x)) {
+      return;
+    }
+
+    if (Array.isArray(x)) {
       this.x = x[0];
       this.y = x[1];
-    } else if (typeof x === "object") {
-      this.x = x.x;
-      this.y = x.y;
-    } else {
-      this.x = 0;
-      this.y = 0;
+      return;
     }
+
+    if (typeof x === "object") {
+      this.x = x.x ?? x.width;
+      this.y = x.y ?? x.height;
+      return;
+    }
+
+    this.x = 0;
+    this.y = 0;
   }
 
   /**
    * Returns the sum of this vector and the other.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public add(vector: PossibleVector2) {
     const other = Vector2.wrap(vector);
@@ -110,7 +143,7 @@ export class Vector2 {
   /**
    * Returns the difference between this vector and the other.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public sub(vector: PossibleVector2) {
     const other = Vector2.wrap(vector);
@@ -121,7 +154,7 @@ export class Vector2 {
    * Multiplies each component of the vector by the corresponding component of
    * the other vector.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public mul(vector: PossibleVector2) {
     const other = Vector2.wrap(vector);
@@ -132,7 +165,7 @@ export class Vector2 {
    * Divides each component of the vector by the corresponding component of the
    * other vector.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public div(vector: PossibleVector2) {
     const other = new Vector2(vector);
@@ -142,7 +175,7 @@ export class Vector2 {
   /**
    * Returns the dot product of this vector and another.
    *
-   * @param vector The other vector.
+   * @param vector - The other vector.
    */
   public dot(vector: PossibleVector2) {
     const other = new Vector2(vector);
@@ -165,6 +198,10 @@ export class Vector2 {
     return Math.sqrt(this.x * this.x + this.y * this.y);
   }
 
+  public squaredLength() {
+    return this.x * this.x + this.y * this.y;
+  }
+
   /**
    * Returns a vector with the same direction but a magnitude of 1.
    */
@@ -189,7 +226,7 @@ export class Vector2 {
   /**
    * Rotates the vector by the given angle around the origin.
    *
-   * @param angle The angle to rotate by in radians.
+   * @param angle - The angle to rotate by in radians.
    */
   public rotate(angle: number) {
     const cos = Math.cos(angle);
@@ -205,7 +242,7 @@ export class Vector2 {
    *
    * This method mutates the vector.
    *
-   * @param angle The angle between the vector and the x-axis in radians.
+   * @param angle - The angle between the vector and the x-axis in radians.
    */
   public setAngle(angle: number) {
     const length = this.length();
@@ -213,6 +250,12 @@ export class Vector2 {
     this.y = length * Math.sin(angle);
   }
 
+  /**
+   * Compute the angle between this vector and the given vector.
+   * The returned angle will be in the range [-Math.PI, Math.PI].
+   *
+   * @param vector - The other vector.
+   */
   public angleBetween(vector: PossibleVector2) {
     return Math.acos(
       this.dot(vector) / (this.length() * Vector2.wrap(vector).length()),
@@ -220,11 +263,59 @@ export class Vector2 {
   }
 
   /**
-   * Returns the distance between this vector and another.
+   * Compute the clockwise angle from this vector to a given other
+   * vector. The angle will be in the range [0, Math.PI * 2[.
    *
-   * @param vector The other vector.
+   * @param vector - The target vector.
+   */
+  public clockwiseAngleTo(vector: PossibleVector2) {
+    const target = Vector2.wrap(vector);
+    const dot = this.dot(target);
+    const determinant = this.x * target.y - this.y * target.x;
+    return (Math.atan2(determinant, dot) + TAU) % TAU;
+  }
+
+  /**
+   * Calculate the distance between this vector and another.
+   *
+   * @param vector - The other vector.
    */
   public distanceTo(vector: PossibleVector2) {
     return this.sub(Vector2.wrap(vector)).length();
   }
+
+  /**
+   * Calculate the squared distance between this vector and another.
+   *
+   * @param vector - The other vector.
+   */
+  public squaredDistanceTo(vector: PossibleVector2) {
+    return this.sub(Vector2.wrap(vector)).squaredLength();
+  }
+
+  /**
+   * Calculates the 2D vector cross product between this vector and
+   * the provided vector.
+   *
+   * @remarks
+   * The 2D cross product is defined as a.y * b.x - a.x * b.y
+   *
+   * @param vector - The other vector.
+   */
+  public cross(vector: PossibleVector2) {
+    const other = Vector2.wrap(vector);
+    return this.y * other.x - this.x * other.y;
+  }
+
+  /**
+   * Apply the provided matrix to this vector.
+   *
+   * @param matrix - The transformation matrix.
+   */
+  public transform(matrix: Matrix2D): Vector2 {
+    return new Vector2(
+      this.x * matrix.a + this.y * matrix.c + matrix.tx,
+      this.x * matrix.b + this.y * matrix.d + matrix.ty,
+    );
+  }
 }
diff --git a/tests/math/Matrix2D.test.ts b/tests/math/Matrix2D.test.ts
new file mode 100644
index 0000000..8f7d743
--- /dev/null
+++ b/tests/math/Matrix2D.test.ts
@@ -0,0 +1,172 @@
+// @ts-ignore
+import { describe, expect, test } from "bun:test";
+import { Matrix2D, PossibleMatrix2D } from "../../src/utils/Matrix2D";
+
+test.each([
+  [[1, 0, 0, 1, 0, 0], true],
+  [[2, 0, 0, 2, 0, 0], false],
+])(
+  "isIdentity: values = %p -> %p",
+  (values: PossibleMatrix2D, expected: boolean) => {
+    const m = new Matrix2D(values);
+    expect(m.isIdentity).toBe(expected);
+  },
+);
+
+describe("equality", () => {
+  test.each([
+    [[1, 0, 0, 1, 0, 0], [1, 0, 0, 1, 0, 0], true],
+    [[2, 2, 0, 1, 0, 0], [2, 2, 0, 1, 0, 0], true],
+    [[1, 0, 0, 1, 0, 0], [2, 0, 0, 2, 0, 0], false],
+    [[1, 0, 0, 1, 0, 0], [1, 0, 0, 1, 0, 1], false],
+  ])(
+    "exactly equal: %p === %p -> %p",
+    (a: PossibleMatrix2D, b: PossibleMatrix2D, expected: number) => {
+      const m1 = new Matrix2D(a);
+      const m2 = new Matrix2D(b);
+      expect(m1.equals(m2)).toBe(expected);
+    },
+  );
+
+  test.each([
+    [[1.1, 0, 0, 1.1, 0, 0], [1.05, 0, 0, 1.05, 0, 0], 0.05, true],
+    [[1.1, 0, 0, 1.1, 0, 0], [1.05, 0, 0, 1.05, 0, 0], 0.04, false],
+    [[1.1, 0, 0, 1.1, 0, 0], [1.099999, 0, 0, 1.099999, 0, 0], undefined, true],
+  ])("threshold equal: %p === %p -> %p", (a, b, threshold, expected) => {
+    const m1 = new Matrix2D(a);
+    const m2 = new Matrix2D(b);
+    expect(m1.equals(m2, threshold)).toBe(expected);
+  });
+});
+
+describe("constructor", () => {
+  test("no arguments -> identity", () => {
+    const m = new Matrix2D();
+    expect(m.isIdentity).toBe(true);
+  });
+
+  test("static identity constructor", () => {
+    const m = Matrix2D.identity;
+    expect(m.isIdentity).toBe(true);
+  });
+
+  test("static zero constructor", () => {
+    const m = Matrix2D.zero;
+    expect(m.a).toBe(0);
+    expect(m.b).toBe(0);
+    expect(m.c).toBe(0);
+    expect(m.d).toBe(0);
+    expect(m.tx).toBe(0);
+    expect(m.ty).toBe(0);
+  });
+
+  test("array of values", () => {
+    const m = new Matrix2D([1, 2, 3, 4, 5, 6]);
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+
+  test("individual values", () => {
+    const m = new Matrix2D(1, 2, 3, 4, 5, 6);
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+
+  test("single value fills all", () => {
+    const m = new Matrix2D(2);
+    expect(m.a).toBe(2);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(2);
+    expect(m.d).toBe(2);
+    expect(m.tx).toBe(2);
+    expect(m.ty).toBe(2);
+  });
+
+  test("Matrix2D object", () => {
+    const other = new Matrix2D(1, 2, 3, 1, 2, 3);
+    const m = new Matrix2D(other);
+    expect(m.equals(other)).toBe(true);
+  });
+
+  test("{ a, b, c, d, tx, ty }", () => {
+    const m = new Matrix2D({ a: 1, b: 2, c: 3, d: 4, tx: 5, ty: 6 });
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+
+  test("DOMMatrix", () => {
+    const domMatrix = new DOMMatrix([1, 2, 3, 4, 5, 6]);
+    const m = new Matrix2D(domMatrix);
+    expect(m.a).toBe(1);
+    expect(m.b).toBe(2);
+    expect(m.c).toBe(3);
+    expect(m.d).toBe(4);
+    expect(m.tx).toBe(5);
+    expect(m.ty).toBe(6);
+  });
+});
+
+test("translate", () => {
+  const m = new Matrix2D();
+  m.translate([5, 2]);
+  expect(m.equals(new Matrix2D([1, 0, 0, 1, 5, 2]))).toBe(true);
+});
+
+describe("scale", () => {
+  test("single value scales both axes", () => {
+    const m = new Matrix2D(1, 2, 3, 4, 5, 6);
+    m.scale(2);
+    expect(m.equals(new Matrix2D(2, 4, 6, 8, 5, 6))).toBe(true);
+  });
+
+  test("scale axes individually", () => {
+    const m = new Matrix2D(1, 2, 3, 4, 5, 6);
+    m.scale([2, 3]);
+    expect(m.equals(new Matrix2D(2, 4, 9, 12, 5, 6))).toBe(true);
+  });
+});
+
+describe("rotate", () => {
+  test.each([[Math.PI / 2, [1, 0, 0, 1, 0, 0], [0, 1, -1, 0, 0, 0]]])(
+    "angle = %p, input = %p -> %p",
+    (angle: number, matrix: PossibleMatrix2D, expected: number) => {
+      const m = new Matrix2D(matrix);
+      m.rotate(angle);
+      console.log(m);
+      expect(m.equals(new Matrix2D(expected))).toBe(true);
+    },
+  );
+});
+
+describe("determinant", () => {
+  test("identity matrix has determinant 1", () => {
+    const matrix = Matrix2D.identity;
+    expect(matrix.determinant).toBe(1);
+  });
+
+  test("matrix with identical columns has determinant 0", () => {
+    const matrix = new Matrix2D(5, 2, 5, 2, 0, 0);
+    expect(matrix.determinant).toBe(0);
+  });
+
+  test.each([
+    [[3, 2, 4, 9, 0, 0], 19],
+    [[1, 2, 3, 4, 0, 0], -2],
+    [[6, 6, 7, 7, 0, 0], 0],
+  ])("det(%p) = %p", (matrix: PossibleMatrix2D, expected: number) => {
+    const m = new Matrix2D(matrix);
+    expect(m.determinant).toBe(expected);
+  });
+});
diff --git a/tests/math/Vector2.test.ts b/tests/math/Vector2.test.ts
index 081c5bd..8ef4567 100644
--- a/tests/math/Vector2.test.ts
+++ b/tests/math/Vector2.test.ts
@@ -32,6 +32,12 @@ describe("constructor", () => {
     expect(v.x).toBe(1);
     expect(v.y).toBe(1);
   });
+
+  test("{width, height} -> (width, height)", () => {
+    const v = new Vector2({ width: 1, height: 2 });
+    expect(v.x).toBe(1);
+    expect(v.y).toBe(2);
+  });
 });
 
 describe("fromPolar", () => {
@@ -262,3 +268,27 @@ describe("slope", () => {
     expect(a.slope).toBeCloseTo(expected);
   });
 });
+
+describe("aliases", () => {
+  test("width is an alias for x", () => {
+    const v = new Vector2(1, 2);
+    expect(v.width).toBe(1);
+
+    v.x = 2;
+    expect(v.width).toBe(2);
+
+    v.width = 4;
+    expect(v.x).toBe(4);
+  });
+
+  test("height is an alias for y", () => {
+    const v = new Vector2(1, 2);
+    expect(v.height).toBe(2);
+
+    v.y = 3;
+    expect(v.height).toBe(3);
+
+    v.height = 5;
+    expect(v.y).toBe(5);
+  });
+});
diff --git a/tests/setup.ts b/tests/setup.ts
new file mode 100644
index 0000000..27645c4
--- /dev/null
+++ b/tests/setup.ts
@@ -0,0 +1,84 @@
+import { GlobalRegistrator } from "@happy-dom/global-registrator";
+
+GlobalRegistrator.register();
+
+// @ts-ignore
+window.DOMMatrix = class {
+  public readonly a: number = 1;
+  public readonly b: number = 1;
+  public readonly c: number = 1;
+  public readonly d: number = 1;
+  public readonly e: number = 1;
+  public readonly f: number = 1;
+
+  public readonly is2D: boolean = true;
+
+  public get m11() {
+    return this.a;
+  }
+
+  public get m12() {
+    return this.b;
+  }
+
+  public get m13() {
+    return 0;
+  }
+
+  public get m14() {
+    return 0;
+  }
+
+  public get m21() {
+    return this.c;
+  }
+
+  public get m22() {
+    return this.d;
+  }
+
+  public get m23() {
+    return 0;
+  }
+
+  public get m24() {
+    return 0;
+  }
+
+  public get m31() {
+    return 0;
+  }
+
+  public get m32() {
+    return 0;
+  }
+
+  public get m33() {
+    return 1;
+  }
+
+  public get m41() {
+    return this.e;
+  }
+
+  public get m42() {
+    return this.f;
+  }
+
+  public get m43() {
+    return 0;
+  }
+
+  public get m44() {
+    return 1;
+  }
+
+  constructor(values: [number, number, number, number, number, number]) {
+    this.a = values[0];
+    this.b = values[1];
+    this.c = values[2];
+    this.d = values[3];
+    this.e = values[4];
+    this.f = values[5];
+  }
+};