JSFiddle - React, Tailwind, and code Playground

by sallar

HTML

<div class="led">
  <canvas id="wrapper"></canvas>
</div>

CSS

.led {
  border-radius: 4px;
  background: linear-gradient(to bottom, rgba(56,56,56,1) 0%,rgba(33,33,33,1) 100%);
  box-shadow: 0 1px 0 #fff, inset 0 1px #555;
  border: 1px solid #333;
  padding: 5px;
  display: inline-block;
}

JavaScript

function hexToBin(num) {
  const bin = num.toString(2);
  return (bin.length < 8) ? '0'.repeat(8 - bin.length) + bin : bin;
}

function fontToBin(input) {
  return input.map(row => row.map(num => hexToBin(num)));
}

const fivebyfive = fontToBin([
	[0x00,0x00,0x00,0x00,0x00,0x00], //  
	[0x2e,0x00,0x00,0x00,0x00,0x00], // !
	[0x03,0x00,0x03,0x00,0x00,0x00], // "
	[0x0a,0x1f,0x0a,0x1f,0x0a,0x00], // #
	[0x2e,0x2a,0x6b,0x2a,0x3a,0x00], // $
	[0x0e,0x2a,0x1e,0x08,0x3c,0x2a], // %
	[0x3e,0x2a,0x2a,0x22,0x38,0x08], // &
	[0x03,0x00,0x00,0x00,0x00,0x00], // '
	[0x1c,0x22,0x00,0x00,0x00,0x00], // (
	[0x22,0x1c,0x00,0x00,0x00,0x00], // )
	[0x15,0x0e,0x04,0x0e,0x15,0x00], // *
	[0x08,0x08,0x3e,0x08,0x08,0x00], // +
	[0x60,0x00,0x00,0x00,0x00,0x00], // ,
	[0x08,0x08,0x08,0x08,0x08,0x00], // -
	[0x20,0x00,0x00,0x00,0x00,0x00], // .
	[0x20,0x10,0x08,0x04,0x02,0x00], // /
	[0x3e,0x22,0x2a,0x22,0x3e,0x00], // 0
	[0x04,0x3e,0x00,0x00,0x00,0x00], // 1
	[0x3a,0x2a,0x2a,0x2a,0x2e,0x00], // 2
	[0x2a,0x2a,0x2a,0x2a,0x3e,0x00], // 3
	[0x0e,0x08,0x08,0x08,0x3e,0x00], // 4
	[0x2e,0x2a,0x2a,0x2a,0x3a,0x00], // 5
	[0x3e,0x2a,0x2a,0x2a,0x3a,0x00], // 6
	[0x02,0x02,0x02,0x02,0x3e,0x00], // 7
	[0x3e,0x2a,0x2a,0x2a,0x3e,0x00], // 8
	[0x2e,0x2a,0x2a,0x2a,0x3e,0x00], // 9
	[0x14,0x00,0x00,0x00,0x00,0x00], // :
	[0x34,0x00,0x00,0x00,0x00,0x00], // ;
	[0x08,0x14,0x22,0x00,0x00,0x00], // <
	[0x14,0x14,0x14,0x14,0x14,0x00], // =
	[0x22,0x14,0x08,0x00,0x00,0x00], // >
	[0x06,0x02,0x2a,0x0a,0x0e,0x00], // ?
	[0x3e,0x02,0x3a,0x2a,0x3e,0x00], // @
	[0x3e,0x12,0x12,0x12,0x3e,0x00], // A
	[0x3e,0x2a,0x2a,0x2a,0x36,0x00], // B
	[0x3e,0x22,0x22,0x22,0x22,0x00], // C
	[0x3e,0x22,0x22,0x22,0x1c,0x00], // D
	[0x3e,0x2a,0x2a,0x2a,0x22,0x00], // E
	[0x3e,0x0a,0x0a,0x0a,0x02,0x00], // F
	[0x3e,0x22,0x2a,0x2a,0x3a,0x00], // G
	[0x3e,0x08,0x08,0x08,0x3e,0x00], // H
	[0x22,0x3e,0x22,0x00,0x00,0x00], // I
	[0x38,0x20,0x20,0x20,0x3e,0x00], // J
	[0x3e,0x08,0x08,0x14,0x22,0x00], // K
	[0x3e,0x20,0x20,0x20,0x20,0x00],...