body {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
	background: white;
}

canvas {
	pointer-events: none;
}
View Compiled
var text = new Blotter.Text("Ants!", {
	family : "serif",
	size : 150,
	fill : "black",
});

var material = new Blotter.FliesMaterial();

material.uniforms.uPointCellWidth.value = 0.01;
material.uniforms.uPointRadius.value = .8;
material.uniforms.uSpeed.value = 5;

var blotter = new Blotter(material, { 
	texts : text,
});

var scope = blotter.forText(text);

scope.appendTo(document.body);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdn.rawgit.com/bradley/Blotter/master/build/blotter.min.js
  2. https://cdn.rawgit.com/bradley/Blotter/master/build/materials/fliesMaterial.js