JSFiddle - React, Tailwind, and code Playground

by adamschwartz

JavaScript

(function(){
    var canvas, context, canvasHeight = 100 + 10, canvasWidth = 400;
    canvas = document.createElement('canvas');
    canvas.height = canvasHeight + '';
    canvas.width = canvasWidth + '';
    context = canvas.getContext('2d');
    document.body.appendChild(canvas);
    canvas.style.cssText = 'position: absolute; left: -99999px';
    context.fillStyle = '#fff';
    
    window.console.graph = function (data) {
        var units = Math.floor(canvasWidth / data.length);
        for (var i = 0; i < data.length; i++) {
            context.fillRect(i * units, 10, units, 10 + (100 - data[i]));
        }
        var width = units * (data.length - 1);
        console.log('%c ', 'font-size: 0; padding-left: ' + width + 'px; padding-bottom: ' + canvasHeight + 'px; background: url("' + canvas.toDataURL() + '"), -webkit-linear-gradient(#ccc, #aaa);');
    }
})();

console.graph([60, 40, 78, 59, 84, 95, 63, 42, 31, 53, 56, 53, 43, 13, 53, 64, 13, 60, 40, 78, 59, 84, 95, 63, 42, 31, 53, 56, 53, 43, 13, 53, 64, 13, 60, 40, 78, 59, 84, 95, 63, 42, 31, 53, 56, 53, 43, 13, 53, 64, 13, 60, 40, 78, 59, 84, 95, 63, 42, 31, 53, 56, 53, 43, 13, 53, 64, 13]);