JSFiddle - React, Tailwind, and code Playground

by Chun

HTML

<canvas id="search_canvas"></canvas>
<input id="fancy_input" type="text" placeholder="Type something" />

CSS

body{
  margin: 0;
  padding: 0;
}
#search_canvas{
  position: absolute;
  width: 100%;
  height: 100%;
}
#fancy_input{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 280px;
  height: 26px;
  margin: -18px 0 0 -150px;
  padding: 5px 10px;
  outline: none;
  background-color: rgba(255, 255, 255, 0.3);
  border: 2px solid #000;
  border-radius: 3px;
  color: #000;
  font-size: 18px;
  letter-spacing: 2px;
}
#fancy_input::-webkit-input-placeholder{
  color: #000;
}
#fancy_input:-moz-placeholder {
  color: #000; 
}
#fancy_input::-moz-placeholder{
   color: #000;
}
#fancy_input:-ms-input-placeholder{  
   color: #000;
}

JavaScript

var canvas = document.getElementById("search_canvas");
var ctx = canvas.getContext("2d");

var grd,
    keys_down = [],
	  letters = [];

var symbols=[{k:81,s:"q",x:5},{k:87,s:"w",x:15},{k:69,s:"e",x:25},{k:82,s:"r",x:35},{k:84,s:"t",x:45},{k:89,s:"y",x:55},{k:85,s:"u",x:65},{k:73,s:"i",x:75},{k:79,s:"o",x:85},{k:80,s:"p",x:95},{k:65,s:"a",x:10},{k:83,s:"s",x:20},{k:68,s:"d",x:30},{k:70,s:"f",x:40},{k:71,s:"g",x:50},{k:72,s:"h",x:60},{k:74,s:"j",x:70},{k:75,s:"k",x:80},{k:76,s:"l",x:90},{k:90,s:"z",x:20},{k:88,s:"x",x:30},{k:67,s:"c",x:40},{k:86,s:"v",x:50},{k:66,s:"b",x:60},{k:78,s:"n",x:70},{k:77,s:"m",x:80},{k:48,s:"0",x:90},{k:49,s:"1",x:0},{k:50,s:"2",x:10},{k:51,s:"3",x:20},{k:52,s:"4",x:30},{k:53,s:"5",x:40},{k:54,s:"6",x:50},{k:55,s:"7",x:60},{k:56,s:"8",x:70},{k:57,s:"9",x:80}];

function Letter (key) {
	this.x = findX(key);
	this.symbol = findS(key);
	this.color = "rgba(0, 0, 0, "+Math.random()+")";
	this.size = Math.floor((Math.random() * 40) + 12);
	this.path = getRandomPath(this.x);
	this.rotate = Math.floor((Math.random() * Math.PI) + 1);
	this.percent = 0;
}

Letter.prototype.draw = function() {
	var percent= this.percent/100;
	var xy = getQuadraticBezierXYatPercent(this.path[0],this.path[1],this.path[2],percent);
	ctx.save();
	ctx.translate(xy.x, xy.y);
	ctx.rotate(this.rotate);
	ctx.font = this.size+"px Arial";
	ctx.fillStyle = this.color;
	ctx.fillText(this.symbol, -15, -15);
	ctx.restore();
};

Letter.prototype.drawPath = function(){
	ctx.lineWidth = 1;
	ctx.beginPath();
	ctx.moveTo(this.path[0].x, this.path[0].y);
	ctx.quadraticCurveTo(this.path[1].x, this.path[1].y, this.path[2].x, this.path[2].y);
	ctx.stroke();
}

function findX(key){
	for (var i = 0; i < symbols.length; i++) {
		if(symbols[i].k == key){
			return (symbols[i].x * canvas.width / 100);
		}
	};
	return false;
}

function findS(key){
	for (var i = 0; i < symbols.length; i++) {
		if(symbols[i].k == key){
			return symbols[i].s;
		}
	};
	return false;
}

function...