JSFiddle - React, Tailwind, and code Playground

by cvoll

HTML

<div id="output"></div>

CSS

#output {
    font: 400 10px Source Code Pro;
    width: 500px;
    white-space: pre;
}

JavaScript

var F,S,V,tmr;
    
var doframe = function() {
    var el = document.getElementById("output"),
        column,
        row,
        e,
        a,
        f,
        g,
        h,
        j,
        b,
        i = [];
    
    // /10 = amount of scale
    // /5 = overshoot & correction
    S += V+= (1 - S) / 10 - V / 5;

    // iterate over 24 rows
	for (row = 0; row < 24; row++) {
        
		// iterate over 73 columns
		for (column = 0; column < 73; column++) {
            
            // determine which character to show
            // each character has three samples to determine the anti-aliasing:
            // top, middle, and bottom
            for (a = e = 0; a < 3; a++) {
                f = S * (column - 27); // 27 is an x modifier
                g = S * (row * 3 + a - 36); // 36 y coord, 3 height
                
                // Render the circle
                // width: 136
                // height: 84
                // scale: 92033
                e ^= (136 * f * f + 84 * g * g < 92033) << a;
                b = 0;
                p = 6;
                for (m = 0; m < 8;) {
                    // encoded yahoo logo
                    h = ('O:85!fI,wfO8!yZfO8!f*hXK3&fO;:O;#hP;"i'.charCodeAt(b) - 79) / 14.6423;
                    j = "<[\\]O=IKNAL;KNRbF8EbGEROQ@BSXXtG!#t3!^".charCodeAt(b++) - 79;
                    if (f * Math.cos(h) + g * Math.sin(h) < j / 1.165) {
                        b = p;
                        p = "<AFJPTX".charCodeAt(m++) - 50;
                    } else if (b == p) {
                        e ^= 1 << a;
                        m = 8;
                    }
                }
            }
            
            i.push(" ''\".$u$"[e]); // append the correct char
        }
        i.push("\n"); // newline for row
    }
        
    // join the characters
    el.innerHTML = i.join("");

    // animation done, clean up
    if (!F--) {
        clearInterval(tmr);
        tmr = undefined;
    }
}

var animate =...