JSFiddle - React, Tailwind, and code Playground

by Evgeny Pisarev

HTML

<canvas id=c></canvas>
<p>Подготовка...</p>

CSS

body {
	background-color: #222;
}
canvas {
	position: absolute;
	top: 0;
	left: 0;
}
canvas#c {
	z-index: 2;
}
p {
	position: absolute;
	width: 100%;
	height: 40px;
	top: calc( 50% - 20px );
	left: 0;
	text-align: center;
	font: 30px Verdana;
	color: #eee;
	text-shadow: 0 0 1px #888;
}

JavaScript

var w = c.width = window.innerWidth,
		h = c.height = window.innerHeight,
		ctx = c.getContext( '2d' ),
		
		opts = {
			backgroundColor: 'hsl(0,0%,20%)',
			gradientColors: [ 'hsla(200,80%,60%,.5)', 'hsla(200,80%,30%,.4)', 'hsla(0,0%,30%,0)'],
			baseLight: 0,
			addedLight: 100,
			
			cx: w / 2,
			cy: h / 2,
			
			pcx: w / 2 - 100,
			pcy: h / 2,
			
			pacRadius: 50,
			pacTime: 20,
			pacRadiant: 1,
			pacColor: 'hsl(40,80%,63%)',
			pacBlur: 5,
			
			foodCount: 5,
			foodBaseDistance: 20,
			foodDistance: 300,
			foodSize: 10,
			foodColor: 'hsl(180,80%,60%)',
			foodShadow: 'hsl(220,80%,60%)',
			foodBlur: 10,
			
			text: 'Вака',
			textTime: 20,
			textColor: 'hsl(40,80%,60%)',
			baseTempRadiant: 1.1,
			addedTempRadiant: Math.PI - 1.1 - 1.1,
			
			trailX: w / 2 - 100 - 20,
			trailWidth: 200,
			trailHeight: 70,
			trailStrokeWidth: 4,
			trailColors: [ 'hsla(40,80%,75%,0)',  'hsla(40,80%,75%,.2)' ],
			trailStrokeColor: 'hsla(40,80%,80%.5)',
			
			particles: 40,
			particleBaseSize: 2,
			particleAddedSize: 2,
			particleBaseSpeed: 1.5,
			particleAddedSpeed: 1.5,
			particleBaseTime: 40,
			particleAddedTime: 20,
			particleColor: 'hsla(50,80%,75%,.8)'
			
		},
		
		bgCanvas = document.createElement( 'canvas' ),
		bgCtx = bgCanvas.getContext( '2d' ),
		
		tick = 0,
		tempText = '',
		tempTextLength = 0,
		tempRadiant = Math.PI / 2,
		tempTime = 0,
		particles = [];

ctx.font = '15px Verdana';

var textBase = -ctx.measureText( opts.text ).width / 2;

function init(){
	
	bgCanvas.width = w;
	bgCanvas.height = h;
	
	bgCtx.fillStyle = opts.backgroundColor;
	bgCtx.fillRect( 0, 0, w, h );
	
	var gradient = bgCtx.createRadialGradient( 
		opts.cx, opts.cy, 0,
		opts.cx, opts.cy, Math.sqrt( opts.cx*opts.cx + opts.cy*opts.cy ) );
	
	for( var i = 0; i < opts.gradientColors.length; ++i )
		gradient.addColorStop( i / opts.gradientColors.length, opts.gradientColors[ i ] );
	
	bgCtx.fillStyle = gradient;
	bgCtx.fillRect( 0, 0, w, h );
	
	for( var y = 0; y < h;...