Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

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

CSS

              
                @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;
}

              
            
!

JS

              
                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));
output.onclick = event => (event.target.select());
              
            
!
999px

Console