<!--Copyright to Shen Huang, you can reach me out at shenhuang@live.ca-->

<!DOCTYPE html>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
<html>
	<head>
		<title>LANTERN DEMO</title>
		<style>
			body	{
				background-color : #190f00;
			}
		</style>
	</head>
	<body>
		<input 	id			= "wordBox"
				class		= "wordInput"
				type		= "text"
				maxlength	= "5"
				value		= "LOVE"
				onkeypress	= "return (event.charCode > 64 && event.charCode < 91)"
		>
	</body>
	<script>

	</script>
</html>
@keyframes shake {
	0% {
		transform : rotate(10deg) scale(0.5);
	}
	50% {
		transform : rotate(-10deg) scale(0.5);
	}
	100% {
		transform : rotate(10deg) scale(0.5);
	}
}
@keyframes innerlightbreathe {
	0% {
		height : 30px;
		width : 30px;
		opacity : 0.1;
		top : 35px;
		left : 10px;
	}
	20% {
		-webkit-clip-path : inset(0px 0px 0px 0px);
		clip-path : inset(0px 0px 0px 0px);
	}
	50% {
		height : 60px;
		width : 60px;
		opacity : 0.5;
		top : 5px;
		left : -5px;
		-webkit-clip-path : inset(0px 5px 0px 5px);
		clip-path : inset(0px 5px 0px 5px);
	}
	80% {
		-webkit-clip-path : inset(0px 0px 0px 0px);
		clip-path : inset(0px 0px 0px 0px);
	}
	100% {
		height : 30px;
		width : 30px;
		opacity : 0.1;
		top : 35px;
		left : 10px;
	}
}
@keyframes outerlightbreathe {
	0% {
		height : 100px;
		width : 100px;
		top : -10px;
		left : -20px;
	}
	50% {
		height : 200px;
		width : 200px;
		top : -60px;
		left : -70px;
	}
	100% {
		height : 100px;
		width : 100px;
		top : -10px;
		left : -20px;
	}
}
.lantern {
	z-index : 999;
	position : absolute;
	height : 70px;
	width : 50px;
	transform-origin : top center;
	animation : shake 4s ease-in-out infinite;
}
.lanternBody {
	position : absolute;
	background-color : #756b3c;
	height : 70px;
	width : 50px;
	border-radius : 15px 15px 25px 25px;
}
.outerLight {
	z-index : -1;
	position : absolute;
	background-image:
		radial-gradient(rgba(117, 107, 60, 1.0), rgba(117, 107, 60, 0.0), rgba(117, 107, 60, 0.0));
	opacity : 0.5;
	border-radius : 50%;
	animation : outerlightbreathe 3s ease-in-out infinite;
}
.innerLight {
	position : absolute;
	background-image:
		radial-gradient(rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 1.0), rgba(255, 241, 181, 0.0));
	border-radius : 50%;
	animation : innerlightbreathe 3s ease-in-out infinite;
}
@keyframes fadein {
	0% {
		opacity : 0.0;
	}
	100% {
		opacity : 1.0;
	}
}
@keyframes fadeout {
	0% {
		opacity : 1.0;
	}
	50% {
		opacity : 0.0;
	}
	100% {
		opacity : 0.0;
	}
}
.wordInput, .fakeInput{
	position : absolute;
	bottom : 25px;
	left : 25px;
}
.wordInput {
	height : 30px;
	width : 100px;
	color : #a88600;
	font-size : 25px;
	font-family : Arial;
	text-align : center;
	border : 3px;
	border-radius : 15px;
	border-style : solid;
	background-color : #fff9e5;
	border-color : #fff9e5;
	animation : fadein 1s ease-in;
}
.wordInput:hover,  .wordInput:focus{
	border-color : #a88600;
}
.fakeInput {
	height : 30px;
	width : 100px;
	color : #a88600;
	font-size : 25px;
	font-family : Arial;
	text-align : center;
	border : 3px;
	border-radius : 15px;
	border-style : solid;
	background-color : #fff9e5;
	border-color : #fff9e5;
	animation : fadeout 2s ease-out;
}
const ltrMap = [];
ltrMap[" "] = [
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
			[0, 0, 0, 0, 0],
			];
ltrMap["@"] = [
			[1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1],
			[1, 1, 1, 1, 1],
			];
ltrMap["A"] = [
			[0, 0, 1, 0, 0],
			[0, 1, 0, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			];
ltrMap["B"] = [
			[1, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 0],
			];
ltrMap["C"] = [
			[0, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 1],
			[0, 1, 1, 1, 0],
			];
ltrMap["D"] = [
			[1, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 0],
			];
ltrMap["E"] = [
			[1, 1, 1, 1, 1],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 1, 1, 1, 1],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 1, 1, 1, 1],
			];
ltrMap["F"] = [
			[1, 1, 1, 1, 1],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 1, 1, 1, 1],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			];
ltrMap["G"] = [
			[0, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 0],
			[1, 0, 1, 1, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[0, 1, 1, 1, 0],
			];
ltrMap["H"] = [
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			];
ltrMap["I"] = [
			[1, 1, 1, 1, 1],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[1, 1, 1, 1, 1],
			];
ltrMap["J"] = [
			[1, 1, 1, 1, 1],
			[0, 0, 0, 1, 0],
			[0, 0, 0, 1, 0],
			[0, 0, 0, 1, 0],
			[1, 0, 0, 1, 0],
			[1, 0, 0, 1, 0],
			[0, 1, 1, 0, 0],
			];
ltrMap["K"] = [
			[1, 0, 0, 0, 1],
			[1, 0, 0, 1, 0],
			[1, 0, 1, 0, 0],
			[1, 1, 0, 0, 0],
			[1, 0, 1, 0, 0],
			[1, 0, 0, 1, 0],
			[1, 0, 0, 0, 1],
			];
ltrMap["L"] = [
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 1, 1, 1, 1],
			];
