Skip to content

Instantly share code, notes, and snippets.

@tribela

tribela/fez.html

Created January 15, 2017 20:44
Show Gist options
  • Save tribela/78158e5d42b29c546b05569609408243 to your computer and use it in GitHub Desktop.
Save tribela/78158e5d42b29c546b05569609408243 to your computer and use it in GitHub Desktop.
Download ZIP
Fez characters
Raw
fez.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>Fez</title>
<style type="text/css">
body {
font-size: 80px;
}
img.alphabet {
width: 1em;
height: 1em;
fill: yellow;
}
</style>
</head>
<body>
<img src="a.svg" class="alphabet" alt="a">
<img src="b.svg" class="alphabet" alt="b">
<img src="c.svg" class="alphabet" alt="c">
<img src="d.svg" class="alphabet" alt="d">
<img src="e.svg" class="alphabet" alt="e">
<img src="f.svg" class="alphabet" alt="f">
<img src="g.svg" class="alphabet" alt="g">
<img src="h.svg" class="alphabet" alt="h">
<img src="i.svg" class="alphabet" alt="i">
<img src="j.svg" class="alphabet" alt="j">
<img src="k.svg" class="alphabet" alt="k">
<img src="l.svg" class="alphabet" alt="l">
<img src="m.svg" class="alphabet" alt="m">
<img src="n.svg" class="alphabet" alt="n">
<img src="o.svg" class="alphabet" alt="o">
<img src="p.svg" class="alphabet" alt="p">
<img src="q.svg" class="alphabet" alt="q">
<img src="r.svg" class="alphabet" alt="r">
<img src="s.svg" class="alphabet" alt="s">
<img src="t.svg" class="alphabet" alt="t">
<img src="u.svg" class="alphabet" alt="u">
<img src="v.svg" class="alphabet" alt="v">
<img src="w.svg" class="alphabet" alt="w">
<img src="x.svg" class="alphabet" alt="x">
<img src="y.svg" class="alphabet" alt="y">
<img src="z.svg" class="alphabet" alt="z">
<div id="box">
</div>
<script type="text/javascript">
function writeContent(content) {
let box = document.querySelector('#box');
box.innerHTML = '';
for (var ch of content) {
ch = ch.toLowerCase();
if ('a' <= ch && ch <= 'z') {
let img = document.createElement('img');
img.src = `${ch}.svg`;
img.className = 'alphabet';
box.appendChild(img);
} else {
let text = document.createTextNode(ch);
box.appendChild(text);
}
}
}
</script>
</body>
</html>
Raw
svg_creator.py
def make_svg(arr):
xml = []
xml.append('<svg xmlns="http://www.w3.org/2000/svg" version="1.1"'
' viewbox="0 0 25 25">')
for row_index, row in enumerate(arr):
y = row_index * 100 // len(arr)
height = 100 // len(arr)
for col_index, col in enumerate(row):
x = col_index * 100 // len(row)
width = 100 // len(row)
if col == '1':
xml.append(
f'<rect x="{x}%" y="{y}%"'
f' width="{width}%" height="{height}%"'
' />')
else:
pass
xml.append('</svg>')
return '\n'.join(xml)
alphabets = {
'a': [
'11111',
'00100',
'10001',
'11111',
'11111',
],
'b': [
'11111',
'10001',
'10101',
'00001',
'11111',
],
'c': [
'11111',
'11100',
'11101',
'11100',
'11111',
],
'd': [
'11111',
'11111',
'11111',
'00111',
'10111',
],
'e': [
'11111',
'00111',
'10111',
'10000',
'11111',
],
'f': [
'11111',
'10101',
'00001',
'10101',
'11111',
],
'g': [
'11101',
'11001',
'11011',
'11001',
'11101',
],
'h': [
'11111',
'10001',
'10101',
'10001',
'11101',
],
'i': [
'10101',
'10001',
'11111',
'11111',
'11111',
],
'j': [
'11111',
'11111',
'11111',
'11100',
'11101',
],
'k': [
'11101',
'11101',
'11101',
'10001',
'10111',
],
'l': [
'11111',
'10001',
'11011',
'10001',
'11011',
],
'm': [
'11111',
'11111',
'10001',
'00100',
'11111',
],
'n': [
'11111',
'10000',
'10101',
'10001',
'11111',
],
'o': [
'11111',
'00111',
'10111',
'00111',
'11111',
],
'p': [
'11101',
'11100',
'11111',
'11111',
'11111',
],
# q = k
'r': [
'11111',
'10101',
'10000',
'10101',
'11111',
],
's': [
'10111',
'10011',
'11011',
'10011',
'10111',
],
't': [
'10111',
'10001',
'10101',
'10001',
'11111',
],
'u': [
'11111',
'11111',
'11111',
'10001',
'10101',
],
# v = u
'w': [
'10111',
'00111',
'11111',
'11111',
'11111',
],
'x': [
'11101',
'10001',
'10111',
'10111',
'10111',
],
'y': [
'11011',
'10001',
'11011',
'10001',
'11111',
],
'z': [
'11111',
'00001',
'11101',
'11100',
'11111',
],
}
alphabets['q'] = alphabets['k']
alphabets['v'] = alphabets['u']
for key, val in alphabets.items():
with open(f'{key}.svg', 'w') as fp:
fp.write(make_svg(val))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment