JSFiddle - React, Tailwind, and code Playground

by oece

HTML

<div class="canvas-hook"></div>

CSS

.canvas-hook {
    background-color: #fff;
    min-height: 300px;
    overflow: hidden;
    position: relative;
}

JavaScript

!( function( $ ) {
	var cHook  = $( '.canvas-hook' )
	,	canvas = $( '<canvas></canvas>' ).appendTo( cHook )[0]
	,	ctx	= canvas.getContext( '2d' )
	,	color  = 'black'
	,	idle   = null, mousePosition
	;

	canvas.width		 = window.innerWidth;
	canvas.height		= cHook.outerHeight();
	canvas.style.display = 'block';

	ctx.fillStyle = color;
	ctx.lineWidth = .1;
	ctx.strokeStyle = color;

	var mousePosition = {
		x: 30 * canvas.width / 100,
		y: 30 * canvas.height / 100
	}
	,	dots = {
			nb: 150, 
			distance: 80, 
			d_radius: 150, 
			array: []
		}
	;

	function Dot() {
		this.x = Math.random() * canvas.width;
		this.y = Math.random() * canvas.height;

		this.vx = -.5 + Math.random();
		this.vy = -.5 + Math.random();

		this.radius = Math.random();
	}

	Dot.prototype = {
		create: function() {
			ctx.beginPath();
			ctx.arc( this.x, this.y, this.radius, 0, Math.PI * 2, false );
			ctx.fill();
		},
		animate: function() {
			for( var i = 0, dot=false; i < dots.nb; i++ ) {
				dot = dots.array[i];
				if( dot.y < 0 || dot.y > canvas.height ) {
					dot.vx = dot.vx;
					dot.vy = - dot.vy;
				} else if( dot.x < 0 || dot.x > canvas.width ) {
					dot.vx = - dot.vx;
					dot.vy = dot.vy;
				}
				dot.x += dot.vx;
				dot.y += dot.vy;
			}
		},
		line: function() {
			for( var i = 0; i < dots.nb; i++ ) {
				for( var j = 0; j < dots.nb; j++ ) {
					i_dot = dots.array[i];
					j_dot = dots.array[j];

					if( ( i_dot.x - j_dot.x ) < dots.distance 
						&& ( i_dot.y - j_dot.y ) < dots.distance 
						&& ( i_dot.x - j_dot.x ) > -dots.distance
						&& (i_dot.y - j_dot.y) > - dots.distance) {
						if( ( i_dot.x - mousePosition.x ) < dots.d_radius
							&& ( i_dot.y - mousePosition.y ) < dots.d_radius
							&& ( i_dot.x - mousePosition.x ) > -dots.d_radius
							&& ( i_dot.y - mousePosition.y ) > -dots.d_radius ) {
							ctx.beginPath();
							ctx.moveTo( i_dot.x, i_dot.y );
							ctx.lineTo( j_dot.x, j_dot.y...