mirror of
https://gitlab.constantvzw.org/osp/tools.cobbled-paths.git
synced 2024-12-22 12:40:32 +01:00
298 lines
15 KiB
HTML
298 lines
15 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block body %}
|
||
|
|
|
||
|
|
<div class="font title box">
|
||
|
|
<div class="f-ascii">
|
||
|
|
<pre> .- _-- /. /. /. |\
|
||
|
|
( /| || || || \\
|
||
|
|
(( || / \\ ||/|\ ||/|\ || _-_ / \\
|
||
|
|
(( || +| |. |+ || |+ || || || \\ +| |.
|
||
|
|
( / | || || || |' || |' || ||/ || ||
|
||
|
|
-____- \\ / \\/ \\/ \\ \\ / \\/ </pre>
|
||
|
|
</div>
|
||
|
|
<div class="f-svg">
|
||
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="440" height="112" class="svgbob">
|
||
|
|
<style>.svgbob line, .svgbob path, .svgbob circle, .svgbob rect, .svgbob polygon {
|
||
|
|
stroke: blue;
|
||
|
|
stroke-width: 2.5;
|
||
|
|
stroke-opacity: 1;
|
||
|
|
fill-opacity: 1;
|
||
|
|
stroke-linecap: round;
|
||
|
|
stroke-linejoin: miter;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob text {
|
||
|
|
white-space: pre;
|
||
|
|
fill: black;
|
||
|
|
font-family: Iosevka Fixed, monospace;
|
||
|
|
font-size: 14px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob rect.backdrop {
|
||
|
|
stroke: none;
|
||
|
|
fill: none;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .broken {
|
||
|
|
stroke-dasharray: 8;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .filled {
|
||
|
|
fill: black;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .bg_filled {
|
||
|
|
fill: white;
|
||
|
|
stroke-width: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .nofill {
|
||
|
|
fill: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .end_marked_arrow {
|
||
|
|
marker-end: url(#arrow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .start_marked_arrow {
|
||
|
|
marker-start: url(#arrow);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .end_marked_diamond {
|
||
|
|
marker-end: url(#diamond);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .start_marked_diamond {
|
||
|
|
marker-start: url(#diamond);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .end_marked_circle {
|
||
|
|
marker-end: url(#circle);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .start_marked_circle {
|
||
|
|
marker-start: url(#circle);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .end_marked_open_circle {
|
||
|
|
marker-end: url(#open_circle);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .start_marked_open_circle {
|
||
|
|
marker-start: url(#open_circle);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .end_marked_big_open_circle {
|
||
|
|
marker-end: url(#big_open_circle);
|
||
|
|
}
|
||
|
|
|
||
|
|
.svgbob .start_marked_big_open_circle {
|
||
|
|
marker-start: url(#big_open_circle);
|
||
|
|
}
|
||
|
|
|
||
|
|
</style>
|
||
|
|
<defs>
|
||
|
|
<marker id="arrow" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||
|
|
<polygon points="0,0 0,4 4,2 0,0"></polygon>
|
||
|
|
</marker>
|
||
|
|
<marker id="diamond" viewBox="-2 -2 8 8" refX="4" refY="2" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||
|
|
<polygon points="0,2 2,0 4,2 2,4 0,2"></polygon>
|
||
|
|
</marker>
|
||
|
|
<marker id="circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||
|
|
<circle cx="4" cy="4" r="2" class="filled"></circle>
|
||
|
|
</marker>
|
||
|
|
<marker id="open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||
|
|
<circle cx="4" cy="4" r="2" class="bg_filled"></circle>
|
||
|
|
</marker>
|
||
|
|
<marker id="big_open_circle" viewBox="0 0 8 8" refX="4" refY="4" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
|
||
|
|
<circle cx="4" cy="4" r="3" class="bg_filled"></circle>
|
||
|
|
</marker>
|
||
|
|
</defs>
|
||
|
|
<rect class="backdrop" x="0" y="0" width="440" height="112"></rect>
|
||
|
|
<text x="258" y="12">'</text>
|
||
|
|
<text x="426" y="12">.</text>
|
||
|
|
<text x="178" y="44">.</text>
|
||
|
|
<text x="130" y="60">.</text>
|
||
|
|
<line x1="136" y1="64" x2="168" y2="64" class="solid"></line>
|
||
|
|
<text x="170" y="60">.'</text>
|
||
|
|
<text x="266" y="60">.</text>
|
||
|
|
<text x="314" y="60">.</text>
|
||
|
|
<text x="50" y="76">`</text>
|
||
|
|
<text x="90" y="76">:'</text>
|
||
|
|
<text x="210" y="76">.</text>
|
||
|
|
<line x1="216" y1="80" x2="224" y2="80" class="solid"></line>
|
||
|
|
<text x="98" y="92">.</text>
|
||
|
|
<text x="170" y="92">'</text>
|
||
|
|
<text x="218" y="92">`</text>
|
||
|
|
<line x1="224" y1="88" x2="232" y2="88" class="solid"></line>
|
||
|
|
<text x="250" y="92">.</text>
|
||
|
|
<text x="330" y="92">.</text>
|
||
|
|
<g>
|
||
|
|
<path d="M 24,8 A 8,8 0,0,1 30,12" class="nofill"></path>
|
||
|
|
<line x1="30" y1="12" x2="32" y2="16" class="solid"></line>
|
||
|
|
<path d="M 32,8 A 8,8 0,0,0 26,12" class="nofill"></path>
|
||
|
|
<line x1="26" y1="12" x2="24" y2="16" class="solid"></line>
|
||
|
|
<line x1="32" y1="8" x2="40" y2="8" class="solid"></line>
|
||
|
|
<path d="M 40,8 A 8,8 0,0,1 46,12" class="nofill"></path>
|
||
|
|
<line x1="46" y1="12" x2="48" y2="16" class="solid"></line>
|
||
|
|
<path d="M 24,16 A 16,16 0,0,0 24,32" class="nofill"></path>
|
||
|
|
<line x1="24" y1="32" x2="32" y2="32" class="solid"></line>
|
||
|
|
<path d="M 32,16 A 16,16 0,0,1 32,32" class="nofill"></path>
|
||
|
|
<path d="M 48,16 A 16,16 0,0,1 48,32" class="nofill"></path>
|
||
|
|
<line x1="48" y1="32" x2="16" y2="96" class="solid"></line>
|
||
|
|
<path d="M 16,72 A 8,8 0,0,0 10,76" class="nofill"></path>
|
||
|
|
<line x1="10" y1="76" x2="8" y2="80" class="solid"></line>
|
||
|
|
<line x1="16" y1="72" x2="28" y2="72" class="solid"></line>
|
||
|
|
<path d="M 8,80 A 16,16 0,0,0 8,96" class="nofill"></path>
|
||
|
|
<line x1="8" y1="96" x2="16" y2="96" class="solid"></line>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<line x1="152" y1="0" x2="112" y2="80" class="solid"></line>
|
||
|
|
<line x1="152" y1="0" x2="156" y2="8" class="solid"></line>
|
||
|
|
<line x1="156" y1="8" x2="156" y2="84" class="solid"></line>
|
||
|
|
<path d="M 156,84 A 4,4 0,0,0 160,88" class="nofill"></path>
|
||
|
|
<line x1="160" y1="88" x2="168" y2="88" class="solid"></line>
|
||
|
|
<path d="M 88,72 A 8,8 0,0,0 82,76" class="nofill"></path>
|
||
|
|
<line x1="82" y1="76" x2="80" y2="80" class="solid"></line>
|
||
|
|
<path d="M 80,80 A 16,16 0,0,0 80,96" class="nofill"></path>
|
||
|
|
<line x1="80" y1="96" x2="96" y2="96" class="solid"></line>
|
||
|
|
<path d="M 112,80 A 32,32 0,0,1 96,96" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path d="M 184,8 A 8,8 0,0,1 190,12" class="nofill"></path>
|
||
|
|
<line x1="190" y1="12" x2="192" y2="16" class="solid"></line>
|
||
|
|
<path d="M 192,8 A 8,8 0,0,0 186,12" class="nofill"></path>
|
||
|
|
<line x1="186" y1="12" x2="184" y2="16" class="solid"></line>
|
||
|
|
<line x1="192" y1="8" x2="256" y2="8" class="solid"></line>
|
||
|
|
<path d="M 184,16 A 16,16 0,0,0 184,32" class="nofill"></path>
|
||
|
|
<line x1="184" y1="32" x2="192" y2="32" class="solid"></line>
|
||
|
|
<path d="M 192,16 A 16,16 0,0,1 192,32" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path d="M 256,0 A 32,32 0,0,1 272,16" class="nofill"></path>
|
||
|
|
<line x1="272" y1="16" x2="280" y2="32" class="solid"></line>
|
||
|
|
<path d="M 280,32 A 16,16 0,0,1 280,48" class="nofill"></path>
|
||
|
|
<line x1="280" y1="48" x2="264" y2="80" class="solid"></line>
|
||
|
|
<line x1="272" y1="64" x2="312" y2="64" class="solid"></line>
|
||
|
|
<line x1="320" y1="0" x2="304" y2="32" class="solid"></line>
|
||
|
|
<path d="M 304,32 A 16,16 0,0,0 304,48" class="nofill"></path>
|
||
|
|
<line x1="304" y1="48" x2="320" y2="80" class="solid"></line>
|
||
|
|
<path d="M 320,80 A 32,32 0,0,0 336,96" class="nofill"></path>
|
||
|
|
<path d="M 248,72 A 8,8 0,0,0 242,76" class="nofill"></path>
|
||
|
|
<line x1="242" y1="76" x2="240" y2="80" class="solid"></line>
|
||
|
|
<path d="M 240,80 A 16,16 0,0,0 240,96" class="nofill"></path>
|
||
|
|
<line x1="240" y1="96" x2="248" y2="96" class="solid"></line>
|
||
|
|
<path d="M 264,80 A 32,32 0,0,1 248,96" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path d="M 412,8 A 8,8 0,0,0 404,16" class="nofill"></path>
|
||
|
|
<line x1="412" y1="8" x2="424" y2="8" class="solid"></line>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<line x1="56" y1="24" x2="64" y2="24" class="solid"></line>
|
||
|
|
<path d="M 64,24 A 8,8 0,0,1 70,28" class="nofill"></path>
|
||
|
|
<line x1="70" y1="28" x2="80" y2="48" class="solid"></line>
|
||
|
|
<path d="M 80,48 A 16,16 0,0,1 80,64" class="nofill"></path>
|
||
|
|
<line x1="80" y1="64" x2="78" y2="68" class="solid"></line>
|
||
|
|
<line x1="56" y1="72" x2="72" y2="72" class="solid"></line>
|
||
|
|
<path d="M 78,68 A 8,8 0,0,1 72,72" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<line x1="112" y1="32" x2="120" y2="32" class="solid"></line>
|
||
|
|
<path d="M 112,32 A 16,16 0,0,0 112,48" class="nofill"></path>
|
||
|
|
<line x1="112" y1="48" x2="114" y2="52" class="solid"></line>
|
||
|
|
<path d="M 114,52 A 8,8 0,0,0 120,56" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<line x1="232" y1="16" x2="192" y2="96" class="solid"></line>
|
||
|
|
<path d="M 192,72 A 8,8 0,0,0 186,76" class="nofill"></path>
|
||
|
|
<line x1="186" y1="76" x2="184" y2="80" class="solid"></line>
|
||
|
|
<line x1="192" y1="72" x2="204" y2="72" class="solid"></line>
|
||
|
|
<path d="M 184,80 A 16,16 0,0,0 184,96" class="nofill"></path>
|
||
|
|
<line x1="184" y1="96" x2="192" y2="96" class="solid"></line>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<line x1="256" y1="32" x2="264" y2="32" class="solid"></line>
|
||
|
|
<path d="M 256,32 A 16,16 0,0,0 256,48" class="nofill"></path>
|
||
|
|
<line x1="256" y1="48" x2="258" y2="52" class="solid"></line>
|
||
|
|
<path d="M 258,52 A 8,8 0,0,0 264,56" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path d="M 328,16 A 16,16 0,0,0 328,32" class="nofill"></path>
|
||
|
|
<path d="M 328,32 A 16,16 0,0,1 328,48" class="nofill"></path>
|
||
|
|
<line x1="328" y1="48" x2="326" y2="52" class="solid"></line>
|
||
|
|
<path d="M 326,52 A 8,8 0,0,1 320,56" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
<g>
|
||
|
|
<path d="M 368,24 A 8,8 0,0,0 362,28" class="nofill"></path>
|
||
|
|
<line x1="362" y1="28" x2="360" y2="32" class="solid"></line>
|
||
|
|
<line x1="368" y1="24" x2="384" y2="24" class="solid"></line>
|
||
|
|
<path d="M 384,24 A 8,8 0,0,1 390,28" class="nofill"></path>
|
||
|
|
<line x1="390" y1="28" x2="392" y2="32" class="solid"></line>
|
||
|
|
<path d="M 360,32 A 16,16 0,0,0 360,48" class="nofill"></path>
|
||
|
|
<line x1="360" y1="48" x2="362" y2="52" class="solid"></line>
|
||
|
|
<path d="M 362,52 A 8,8 0,0,0 368,56" class="nofill"></path>
|
||
|
|
<line x1="368" y1="56" x2="376" y2="56" class="solid"></line>
|
||
|
|
<path d="M 376,56 A 8,8 0,0,1 382,60" class="nofill"></path>
|
||
|
|
<line x1="382" y1="60" x2="384" y2="64" class="solid"></line>
|
||
|
|
<path d="M 384,64 A 16,16 0,0,1 384,80" class="nofill"></path>
|
||
|
|
<line x1="384" y1="80" x2="382" y2="84" class="solid"></line>
|
||
|
|
<path d="M 392,24 A 8,8 0,0,0 386,28" class="nofill"></path>
|
||
|
|
<line x1="386" y1="28" x2="384" y2="32" class="solid"></line>
|
||
|
|
<line x1="392" y1="24" x2="404" y2="24" class="solid"></line>
|
||
|
|
<path d="M 412,16 A 8,8 0,0,1 404,24" class="nofill"></path>
|
||
|
|
<path d="M 384,32 A 16,16 0,0,0 384,48" class="nofill"></path>
|
||
|
|
<line x1="384" y1="48" x2="392" y2="48" class="solid"></line>
|
||
|
|
<path d="M 392,32 A 16,16 0,0,1 392,48" class="nofill"></path>
|
||
|
|
<line x1="344" y1="80" x2="352" y2="80" class="solid"></line>
|
||
|
|
<path d="M 344,80 A 16,16 0,0,0 344,96" class="nofill"></path>
|
||
|
|
<line x1="344" y1="96" x2="352" y2="96" class="solid"></line>
|
||
|
|
<line x1="360" y1="88" x2="352" y2="96" class="solid"></line>
|
||
|
|
<line x1="360" y1="88" x2="376" y2="88" class="solid"></line>
|
||
|
|
<path d="M 382,84 A 8,8 0,0,1 376,88" class="nofill"></path>
|
||
|
|
</g>
|
||
|
|
</svg>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<ul class="special">
|
||
|
|
<li><a href="http://www.figlet.org/" target="_blank">FIGlet</a></li>
|
||
|
|
<li>2</li>
|
||
|
|
<li><a href="https://ivanceras.github.io/svgbob-editor/" target="_blank">Svgbob.rs</a></li>
|
||
|
|
<li>2</li>
|
||
|
|
<li><a href="https://en.wikipedia.org/wiki/HP-GL" target="_blank">HPGL</a></li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
<div class="box">
|
||
|
|
<h2>Cobbled paths</h2>
|
||
|
|
<p>
|
||
|
|
It makes a way from the blocky discontinuity of Ascii drawings,
|
||
|
|
to the smoothness of bezier curves,
|
||
|
|
to an anologic pen-plotter interpretation.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Like cobbled paths, none of those technologies are new, and we've been walking on them for years.
|
||
|
|
</p>
|
||
|
|
<p>
|
||
|
|
Like cobbled paths, it is a reminder of the permeability between the discrete and the continuous,
|
||
|
|
and how regular stones can form tortuous paths.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="box">
|
||
|
|
<h2>Handfull links</h2>
|
||
|
|
<ul class="classic">
|
||
|
|
<li><a href="http://www.jave.de/figlet/figfont.html">FIGfont Specification</a>, everything about FIGlet font file format</li>
|
||
|
|
<li><a href="https://ivanceras.github.io/content/Svgbob/Specification.html">Svgbob Specification</a>, character recognized by svgbob and how it operates</li>
|
||
|
|
<li><a href="">HPGL Specification</a></li>
|
||
|
|
<li><a href="https://www.asciiart.eu/">asciiart.eu</a>, an ascii art collection</li>
|
||
|
|
<li><a href="http://www.jave.de/">JavE</a>, an ascii drawing editor</li>
|
||
|
|
<li><a href="https://adelfaure.net/">adel faure</a>, an ascii artist</li>
|
||
|
|
</ul>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{% endblock %}
|
||
|
|
|