JSFiddle - React, Tailwind, and code Playground

by soulwire

HTML

<script src="https://cdn.rawgit.com/soulwire/sketch.js/master/js/sketch.js"></script>
<div id="container">
  <!-- this is where the sketch canvas will go -->
</div>
<div id="content">
  <p>Here's the regular website content</p>
  <img src="http://placekitten.com/200/300"/>
</div>

CSS

html, body {
  background: #222;
  margin: 0;
}
/* Styles for the particle container */
#container {
  
}
/* Styles for the rest of the app */
#content {
  pointer-events: none; /* this might help if you have problems with events */
  position: absolute;
  padding: 20px;
  left: 0;
  top: 0;
  color: #fff;
}

JavaScript

// Just the particles example code under here...
// @see https://github.com/soulwire/sketch.js/blob/master/examples/particles.html
// ----------------------------------------
// Particle
// ----------------------------------------
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;
        this.radius *= 0.96;
        this.alive = this.radius > 0.5;
    },
    draw: function( ctx ) {
        ctx.beginPath();
        ctx.arc( this.x, this.y, this.radius, 0, TWO_PI );
        ctx.fillStyle = this.color;
        ctx.fill();
    }
};
// ----------------------------------------
// Example
// ----------------------------------------
var MAX_PARTICLES = 280;
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 = pool.length ? pool.pop() : new Particle();
    particle.init( x, y,...