JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/paper.js/0.9.9/paper.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/stats.js/r11/Stats.js"></script>
<canvas id="myCanvas" resize></canvas>
<script type="text/paperscript" canvas="myCanvas">
    // num circles to make:
    var count = 100;

    // Create symbol to be cloned
    var path = new Path.Circle({
        center: [0, 0],
        radius: 12,
        fillColor: 'white',
        strokeColor: 'black'
    });

    var symbol = new Symbol(path);

    var i = -1, set = [],
        center, placedSymbol
        // Place the instances of the symbol:
    while (++i < count) {
        center = Point.random() * view.size;
        placedSymbol = symbol.place(center);
        placedSymbol.scale(i / count);
        set.push(placedSymbol)
    }

    var item, bounds, view_width = view.size.width

        function onFrame(event) {
            i = -1
            while (++i < count) {
                item = set[i];
                bounds = item.bounds
                position = item.position
                position.x += bounds.width / 2;

                // reset items
                if (bounds.left > view_width) {
                    position.x = -bounds.width;
                }
            }
            window.stats.update();
        }
</script>

CSS

canvas {
    background: #000;
}

JavaScript

var stats = new Stats()
stats.setMode(0)

stats.domElement.style.position = 'absolute'
stats.domElement.style.left = '0px'
stats.domElement.style.top = '0px'
document.body.appendChild(stats.domElement)
stats.begin()

window.stats = stats