<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
canvas {
border: 1px solid #FFF; /* Stronger white border */
border-image: linear-gradient(90deg, #000 25%, transparent 25%, transparent 75%, #000 75%, #000) 2; /* Black stripes */
background-color: rgba(0, 0, 0, 0.8); /* Softly transparent black background */
}
</style>
<title>All Runic Letter Art</title>
</head>
<body>
<canvas id="allRunicLetterCanvas" width="480" height="420"></canvas>
<script>
const canvas = document.getElementById('allRunicLetterCanvas');
const ctx = canvas.getContext('2d');
const runicSymbols = [
'ᚠ', 'ᚡ', 'ᚢ', 'ᚣ', 'ᚤ', 'ᚥ', 'ᚦ', 'ᚧ', 'ᚨ', 'ᚩ', 'ᚪ', 'ᚫ', 'ᚬ', 'ᚭ', 'ᚮ', 'ᚯ',
'ᚰ', 'ᚱ', 'ᚲ', 'ᚳ', 'ᚴ', 'ᚵ', 'ᚶ', 'ᚷ', 'ᚸ', 'ᚹ', 'ᚺ', 'ᚻ', 'ᚼ', 'ᚽ', 'ᚾ', 'ᚿ',
'ᛀ', 'ᛁ', 'ᛂ', 'ᛃ', 'ᛄ', 'ᛅ', 'ᛆ', 'ᛇ', 'ᛈ', 'ᛉ', 'ᛊ', 'ᛋ', 'ᛌ', 'ᛍ', 'ᛎ', 'ᛏ',
'ᛐ', 'ᛑ', 'ᛒ', 'ᛓ', 'ᛔ', 'ᛕ', 'ᛖ', 'ᛗ', 'ᛘ', 'ᛙ', 'ᛚ', 'ᛛ', 'ᛜ', 'ᛝ', 'ᛞ', 'ᛟ',
'ᛠ', 'ᛡ', 'ᛢ', 'ᛣ', 'ᛤ', 'ᛥ', 'ᛦ', 'ᛧ', 'ᛨ', 'ᛩ', 'ᛪ', '᛫', '᛬', '᛭', 'ᛮ', 'ᛯ',
'ᛰ', 'ᛱ', 'ᛲ', 'ᛳ', 'ᛴ', 'ᛵ', 'ᛶ', 'ᛷ', 'ᛸ'
];
const fontSize = 30;
const letterSpacing = 20;
function getRandomColor() {
const letters = '0123456789ABCDEF';
let color = '#';
for (let i = 0; i < 6; i++) {
color += letters[Math.floor(Math.random() * 16)];
}
return color;
}
function drawNeonRune(x, y, rune) {
const neonColor = getRandomColor();
ctx.font = `${fontSize}px 'Courier New', Courier, monospace`;
ctx.fillStyle = neonColor;
ctx.shadowColor = neonColor;
ctx.shadowBlur = 8; // Slightly reduce shadow blur
ctx.fillText(rune, x, y);
ctx.shadowBlur = 0; // Reset shadow after drawing each rune
}
function generateAllRunicArt() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
for (let i = 0; i < runicSymbols.length; i++) {
const col = i % 10;
const row = Math.floor(i / 10) + 0.1; // Start the first row a bit lower
const x = col * (fontSize + letterSpacing) + 10 + Math.random() * 5; // Add random x offset
const y = row * (fontSize + 20) + 10 + Math.random() * 5; // Add random y offset
drawNeonRune(x, y, runicSymbols[i]);
}
setTimeout(generateAllRunicArt, 1000); // Change location every 1 second
}
generateAllRunicArt();
</script>
</body>
</html>