JSFiddle - React, Tailwind, and code Playground

by Josh Carroll

HTML

<div id="target"></div>

CSS

#target {
    height: 600px;
    width: 600px;
    background-color:black;
}

JavaScript

(function(r) {

    var paper = r("target", 600,600),
        move = r.animation({
            cx: 300,
            cy: 300,
            fill: "black",
            r: 2
        }, 2000, "easeOut", function() {
            this.remove();
        }),
        circleStyle = {
            fill: "white"
        },
        pos = {
            top: 0,
            left: 1,
            right: 2,
            bottom: 3
        },
        lastPos = pos.top;

    setInterval(makeCircle, 10);

    function makeCircle() {
        var x, y;

        switch (lastPos) {
        case pos.top:
            {
                x = getRandomInt(10, 590);
                y = 10;
                break;
            }
        case pos.left:
            {
                x = 10;
                y = getRandomInt(10, 590);
                break;
            }
        case pos.right:
            {
                x = 590;
                y = getRandomInt(10, 590);
                break;
            }
        case pos.bottom:
            {
                x = getRandomInt(10, 590);
                y = 590;
                break;
            }
        }

        lastPos++;

        if (lastPos > pos.bottom) {
            lastPos = pos.top;
        }

        paper.circle(x, y, 10).attr(circleStyle).animate(move);
    }

    function getRandomInt(min, max) {
        return Math.floor(Math.random() * (max - min + 1)) + min;
    }

}(window.Raphael));