diff --git a/bundle.js b/bundle.js
index 03df1c3..19e4917 100644
--- a/bundle.js
+++ b/bundle.js
@@ -502,35 +502,31 @@ init({
     width: 400,
     height: 400
 });
-const movingVector = new Vector(100, 300);
-let angleMultiplier = 0;
+new Vector(100, 300);
 const v = new Vector(30, 30);
 doodler.registerDraggable(v, 20);
 const img = new Image();
 img.src = './EngineSprites.png';
 img.hidden;
 document.body.append(img);
+const p = new Vector(200, 200);
 doodler.createLayer(()=>{
-    doodler.line(new Vector(100, 100), new Vector(200, 200));
-    doodler.dot(new Vector(300, 300));
-    doodler.fillCircle(movingVector, 6, {
-        color: 'red'
+    doodler.line(p.copy().add(-8, 10), p.copy().add(8, 10), {
+        color: 'grey',
+        weight: 2
     });
-    doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
-    doodler.fillRect(new Vector(200, 250), 30, 10);
-    doodler.drawCenteredSquare(new Vector(200, 200), 40, {
-        color: 'purple',
-        weight: 5
+    doodler.line(p.copy().add(-8, -10), p.copy().add(8, -10), {
+        color: 'grey',
+        weight: 2
     });
-    doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250));
-    let rotatedOrigin = new Vector(200, 200);
-    doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, ()=>{
-        doodler.drawCenteredSquare(rotatedOrigin, 30);
-        doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20);
+    doodler.line(p, p.copy().add(0, 12), {
+        color: 'brown',
+        weight: 4
+    });
+    doodler.line(p, p.copy().add(0, -12), {
+        color: 'brown',
+        weight: 4
     });
-    movingVector.set((movingVector.x + 1) % 400, movingVector.y);
-    angleMultiplier += .001;
-    doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20);
 });
 document.addEventListener('keyup', (e)=>{
     e.preventDefault();
diff --git a/canvas.ts b/canvas.ts
index 0932005..18cba6d 100644
--- a/canvas.ts
+++ b/canvas.ts
@@ -75,6 +75,7 @@ export class Doodler {
 
       for (const d of this.draggables.filter(d => d.beingDragged)) {
         d.point.add(e.movementX, e.movementY)
+        d.onDrag && d.onDrag({x: e.movementX, y: e.movementY});
       }
     })
     this.startDrawLoop();
@@ -251,12 +252,14 @@ export class Doodler {
   addDragEvents({
     onDragEnd,
     onDragStart,
+    onDrag,
     point
-  }: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void }) {
+  }: { point: Vector, onDragEnd?: () => void, onDragStart?: () => void, onDrag?: () => void }) {
     const d = this.draggables.find(d => d.point === point);
     if (d) {
       d.onDragEnd = onDragEnd;
       d.onDragStart = onDragStart;
+      d.onDrag = onDrag;
     }
   }
 
@@ -345,6 +348,7 @@ type Draggable = {
   id: string;
   onDragStart?: () => void;
   onDragEnd?: () => void;
+  onDrag?: (dragDistance?: {x: number, y: number}) => void;
 }
 
 type Clickable = {
diff --git a/main.ts b/main.ts
index e4d8d96..a2776c7 100644
--- a/main.ts
+++ b/main.ts
@@ -16,28 +16,35 @@ img.src = './EngineSprites.png'
 img.hidden
 document.body.append(img)
 
+const p = new Vector(200, 200);
+
 doodler.createLayer(() => {
 
-  doodler.line(new Vector(100, 100), new Vector(200, 200))
-  doodler.dot(new Vector(300, 300))
-  doodler.fillCircle(movingVector, 6, { color: 'red' });
-  doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
-  doodler.fillRect(new Vector(200, 250), 30, 10)
+  // doodler.line(new Vector(100, 100), new Vector(200, 200))
+  // doodler.dot(new Vector(300, 300))
+  // doodler.fillCircle(movingVector, 6, { color: 'red' });
+  // doodler.drawRect(new Vector(50, 50), movingVector.x, movingVector.y);
+  // doodler.fillRect(new Vector(200, 250), 30, 10)
 
-  doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
-  doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
+  // doodler.drawCenteredSquare(new Vector(200, 200), 40, { color: 'purple', weight: 5 })
+  // doodler.drawBezier(new Vector(100, 150), movingVector, new Vector(150, 300), new Vector(100, 250))
 
-  let rotatedOrigin = new Vector(200, 200)
-  doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
-    doodler.drawCenteredSquare(rotatedOrigin, 30)
-    doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
-  })
+  // let rotatedOrigin = new Vector(200, 200)
+  // doodler.drawRotated(rotatedOrigin, Math.PI * angleMultiplier, () => {
+  //   doodler.drawCenteredSquare(rotatedOrigin, 30)
+  //   doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(160, 300), 80, 20)
+  // })
 
 
-  movingVector.set((movingVector.x + 1) % 400, movingVector.y);
-  angleMultiplier += .001;
+  // movingVector.set((movingVector.x + 1) % 400, movingVector.y);
+  // angleMultiplier += .001;
 
-  doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
+  // doodler.drawSprite(img, new Vector(0, 40), 80, 20, new Vector(100, 300), 80, 20)
+
+  doodler.line(p.copy().add(-8,10), p.copy().add(8,10), {color: 'grey', weight: 2})
+  doodler.line(p.copy().add(-8,-10), p.copy().add(8,-10), {color: 'grey', weight: 2})
+  doodler.line(p, p.copy().add(0,12), {color: 'brown', weight: 4})
+  doodler.line(p, p.copy().add(0,-12), {color: 'brown', weight: 4})
 });
 
 document.addEventListener('keyup', e => {