JSFiddle - React, Tailwind, and code Playground

by Josh Pullen

CSS

canvas {
  margin-right: 4px;
  /* border: 1px solid #ddd; */
}

JavaScript

class Letter {
  constructor(char, grid) {
    this.char = char;
    this.grid = grid;
  }
}

class Font {
  constructor(letters) {
    this.letters = letters;
  }
}

function letter(char) {
  return function(strings, ...expressions) {
    return new Letter(
    	char,
      strings
      	.join("")
        .split("\n")
        .map(row => (
        	row
          	.split("")
            .filter(ch => ["0", "1"].includes(ch))
            .map(ch => ch === "1")
        ))
        .filter(row => row.length > 0)
    );
  }
}

const myFont = new Font([
  letter("A")`
  	0110
    1001
    1001
    1111
    1001
  `,
  letter("B")`
  	1110
    1001
    1110
    1001
    1110
  `,
  letter("C")`
  	0110
    1001
    1000
    1001
    0110
  `,
  letter("D")`
  	1110
    1001
    1001
    1001
    1110
  `,
  letter("E")`
  	1111
    1000
    1110
    1000
    1111
  `,
  letter("F")`
  	1111
    1000
    1110
    1000
    1000
  `,
  letter("G")`
  	0111
    1000
    1011
    1001
    0110
  `,
  letter("H")`
  	1001
    1001
    1111
    1001
    1001
  `,
  letter("I")`
  	111
    010
    010
    010
    111
  `,
  letter("J")`
  	0111
    0001
    0001
    1001
    0110
  `,
  letter("K")`
  	1001
    1010
    1100
    1010
    1001
  `,
  letter("L")`
  	1000
    1000
    1000
    1000
    1111
  `,
  letter("M")`
  	10001
    11011
    10101
    10001
    10001
  `,
  
  // Duplicates
  letter("N")`
  	1001
    1101
    1011
    1001
    1001
  `,
  letter("N")`
  	10001
    11001
    10101
    10011
    10001
  `,
  
  letter("O")`
  	0110
    1001
    1001
    1001
    0110
  `,
  letter("P")`
  	1110
    1001
    1001
    1110
    1000
  `,
  letter("Q")`
  	0110
    1001
    1001
    1011
    0111
  `,
  letter("R")`
  	1110
    1001
    1001
    1110
    1001
  `,
  letter("S")`
  	0111
    1000
    0110
    0001
    1110
  `,
  letter("T")`
  	111
    010
    010
    010
    010
  `,
  letter("U")`
  	1001
    1001
    1001
    1001
    0110
  `,
  
  //...