JSFiddle - React, Tailwind, and code Playground

by blaker

HTML

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

CSS

body {
  background:url("https://www.blakerohde.com/static/images/layout/bgnoise.png") repeat scroll 0 0 #F6F6F1;
}

rect {
    fill: none;
    stroke-width: 1.5px;
    padding:7px 7px 0 0;
}

JavaScript

var w = parseInt(d3.select('body').style('width')),
    h = parseInt(d3.select('body').style('height')) || 600,
    z = d3.scale.ordinal().range(colorbrewer.Greys[9]),
    i = 0;

console.log('Hello!');
console.log(w);
console.log(h);

var svg = d3.select("body").append("svg:svg")
    .attr("width", w)
    .attr("height", h)
    .style("pointer-events", "all");
    //.on("mousemove", particle);

var t0 = Date.now();
d3.timer(function() {
    //var m = d3.mouse(this);
    //particle(m[0], m[1]);
    particle(Math.random() * w, Math.random() * h);
});

function particle(x, y) {
  svg.append("svg:circle")
      .attr("cx", x)
      .attr("cy", y)
      .attr("r", 1e-6)
      .style("stroke", z(++i))
      .style("stroke-opacity", 1)
    .transition()
      .duration(2000)
      .ease(Math.sqrt)
      .attr("r", 100)
      .style("stroke-opacity", 1e-6)
      .remove();
}