JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://cdn.rawgit.com/unchartedsoftware/lumo/483334f8/build/lumo.min.js"></script>
<div id="plot"/>

CSS

body {
	margin: 0;
	color: #FFF;
	background-color: #000;
	overflow: hidden;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}

#plot {
	position: absolute;
	margin: 0;
	padding: 0;
	border: 0;
	width: 100%;
	height: 100%;
	-webkit-user-select: none;
	   -moz-user-select: none;
		-ms-user-select: none;
			user-select: none;
}

JavaScript

// Plot

const plot = new lumo.Plot('#plot', {
	inertia: true,
	wraparound: true,
	zoom: 3
});

// WebGL Texture Layer

const texture = new lumo.TileLayer({
	renderer: new lumo.ImageTileRenderer()
});

texture.requestTile = (coord, done) => {
	const SUBDOMAINS = [ 'a', 'b', 'c', 'd' ];
	const s = SUBDOMAINS[(coord.x + coord.y + coord.z) % SUBDOMAINS.length];
	const url = `http:/${s}.basemaps.cartocdn.com/dark_nolabels/${coord.xyz()}.png`;
	lumo.loadImage(url, done);
};

plot.add(texture);

// WebGL Point Layer

const point = new lumo.TileLayer({
	renderer: new lumo.PointTileRenderer({
		color: [ 0.4, 0.9, 0.1, 0.8 ]
	})
});

point.requestTile = (coord, done) => {
	const NUM_POINTS = 256;
  const NUM_COMPONENTS = NUM_POINTS * 3;
	const data = new Float32Array(NUM_COMPONENTS);
	for (let i=0; i<NUM_COMPONENTS; i+=3) {
		data[i] = Math.random() * 256; // x
	  data[i+1] = Math.random() * 256; // y
		data[i+2] = (Math.random() * 3) + 3; // radius
	}
	done(null, data);
};

plot.add(point);