2024-03-08 SVG, hand-made
=========================

<svg style="float: right" role="img" aria-label="The Oddmu logo: A
smiling person with a round face and a walking stick." heigh="150"
width="150" viewBox="0 0 320 320"> <title>The Oddmu logo</title>
<desc>A smiling person with a round face and a walking stick, drawn
with just a few lines.</desc> <g> <circle id="hand1" cx="60"
cy="190" r="15" fill="white" stroke="black" stroke-width="2"/> <path
id="stick" d="M40,40 L60,300 H66 L46,40 Z" fill="white" stroke="black"
stroke-width="2"/> <ellipse id="fingers" cx="50" cy="195" rx="5"
ry="15" fill="white" stroke="black" stroke-width="2"/> <path
id="thumb" d="M60,180 Q40,180 60,190 Z" fill="white" stroke="black"
stroke-width="2"/> </g> <g id="hand2"> <circle cx="240" cy="200"
r="15" fill="white" stroke="black" stroke-width="2"/> </g> <g
id="body"> <path d="M60,170 H170 L240,180 V230 L190,220 L200,222
L220,290 H120 V215 L125,215 H60 V170" fill="white" stroke="black"
stroke-width="2"/> </g> <g id="face"> <circle cx="150" cy="150"
r="30" fill="white" stroke="black" stroke-width="2"/> <circle
cx="138" cy="145" r="2" fill="black" stroke="black"/> <circle
cx="158" cy="145" r="2" fill="black" stroke="black"/> <path
d="M132,158 Q145,175 170,155 " fill="none" stroke="black"
stroke-width="2"/> </g> <g id="foot1"> <path d="M120,300 C100,270
180,270 160,300 Z" fill="white" stroke="black" stroke-width="2"/>
</g> <g id="foot1"> <path d="M180,300 V290 H190 C210,270 250,280
240,300 Z" fill="white" stroke="black" stroke-width="2"/> </g>
</svg>

I made a logo for Oddµ, by hand.

I’m surprised that this actually works. I did it in Emacs, toggling
between Nxml Mode and Image Mode. It worked quite well. At first I
thought I’d clone-indirect-buffer and have one for editing and one for
viewing but that didn’t work, sadly.

In my heart of hearts I'd love to have an SVG editor like Inkscape
that does it the way I want it to, but no such luck. If I use
Inkscape, the file is littered with extra namespaces, extra elements,
extra attributes, styles, and on and on.

For a while I thought that Linja Lili was going to be the kind of
tool that helps me draw these SVG path elements. But then I just do it
by hand, guessing the positions of points and adjusting them by hand.

Surprisingly, these even works for the quadratic and cubic Bézier
curves, as long as I do simple segments. I've done the player map for
one of my role-playing games by hand, too.

