JSFiddle - React, Tailwind, and code Playground

by yonatan

HTML

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

CSS

body {
  background: url(http://www.vectortiles.com/wp-content/uploads/disco-ball-background-tiles-05.jpg);
}

JavaScript

let ctx = c.getContext('2d');

function g(x, y, r, l) {
  let gradient = ctx.createRadialGradient(x, y, r, x, y, 0);
  gradient.addColorStop(0, `hsla(0,0%,100%,0)`);
  gradient.addColorStop(1, `hsla(0,0%,${l*100}%,.1)`);
  return gradient;
}

function cloud(x, y, r, l) {
  if (r > 1) {
    ctx.fillStyle = g(x, y, r, l);
    ctx.fillRect(x - r, y - r, r * 2, r * 2);
    cloud(x+r*(Math.random()*2-1), y+r*(Math.random()*2-1), r*.75, l+.05);
    cloud(x+r*(Math.random()*2-1), y+r*(Math.random()*2-1), r*.75, l-.05);
    cloud(x+r*(Math.random()*2-1), y+r*(Math.random()*2-1), r*.75, l-.05);
  }
}

cloud(100,100,15,.5);