{% 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 %}