Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
glyphy
<!DOCTYPE html>
<html>
<head>
<title>graphmemes</title>
</head>
<body>
<div id="content">
<div id="welcome">
<h1>glyph substitut0r</h1>
<p>Type in the box for unicode shuffling</p>
</div>
<div id="main">
<textarea id="input" cols="30" rows="2" spellcheck="false"></textarea>
<textarea id="output" cols="30" rows="2" readonly="true"></textarea>
</div>
<div id="footer">
<p>Content from RelatedCharDB.sqlite3 in CharacterPallete.app internals</p>
</div>
</div>
<div id="lorem" class="background lorem 12 24"></div>
<script>
window.onload = () => document.querySelectorAll("#lorem p")
.forEach(l => l.textContent = transform(l.textContent))
</script>
</body>
</html>
const glyphs = new Map([
"AaªÀÁÂÃÄÅàáâãäåĀāĂ㥹ǍǎǞǟǠǡǺǻȀȁȂȃȦȧᴬᵃḀḁẠạẢảẤấẦầẨẩẪẫẬậẮắẰằẲẳẴẵẶặÅ⒜ⒶⓐAa𝐀𝐚𝐴𝑎𝑨𝒂𝒜𝒶𝓐𝓪𝔄𝔞𝔸𝕒𝕬𝖆𝖠𝖺𝗔𝗮𝘈𝘢𝘼𝙖𝙰𝚊",
"BbʙᴮᵇḂḃḄḅḆḇℬ⒝ⒷⓑBb𝐁𝐛𝐵𝑏𝑩𝒃𝒷𝓑𝓫𝔅𝔟𝔹𝕓𝕭𝖇𝖡𝖻𝗕𝗯𝘉𝘣𝘽𝙗𝙱𝚋",
"CcÇçĆćĈĉĊċČčḈḉℂℭⅭⅽ⒞ⒸⓒCc𝐂𝐜𝐶𝑐𝑪𝒄𝒞𝒸𝓒𝓬𝔠𝕔𝕮𝖈𝖢𝖼𝗖𝗰𝘊𝘤𝘾𝙘𝙲𝚌",
"DdĎďᴰᵈḊḋḌḍḎḏḐḑḒḓⅅⅆⅮⅾ⒟ⒹⓓDd𝐃𝐝𝐷𝑑𝑫𝒅𝒟𝒹𝓓𝓭𝔇𝔡𝔻𝕕𝕯𝖉𝖣𝖽𝗗𝗱𝘋𝘥𝘿𝙙𝙳𝚍",
"EeÈÉÊËèéêëĒēĔĕĖėĘęĚěȄȅȆȇȨȩᴱᵉḔḕḖḗḘḙḚḛḜḝẸẹẺẻẼẽẾếỀềỂểỄễỆệℯℰⅇ⒠ⒺⓔEe𝐄𝐞𝐸𝑒𝑬𝒆𝓔𝓮𝔈𝔢𝔼𝕖𝕰𝖊𝖤𝖾𝗘𝗲𝘌𝘦𝙀𝙚𝙴𝚎",
"FfḞḟℱ⒡ⒻⓕFf𝐅𝐟𝐹𝑓𝑭𝒇𝒻𝓕𝓯𝔉𝔣𝔽𝕗𝕱𝖋𝖥𝖿𝗙𝗳𝘍𝘧𝙁𝙛𝙵𝚏",
"GgĜĝĞğĠġĢģǦǧǴǵɡɢᴳᵍḠḡℊ⒢ⒼⓖGg𝐆𝐠𝐺𝑔𝑮𝒈𝒢𝓖𝓰𝔊𝔤𝔾𝕘𝕲𝖌𝖦𝗀𝗚𝗴𝘎𝘨𝙂𝙜𝙶𝚐",
"HhĤĥȞȟʜʰᴴḢḣḤḥḦḧḨḩḪḫẖℋℌℍℎ⒣ⒽⓗHh𝐇𝐡𝐻𝑯𝒉𝒽𝓗𝓱𝔥𝕙𝕳𝖍𝖧𝗁𝗛𝗵𝘏𝘩𝙃𝙝𝙷𝚑",
"IiÌÍÎÏìíîïĨĩĪīĬĭĮįİıǏǐȈȉȊȋɪᴵᵢḬḭḮḯỈỉỊịⁱℐℑℹⅈⅠⅰ⒤ⒾⓘIi𝐈𝐢𝐼𝑖𝑰𝒊𝒾𝓘𝓲𝔦𝕀𝕚𝕴𝖎𝖨𝗂𝗜𝗶𝘐𝘪𝙄𝙞𝙸𝚒",
"JjĴĵǰʲᴶⅉ⒥ⒿⓙJj𝐉𝐣𝐽𝑗𝑱𝒋𝒥𝒿𝓙𝓳𝔍𝔧𝕁𝕛𝕵𝖏𝖩𝗃𝗝𝗷𝘑𝘫𝙅𝙟𝙹𝚓",
"KkĶķǨǩᴷᵏḰḱḲḳḴḵK⒦ⓀⓚKk𝐊𝐤𝐾𝑘𝑲𝒌𝒦𝓀𝓚𝓴𝔎𝔨𝕂𝕜𝕶𝖐𝖪𝗄𝗞𝗸𝘒𝘬𝙆𝙠𝙺𝚔",
"LlĹĺĻļĽľʟˡᴸḶḷḸḹḺḻḼḽℒℓⅬⅼ⒧ⓁⓛLl𝐋𝐥𝐿𝑙𝑳𝒍𝓁𝓛𝓵𝔏𝔩𝕃𝕝𝕷𝖑𝖫𝗅𝗟𝗹𝘓𝘭𝙇𝙡𝙻𝚕",
"MmᴹᵐḾḿṀṁṂṃℳⅯⅿ⒨ⓂⓜMm𝐌𝐦𝑀𝑚𝑴𝒎𝓂𝓜𝓶𝔐𝔪𝕄𝕞𝕸𝖒𝖬𝗆𝗠𝗺𝘔𝘮𝙈𝙢𝙼𝚖",
"NnÑñŃńŅņŇňǸǹɴᴺṄṅṆṇṈṉṊṋⁿℕ⒩ⓃⓝNn𝐍𝐧𝑁𝑛𝑵𝒏𝒩𝓃𝓝𝓷𝔑𝔫𝕟𝕹𝖓𝖭𝗇𝗡𝗻𝘕𝘯𝙉𝙣𝙽𝚗",
"OoºÒÓÔÕÖòóôõöŌōŎŏŐőƠơǑǒǪǫǬǭȌȍȎȏȪȫȬȭȮȯȰȱᴼᵒṌṍṎṏṐṑṒṓỌọỎỏỐốỒồỔổỖỗỘộỚ",
"PpᴾᵖṔṕṖṗℙ⒫ⓅⓟPp𝐏𝐩𝑃𝑝𝑷𝒑𝒫𝓅𝓟𝓹𝔓𝔭𝕡𝕻𝖕𝖯𝗉𝗣𝗽𝘗𝘱𝙋𝙥𝙿𝚙",
"Qqℚ⒬ⓆⓠQq𝐐𝐪𝑄𝑞𝑸𝒒𝒬𝓆𝓠𝓺𝔔𝔮𝕢𝕼𝖖𝖰𝗊𝗤𝗾𝘘𝘲𝙌𝙦𝚀𝚚",
"RrŔŕŖŗŘřƦȐȑȒȓʀʳᴿᵣṘṙṚṛṜṝṞṟℛℜℝ⒭ⓇⓡRr𝐑𝐫𝑅𝑟𝑹𝒓𝓇𝓡𝓻𝔯𝕣𝕽𝖗𝖱𝗋𝗥𝗿𝘙𝘳𝙍𝙧𝚁𝚛",
"SsŚśŜŝŞşŠšſȘșˢṠṡṢṣṤṥṦṧṨṩẛ⒮ⓈⓢSs𝐒𝐬𝑆𝑠𝑺𝒔𝒮𝓈𝓢𝓼𝔖𝔰𝕊𝕤𝕾𝖘𝖲𝗌𝗦𝘀𝘚𝘴𝙎𝙨𝚂𝚜",
"TtŢţŤťȚțᵀᵗṪṫṬṭṮṯṰṱẗ⒯ⓉⓣTt𝐓𝐭𝑇𝑡𝑻𝒕𝒯𝓉𝓣𝓽𝔗𝔱𝕋𝕥𝕿𝖙𝖳𝗍𝗧𝘁𝘛𝘵𝙏𝙩𝚃𝚝",
"UuÙÚÛÜùúûüŨũŪūŬŭŮůŰűŲųƯưǓǔǕǖǗǘǙǚǛǜȔȕȖȗᵁᵘᵤṲṳṴṵṶṷṸṹṺṻỤụỦủỨứỪừỬửỮữỰự⒰ⓊⓤUu𝐔𝐮𝑈𝑢𝑼𝒖𝒰𝓊𝓤𝓾𝔘𝔲𝕌𝕦𝖀𝖚𝖴𝗎𝗨𝘂𝘜𝘶𝙐𝙪𝚄𝚞",
"VvᵛᵥṼṽṾṿⅤⅴ⒱ⓋⓥVv𝐕𝐯𝑉𝑣𝑽𝒗𝒱𝓋𝓥𝓿𝔙𝔳𝕍𝕧𝖁𝖛𝖵𝗏𝗩𝘃𝘝𝘷𝙑𝙫𝚅𝚟",
"WwŴŵʷᵂẀẁẂẃẄẅẆẇẈẉẘ⒲ⓌⓦWw𝐖𝐰𝑊𝑤𝑾𝒘𝒲𝓌𝓦𝔀𝔚𝔴𝕎𝕨𝖂𝖜𝖶𝗐𝗪𝘄𝘞𝘸𝙒𝙬𝚆𝚠",
"XxˣẊẋẌẍⅩⅹ⒳ⓍⓧXx𝐗𝐱𝑋𝑥𝑿𝒙𝒳𝓍𝓧𝔁𝔛𝔵𝕏𝕩𝖃𝖝𝖷𝗑𝗫𝘅𝘟𝘹𝙓𝙭𝚇𝚡",
"YyÝýÿŶŷŸȲȳʏʸẎẏẙỲỳỴỵỶỷỸỹ⒴ⓎⓨYy𝐘𝐲𝑌𝑦𝒀𝒚𝒴𝓎𝓨𝔂𝔜𝔶𝕐𝕪𝖄𝖞𝖸𝗒𝗬𝘆𝘠𝘺𝙔𝙮𝚈𝚢",
"ZzŹźŻżŽžẐẑẒẓẔẕℤℨ⒵ⓏⓩZz𝐙𝐳𝑍𝑧𝒁𝒛𝒵𝓏𝓩𝔃𝔷𝕫𝖅𝖟𝖹𝗓𝗭𝘇𝘡𝘻𝙕𝙯𝚉𝚣",
].map(([k, , ...v]) => [k, v]));
Array.prototype.random = function() { return this[Math.floor(Math.random() * this.length)]; };
Map.prototype.iget = function(key) { return this.get(key.toUpperCase()); };
const glyph = ([letter, array = glyphs.iget(letter)]) => array && array.random() || letter;
const transform = src => [...src].map(chr => glyph(chr)).join("").normalize();
const [input, output] = ["#input", "#output"].map(id => document.querySelector(id));
input.oninput = event => (output.textContent = transform(event.target.value));
<script src="https://ramachandrajr.github.io/lorem-js/lorem-js/lorem.min.js"></script>
@import url("https://fonts.googleapis.com/css?family=Noto+Sans");
.lorem {
position: absolute;
overflow: hidden;
top: 20px;
left: 0;
margin: auto;
right: 0;
z-index: -99;
font-size: 14px;
width: 80%;
opacity: 0.2;
color: #333366;
}
#content {
padding: 10px;
font-size: 1.2em;
display: flex;
flex-direction: column;
margin: auto;
width: 500px;
}
h1 {
font-weight: bold;
font-family: monospace;
}
textarea {
width: 100%;
resize: none;
margin: 5px;
}
#input {
height: 2.8em;
font-size: 1.4em;
border: 2px solid #ccc;
background-color: #eee;
}
#output {
height: 3.2em;
font-size: 1.6em;
border: 2px solid #666;
}
#footer {
font-size: 12px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.