<!--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>

	</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;
}
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 xstart = 50;
var ystart = 100;
var xspace = 50;
var yspace = 50;
var letter = "L";

for(i = 0; i < ltrMap[letter][0].length; i++)
{
	for(j = 0; j < ltrMap[letter].length; j++)
	{
		if(ltrMap[letter][j][i] == 1)
		{
			generateLantern(xstart + i * xspace, ystart + j * yspace);
		}
	}
}

var xstart = 350;
var letter = "O";

for(i = 0; i < ltrMap[letter][0].length; i++)
{
	for(j = 0; j < ltrMap[letter].length; j++)
	{
		if(ltrMap[letter][j][i] == 1)
		{
			generateLantern(xstart + i * xspace, ystart + j * yspace);
		}
	}
}

var xstart = 650;
var letter = "V";

for(i = 0; i < ltrMap[letter][0].length; i++)
{
	for(j = 0; j < ltrMap[letter].length; j++)
	{
		if(ltrMap[letter][j][i] == 1)
		{
			generateLantern(xstart + i * xspace, ystart + j * yspace);
		}
	}
}

var xstart = 950;
var letter = "E";

for(i = 0; i < ltrMap[letter][0].length; i++)
{
	for(j = 0; j < ltrMap[letter].length; j++)
	{
		if(ltrMap[letter][j][i] == 1)
		{
			generateLantern(xstart + i * xspace, 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.