diff --git a/.gitignore b/.gitignore
index 517ae192..c3824542 100644
--- a/.gitignore
+++ b/.gitignore
@@ -22,3 +22,4 @@ vite.config.ts.timestamp-*
 build-*
 
 **/*.log
+chromatic.log
diff --git a/chromatic.log b/chromatic.log
index 8680a61f..6d61e57e 100644
--- a/chromatic.log
+++ b/chromatic.log
@@ -7,108 +7,17 @@ Authenticating with Chromatic
 Authenticated with Chromatic
     → Using project token '****************1f8a'
 Retrieving git information
+⚠ Using outdated package
+You are using an outdated version of the Chromatic CLI (v7.5.4).
+A new major version is available (v10.7.1).
+Run yarn upgrade chromatic --latest to upgrade.
 Retrieved git information
-    → Commit 'aafc802' on branch 'split-canvas'; found 1 parent build
+    → Commit 'de29afc' on branch '#67-oriented-area'; found 2 parent builds
 Collecting Storybook metadata
 Collected Storybook metadata
-    → Storybook 7.5.1 for Svelte; using the @storybook/sveltekit builder (7.5.1); supported addons found: Links, Essentials, Interactions
+    → Storybook 7.6.10 for Svelte; using the @storybook/sveltekit builder (7.6.10); supported addons found: Links, Essentials, Interactions
 Initializing build
 Initialized build
-    → Build 4 initialized
+    → Build 614 initialized
 Building your Storybook
-    → Running command: pnpm run build-storybook --output-dir /var/folders/9_/f1r1122x0z30nmvsjdphgnh40000gn/T/chromatic--64957-8I3Yuc4zViqV
-Storybook built in 14 seconds
-    → View build log at /Users/abeldebruijn/Documents/GitHub/turborepo-visuals/build-storybook.log
-Publish your built Storybook
-    → Validating Storybook files
-Publishing your built Storybook
-    → Retrieving target location
-    → Starting publish
-    → [                    ] 0%
-    → [                    ] 1%
-    → [=                   ] 4%
-    → [=                   ] 7%
-    → [==                  ] 12%
-    → [===                 ] 13%
-    → [===                 ] 15%
-    → [===                 ] 16%
-    → [====                ] 21%
-    → [====                ] 22%
-    → [=====               ] 23%
-    → [=====               ] 24%
-    → [=====               ] 27%
-    → [======              ] 28%
-    → [======              ] 32%
-    → [=======             ] 37%
-    → [========            ] 40%
-    → [========            ] 41%
-    → [=========           ] 46%
-    → [==========          ] 48%
-    → [==========          ] 49%
-    → [==========          ] 50%
-    → [==========          ] 52%
-    → [===========         ] 55%
-    → [===========         ] 56%
-    → [============        ] 58%
-    → [============        ] 60%
-    → [============        ] 62%
-    → [=============       ] 63%
-    → [=============       ] 64%
-    → [=============       ] 66%
-    → [==============      ] 68%
-    → [==============      ] 71%
-    → [==============      ] 72%
-    → [===============     ] 74%
-    → [===============     ] 77%
-    → [================    ] 79%
-    → [================    ] 80%
-    → [================    ] 82%
-    → [=================   ] 83%
-    → [=================   ] 84%
-    → [=================   ] 85%
-    → [=================   ] 86%
-    → [=================   ] 87%
-    → [==================  ] 88%
-    → [==================  ] 89%
-    → [==================  ] 90%
-    → [==================  ] 91%
-    → [==================  ] 92%
-    → [=================== ] 93%
-    → [=================== ] 95%
-    → [=================== ] 97%
-    → [====================] 98%
-    → [====================] 99%
-Publish complete in 17 seconds
-    → View your Storybook at https://64bd84b22e54c77ce9fcbc6b-ikpysqvuwf.chromatic.com
-Verifying your Storybook
-    → This may take a few minutes
-Started build 4
-    → View build details at https://www.chromatic.com/build?appId=64bd84b22e54c77ce9fcbc6b&number=4
-Running 22 tests
-    → This may take a few minutes
-ℹ Speed up Continuous Integration
-Your project is linked to GitHub so Chromatic will report results there.
-This means you can pass the --exit-once-uploaded flag to skip waiting for build results.
-Read more here: https://www.chromatic.com/docs/cli#chromatic-options
-    → [=                   ] 1/22  Slider › Default 
-    → [==                  ] 2/22  Arc › With color 
-    → [===                 ] 3/22  Arc › With points defined 
-    → [=====               ] 5/22  Arc › With width defined 
-    → [=====               ] 6/22  Arc › With distance defined 
-    → [======              ] 7/22  Canvas › Default 
-    → [=======             ] 8/22  Canvas › With title 
-    → [==========          ] 11/22  Draggable › With color 
-    → [===========         ] 12/22  Angle › Default 
-    → [============        ] 13/22  Angle › With Origin 
-    → [==============      ] 15/22  Angle › Force Round Angle 
-    → [===============     ] 16/22  Axis › Default 
-    → [================    ] 18/22  Canvas › Is Iframe 
-    → [=================   ] 19/22  Canvas › With Title 
-    → [==================  ] 20/22  Canvas › Multiple Slider 
-    → [=================== ] 21/22  Canvas › Canvas With Formulas 
-    → [====================] 22/22  Label › Default 
-✖ Found 22 visual changes: Review the changes at https://www.chromatic.com/build?appId=64bd84b22e54c77ce9fcbc6b&number=4
-
-ℹ For CI/CD use cases, this command failed with exit code 1
-Pass --exit-zero-on-changes to succeed this command regardless of changes.
-Pass --auto-accept-changes to succeed and automatically accept any changes.
+    → Running command: pnpm run build-storybook --output-dir /var/folders/9_/f1r1122x0z30nmvsjdphgnh40000gn/T/chromatic--87913-hCHeEZ2NWkkO
diff --git a/package.json b/package.json
index 0127bc47..d7b392cf 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,7 @@
     "format": "prettier --plugin-search-dir . --write .",
     "storybook": "storybook dev -p 6006 --no-open",
     "build-storybook": "storybook build",
-    "chromatic": "npx chromatic --project-token=chpt_7ac438918371f8a"
+    "chromatic": "npx chromatic --only-changed --project-token=chpt_7ac438918371f8a"
   },
   "dependencies": {
     "@mdi/js": "^7.2.96",
diff --git a/src/lib/components/AbstractCanvas.svelte b/src/lib/components/AbstractCanvas.svelte
index 39d174bc..77b5c47a 100644
--- a/src/lib/components/AbstractCanvas.svelte
+++ b/src/lib/components/AbstractCanvas.svelte
@@ -44,7 +44,7 @@
   }
 
   $: {
-    const params = $page.url?.searchParams;
+    const params = $page?.url?.searchParams;
     title = params?.get('title') || title;
   }
 
@@ -55,7 +55,7 @@
   }
 
   onMount(() => {
-    const params = $page.url?.searchParams;
+    const params = $page?.url?.searchParams;
 
     if (controls) {
       controls = controls.fromURL(params?.get('controls') || '') || controls;
diff --git a/src/lib/components/ShareWindow.svelte b/src/lib/components/ShareWindow.svelte
index 6d9ba81d..73476723 100644
--- a/src/lib/components/ShareWindow.svelte
+++ b/src/lib/components/ShareWindow.svelte
@@ -21,8 +21,8 @@
   let urlInput: HTMLTextAreaElement;
 
   $: state = controls?.controls && getState($cameraStore);
-  $: url = $page.url?.origin + $page.url?.pathname;
-  $: refUrl = $page.url?.pathname.replace('/applet/', '');
+  $: url = $page?.url?.origin + $page.url?.pathname;
+  $: refUrl = $page?.url?.pathname.replace('/applet/', '');
   $: lastUrl = refUrl?.split('/')?.slice(-1)[0]; // Last part of the url
 
   /**
diff --git a/src/lib/d3-components/Angle.svelte b/src/lib/d3-components/Angle.svelte
new file mode 100644
index 00000000..08c14b07
--- /dev/null
+++ b/src/lib/d3-components/Angle.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { LINE_WIDTH } from '$lib/utils/AttributeDimensions';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
+  import { arc, symbol, symbolTriangle } from 'd3';
+  import { Vector2 } from 'three';
+
+  export let color: PrimeColor = PrimeColor.black;
+  export let startAngle = 0;
+  export let endAngle = 0;
+  export let origin = new Vector2(0, 0);
+  export let width = LINE_WIDTH;
+  export let distance = 0.8;
+  export let hasHead = false;
+
+  $: d = arc()({
+    innerRadius: distance - width / 2,
+    outerRadius: distance + width / 2,
+    startAngle: startAngle + Math.PI / 2,
+    endAngle: endAngle + Math.PI / 2
+  });
+
+  const triangle = symbol()
+    .type(symbolTriangle)
+    .size(2 * width)();
+</script>
+
+<g transform="translate({origin.x},{origin.y})">
+  <path {d} fill={color} />
+</g>
+
+{#if hasHead}
+  <g
+    transform="rotate({(endAngle / Math.PI) *
+      180}) translate({distance}, 0) rotate(180) translate(0, {2 * Math.PI * width})"
+  >
+    <path transform="" d={triangle} fill={color} />
+  </g>
+{/if}
diff --git a/src/lib/d3-components/Arc.svelte b/src/lib/d3-components/Arc.svelte
index 451a7bc2..a327735a 100644
--- a/src/lib/d3-components/Arc.svelte
+++ b/src/lib/d3-components/Arc.svelte
@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Vector2 } from 'three';
   import { PrimeColor } from '$lib/utils/PrimeColors';
-  import { arc } from 'd3';
+  import { arc, symbol, symbolTriangle } from 'd3';
   import { LINE_WIDTH } from '$lib/utils/AttributeDimensions';
 
   export let color: PrimeColor = PrimeColor.black;
@@ -9,19 +9,38 @@
   export let origin = new Vector2(0, 0);
   export let width = LINE_WIDTH;
   export let distance = 0.8;
+  export let hasHead = false;
 
-  $: startAngle = points[0].angle();
-  $: endAngle = points[1].angle();
+  $: startAngle = Math.PI / 2 + points[0].angle();
+  $: endAngle = Math.PI / 2 + points[1].angle();
+  $: endPosition = points[1].clone().normalize().multiplyScalar(distance);
+
+  $: angleDelta = endAngle - startAngle;
+
+  $: adjustedStartAngle = angleDelta < -Math.PI ? startAngle + 2 * Math.PI : startAngle;
+  $: adjustedEndAngle = angleDelta < -Math.PI ? endAngle + 2 * Math.PI : endAngle;
+  $: headAngle = (adjustedEndAngle / Math.PI) * 180 + 90 + (angleDelta < 0 ? 180 : 0);
 
-  // Arc defined by D3
   $: d = arc()({
     innerRadius: distance - width / 2,
     outerRadius: distance + width / 2,
-    startAngle: Math.PI / 2 + startAngle,
-    endAngle: Math.PI / 2 + endAngle
+    startAngle: adjustedStartAngle,
+    endAngle: adjustedEndAngle
   });
+
+  const triangle = symbol().type(symbolTriangle).size(0.3)();
 </script>
 
 <g transform="translate({origin.x},{origin.y})">
   <path {d} fill={color} />
 </g>
+
+{#if hasHead}
+  <g transform="translate({endPosition.x}, {endPosition.y})">
+    <path
+      transform="rotate({headAngle}) scale({LINE_WIDTH * 15}) translate({0}, {LINE_WIDTH * 15})"
+      d={triangle}
+      fill={color}
+    />
+  </g>
+{/if}
diff --git a/src/lib/d3-components/Canvas.svelte b/src/lib/d3-components/Canvas.svelte
index 089ba5ff..8898d9bd 100644
--- a/src/lib/d3-components/Canvas.svelte
+++ b/src/lib/d3-components/Canvas.svelte
@@ -27,6 +27,7 @@
   export let isIframe = false;
   export let width = '100%';
   export let height = '100%';
+  export let showAxisNumbers = true;
 
   type G = $$Generic<readonly Controller<number | boolean>[]>;
   export let controls: Controls<G> | undefined = undefined;
@@ -54,7 +55,7 @@
   </D3Canvas>
 
   {#if $$slots.splitCanvas}
-    <D3Canvas width={totalWidth} {height} {...splitCanvas2DProps}>
+    <D3Canvas {showAxisNumbers} width={totalWidth} {height} {...splitCanvas2DProps}>
       <slot name="splitCanvas" />
     </D3Canvas>
   {:else if $$slots.splitCanvas3d}
diff --git a/src/lib/d3-components/D3Canvas.svelte b/src/lib/d3-components/D3Canvas.svelte
index 57c254dc..3d5c9ef5 100644
--- a/src/lib/d3-components/D3Canvas.svelte
+++ b/src/lib/d3-components/D3Canvas.svelte
@@ -13,6 +13,7 @@
   export let height: Canvas2DProps['height'];
   export let tickLength: Canvas2DProps['tickLength'] = 30;
   export let gridType: Canvas2DProps['gridType'] = GridType.Square;
+  export let showAxisNumbers = true;
 
   const id = 'canvas-' + Math.random().toString(36).substr(2, 9);
 
@@ -51,8 +52,9 @@
           (2 * vmax)) /
           30})"
       >
+        <slot />
         <g transform="translate({-cameraPosition.x}, {-cameraPosition.y})">
-          <Axis length={tickLength} {gridType} />
+          <Axis {showAxisNumbers} length={tickLength} {gridType} />
           <slot />
         </g>
       </g>
diff --git a/src/lib/d3-components/Latex.svelte b/src/lib/d3-components/Latex.svelte
index 774f6ccc..f652e5b7 100644
--- a/src/lib/d3-components/Latex.svelte
+++ b/src/lib/d3-components/Latex.svelte
@@ -10,8 +10,11 @@
   export let textSize: number = 13;
   export let position: Vector2 = new Vector2(0, 0);
   export let offset: Vector2 = new Vector2(0, 0);
+  export let extend: number = 0;
   export let color: string = 'black';
 
+  $: extendedOffset = position.clone().normalize().multiplyScalar(extend);
+
   let latexWrapper: SVGGElement;
 
   onMount(() => {
@@ -25,6 +28,7 @@
   bind:this={latexWrapper}
   fill={color}
   style="color: {color}"
-  transform="translate({position.x + offset.x}, {position.y + offset.y}) scale({(0.02 / 16) *
-    textSize} ,{(-0.02 / 16) * textSize})"
+  transform="translate({position.x + offset.x + extendedOffset.x}, {position.y +
+    offset.y +
+    extendedOffset.y}) scale({(0.02 / 16) * textSize} ,{(-0.02 / 16) * textSize})"
 />
diff --git a/src/lib/d3-components/Parallelogram.svelte b/src/lib/d3-components/Parallelogram.svelte
new file mode 100644
index 00000000..0c571d42
--- /dev/null
+++ b/src/lib/d3-components/Parallelogram.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Vector2 } from 'three';
+
+  export let points: [Vector2, Vector2, Vector2];
+  export let color: string = 'black';
+  export let strokeWidth: number = 1;
+
+  $: [a, b, c] = points.map((p) => p.toArray().join(','));
+
+  $: d = points[1].clone().add(points[2]).sub(points[0]).toArray().join(',');
+</script>
+
+<!-- @component
+  This component is used to draw a parallelogram in 2D. It needs three points to be defined and will automatically calculate the fourth point.
+ -->
+
+<polygon fill={color} stroke="black" stroke-width={strokeWidth * 0.05} points="{a} {b} {d} {c} " />
diff --git a/src/lib/d3-components/index.ts b/src/lib/d3-components/index.ts
index 9852366c..9942b7cf 100644
--- a/src/lib/d3-components/index.ts
+++ b/src/lib/d3-components/index.ts
@@ -7,6 +7,7 @@ export { default as Canvas2D } from './Canvas.svelte';
 export { default as InfiniteLine2D } from './InfiniteLine.svelte';
 export { default as Latex2D } from './Latex.svelte';
 export { default as Line2D } from './Line.svelte';
+export { default as Parallelogram } from './Parallelogram.svelte';
 export { default as Point2D } from './Point.svelte';
 export { default as RightAngle } from './RightAngle.svelte';
 export { default as Vector2D } from './Vector.svelte';
diff --git a/src/lib/d3-components/stories/Arc.stories.svelte b/src/lib/d3-components/stories/Arc.stories.svelte
index 07148ae2..5080eedd 100644
--- a/src/lib/d3-components/stories/Arc.stories.svelte
+++ b/src/lib/d3-components/stories/Arc.stories.svelte
@@ -34,3 +34,14 @@
 <Story name="With origin defined" source args={{ origin: new Vector2(1, 1) }} />
 <Story name="With width defined" source args={{ width: 0.1 }} />
 <Story name="With distance defined" source args={{ distance: 1 }} />
+
+<Story
+  name="With arrow"
+  source
+  args={{ hasHead: true, points: [new Vector2(1, 1), new Vector2(-1, -1)] }}
+/>
+<Story
+  name="With arrow reversed"
+  source
+  args={{ hasHead: true, points: [new Vector2(-1, -1), new Vector2(1, 1)] }}
+/>
diff --git a/src/lib/d3-components/stories/Draggable.stories.svelte b/src/lib/d3-components/stories/Draggable.stories.svelte
index f0c60ea2..8ff07ca9 100644
--- a/src/lib/d3-components/stories/Draggable.stories.svelte
+++ b/src/lib/d3-components/stories/Draggable.stories.svelte
@@ -18,6 +18,10 @@
   import { PrimeColor } from '$lib/utils/PrimeColors';
   import docsForStory from '$lib/utils/docsForStory';
   import { Vector2 } from 'three';
+  import { Vector2D } from '..';
+
+  let p1 = new Vector2(1, 2);
+  let p2 = new Vector2(2, 1);
 </script>
 
 <Template let:args>
@@ -48,6 +52,7 @@
       <!-- THESE are correct because they have unique ids -->
       <Draggable {...args} position={new Vector2(1, 2)} color={PrimeColor.darkGreen} id="a" />
       <Draggable {...args} position={new Vector2(2, 1)} color={PrimeColor.raspberry} id="b" />
+      <Vector2D direction={p1} length={p1.length()} color={PrimeColor.darkGreen} />
     </svelte:fragment>
   </Canvas>
 </Story>
@@ -55,3 +60,12 @@
 <Story name="With color" source args={{ color: PrimeColor.darkGreen, id: 'color' }} />
 
 <Story name="With position" source args={{ position: new Vector2(1, 2), id: 'position' }} />
+
+<Story
+  name="With snap"
+  parameters={docsForStory(
+    'When dragging, the circle will snap to the nearest grid position upon release.'
+  )}
+  source
+  args={{ position: new Vector2(1, 2), snap: true, id: 'snap' }}
+/>
diff --git a/src/lib/d3-components/stories/Parallelogram.stories.svelte b/src/lib/d3-components/stories/Parallelogram.stories.svelte
new file mode 100644
index 00000000..eb02acc2
--- /dev/null
+++ b/src/lib/d3-components/stories/Parallelogram.stories.svelte
@@ -0,0 +1,35 @@
+<script lang="ts" context="module">
+  import type { Meta } from '@storybook/svelte';
+  import Parallelogram from '../Parallelogram.svelte';
+
+  export const meta = {
+    title: '2d components/Parallelgram',
+    component: Parallelogram,
+    tags: ['autodocs'],
+    parameters: docsForStory(
+      'This parallelogram component has a single required variable which is `points`. All other variables are optional.'
+    )
+  } satisfies Meta<Parallelogram>;
+</script>
+
+<script>
+  import { Story, Template } from '@storybook/addon-svelte-csf';
+  import Canvas from '../Canvas.svelte';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
+  import { Vector2 } from 'three';
+  import docsForStory from '$lib/utils/docsForStory';
+</script>
+
+<Template let:args>
+  <Canvas height="20rem">
+    <!-- See properties panel in the Parallelogram docs to see which args are allowed  -->
+    <Parallelogram points={[new Vector2(0, 0), new Vector2(1, 1), new Vector2(1, 3)]} {...args} />
+  </Canvas>
+</Template>
+
+<Story name="Default" source />
+
+<!-- Dynamic snippet should be disabled for this story -->
+<Story name="With color" source args={{ color: PrimeColor.raspberry }} />
+
+<Story name="With strokeWidth" source args={{ color: PrimeColor.raspberry, strokeWidth: 2 }} />
diff --git a/src/lib/threlte-components/Line.svelte b/src/lib/threlte-components/Line.svelte
index d71af128..5b4d13c1 100644
--- a/src/lib/threlte-components/Line.svelte
+++ b/src/lib/threlte-components/Line.svelte
@@ -1,12 +1,13 @@
 <script lang="ts">
-  import { T } from '@threlte/core';
-  import { BufferGeometry, Vector3, Line } from 'three';
-
   import getRandomColor from '$lib/utils/PrimeColors';
+  import { T } from '@threlte/core';
+  import { BufferGeometry, Line, Vector3 } from 'three';
+  import Line2 from './Line2.svelte';
 
   export let color: string = getRandomColor();
   export let points: [Vector3, Vector3] = [new Vector3(5, 0, 0), new Vector3(5, 0, 0)];
   export let isDashed = false;
+  export let radius: number | undefined = undefined;
 
   $: geometry = new BufferGeometry().setFromPoints(points);
 
@@ -26,3 +27,7 @@
     <T.LineBasicMaterial {color} />
   {/if}
 </T.Line>
+
+{#if radius}
+  <Line2 origin={points[0]} endPoint={points[1]} {color} striped={isDashed} {radius} />
+{/if}
diff --git a/src/lib/threlte-components/Parallelogram.svelte b/src/lib/threlte-components/Parallelogram.svelte
new file mode 100644
index 00000000..34ec6047
--- /dev/null
+++ b/src/lib/threlte-components/Parallelogram.svelte
@@ -0,0 +1,38 @@
+<script lang="ts">
+  import { BufferAttribute, BufferGeometry, LineSegments, type Vector3 } from 'three';
+  import { T } from '@threlte/core';
+  import { Line3D } from '.';
+
+  export let points: [Vector3, Vector3, Vector3];
+  export let color: string = 'black';
+  export let strokeWidth: number = 1;
+
+  $: p3 = points[1].clone().add(points[2]).sub(points[0]);
+
+  let geometry = new BufferGeometry();
+
+  function setGeometry(p0: Vector3, p1: Vector3, p2: Vector3) {
+    const geometry = new BufferGeometry();
+
+    const vertices = new Float32Array(
+      [p0.toArray(), p1.toArray(), p2.toArray(), p3.toArray()].flat()
+    );
+    geometry.setAttribute('position', new BufferAttribute(vertices, 3));
+
+    const indices = new Uint16Array([0, 1, 2, 0, 2, 3, 0, 3, 1, 1, 3, 2]);
+    geometry.setIndex(new BufferAttribute(indices, 1));
+
+    return geometry;
+  }
+
+  $: geometry = setGeometry(points[0], points[1], points[2]);
+</script>
+
+<T.Mesh {geometry}>
+  <T.MeshBasicMaterial {color} />
+</T.Mesh>
+
+<Line3D points={[points[0], points[1]]} radius={strokeWidth * 0.05} color="black" />
+<Line3D points={[points[0], points[2]]} radius={strokeWidth * 0.05} color="black" />
+<Line3D points={[p3, points[1]]} radius={strokeWidth * 0.05} color="black" />
+<Line3D points={[p3, points[2]]} radius={strokeWidth * 0.05} color="black" />
diff --git a/src/lib/threlte-components/SetCamera.svelte b/src/lib/threlte-components/SetCamera.svelte
index fb3592b7..2fd8a792 100644
--- a/src/lib/threlte-components/SetCamera.svelte
+++ b/src/lib/threlte-components/SetCamera.svelte
@@ -20,7 +20,7 @@
   const { renderer, renderMode } = useThrelte();
 
   $: {
-    const cameraSettings = parseCameraSettings($page.url?.searchParams);
+    const cameraSettings = parseCameraSettings($page?.url?.searchParams);
 
     if (cameraSettings) {
       position = cameraSettings.position || position;
diff --git a/src/lib/threlte-components/Vector.svelte b/src/lib/threlte-components/Vector.svelte
index 642c1cfb..324cf3fd 100644
--- a/src/lib/threlte-components/Vector.svelte
+++ b/src/lib/threlte-components/Vector.svelte
@@ -25,12 +25,7 @@
   $: direction = direction.clone().normalize();
 
   $: {
-    endPoint = origin.clone().add(
-      direction
-        .clone()
-        .normalize()
-        .multiplyScalar(length - coneHeight / 2)
-    );
+    endPoint = origin.clone().add(direction.clone().normalize().multiplyScalar(length));
 
     // 😃 hipedihopedie quaternions fix all the things
     const quatRotation = new Quaternion().setFromUnitVectors(
@@ -49,7 +44,7 @@
   );
 </script>
 
-<Line2 {origin} {endPoint} {color} {radius} {striped} {alwaysOnTop} />
+<Line2 {origin} endPoint={conePosition} {color} {radius} {striped} {alwaysOnTop} />
 
 <!-- Line is length minus cone height -->
 <!-- <T.Line2 bind:ref={line}>
diff --git a/src/lib/threlte-components/index.ts b/src/lib/threlte-components/index.ts
index 9c5476b4..ac326d12 100644
--- a/src/lib/threlte-components/index.ts
+++ b/src/lib/threlte-components/index.ts
@@ -6,11 +6,12 @@ export { default as Axis3D } from './Axis.svelte';
 export { default as Canvas3D } from './Canvas.svelte';
 export { default as Latex3D } from './Latex.svelte';
 export { default as Line3D } from './Line.svelte';
+export { default as Parallelogram3D } from './Parallelogram.svelte';
+export { default as PartialDeconstruction3D } from './PartialDeconstruction.svelte';
 export { default as Point3D } from './Point.svelte';
 export { default as Vector3D } from './Vector.svelte';
-export { default as PartialDeconstruction3D } from './PartialDeconstruction.svelte';
 
-export { PlaneFromNormal, PlaneFromPoints, AutoPlane } from './planes/index';
+export { AutoPlane, PlaneFromNormal, PlaneFromPoints } from './planes/index';
 
 export { default as cameraStore } from './stores/cameraStore';
 
diff --git a/src/lib/utils/MathVector.ts b/src/lib/utils/MathVector.ts
index cbd908e1..02cacccb 100644
--- a/src/lib/utils/MathVector.ts
+++ b/src/lib/utils/MathVector.ts
@@ -1,5 +1,8 @@
 import { Vector3 } from 'three';
 
+/**
+ * MathVector3 is a Vector3 that has the x, y, and z values swapped to be more consistent with the rest of the math
+ */
 export class MathVector3 extends Vector3 {
   constructor(x: number, y: number, z: number) {
     super(y, z, x);
diff --git a/src/routes/applet/appendix/complex_numbers/+page.svelte b/src/routes/applet/appendix/complex_numbers/+page.svelte
new file mode 100644
index 00000000..3aa8a6b7
--- /dev/null
+++ b/src/routes/applet/appendix/complex_numbers/+page.svelte
@@ -0,0 +1,100 @@
+<script lang="ts">
+  import { Canvas2D, Line2D } from '$lib/d3-components';
+  import Angle from '$lib/d3-components/Angle.svelte';
+  import Latex2D from '$lib/d3-components/Latex.svelte';
+  import Point from '$lib/d3-components/Point.svelte';
+  import { Controls } from '$lib/utils/Controls';
+  import { Formula } from '$lib/utils/Formulas';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
+  import { Vector2 } from 'three';
+
+  let controls = Controls.addSlider(3, 3, 8, 1, PrimeColor.blue) // m
+    .addSlider(-16, -64, -8, 8, PrimeColor.darkGreen) // a
+    .addSlider(16, 8, 64, 8, PrimeColor.raspberry); // b
+
+  function cartesian2Polar(vec2: Vector2, offset: Vector2 = new Vector2(0, 0)) {
+    const radius = offset.distanceTo(vec2);
+    const angleInRadians = Math.atan2(vec2.y, vec2.x); //This takes y first
+    return { radius, angleInRadians };
+  }
+
+  function polarToCartesian(
+    radius: number,
+    angleInRadians: number,
+    offset: Vector2 = new Vector2(0, 0)
+  ) {
+    return new Vector2(
+      offset.x + radius * Math.cos(angleInRadians),
+      offset.y + radius * Math.sin(angleInRadians)
+    );
+  }
+
+  $: polarForm = cartesian2Polar(new Vector2(controls[1], controls[2]));
+  $: radius = Math.pow(polarForm.radius, 1 / controls[0]);
+  $: angle = polarForm.angleInRadians;
+
+  function createFormulas(m: number, a: number, b: number) {
+    const piAngle = polarForm.angleInRadians / Math.PI;
+
+    return [
+      new Formula(
+        `\\begin{align*} z^{\\$1} &= \\$2 + \\$3i \\\\ 
+        r &= \\sqrt[\\$1]{${polarForm.radius.toFixed(2)}} = ${radius.toFixed(2)}  \\\\
+        \\phi &= \\frac{\\arg(${a.toFixed(2)} + ${b.toFixed(2)}i)}{\\$1} \\\\ &= \\frac{${(
+          piAngle * m
+        ).toFixed(2)}}{\\$1}\\pi = ${piAngle.toFixed(2)}\\pi \\end{align*}`
+      )
+        .addAutoParam(m, PrimeColor.blue)
+        .addAutoParam(a, PrimeColor.darkGreen)
+        .addAutoParam(b, PrimeColor.raspberry)
+    ];
+  }
+
+  $: formulas = createFormulas(controls[0], controls[1], controls[2]);
+</script>
+
+<Canvas2D showAxisNumbers={false} bind:controls {formulas}>
+  <!-- Start angle (green) -->
+  <Point position={polarToCartesian(radius, angle)} color={PrimeColor.blue} />
+  <Line2D
+    start={polarToCartesian(radius, angle)}
+    end={polarToCartesian(radius, angle + (Math.PI * 2) / controls[0])}
+    color={PrimeColor.blue}
+  />
+
+  <Angle color={PrimeColor.darkGreen} hasHead distance={radius} startAngle={0} endAngle={angle} />
+
+  <!-- Intermediate angles (red) -->
+  {#each new Array(controls[0]) as _, i}
+    {@const startAngle = angle + (Math.PI * 2 * i) / controls[0]}
+    {@const endAngle = startAngle + (Math.PI * 2) / controls[0]}
+    {@const startPos = polarToCartesian(radius, startAngle)}
+    {@const endPos = polarToCartesian(radius, endAngle)}
+    {@const latexPos = polarToCartesian(radius + 0.5, endAngle)}
+
+    <Line2D start={startPos} end={endPos} color={PrimeColor.blue} />
+
+    {#key endAngle}
+      <Latex2D
+        latex={endPos.x.toFixed(2) + ' + ' + endPos.y.toFixed(2) + 'i'}
+        position={latexPos}
+      />
+    {/key}
+
+    {#if startAngle > Math.PI * 2}
+      <Point position={endPos} color={PrimeColor.blue} />
+    {:else if endAngle < Math.PI * 2}
+      <Point position={endPos} color={PrimeColor.blue} />
+      <Angle color={PrimeColor.raspberry} distance={radius} {startAngle} {endAngle} hasHead />
+    {:else}
+      <Point position={endPos} color={PrimeColor.blue} />
+      <Angle
+        color={PrimeColor.yellow}
+        distance={radius}
+        {startAngle}
+        endAngle={Math.PI * 2}
+        hasHead
+      />
+    {/if}
+  {/each}
+</Canvas2D>
diff --git a/src/routes/applet/detgeometric/orientedarea1/+page.svelte b/src/routes/applet/detgeometric/orientedarea1/+page.svelte
new file mode 100644
index 00000000..b6801781
--- /dev/null
+++ b/src/routes/applet/detgeometric/orientedarea1/+page.svelte
@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { Arc2D, Canvas2D, Latex2D, Vector2D } from '$lib/d3-components';
+  import Draggable from '$lib/d3-components/Draggable.svelte';
+  import Parallelogram from '$lib/d3-components/Parallelogram.svelte';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
+  import { Vector2 } from 'three';
+  import RightScene from './RightScene.svelte';
+
+  let u = new Vector2(2, -0.5);
+  let v = new Vector2(0.5, 2);
+
+  $: C = u.clone().add(v);
+</script>
+
+<Canvas2D splitCanvas3DProps={{ cameraZoom: 50 }} showAxisNumbers={false}>
+  <Parallelogram points={[new Vector2(0, 0), u, v]} color={PrimeColor.yellow} />
+
+  <!-- U & V -->
+  <Draggable bind:position={u} color={PrimeColor.raspberry} id="u" />
+  <Draggable bind:position={v} color={PrimeColor.darkGreen} id="v" />
+  <Vector2D direction={u} length={u.length()} color={PrimeColor.raspberry} let:endPoint>
+    <Latex2D
+      latex={'\\mathbf{u}'}
+      offset={new Vector2(0.2, -0.1)}
+      position={endPoint.clone().multiplyScalar(0.5)}
+      color={PrimeColor.raspberry}
+    />
+    <Latex2D latex={'A'} extend={0.2} position={endPoint} />
+  </Vector2D>
+
+  <Vector2D direction={v} length={v.length()} color={PrimeColor.darkGreen} let:endPoint>
+    <Latex2D
+      latex={'\\mathbf{v}'}
+      offset={new Vector2(0.1, -0.1)}
+      position={endPoint.clone().multiplyScalar(0.5)}
+      color={PrimeColor.darkGreen}
+    />
+    <Latex2D latex={'B'} extend={0.4} offset={new Vector2(-0.2, 0)} position={endPoint} />
+  </Vector2D>
+
+  <!-- e1 -->
+  <Vector2D direction={new Vector2(1, 0)} length={1} color={PrimeColor.blue} let:endPoint>
+    <Latex2D latex={'\\mathbf{e_1}'} offset={new Vector2(-0.5, -0.15)} position={endPoint} />
+  </Vector2D>
+
+  <!-- e2 -->
+  <Vector2D direction={new Vector2(0, 1)} length={1} color={PrimeColor.blue} let:endPoint>
+    <Latex2D latex={'\\mathbf{e_2}'} offset={new Vector2(-0.4, -0.3)} position={endPoint} />
+  </Vector2D>
+
+  <Latex2D latex={`C`} offset={new Vector2(0.1, 0.2)} position={C} />
+
+  <Arc2D points={[u, v]} />
+
+  <svelte:fragment slot="splitCanvas3d">
+    <!-- To reduce clutter in this file, the right scene is defined in a separate file. -->
+    <RightScene {u} {v} />
+  </svelte:fragment>
+</Canvas2D>
diff --git a/src/routes/applet/detgeometric/orientedarea1/RightScene.svelte b/src/routes/applet/detgeometric/orientedarea1/RightScene.svelte
new file mode 100644
index 00000000..e95a5f72
--- /dev/null
+++ b/src/routes/applet/detgeometric/orientedarea1/RightScene.svelte
@@ -0,0 +1,53 @@
+<script lang="ts">
+  import { Axis3D, Latex3D, Point3D, Vector3D, Parallelogram3D } from '$lib/threlte-components';
+  import { MathVector3 } from '$lib/utils/MathVector';
+  import { PrimeColor } from '$lib/utils/PrimeColors';
+  import { Vector2, Vector3 } from 'three';
+
+  export let u: Vector2;
+  export let v: Vector2;
+
+  $: tu = new MathVector3(u.x, u.y, 0);
+  $: tv = new MathVector3(v.x, v.y, 0);
+  $: uxv = tu.clone().cross(tv);
+
+  $: C = tu.clone().add(tv); // C = u + v
+</script>
+
+<Axis3D />
+
+<Parallelogram3D points={[new Vector3(0, 0), tu, tv]} color={PrimeColor.yellow} strokeWidth={0.5} />
+
+<Vector3D direction={tu} length={tu.length()} color={PrimeColor.raspberry} let:endPoint>
+  <Latex3D latex={'\\tilde{\\mathbf{u}}'} position={endPoint.clone().multiplyScalar(0.5)} />
+  <Latex3D latex={'A'} offset={0.2} position={endPoint} />
+  <Point3D position={endPoint} color={PrimeColor.raspberry} />
+</Vector3D>
+
+<Vector3D direction={tv} length={tv.length()} color={PrimeColor.darkGreen} let:endPoint>
+  <Latex3D latex={'\\tilde{\\mathbf{v}}'} position={endPoint.clone().multiplyScalar(0.5)} />
+  <Latex3D latex={'B'} offset={0.2} position={endPoint} />
+  <Point3D position={endPoint} color={PrimeColor.darkGreen} />
+</Vector3D>
+
+<Latex3D latex={'C'} offset={0.2} position={C} />
+
+<Vector3D striped direction={uxv} length={uxv.length()} color={PrimeColor.blue} let:endPoint>
+  <Latex3D
+    latex={'\\tilde{\\mathbf{u}} \\times \\tilde{\\mathbf{v}}'}
+    offset={0.2}
+    position={endPoint}
+  />
+  <Point3D position={endPoint} color={PrimeColor.blue} />
+</Vector3D>
+
+<!-- e1 & e2 & e3 -->
+<Vector3D direction={new Vector3(0, 0, 1)} length={1} color={PrimeColor.blue} let:endPoint>
+  <Latex3D latex={'\\mathbf{e_1}'} offset={0.1} position={endPoint} />
+</Vector3D>
+<Vector3D direction={new Vector3(1, 0, 0)} length={1} color={PrimeColor.blue} let:endPoint>
+  <Latex3D latex={'\\mathbf{e_2}'} offset={0.1} position={endPoint} />
+</Vector3D>
+<Vector3D direction={new Vector3(0, 1, 0)} length={1} color={PrimeColor.blue} let:endPoint>
+  <Latex3D latex={'\\mathbf{e_3}'} offset={0.1} position={endPoint} />
+</Vector3D>