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