JSFiddle - React, Tailwind, and code Playground

by Sam Wray

HTML

<canvas></canvas>

CSS

body {
    background-color: black;
    margin: 0;
}

canvas {
    position: fixed;
}

JavaScript

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

function r() {
    canvas.width = window.innerWidth * window.devicePixelRatio;
    canvas.height = window.innerHeight * window.devicePixelRatio;
    canvas.style.width = window.innerWidth + 'px';
    canvas.style.height = window.innerHeight + 'px';
}

window.addEventListener('resize', r);
r();

var MonoCodeLogo = function(scale, offsetX, offsetY) {
    var self = this;
    scale = scale || 1;
    offsetX = offsetX || 0;
    offsetY = offsetY || 0;
    
    var logoArray = [
        [//m
        	[ true,  true,  true,  true ],
            [ true,  true,  true,  true ],
            [ true,  true,  true,  true ],
            [ true,  false, false, true ]
        ],
        [//o
        	[ true,  true,  true,  true ],
            [ true,  false, true,  true ],
            [ true,  false, true,  true ],
            [ true,  true,  true,  true ]
        ],
        [//n
        	[ true,  true,  true,  true ],
            [ true,  true,  true,  true ],
            [ true,  false, false, true ],
            [ true,  false, false, true ]
        ],
        [//o
        	[ true,  true,  true,  true ],
            [ true,  false, true,  true ],
            [ true,  false, true,  true ],
            [ true,  true,  true,  true ]
        ],
        [false],//.
        [//c
        	[ true,  true,  true,  true ],
            [ true,  true,  false, false],
            [ true,  true,  false, false],
            [ true,  true,  true,  true ]
        ],
        [//o
        	[ true,  true,  true,  true ],
            [ true,  false, true,  true ],
            [ true,  false, true,  true ],
            [ true,  true,  true,  true ]
        ],
        [//d
        	[ true,  true,  true,  true ],
            [ true,  true,  false, true ],
            [ true,  true,  false, true ],
            [ true,  true,  true,  true ]
        ],
        [//e
        	[ true,  true,  true,  true ],
            [...