JSFiddle - React, Tailwind, and code Playground

by _Sud

HTML

<canvas id='c'></canvas>

CSS

body {
    background: #3FA8C6;
    background-image: -moz-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%);
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3fa8c6), color-stop(0%, #3fa8c6), color-stop(100%, #399ab2));
    background-image: -webkit-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%);
    background-image: -o-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%);
    background-image: -ms-linear-gradient(top, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%);
    background-image: linear-gradient(to bottom, #3fa8c6 0%, #3fa8c6 0%, #399ab2 100%);
    color: #fff;
    padding: 0px;
    margin-top:10px;
    margin-bottom:0px;
    margin-right:0px;
    margin-left:0px;
    border:0px;
    overflow:hidden;
}

JavaScript

var width = window.innerWidth - 10;
var height = window.innerHeight - 10;
var c = document.getElementById('c');
var ctx = c.getContext('2d');
c.width = width;
c.height = height;

var paint = [];

var totalPaints = width/50;
var size = 20;

function init(){
    for (var i = 0; i < totalPaints; i++){
        addPaint();
    }
	
	//Set Interval -- Terrible! I know!
    setInterval( update, 40 );
}

function drawPaint(x,y,size, colour) {
   /* ctx.beginPath();
    ctx.arc(x, y, size ,0 , Math.PI*2, true);
	ctx.closePath();
	ctx.fillStyle=colour;
	ctx.fill();*/
	size = size + 10;
	ctx.font = size+"pt Calibri";
	 ctx.fillStyle = colour;
	 ctx.fillText("H", x,y);
}

function update(){
    for (var i = 0; i < paint.length; i++){
        paint[i].y = paint[i].y - paint[i].v;
        if (paint[i].y < 20){
            paint.splice(i,1);
            addPaint();
        }
        drawPaint(paint[i].x, paint[i].y, paint[i].s, paint[i].c);
    }
}

function addPaint(){
	//Try 50 times
	var i = 0;
	var maxTries = 25;
	var conflict;
	for (i; i < maxTries; i++) {
		size = Math.random() * size + 10;
		x = Math.random() * width;
		
		conflict = false;
		//Dont Allow drips ontop of each other (Overtaking drops destroy the prettyness)
		for (var j = 0; j < paint.length; j++) {
			if ((x + size > paint[j].x) && (x - size < paint[j].x + paint[j].s)) {
				conflict = true;
				break;
			}
			
			if ((x - size < paint[j].x) && (x + size > paint[j].x - paint[j].s)) {
				conflict = true;
				break;
			}
		}
		
		if (!conflict) {
			paint.push({
				s: size,
				x: x,
				y: height-10,
				v: (Math.random() * 3) + 2,
				c: '#' + (Math.random() * 0x313131 + 0xaaaaaa | 0).toString(16)
			});
			break;
		}
	}
}

init();