JSFiddle - React, Tailwind, and code Playground

by Wondz

HTML

<div id="ad">
	<canvas id="canvas" class="full"></canvas>
</div>

CSS

html,
body {
  margin: 0;
  overflow: hidden;
  background-color: black;
}

#ad {
  position: absolute;
  width: 300px;
  height: 250px;
  background-image: url(http://hires.photospublic.com/PP34032412-Dark-grey-clouds.jpg);
  background-size: cover;
  background-position: center top;
}

.full {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

JavaScript

var canvas = document.getElementById('canvas');
ctx = canvas.getContext('2d'),
  WIDTH = document.getElementById("ad").clientWidth,
  HEIGHT = document.getElementById("ad").clientHeight,
  rain = {
    // Variables
    population: 150, // Nombre de gouttes affichées par frame
    bigDrops: true,  // Activation des gouttes de premier plan
    bigDropsProportion: .1, // Proportion des gouttes de premier plan par rapport aux gouttes "normales"
    fps: 25
  }

canvas.setAttribute("width", WIDTH);
canvas.setAttribute("height", HEIGHT);

ctx.shadowColor = "white";
ctx.shadowBlur = 10;

function startRain() {
  ctx.clearRect(0, 0, WIDTH, HEIGHT);

  for (var i = 0; i < rain.population; i++) {
    drawRain();
  }

  setTimeout(startRain, 17 * 60 / rain.fps);
}

function drawRain() {
  var x = Math.floor(Math.random() * WIDTH),
    y = Math.floor(Math.random() * (HEIGHT + 100)) - 100,
    a,
    size;

  if (rain.bigDrops && Math.random() > 1 - rain.bigDropsProportion) {
    a = (Math.floor(Math.random() * 2) + 1) / 10;
    size = Math.floor(Math.random() * 100) + 50;
  } else {
    a = .1;
    size = Math.floor(Math.random() * 50) + 10;
  }

  ctx.fillStyle = "rgba(255,255,255," + a + ")";
  ctx.fillRect(x, y, 1, size);
}

startRain();