JSFiddle - React, Tailwind, and code Playground

by Javier Sosa

HTML

<canvas id="canvas"></canvas>

CSS

canvas {
  display: block;
  position: relative;
  zindex: 1;
  pointer-events: none;
}

JavaScript

var CANVASBALLOON = {};

// Constants
CANVASBALLOON.KAPPA = (4 * (Math.sqrt(2) - 1)) / 3;
CANVASBALLOON.WIDTH_FACTOR = 0.0333;
CANVASBALLOON.HEIGHT_FACTOR = 0.4;
CANVASBALLOON.TIE_WIDTH_FACTOR = 0.12;
CANVASBALLOON.TIE_HEIGHT_FACTOR = 0.10;
CANVASBALLOON.TIE_CURVE_FACTOR = 0.13;
CANVASBALLOON.GRADIENT_FACTOR = 0.3;
CANVASBALLOON.GRADIENT_CIRCLE_RADIUS = 1;
CANVASBALLOON.MAXBALLOONS = 45;
CANVASBALLOON.FRAMERATE = 60;
CANVASBALLOON.MARGIN = 100;
CANVASBALLOON.DROPSPEED = 4;

var colorOptions = ["rgba(180, 193, 225, 0.9)", "rgba(255, 249, 174, 0.9)"];
/**
 * Creates a new Balloon
 * @class	Represents a balloon displayed on a HTML5 canvas
 * @param	{String}	canvasElementID		Unique ID of the canvas element displaying the balloon
 * @param	{Number}	centerX				X-coordinate of the balloon's center
 * @param	{Number}	centerY				Y-coordinate of the balloon's center
 * @param	{Number}	radius				Radius of the balloon
 * @param	{String}	color				String representing the balloon's base color
 */
CANVASBALLOON.Balloon = function (canvasElementID) {
    var canvas = document.getElementById(canvasElementID);

    if (!canvas.getContext) {
        return;
    }
    var color = "rgba(" + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", " + Math.floor((Math.random() * 255)) + ", 0.9)";
    //var color = "rgba(180, 193, 225, 0.9)";
    this.gfxContext = canvas.getContext('2d');
    this.centerX = randomFromTo(CANVASBALLOON.MARGIN, canvas.width - CANVASBALLOON.MARGIN);
    this.centerY = randomFromTo(-20, -1000);
    this.radius = randomFromTo(50, 80);
    this.baseColor = new Color(color);
    this.darkColor = (new Color(color)).darken(CANVASBALLOON.GRADIENT_FACTOR);
    this.lightColor = (new Color(color)).lighten(CANVASBALLOON.GRADIENT_FACTOR);
    this.rotation = randomFromTo(20, 120);
    this.swayAngle = Math.random();
    this.swayIndex = Math.random() / 100;
    this.wobbleAngle = Math.random() * 2;
    this.wobbleIndex = Math.random() /...