JSFiddle - React, Tailwind, and code Playground

by gurkavcu

HTML

<html>
    <head>
    <link href='http://fonts.googleapis.com/css?family=VT323' rel='stylesheet' type='text/css'>
    </head>
<body>
<canvas width="40" height="40"></canvas>
<div>I ♥ CGA</div>
</body>
</html>

CSS

body {
    background: grey;
}

canvas {
    display: none;
}

div {
    background-color: magenta;
    border-width: 10px;
    color: cyan;
    text-align: center;
    font-family: 'VT323', arial, serif;
    font-size: 60px;
    padding: 10px;
}

JavaScript

var canvas = $("canvas")[0];
var context = canvas.getContext("2d");
function render(c1, c2) {
    context.clearRect(0, 0, 40, 40);
    for (var x = 0; x < 40; x+=20) {
        context.fillStyle = c1;
        context.fillRect(x, 0, 10, 10);
        context.fillRect(x+10, 30, 10, 10);
        context.fillRect(0, 20, 10, 10);    
        context.fillRect(30, 10, 10, 10);
        context.fillStyle = c2;
        context.fillRect(x+10, 0, 10, 10);
        context.fillRect(x, 30, 10, 10);    
        context.fillRect(0, 10, 10, 10);
        context.fillRect(30, 20, 10, 10);
    }
    borderimage = 'url("{url}") 10 repeat'.replace("{url}", canvas.toDataURL())    
    $("div").css("-webkit-border-image", borderimage).css("-moz-border-image", borderimage).css("-o-border-image", borderimage).css("border-image", borderimage);
    setTimeout(function () {render(c2, c1);}, 255);
}
render("white", "black");