JSFiddle - React, Tailwind, and code Playground

by Spencer Smith

HTML

<svg viewBox="0 0 200 200" width="300px">
  <!-- <path d="M0,0 L10,0 L10,10 L0,10" stroke="white" stroke-width="5px" stroke-linecap="round" stroke-linejoin="round" fill="none"></path> -->
</svg>

CSS

body {
  /* background-color: whitesmoke; */
  background-color: white;
  /* background-color: #222; */
}
svg {
  /* background-color: #222; */
  border-radius: 4px;
  margin: 0 auto;
  display: block;
}

JavaScript

const svg = document.querySelector('svg');

const DIMENTION = 30;
const LINE_WIDTH = 5;
const DELAY = 15;

const adjust = LINE_WIDTH / 2; // used to make sharp corners
const borderWidth = adjust / 2;

/* const canvas = document.querySelector('canvas') */
const width = 200 - (borderWidth * 2);
const height = 200 - (borderWidth * 2);

const xSpace = width / DIMENTION;
const xStart = borderWidth + xSpace / 2;
const ySpace = height / DIMENTION;
const yStart = borderWidth + ySpace / 2;

const start = 0;
let end = 0;
let longestDist = 0;
const graph = [];
const tree = [];
const visited = {};

// add nodes to graph
for (let i = 0; i < DIMENTION * DIMENTION; i++) {
  graph.push({
    index: i,
    to: [],
  });
}

// add edges
for (let i = 0; i < DIMENTION * DIMENTION; i++) {
  const node = graph[i];
  const { up, down, left, right } = getNeighbors(i);
  const edges = [up, down, right, left].filter(e => e);
  node.edges = edges;
}

// add name
const name = [
  [{x:10,y:10}, {x:9,y:10}, {x:9,y:11}, {x:10,y:11}, {x:10,y:12}, {x:9,y:12}], // S
  [{x:11,y:10}, {x:11,y:12}, {x:11,y:10}, {x:12,y:10}, {x:12,y:11}, {x:11,y:11}], // P
  [{x:14,y:10},{x:13,y:10},{x:13,y:12},{x:14,y:12},{x:13,y:12},{x:13,y:11},{x:14,y:11}], // E
  [{x:15,y:12},{x:15,y:10},{x:16,y:10},{x:16,y:12}], // N
  [{x:18,y:10},{x:17,y:10},{x:17,y:12},{x:18,y:12}], // C
  [{x:20,y:10},{x:19,y:10},{x:19,y:12},{x:20,y:12},{x:19,y:12},{x:19,y:11},{x:20,y:11}], // E
  [{x:21,y:10}, {x:21,y:12}, {x:21,y:10}, {x:22,y:10}, {x:22,y:11}, {x:21,y:11}, {x:22,y:12}], // R

  [{x:16,y:14},{x:15,y:14},{x:15,y:15},{x:16,y:15},{x:16,y:16},{x:15,y:16}], // S
  [{x:17,y:16},{x:17,y:16},{x:17,y:14},{x:18,y:15},{x:19,y:14},{x:19,y:16}], // M
  // [{x:18,y:14},{x:18,y:14}], // M dot
  [{x:20,y:16},{x:20,y:15},{x:20,y:14}], // I
  [{x:22,y:16},{x:22,y:15},{x:22,y:14}], // T ver
  [{x:21,y:14},{x:23,y:14}], // T hor
  [{x:24,y:14},{x:24,y:16}], // H ver 1
  [{x:25,y:14},{x:25,y:16}], // H ver 2
  [{x:24,y:15},{x:25,y:15}], // H...