JSFiddle - React, Tailwind, and code Playground

by Sergei Sokolov

HTML

<h1>Привет, мир!</h1>
<p>Это моя офигенная страница</p>

JavaScript

/**
 *  Для вопроса http://hashcode.ru/questions/309733/
 */
var rnd = function( top){
        return Math.round( Math.random()*top);
    }
    ,width = 300
    ,height = 400
    ,tria = function(){
        var c = document.getElementById("hashcode")
            ,ctx = c.getContext("2d")
            ,x1=rnd(width), y1=rnd(height)
            ,x2=rnd(width), y2=rnd(height)
            ,x3=rnd(width), y3=rnd(height)
            ,r=rnd(255), g=rnd(255), b=rnd(255)
        ;
        ctx.moveTo( x1,y1);
        ctx.lineTo( x2, y2);
        ctx.lineTo( x3, y3);

        ctx.fillStyle = "rgba("+r+","+g+","+b+",0.16)";
        ctx.fill();
        triangles++;
        if( triangles < limit) timeout = setTimeout( tria, 800);
    }
    ,timeout = null
    ,triangles = 0     // счетчик
    ,limit = 5         // максимум треугольников
;
$(document).ready( function(){
    var can = $('<canvas />')
        .attr('id', 'hashcode')
        .attr('width', width)
        .attr('height', height)
    ;
    var div = $('<div />')
        .attr('style', 'position:absolute;width:'+width+';height:'+height+';z-index:-1000;')
        .attr('id', 'ctxid')
    ;
    $('body').prepend( $(div).append( can));
    tria();
});