<svg role="img" aria-label="A map of the Ultraviolet Grasslands, with
a bunch of locations and paths connecting them." width="800"
viewBox="0 0 2000 200"> <title>A map of the Ultraviolet Grasslands
</title> <description>A bunch of locations and paths connecting
them.</description> <defs> <style type="text/css"> text {
font-family: "Iosevka Etoile"; font-size: 10pt; text-anchor: middle;
text-align: center } text.label { font-size: 10pt } circle.dashed {
fill: ​#fffaff; stroke: #a7a; stroke-width: 2; stroke-dasharray: 4 }
circle.solid { fill: #fffaff; stroke: #a7a; stroke-width: 2 } </style>
</defs> <rect width="100%" height="100%" fill="#fffaff"/> <circle
cx="1900" cy="100" r="80" fill="#a7a"/> <text x="1900" y="100"> <tspan
font-size="14">Circle</tspan> <tspan x="1900" dy="16"
font-size="14">Sea</tspan> </text> <!-- from Emerald City to Violet
City --> <path d="M1900,20 Q1850,10 1820,40 1800,60 1820,100"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1900" cy="20" r="15" class="dashed"/> <text x="1910"
y="50" class="label"> <tspan>Emerald</tspan> <tspan x="1910"
dy="12">City</tspan> </text> <circle cx="1820" cy="40" r="15"
class="dashed"/> <text x="1780" y="20" class="label"> <tspan>Ruins
of</tspan> <tspan x="1780" dy="12">Azure</tspan> </text> <circle
cx="1880" cy="180" r="15" class="solid"/> <text x="1880" y="145"
class="label"> <tspan>Red Land</tspan> <tspan x="1880"
dy="12">District</tspan> </text> <!-- from Violet City to Lime Nomads
--> <path d="M1820,100 C1700,100 1750,30 1650,30" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <!-- from Violet
City to High Road --> <path d="M1820,100 C1750,100 1800,150 1700,150"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1820" cy="100" r="15" class="solid"/> <text x="1800"
y="130" class="label"> <tspan>Violet</tspan> <tspan x="1800"
dy="12">City</tspan> </text> <!-- from Lime Nomads to High Road -->
<path d="M1650,30 C1800,70 1550,110 1700,150" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1650" cy="30" r="15" class="solid"/> <text x="1650" y="60"
class="label"> <tspan>Steppe of the</tspan> <tspan x="1650"
dy="12">Lime Nomads</tspan> </text> <!-- from High Road to Porcelain
City --> <path d="M1700,150 C1600,150 1620,40 1560,60" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1700" cy="150" r="15" class="solid"/> <text x="1700" y="115"
class="label"> <tspan>The Low Road</tspan> <tspan x="1700" dy="12">and
the High</tspan> </text> <circle cx="1560" cy="60" r="15"
class="solid"/> <text x="1560" y="90" class="label">
<tspan>Porcelain</tspan> <tspan x="1560" dy="12">City</tspan> </text>
</svg> stroke: ​#a7a; stroke-width: 2; stroke-dasharray: 4 }
circle.solid { fill: #fffaff; stroke: #a7a; stroke-width: 2 } </style>
</defs> <rect width="100%" height="100%" fill="#fffaff"/> <circle
cx="1900" cy="100" r="80" fill="#a7a"/> <text x="1900" y="100"> <tspan
font-size="14">Circle</tspan> <tspan x="1900" dy="16"
font-size="14">Sea</tspan> </text> <!-- from Emerald City to Violet
City --> <path d="M1900,20 Q1850,10 1820,40 1800,60 1820,100"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1900" cy="20" r="15" class="dashed"/> <text x="1910"
y="50" class="label"> <tspan>Emerald</tspan> <tspan x="1910"
dy="12">City</tspan> </text> <circle cx="1820" cy="40" r="15"
class="dashed"/> <text x="1780" y="20" class="label"> <tspan>Ruins
of</tspan> <tspan x="1780" dy="12">Azure</tspan> </text> <circle
cx="1880" cy="180" r="15" class="solid"/> <text x="1880" y="145"
class="label"> <tspan>Red Land</tspan> <tspan x="1880"
dy="12">District</tspan> </text> <!-- from Violet City to Lime Nomads
--> <path d="M1820,100 C1700,100 1750,30 1650,30" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <!-- from Violet
City to High Road --> <path d="M1820,100 C1750,100 1800,150 1700,150"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1820" cy="100" r="15" class="solid"/> <text x="1800"
y="130" class="label"> <tspan>Violet</tspan> <tspan x="1800"
dy="12">City</tspan> </text> <!-- from Lime Nomads to High Road -->
<path d="M1650,30 C1800,70 1550,110 1700,150" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1650" cy="30" r="15" class="solid"/> <text x="1650" y="60"
class="label"> <tspan>Steppe of the</tspan> <tspan x="1650"
dy="12">Lime Nomads</tspan> </text> <!-- from High Road to Porcelain
City --> <path d="M1700,150 C1600,150 1620,40 1560,60" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1700" cy="150" r="15" class="solid"/> <text x="1700" y="115"
class="label"> <tspan>The Low Road</tspan> <tspan x="1700" dy="12">and
the High</tspan> </text> <circle cx="1560" cy="60" r="15"
class="solid"/> <text x="1560" y="90" class="label">
<tspan>Porcelain</tspan> <tspan x="1560" dy="12">City</tspan> </text>
</svg> stroke-width: 2; stroke-dasharray: 4 } circle.solid { fill:
​#fffaff; stroke: #a7a; stroke-width: 2 } </style> </defs> <rect
width="100%" height="100%" fill="#fffaff"/> <circle cx="1900" cy="100"
r="80" fill="#a7a"/> <text x="1900" y="100"> <tspan
font-size="14">Circle</tspan> <tspan x="1900" dy="16"
font-size="14">Sea</tspan> </text> <!-- from Emerald City to Violet
City --> <path d="M1900,20 Q1850,10 1820,40 1800,60 1820,100"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1900" cy="20" r="15" class="dashed"/> <text x="1910"
y="50" class="label"> <tspan>Emerald</tspan> <tspan x="1910"
dy="12">City</tspan> </text> <circle cx="1820" cy="40" r="15"
class="dashed"/> <text x="1780" y="20" class="label"> <tspan>Ruins
of</tspan> <tspan x="1780" dy="12">Azure</tspan> </text> <circle
cx="1880" cy="180" r="15" class="solid"/> <text x="1880" y="145"
class="label"> <tspan>Red Land</tspan> <tspan x="1880"
dy="12">District</tspan> </text> <!-- from Violet City to Lime Nomads
--> <path d="M1820,100 C1700,100 1750,30 1650,30" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <!-- from Violet
City to High Road --> <path d="M1820,100 C1750,100 1800,150 1700,150"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1820" cy="100" r="15" class="solid"/> <text x="1800"
y="130" class="label"> <tspan>Violet</tspan> <tspan x="1800"
dy="12">City</tspan> </text> <!-- from Lime Nomads to High Road -->
<path d="M1650,30 C1800,70 1550,110 1700,150" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1650" cy="30" r="15" class="solid"/> <text x="1650" y="60"
class="label"> <tspan>Steppe of the</tspan> <tspan x="1650"
dy="12">Lime Nomads</tspan> </text> <!-- from High Road to Porcelain
City --> <path d="M1700,150 C1600,150 1620,40 1560,60" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1700" cy="150" r="15" class="solid"/> <text x="1700" y="115"
class="label"> <tspan>The Low Road</tspan> <tspan x="1700" dy="12">and
the High</tspan> </text> <circle cx="1560" cy="60" r="15"
class="solid"/> <text x="1560" y="90" class="label">
<tspan>Porcelain</tspan> <tspan x="1560" dy="12">City</tspan> </text>
</svg> stroke: ​#a7a; stroke-width: 2 } </style> </defs> <rect
width="100%" height="100%" fill="#fffaff"/> <circle cx="1900" cy="100"
r="80" fill="#a7a"/> <text x="1900" y="100"> <tspan
font-size="14">Circle</tspan> <tspan x="1900" dy="16"
font-size="14">Sea</tspan> </text> <!-- from Emerald City to Violet
City --> <path d="M1900,20 Q1850,10 1820,40 1800,60 1820,100"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1900" cy="20" r="15" class="dashed"/> <text x="1910"
y="50" class="label"> <tspan>Emerald</tspan> <tspan x="1910"
dy="12">City</tspan> </text> <circle cx="1820" cy="40" r="15"
class="dashed"/> <text x="1780" y="20" class="label"> <tspan>Ruins
of</tspan> <tspan x="1780" dy="12">Azure</tspan> </text> <circle
cx="1880" cy="180" r="15" class="solid"/> <text x="1880" y="145"
class="label"> <tspan>Red Land</tspan> <tspan x="1880"
dy="12">District</tspan> </text> <!-- from Violet City to Lime Nomads
--> <path d="M1820,100 C1700,100 1750,30 1650,30" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <!-- from Violet
City to High Road --> <path d="M1820,100 C1750,100 1800,150 1700,150"
fill="none" stroke="#a7a" stroke-width="2" stroke-dasharray="4"/>
<circle cx="1820" cy="100" r="15" class="solid"/> <text x="1800"
y="130" class="label"> <tspan>Violet</tspan> <tspan x="1800"
dy="12">City</tspan> </text> <!-- from Lime Nomads to High Road -->
<path d="M1650,30 C1800,70 1550,110 1700,150" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1650" cy="30" r="15" class="solid"/> <text x="1650" y="60"
class="label"> <tspan>Steppe of the</tspan> <tspan x="1650"
dy="12">Lime Nomads</tspan> </text> <!-- from High Road to Porcelain
City --> <path d="M1700,150 C1600,150 1620,40 1560,60" fill="none"
stroke="#a7a" stroke-width="2" stroke-dasharray="4"/> <circle
cx="1700" cy="150" r="15" class="solid"/> <text x="1700" y="115"
class="label"> <tspan>The Low Road</tspan> <tspan x="1700" dy="12">and
the High</tspan> </text> <circle cx="1560" cy="60" r="15"
class="solid"/> <text x="1560" y="90" class="label">
<tspan>Porcelain</tspan> <tspan x="1560" dy="12">City</tspan> </text>
</svg> stroke-width: 2 } </style> </defs> <rect width="100%"
height="100%" fill="#fffaff"/> <circle cx="1900" cy="100" r="80"
fill="#a7a"/> <text x="1900" y="100"> <tspan font-size="14">Circle
</tspan> <tspan x="1900" dy="16" font-size="14">Sea</tspan>
</text> <!-- from Emerald City to Violet City --> <path d="M1900,20
Q1850,10 1820,40 1800,60 1820,100" fill="none" stroke="#a7a"
stroke-width="2" stroke-dasharray="4"/> <circle cx="1900" cy="20"
r="15" class="dashed"/> <text x="1910" y="50" class="label"> <tspan>
Emerald</tspan> <tspan x="1910" dy="12">City</tspan> </text>
<circle cx="1820" cy="40" r="15" class="dashed"/> <text x="1780"
y="20" class="label"> <tspan>Ruins of</tspan> <tspan x="1780"
dy="12">Azure</tspan> </text> <circle cx="1880" cy="180" r="15"
class="solid"/> <text x="1880" y="145" class="label"> <tspan>Red
Land</tspan> <tspan x="1880" dy="12">District</tspan> </text>
<!-- from Violet City to Lime Nomads --> <path d="M1820,100 C1700,100
1750,30 1650,30" fill="none" stroke="#a7a" stroke-width="2"
stroke-dasharray="4"/> <!-- from Violet City to High Road --> <path
d="M1820,100 C1750,100 1800,150 1700,150" fill="none" stroke="#a7a"
stroke-width="2" stroke-dasharray="4"/> <circle cx="1820" cy="100"
r="15" class="solid"/> <text x="1800" y="130" class="label"> <tspan>
Violet</tspan> <tspan x="1800" dy="12">City</tspan> </text> <!--
from Lime Nomads to High Road --> <path d="M1650,30 C1800,70 1550,110
1700,150" fill="none" stroke="#a7a" stroke-width="2"
stroke-dasharray="4"/> <circle cx="1650" cy="30" r="15"
class="solid"/> <text x="1650" y="60" class="label"> <tspan>Steppe
of the</tspan> <tspan x="1650" dy="12">Lime Nomads</tspan>
</text> <!-- from High Road to Porcelain City --> <path d="M1700,150
C1600,150 1620,40 1560,60" fill="none" stroke="#a7a" stroke-width="2"
stroke-dasharray="4"/> <circle cx="1700" cy="150" r="15"
class="solid"/> <text x="1700" y="115" class="label"> <tspan>The
Low Road</tspan> <tspan x="1700" dy="12">and the High</tspan>
</text> <circle cx="1560" cy="60" r="15" class="solid"/> <text
x="1560" y="90" class="label"> <tspan>Porcelain</tspan> <tspan
x="1560" dy="12">City</tspan> </text> </svg>

Still. The idea of SVG editor keeps haunting me. And I kind of like
the Linja Lili editor. 😄

​#SVG