-- Leo's gemini proxy

-- Connecting to alexschroeder.ch:1965...

-- Connected

-- Sending request

-- Meta line: 20 text/gemini

2024-03-08 SVG, hand-made


The Oddmu logo A smiling person with a round face and a walking stick, drawn with just a few lines.


I made a logo for Oddµ, by hand.


Oddµ


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.


Linja Lili


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.


A map of the Ultraviolet Grasslands A bunch of locations and paths connecting them. 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 } Circle Sea Emerald City Ruins of Azure Red Land District Violet City Steppe of the Lime Nomads The Low Road and the High Porcelain City


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


​#SVG


-- Response ended

-- Page fetched on Sat May 18 19:42:49 2024