Courselore Logo (Hilbert Curve).mjs

import html from "@radically-straightforward/html";

// https://www.youtube.com/watch?v=dSK-MW-zuAc
const order = 2;
const viewBox = 24; /* var(--space--6) */
// Hilbert
// let points = [
//   [1 / 4, 1 / 4],
//   [1 / 4, 3 / 4],
//   [3 / 4, 3 / 4],
//   [3 / 4, 1 / 4],
// ];
let points = [
  [1 / 4, 1 / 4],
  [3 / 4, 3 / 4],
  [3 / 4, 1 / 4],
  [1 / 4, 3 / 4],
];
for (let orderIndex = 2; orderIndex <= order; orderIndex++) {
  const upperLeft = [];
  const lowerLeft = [];
  const lowerRight = [];
  const upperRight = [];
  for (const [x, y] of points) {
    upperLeft.push([y / 2, x / 2]);
    lowerLeft.push([x / 2, y / 2 + 1 / 2]);
    lowerRight.push([x / 2 + 1 / 2, y / 2 + 1 / 2]);
    upperRight.push([(1 - y) / 2 + 1 / 2, (1 - x) / 2]);
  }
  points = [...upperLeft, ...lowerLeft, ...lowerRight, ...upperRight];
}
const pathD = `M ${points
  .map((point) => point.map((coordinate) => coordinate * viewBox).join(" "))
  .join(" L ")} Z`;
console.log(html`
  <svg
    width="${viewBox.toString()}"
    height="${viewBox.toString()}"
    viewBox="0 0 ${viewBox.toString()} ${viewBox.toString()}"
  >
    <path
      d="${pathD}"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
    />
  </svg>
`);