Rainbow border

Note: requires tweaking crank.js to accept xmlns:

bikeshaving/crank#268

src/color.js

@@ -0,0 +1,30 @@
+import Color from "colorjs.io";
+import { getScroll } from "./drag.js";
+
+const C = 0.8;
+
+export function getColorFromScreenCoord(x, y, w, h) {
+  const a = (x / w - 0.5) * C;
+  const b = (y / h - 0.5) * C;
+  return new Color("oklab", [1, a, b]).toString({
+    format: "rgba",
+  });
+}
+
+export function getColorFromPolarCoord(phi, lightness = 1.0) {
+  const a = C * Math.cos(phi);
+  const b = C * Math.sin(phi);
+  return new Color("oklab", [lightness, a, b]).toString({
+    format: "rgba",
+  });
+}
+
+export function getColorFromWorldCoord(x, y) {
+  const { left, top } = getScroll();
+  return getColorFromScreenCoord(
+    x - left,
+    y - top,
+    window.innerWidth,
+    window.innerHeight
+  );
+}

src/main.js

@@ -12,7 +12,8 @@ import {
   spiralAddend,
 } from "./constants.js";
 import { nanoid } from "nanoid";
-import { getColorFromWorldCoord } from "./colorwheel.js";
+import { getColorFromWorldCoord } from "./color.js";
+import { RainbowBorder } from "./rainbow-border.js";
 import {
   applyNodeToShapes,
   removeShape,
@@ -580,6 +581,7 @@ function* Svg({ nodes: initNodes = [], shapes: initShapes = [] }) {
             }
           })}
         </svg>
+        <${RainbowBorder} w=${winW} h=${winH} borderWidth=${2} />
         ${htmlShapes.map(([shapeId, shape]) => {
           switch (shape.type) {
             case "circle":

src/orb.js

@@ -6,7 +6,7 @@ import {
   orbRectHeight,
   stringLengthTransition,
 } from "./constants.js";
-import { getColorFromWorldCoord } from "./colorwheel.js";
+import { getColorFromWorldCoord } from "./color.js";
 
 function isFirefox() {
   return navigator.userAgent.toLowerCase().indexOf("firefox") > -1;

src/rainbow-border.js

@@ -0,0 +1,54 @@
+import { html } from "./utils.js";
+import { getColorFromPolarCoord } from "./color.js";
+
+export function* RainbowBorder() {
+  const N = 12;
+  const radians = Array.from({ length: N }, (_, i) => (i * Math.PI * 2) / N);
+
+  const css = html`<style>
+    div.gradient {
+      width: 100%;
+      height: 100%;
+      background-image: conic-gradient(
+        from 90deg,
+        ${radians
+          .map((r, i) => `${getColorFromPolarCoord(r)} ${(i / 12) * 100}%`)
+          .join(",\n")}
+      );
+    }
+  </style>`;
+
+  for (const { w, h, borderWidth: b } of this) {
+    yield html`
+      ${css}
+      <svg
+        viewBox="0 0 ${w} ${h}"
+        style=${{
+          "width": `${w}px`,
+          "height": `${h}px`,
+          "pointer-events": "none",
+          "position": "fixed",
+          "left": 0,
+          "top": 0,
+        }}
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <mask id="mask">
+          <rect x="0" y="0" width=${w} height=${h} fill="white" />
+          <rect
+            x=${b}
+            y=${b}
+            width=${w - b * 2}
+            height=${h - b * 2}
+            rx=${b}
+            ry=${b}
+          />
+        </mask>
+
+        <foreignObject width="100%" height="100%" mask="url(#mask)">
+          <div class="gradient" xmlns="http://www.w3.org/1999/xhtml"></div>
+        </foreignObject>
+      </svg>
+    `;
+  }
+}