JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://raw.github.com/mbostock/d3/master/lib/colorbrewer/colorbrewer.js"></script>

CSS

body {
    background: #EDF0F1;
}

rect {
    fill: none;
    stroke-width: 1px;
}

JavaScript

var w = parseInt(d3.select('body').style('width')),
    h = parseInt(d3.select('body').style('height')) || 600,
    colors = colorbrewer.Greys[9];

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .on("click", function() {
        var mouse_click = d3.mouse(this);
        for (var x = 0; x < 25; x++) {
            particle_click(mouse_click[0], mouse_click[1], Math.floor(5 + Math.random() * (15 - 5)), colors);
        }
    });

d3.timer(function() {
    particle(Math.random()* w, Math.random() * h, Math.floor(5 + Math.random() * (15 - 5)), colors);
    });

function particle(x, y, cube_sizes, c) {
  svg.append("svg:rect")
      .attr("x", x)
      .attr("y", y)
      .attr("width", cube_sizes)
      .attr("height", cube_sizes)
      .style("stroke", c[Math.floor(0 + Math.random() * (8 - 0))])
      .style("stroke-opacity", 1)

    .transition()
      .duration(1000)
      .ease('linear')
      .style("stroke-opacity", 1e-6)
      .remove();
}

function particle_click(x, y, cube_sizes, c) {
  svg.append("svg:rect")
      .attr("x", x)
      .attr("y", y)
      .attr("width", cube_sizes)
      .attr("height", cube_sizes)
      .style("stroke", c[Math.floor(5 + Math.random() * (8 - 5))])
      .style("stroke-opacity", 1)

    .transition()
      .duration(10000)
      .ease('linear')
      .attr("x", Math.floor(-10000 + Math.random() * (10000 + 10000)))
      .attr("y", Math.floor(-10000 + Math.random() * (10000 + 10000)))
      .style("stroke-opacity", 1e-6)
      
      .remove();
}