JSFiddle - React, Tailwind, and code Playground

by SwampFall

HTML

<script src="https://rawgithub.com/soulwire/sketch.js/v1.0/js/sketch.min.js"></script>
<div id="container"></div>

CSS

html, body {
    font-family:'Play', sans-serif;
    background: #2b2b2b;
    margin: 0;
}

JavaScript

function Particle(x, y, radius) {
    this.init(x, y, radius);
}

Particle.prototype = {

    init: function (x, y, radius) {

        this.alive = true;
        
        this.radius = radius || 10;
        this.wander = 0.15;
        this.theta = random(TWO_PI);
        this.drag = 0.92;
        this.color = '#fff';

        this.x = x || 0.0;
        this.y = y || 0.0;

        this.vx = 0.0;
        this.vy = 0.0;
    },

    move: function () {

        this.x += this.vx;
        this.y += this.vy;

        this.vx *= this.drag;
        this.vy *= this.drag;

        this.theta += random(-0.5, 0.5) * this.wander;
        this.vx += sin(this.theta) * 0.1;
        this.vy += cos(this.theta) * 0.1;
        
        var oldR = this.radius;
        this.radius -= (20 * sin(this.radius));
        this.x += (oldR - this.radius) / 2;
        this.y -= (oldR - this.radius) / 2;
        this.alive = this.radius > 1;
    },

    draw: function (ctx) {

        //ctx.beginPath();
        //ctx.arc( this.x, this.y, this.radius, 0, TWO_PI);
        //ctx.fillStyle = this.color;
        //ctx.fill();
        ctx.font = this.radius + "pt wingdings";
        ctx.fillStyle = this.color;
        ctx.fillText("[", this.x, this.y);
    }
};

// ----------------------------------------
// Example
// ----------------------------------------

var MAX_PARTICLES = 100;
var RADIUS = 150;
var COLOURS = ['#69D2E7', '#A7DBD8', '#E0E4CC', '#F38630', '#FA6900', '#FF4E50', '#F9D423'];

var particles = [];
var pool = [];

var demo = Sketch.create({
    container: document.getElementById('container')
});

demo.setup = function () {

    // Set off some initial particles.
    //var i, x, y;

    //for (i = 0; i < 20; i++) {
    //    x = (demo.width * 0.5) + random(-100, 100);
    //    y = (demo.height * 0.5) + random(-100, 100);
    //    demo.spawn(x, y);
    //}
};

demo.spawn = function (x, y) {

    if (particles.length >= MAX_PARTICLES) pool.push(particles.shift());

    particle =...