ltrMap["M"] = [
			[1, 0, 0, 0, 1],
			[1, 1, 0, 1, 1],
			[1, 0, 1, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			];
ltrMap["N"] = [
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 0, 0, 1],
			[1, 0, 1, 0, 1],
			[1, 0, 0, 1, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			];
ltrMap["O"] = [
			[0, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[0, 1, 1, 1, 0],
			];
ltrMap["P"] = [
			[1, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 0, 0, 0, 0],
			];
ltrMap["Q"] = [
			[0, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[0, 1, 1, 1, 0],
			[0, 0, 0, 1, 1],
			];
ltrMap["R"] = [
			[1, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 1, 1, 1, 0],
			[1, 0, 0, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			];
ltrMap["S"] = [
			[0, 1, 1, 1, 0],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 0],
			[0, 1, 1, 1, 0],
			[0, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[0, 1, 1, 1, 0],
			];
ltrMap["T"] = [
			[1, 1, 1, 1, 1],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			];
ltrMap["U"] = [
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[0, 1, 1, 1, 0],
			];
ltrMap["V"] = [
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[0, 1, 0, 1, 0],
			[0, 0, 1, 0, 0],
			];
ltrMap["W"] = [
			[1, 0, 1, 0, 1],
			[1, 0, 1, 0, 1],
			[1, 0, 1, 0, 1],
			[1, 0, 1, 0, 1],
			[1, 0, 1, 0, 1],
			[0, 1, 0, 1, 0],
			[0, 1, 0, 1, 0],
			];
ltrMap["X"] = [
			[1, 0, 0, 0, 1],
			[0, 1, 0, 1, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 1, 0, 1, 0],
			[1, 0, 0, 0, 1],
			];
ltrMap["Y"] = [
			[1, 0, 0, 0, 1],
			[1, 0, 0, 0, 1],
			[0, 1, 0, 1, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			[0, 0, 1, 0, 0],
			];
ltrMap["Z"] = [
			[1, 1, 1, 1, 1],
			[0, 0, 0, 0, 1],
			[0, 0, 0, 1, 0],
			[0, 0, 1, 0, 0],
			[0, 1, 0, 0, 0],
			[1, 0, 0, 0, 0],
			[1, 1, 1, 1, 1],
			];
var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));

const speed = 0.5;
const fadeInTime = 3000;
const fadeOutTime = 3000;

var lanterns = [];

function generateLantern(x, y)
{
	var lantern = document.createElement("DIV");
	var ltrBdy = document.createElement("DIV");
	var otrLit = document.createElement("DIV");
	var inrLit = document.createElement("DIV");
	lantern.setAttribute('class', 'lantern');
	ltrBdy.setAttribute('class', 'lanternBody');
	otrLit.setAttribute('class', 'outerLight');
	inrLit.setAttribute('class', 'innerLight');
	ltrBdy.appendChild(inrLit);
	lantern.appendChild(ltrBdy);
	lantern.appendChild(otrLit);
	brd.appendChild(lantern);
	lantern.FIT = fadeInTime;
	lantern.FOT = fadeOutTime;
	lantern.style.opacity = 1.0;
	// 0: ALIVE, 1: DEAD.
	lantern.state = 0;
	lantern.x = x;
	lantern.y = y;
	lantern.bounce = 0;
	lantern.destination = [];
	lantern.destination.x = x;
	lantern.destination.y = y;
	lantern.arrived = true;
	lantern.style.left = lantern.x + "px";
	lantern.style.top = lantern.y + "px";
	if(lanterns == null)
		lanterns = [];
	lanterns.push(lantern);
	return lantern;
}
var brd = document.createElement("DIV");
document.body.insertBefore(brd, document.getElementById("board"));

var wordBox = document.getElementById("wordBox");
var word = "";

wordBox.addEventListener("focusout", wordBoxFocusOut);

function wordBoxFocusOut()
{
	word = wordBox.value;
	var fakeBox = document.createElement("DIV");
	fakeBox.setAttribute('class', 'fakeInput');
	fakeBox.textContent = word;
	wordBox.style.display = "none";
	brd.appendChild(fakeBox);
	setTimeout(function(){
		fakeBox.parentNode.removeChild(fakeBox);
	}, 2000);
	arrangeLanterns(word);
	wordBox.addEventListener("focusout", wordBoxFocusOut);
}

window.onkeydown = function(e)
{
	key = e.keyCode;
	if(key == 13)
	{
		wordBox.blur();
	}
};

const xstart = 50;
const ystart = 100;
const xspace = 40;
const yspace = 40;
const xsplit = 230;

function arrangeLanterns(word)
{
	for(c = 0; c < word.length; c++)
	{
		arrangeLanternsChar(word[c], c);
	}
}
function arrangeLanternsChar(char, charCount)
{
	for(i = 0; i < ltrMap[char][0].length; i++)
	{
		for(j = 0; j < ltrMap[char].length; j++)
		{
			if(ltrMap[char][j][i] == 1)
			{
				generateLantern(xstart + i * xspace + xsplit * charCount, ystart + j * yspace);
			}
		}
	}
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.