Diary SiteMap RecentChanges About Contact 2013-02 Calendar

Search:

Matching Pages:

2013-02-27 New Text Mapper Shapes

How to create new shapes for Text Mapper?

First, start with an empty SVG file:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     height="200px"
     width="200px">
</svg>

I like to draw stuff using the calligraphy tool (c). I usually simplify the nodes a lot (Ctrl+L), unify the shapes (Ctrl++), edit the nodes by hand (n) until you’re happy with the fewest number of nodes you can manage.

Now move the entire shape such that it is centered on the top left corner. This is (0,0) as far as SVG is concerned. Save it.

https://farm9.staticflickr.com/8240/8512911746_4f1c405dba_o.png

Look at the SVG file and notice something like this:

    <path
       style="fill:#000000;fill-opacity:1;stroke:none"
       d="m 7.647323,-20.341905 c -5.784973,-11.791839
       -36.204242,-5.139394 -43.951039,7.112364 8.922877,-5.977096
       34.793258,-11.641806 37.046343,-5.498373 -17.505656,0.485788
       -29.019956,5.940662 -33.027811,23.8472764 C
       -21.859546,-12.603312 -7.5022983,-14.191144 2.47485,-12.984161
       -8.2112223,6.06712 -19.987316,13.477858 -15.788864,50.225619 c
       3.988368,3.362713 8.6116517,-5.097214 4.510279,-7.531518
       -0.559084,-6.64895 -0.875559,-13.360661 -0.08632,-20.004922 C
       -9.6892813,9.718021 1.072969,-6.510207 8.835372,-12.256094
       26.823805,-7.758432 35.550312,0.1756144 34.450001,15.351883
       44.387089,3.7916614 29.882349,-11.701263 14.406587,-15.219388
       28.287217,-15.939127 40.549839,-6.589098 45.412784,1.4541824
       47.026796,-8.361333 28.866764,-19.205208 16.79733,-20.277164 c
       10.765708,-6.95198 25.316253,-3.074379 29.792108,3.226712
       -4.893545,-14.115874 -36.158133,-10.60357 -38.942114,-3.291453
       z"
       id="path3007"
       inkscape:connector-curvature="0"
       sodipodi:nodetypes="ccccccccccccccc" />

You can already extract this path and use it! Usually it takes several attempts to get the placement right. Once I’m happy, I turn all these floating point numbers into integers in order to save space. Personally, I use Emacs to do it (EmacsWiki:RoundFloatingPoints).

This is what I want:

m 8,-20 c -6,-12 -36,-5 -44,7 9,-6 35,-12 37,-5 -18,0 -29,6 -33,24 C -22,-13
-8,-14 2,-13 -8,6 -20,13 -16,50 c 4,3 9,-5 5,-8 -1,-7 -1,-13 0,-20 C -10,10 1,-7
9,-12 27,-8 36,0 34,15 44,4 30,-12 14,-15 28,-16 41,-7 45,1 47,-8 29,-19 17,-20
c 11,-7 25,-3 30,3 -5,-14 -36,-11 -39,-3 z

Example input:

0202 jungle
jungle attributes fill="white" stroke="#b3b3ff" stroke-width="3"
jungle path m 8,-20 c -6,-12 -36,-5 -44,7 9,-6 35,-12 37,-5 -18,0 -29,6 -33,24 C -22,-13 -8,-14 2,-13 -8,6 -20,13 -16,50 c 4,3 9,-5 5,-8 -1,-7 -1,-13 0,-20 C -10,10 1,-7 9,-12 27,-8 36,0 34,15 44,4 30,-12 14,-15 28,-16 41,-7 45,1 47,-8 29,-19 17,-20 c 11,-7 25,-3 30,3 -5,-14 -36,-11 -39,-3 z

Output:

Jungle Hex

Example input:

0101 jungle
jungle attributes fill="#9acd32" stroke="black" stroke-width="3"
jungle path attributes fill="#228b22"
jungle path m 8,-20 c -6,-12 -36,-5 -44,7 9,-6 35,-12 37,-5 -18,0 -29,6 -33,24 C -22,-13 -8,-14 2,-13 -8,6 -20,13 -16,50 c 4,3 9,-5 5,-8 -1,-7 -1,-13 0,-20 C -10,10 1,-7 9,-12 27,-8 36,0 34,15 44,4 30,-12 14,-15 28,-16 41,-7 45,1 47,-8 29,-19 17,-20 c 11,-7 25,-3 30,3 -5,-14 -36,-11 -39,-3 z
text font-size="20pt" dy="15px"

Output:

Green Jungle Hex

Tags: RSS RSS RSS RSS

Show Google +1

Comments

Not enough trees for a jungle (-: At a watering hole and you have a decent oasis …

– Harald 2013-02-27 11:17 UTC



AlexSchroeder
There you go!

Oasis

I think I like how easy it turns out to be.

AlexSchroeder 2013-02-27 11:29 UTC



AlexSchroeder
I’m still pondering how to do labels.

https://farm9.staticflickr.com/8507/8511938807_5a793d726a.jpg

AlexSchroeder 2013-02-27 12:01 UTC


Very nice and readable!

– Harald 2013-02-27 12:37 UTC



AlexSchroeder
Thank you for the feedback. Added. :)

Harald's Repose

AlexSchroeder 2013-02-27 14:10 UTC


Please make sure you contribute only your own work, or work licensed under the GNU Free Documentation License. See Info for text formatting rules. You can edit the comment page if you need to fix typos. You can subscribe to new comments by email without leaving a comment.

A carefully selected set of emoji for you to copy and paste: • ✕ ✓ ✝ ☠ ☢ ☣ ⚛ ☭ ☮ ☯ ⚒ ⚓ ⚔⚙ ★ ☆ ✨ 🌟 🐣 🐤 🐥 🐦 🐧 🐨 🐷 🐻 🐼 🐢 🐝 🐛 🐙 🐒 🐌 🐋 👑 ✊ 👊 ✌ 👋 👌 👍 👎 👏 👸 🍵 🍷 👹 👺 👻 👽 👾 👿 💀 ❤ ❦ ♥ 💔 📓 📖 📜 📝 🔒 🔓 🔔 🔥 🔨 🔪 🔫 🔮 😁 😂 😃 😄 😅 😆 😉 😊 😋 😌 😍 😏 😒 😓 😔 😖 😘 😚 😜 😝 😞 😠 😡 😢 😣 😤 😥 😨 😩 😪 😫 😭 😰 😱 😲 😳 😵 😷 😸 😹 😺 😻 😼 😽 😾 😿 🙀 🙇 🙈 🙉 🙊 🚶 🚲 🚀 🚽

To save this page you must answer this question:

Please say HELLO.