Put hand on eye.

lib/pages/creature-page.tsx

@@ -6,6 +6,8 @@ import {
   SvgSymbolContent,
   SvgSymbolData,
 } from "../svg-symbol";
+import { AttachmentPointType, PointWithNormal } from "../specs";
+import { subtractPoints } from "../point";
 
 const SYMBOL_MAP = new Map(
   SvgVocabulary.map((symbol) => [symbol.name, symbol])
@@ -19,10 +21,31 @@ function getSymbol(name: string): SvgSymbolData {
   return symbol;
 }
 
+function getAttachmentPoint(
+  s: SvgSymbolData,
+  type: AttachmentPointType,
+  idx: number = 0
+): PointWithNormal {
+  const { specs } = s;
+  if (!specs) {
+    throw new Error(`Symbol ${s.name} has no specs!`);
+  }
+  const points = specs[type];
+  if (!(points && points.length > idx)) {
+    throw new Error(
+      `Symbol ${s.name} must have at least ${
+        idx + 1
+      } ${type} attachment point(s)!`
+    );
+  }
+
+  return points[idx];
+}
+
 export const CreaturePage: React.FC<{}> = () => {
   const rand = new Random(1);
   const parts: string[] = [];
-  const ctx = createSvgSymbolContext();
+  const ctx = createSvgSymbolContext({ showSpecs: false });
   const eye = getSymbol("eye");
   const hand = getSymbol("hand");
 
@@ -30,13 +53,23 @@ export const CreaturePage: React.FC<{}> = () => {
     parts.push(rand.choice(SvgVocabulary).name);
   }
 
+  const handTail = getAttachmentPoint(hand, "tail");
+  const eyeCrown = getAttachmentPoint(eye, "crown");
+
+  const dist = subtractPoints(eyeCrown.point, handTail.point);
+
   return (
     <>
       <h1>Creature!</h1>
       <svg width="1280px" height="720px">
         <SvgSymbolContent data={eye} {...ctx} />
-        <g transform="scale(0.25 0.25) translate(1075 1075)">
-          <SvgSymbolContent data={hand} {...ctx} />
+        <g transform={`translate(${dist.x} ${dist.y})`}>
+          <g
+            transform-origin={`${handTail.point.x} ${handTail.point.y}`}
+            transform={`scale(0.25 0.25)`}
+          >
+            <SvgSymbolContent data={hand} {...ctx} />
+          </g>
         </g>
       </svg>
       <p>TODO: Make a creature with maybe the following parts:</p>

lib/point.ts

@@ -0,0 +1,16 @@
+import { Point } from "../vendor/bezier-js";
+
+export function subtractPoints(p1: Point, p2: Point): Point {
+  return {
+    x: p1.x - p2.x,
+    y: p1.y - p2.y,
+  };
+}
+
+export function normalizePoint(p: Point): Point {
+  const len = Math.sqrt(Math.pow(p.x, 2) + Math.pow(p.y, 2));
+  return {
+    x: p.x / len,
+    y: p.y / len,
+  };
+}

lib/specs.ts

@@ -2,6 +2,7 @@ import { Point, BBox } from "../vendor/bezier-js";
 import { getBoundingBoxForBeziers } from "./bounding-box";
 import * as colors from "./colors";
 import { pathToShapes } from "./path";
+import { normalizePoint, subtractPoints } from "./point";
 import type { SvgSymbolElement } from "./svg-symbol";
 
 const SPEC_LAYER_ID_RE = /^specs.*/i;
@@ -54,21 +55,6 @@ const NUM_ARROW_POINTS = 4;
 const ARROW_TOP_POINT_IDX = 0;
 const ARROW_BOTTOM_POINT_IDX = 2;
 
-function subtractPoints(p1: Point, p2: Point): Point {
-  return {
-    x: p1.x - p2.x,
-    y: p1.y - p2.y,
-  };
-}
-
-function normalizePoint(p: Point): Point {
-  const len = Math.sqrt(Math.pow(p.x, 2) + Math.pow(p.y, 2));
-  return {
-    x: p.x / len,
-    y: p.y / len,
-  };
-}
-
 function getArrowPoints(path: string): PointWithNormal[] {
   const shapes = pathToShapes(path);
   const points: PointWithNormal[] = [];