Svg representations of the Myst III symbolic language. Thanks to http://exile.patchallel.com/ for preserving the images online.
Last active
April 16, 2016 19:05
-
-
Save MrHen/0de1f7b360302136c52754efd9793dba to your computer and use it in GitHub Desktop.
Myst III Symbols
This file contains 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
| scrolling: true | |
| license: MIT |
This file contains 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
| <html> | |
| <head> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div id="symbols-container"></div> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js"></script> | |
| <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js"></script> | |
| <script src="script.js"></script> | |
| </body> | |
| </html> |
This file contains 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
| d3.json("symbols.json", function(error, symbols) { | |
| var symbolDivs = d3.select("#symbols-container").selectAll(".symbol") | |
| .data(symbols); | |
| var newSymbolDivs = symbolDivs.enter() | |
| .append("div") | |
| .attr("class", "symbol") | |
| var newSymbolSvgs = newSymbolDivs.append("svg") | |
| .attr("viewBox", "0 0 10 10") | |
| .attr("height", "120px") | |
| .attr("width", "120px") | |
| .append("g") | |
| .attr("class", "full") | |
| .attr("transform", "translate(1 1)rotate(-45 4 4)") | |
| .attr("stroke-width", 0.1) | |
| .attr("stroke", "black") | |
| .attr("fill", "none"); | |
| newSymbolSvgs.append("g") | |
| .attr("class", "outer") | |
| .attr("transform", "translate(4,4)"); | |
| newSymbolSvgs.append("g") | |
| .attr("class", "a") | |
| .attr("transform", "translate(4,2)"); | |
| newSymbolSvgs.append("g") | |
| .attr("class", "b") | |
| .attr("transform", "translate(6,4)"); | |
| newSymbolSvgs.append("g") | |
| .attr("class", "c") | |
| .attr("transform", "translate(4,6)"); | |
| newSymbolSvgs.append("g") | |
| .attr("class", "d") | |
| .attr("transform", "translate(2,4)"); | |
| newSymbolSvgs.call(drawOuterSegment, "left"); | |
| newSymbolSvgs.call(drawOuterSegment, "top"); | |
| newSymbolSvgs.call(drawOuterSegment, "right"); | |
| newSymbolSvgs.call(drawOuterSegment, "bottom"); | |
| newSymbolSvgs.call(drawInnerSegment, "a", "left"); | |
| newSymbolSvgs.call(drawInnerSegment, "a", "top"); | |
| newSymbolSvgs.call(drawInnerSegment, "a", "right"); | |
| newSymbolSvgs.call(drawInnerSegment, "a", "bottom"); | |
| newSymbolSvgs.call(drawInnerSegment, "b", "left"); | |
| newSymbolSvgs.call(drawInnerSegment, "b", "top"); | |
| newSymbolSvgs.call(drawInnerSegment, "b", "right"); | |
| newSymbolSvgs.call(drawInnerSegment, "b", "bottom"); | |
| newSymbolSvgs.call(drawInnerSegment, "c", "left"); | |
| newSymbolSvgs.call(drawInnerSegment, "c", "top"); | |
| newSymbolSvgs.call(drawInnerSegment, "c", "right"); | |
| newSymbolSvgs.call(drawInnerSegment, "c", "bottom"); | |
| newSymbolSvgs.call(drawInnerSegment, "d", "left"); | |
| newSymbolSvgs.call(drawInnerSegment, "d", "top"); | |
| newSymbolSvgs.call(drawInnerSegment, "d", "right"); | |
| newSymbolSvgs.call(drawInnerSegment, "d", "bottom"); | |
| newSymbolDivs.append("div") | |
| .attr("class", "label") | |
| .text(function(d) { | |
| return d.label; | |
| }); | |
| }); | |
| function drawInnerSegment(selection, section, segment) { | |
| selection.filter(function(d) { | |
| return _.includes(d.sections, section + "-" + segment); | |
| }) | |
| .select("." + section) | |
| .append("path") | |
| .attr("class", segment) | |
| .attr("d", getInnerSegment(segment)); | |
| } | |
| function getInnerSegment(segment) { | |
| switch (segment) { | |
| case "left": | |
| return "M -2,0 A 2,2 0 0 1 0,-2"; | |
| case "top": | |
| return "M 0,-2 A 2,2 0 0 1 2,0"; | |
| case "right": | |
| return "M 2,0 A 2,2 0 0 1 0,2"; | |
| case "bottom": | |
| return "M 0,2 A 2,2 0 0 1 -2,0"; | |
| } | |
| } | |
| function drawOuterSegment(selection, segment) { | |
| selection.filter(function(d) { | |
| return _.includes(d.sections, segment); | |
| }) | |
| .select(".outer") | |
| .append("path") | |
| .attr("class", segment) | |
| .attr("d", getOuterSegment(segment)); | |
| } | |
| function getOuterSegment(segment) { | |
| switch (segment) { | |
| case "left": | |
| return "M -4,0 A 4,4 0 0 1 0,-4"; | |
| case "top": | |
| return "M 0,-4 A 4,4 0 0 1 4,0"; | |
| case "right": | |
| return "M 4,0 A 4,4 0 0 1 0,4"; | |
| case "bottom": | |
| return "M 0,4 A 4,4 0 0 1 -4,0"; | |
| } | |
| } |
This file contains 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
| body { | |
| background: white; | |
| } | |
| svg { | |
| padding: 5px; | |
| } | |
| .symbol { | |
| display: inline-block; | |
| border: 1px solid grey; | |
| min-width: 5em; | |
| } | |
| .symbol svg { | |
| display: block; | |
| margin: 0 auto; | |
| } | |
| .symbol path { | |
| stroke-linecap: "butt"; | |
| } | |
| .symbol .label { | |
| background: #eee; | |
| border-top: 1px solid grey; | |
| text-align: center; | |
| } |
This file contains 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
| [{ | |
| "label": "nature", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-bottom", | |
| "b-left", | |
| "b-top", | |
| "b-bottom", | |
| "c-left", | |
| "c-top", | |
| "d-top", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "love", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-top", | |
| "b-left", | |
| "b-right", | |
| "b-bottom", | |
| "c-left", | |
| "c-bottom", | |
| "d-left", | |
| "d-top", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "force", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "b-top", | |
| "d-left", | |
| "d-top", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "transform", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-top", | |
| "a-right", | |
| "b-left", | |
| "b-top", | |
| "c-bottom", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "change", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "a-right", | |
| "b-left", | |
| "b-bottom", | |
| "c-top", | |
| "d-left", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "machine", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "bottom", | |
| "a-top", | |
| "a-right", | |
| "b-top", | |
| "b-right", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "future", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "a-top", | |
| "b-top", | |
| "c-left", | |
| "c-top", | |
| "c-bottom", | |
| "d-left", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "cycle", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "right", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "merge", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-top", | |
| "a-right", | |
| "d-left", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "dependence", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "a-left", | |
| "a-top", | |
| "b-top", | |
| "c-left", | |
| "c-top", | |
| "c-right", | |
| "c-bottom", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "void", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "energy", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "a-left", | |
| "a-bottom", | |
| "b-right", | |
| "c-right", | |
| "d-left", | |
| "d-top", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "mutual", | |
| "sections": [ | |
| "left", | |
| "a-right", | |
| "b-left", | |
| "b-top", | |
| "c-left", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "contradict", | |
| "sections": [ | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "c-top", | |
| "c-right", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "power", | |
| "sections": [ | |
| "right", | |
| "a-left", | |
| "a-bottom", | |
| "b-top", | |
| "b-right", | |
| "b-bottom" | |
| ] | |
| }, { | |
| "label": "possibility", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "b-top", | |
| "b-right", | |
| "b-bottom", | |
| "c-bottom", | |
| "d-left", | |
| "d-top", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "convey", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "a-bottom", | |
| "b-right", | |
| "c-left", | |
| "c-bottom", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "encourage", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-right", | |
| "c-right", | |
| "c-bottom", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "wisdom", | |
| "sections": [ | |
| "left", | |
| "right", | |
| "a-left", | |
| "b-top", | |
| "b-right", | |
| "b-bottom", | |
| "c-right", | |
| "c-bottom", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "dynamic", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-bottom", | |
| "c-top", | |
| "c-right", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "intelligence", | |
| "sections": [ | |
| "top", | |
| "a-top", | |
| "a-right", | |
| "b-right", | |
| "c-left", | |
| "c-top", | |
| "c-right", | |
| "d-left", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "entropy", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "b-right", | |
| "b-bottom", | |
| "c-left", | |
| "c-right", | |
| "c-bottom", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "society", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-top", | |
| "a-right", | |
| "b-left", | |
| "b-top", | |
| "c-left", | |
| "c-bottom", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "chaos", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "b-left", | |
| "b-right", | |
| "c-top", | |
| "c-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "growth", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-right", | |
| "a-bottom", | |
| "c-left", | |
| "c-top", | |
| "c-right" | |
| ] | |
| }, { | |
| "label": "civilization", | |
| "sections": [ | |
| "top", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "b-left", | |
| "b-top", | |
| "b-right", | |
| "c-left", | |
| "c-bottom", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "spur", | |
| "sections": [ | |
| "right", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-right", | |
| "c-right", | |
| "c-bottom", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "infinity", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-top", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "motion", | |
| "sections": [ | |
| "left", | |
| "bottom", | |
| "a-top", | |
| "a-right", | |
| "b-right", | |
| "d-left", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "harmony", | |
| "sections": [ | |
| "left", | |
| "right", | |
| "a-top", | |
| "a-right", | |
| "b-right", | |
| "b-bottom", | |
| "c-left", | |
| "c-bottom", | |
| "d-left", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "resurrect", | |
| "sections": [ | |
| "left", | |
| "right", | |
| "a-left", | |
| "b-top", | |
| "b-right", | |
| "c-left", | |
| "c-top", | |
| "c-right", | |
| "c-bottom", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "weave", | |
| "sections": [ | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-top", | |
| "c-top", | |
| "c-right", | |
| "c-bottom" | |
| ] | |
| }, { | |
| "label": "rebirth", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "b-right", | |
| "b-bottom", | |
| "c-bottom", | |
| "d-left", | |
| "d-top", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "control", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "a-bottom", | |
| "b-right", | |
| "b-bottom", | |
| "c-right", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "sacrifice", | |
| "sections": [ | |
| "left", | |
| "right", | |
| "b-right", | |
| "b-bottom", | |
| "c-left", | |
| "c-bottom", | |
| "d-left", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "time", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "right", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "c-top", | |
| "c-right", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "constraint", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-bottom", | |
| "b-left", | |
| "b-right", | |
| "c-right" | |
| ] | |
| }, { | |
| "label": "inhibit", | |
| "sections": [ | |
| "a-left", | |
| "a-top", | |
| "b-left", | |
| "b-bottom", | |
| "c-left", | |
| "c-top", | |
| "d-left", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "creativity", | |
| "sections": [ | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-top", | |
| "b-right", | |
| "c-top", | |
| "c-right", | |
| "c-bottom", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "stimulate", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-top", | |
| "b-right", | |
| "c-left", | |
| "c-top", | |
| "c-right" | |
| ] | |
| }, { | |
| "label": "momentum", | |
| "sections": [ | |
| "left", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "c-top", | |
| "c-right", | |
| "d-left", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "balance", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "b-right", | |
| "b-bottom", | |
| "d-left", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "resilience", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "d-left", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "flow", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "c-top", | |
| "c-right", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "believe", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-bottom", | |
| "b-right", | |
| "b-bottom" | |
| ] | |
| }, { | |
| "label": "tradition", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "bottom", | |
| "a-top", | |
| "b-top", | |
| "b-right", | |
| "c-bottom", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "nurture", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "a-right", | |
| "a-bottom", | |
| "b-top", | |
| "c-left", | |
| "c-top", | |
| "c-right", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "honor", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-top", | |
| "a-right", | |
| "b-right", | |
| "b-bottom", | |
| "c-bottom", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "form", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "b-left", | |
| "b-top", | |
| "b-right", | |
| "b-bottom", | |
| "c-right", | |
| "c-bottom", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "question", | |
| "sections": [ | |
| "top", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-left", | |
| "c-right", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "static", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "b-left", | |
| "b-top", | |
| "c-left", | |
| "c-right", | |
| "c-bottom", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "exist", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "b-right", | |
| "c-right", | |
| "d-left", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "elevate", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-right", | |
| "b-bottom", | |
| "d-left" | |
| ] | |
| }, { | |
| "label": "survival", | |
| "sections": [ | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "b-top", | |
| "b-right", | |
| "d-left", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "system", | |
| "sections": [ | |
| "a-top", | |
| "a-right", | |
| "b-left", | |
| "c-left", | |
| "c-bottom", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "remember", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-top", | |
| "c-right", | |
| "d-left", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "sustain", | |
| "sections": [ | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "d-left", | |
| "d-top", | |
| "d-right" | |
| ] | |
| }, { | |
| "label": "ethereal", | |
| "sections": [ | |
| "top", | |
| "bottom", | |
| "a-left", | |
| "a-right", | |
| "b-top", | |
| "c-right", | |
| "c-bottom", | |
| "d-top", | |
| "d-bottom" | |
| ] | |
| }, { | |
| "label": "discover", | |
| "sections": [ | |
| "top", | |
| "right", | |
| "a-bottom", | |
| "b-top", | |
| "b-bottom", | |
| "c-top", | |
| "c-right", | |
| "c-bottom", | |
| "d-top" | |
| ] | |
| }, { | |
| "label": "explore", | |
| "sections": [ | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "b-top", | |
| "c-top", | |
| "c-right" | |
| ] | |
| }, { | |
| "label": "all", | |
| "sections": [ | |
| "left", | |
| "top", | |
| "right", | |
| "bottom", | |
| "a-left", | |
| "a-top", | |
| "a-right", | |
| "a-bottom", | |
| "b-left", | |
| "b-top", | |
| "b-right", | |
| "b-bottom", | |
| "c-left", | |
| "c-top", | |
| "c-right", | |
| "c-bottom", | |
| "d-left", | |
| "d-top", | |
| "d-right", | |
| "d-bottom" | |
| ] | |
| }] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment