assets/timeline-map.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 460" role="img" aria-label="Hackathon timeline as a hand-drawn map">
  <defs>
    <pattern id="paper-map" x="0" y="0" width="200" height="200" patternUnits="userSpaceOnUse">
      <rect width="200" height="200" fill="#f0e3c2"/>
      <circle cx="20" cy="40" r="0.8" fill="#b8a574" opacity="0.6"/>
      <circle cx="160" cy="20" r="0.6" fill="#c9b88a" opacity="0.5"/>
      <circle cx="80" cy="120" r="1" fill="#a89464" opacity="0.5"/>
      <circle cx="180" cy="170" r="0.7" fill="#b8a574" opacity="0.6"/>
      <circle cx="50" cy="180" r="0.5" fill="#a89464" opacity="0.5"/>
      <circle cx="120" cy="80" r="0.6" fill="#b8a574" opacity="0.4"/>
      <circle cx="30" cy="100" r="0.5" fill="#c9b88a" opacity="0.4"/>
      <circle cx="140" cy="140" r="0.8" fill="#a89464" opacity="0.5"/>
      <!-- aged spots -->
      <circle cx="60" cy="60" r="3" fill="#a89464" opacity="0.08"/>
      <circle cx="170" cy="100" r="4" fill="#a89464" opacity="0.06"/>
    </pattern>
    <pattern id="water" x="0" y="0" width="20" height="10" patternUnits="userSpaceOnUse">
      <path d="M0,5 q5,-3 10,0 q5,3 10,0" stroke="#4a6f7c" stroke-width="0.6" fill="none" opacity="0.5"/>
    </pattern>
  </defs>

  <!-- aged paper background -->
  <rect width="1200" height="460" fill="url(#paper-map)"/>

  <!-- darker edges (aged map effect) -->
  <rect x="0" y="0" width="1200" height="460" fill="url(#paper-map)"/>
  <rect x="0" y="0" width="1200" height="20" fill="#a89464" opacity="0.15"/>
  <rect x="0" y="440" width="1200" height="20" fill="#a89464" opacity="0.15"/>
  <rect x="0" y="0" width="20" height="460" fill="#a89464" opacity="0.15"/>
  <rect x="1180" y="0" width="20" height="460" fill="#a89464" opacity="0.15"/>

  <!-- decorative border -->
  <rect x="20" y="20" width="1160" height="420" fill="none" stroke="#6b4423" stroke-width="2"/>
  <rect x="28" y="28" width="1144" height="404" fill="none" stroke="#6b4423" stroke-width="0.8"/>

  <!-- corner ornaments -->
  <g fill="#6b4423">
    <g transform="translate(20,20)">
      <path d="M0,0 L20,0 L18,2 L2,2 L2,18 L0,20 Z"/>
      <circle cx="6" cy="6" r="1.5"/>
    </g>
    <g transform="translate(1180,20) scale(-1,1)">
      <path d="M0,0 L20,0 L18,2 L2,2 L2,18 L0,20 Z"/>
      <circle cx="6" cy="6" r="1.5"/>
    </g>
    <g transform="translate(20,440) scale(1,-1)">
      <path d="M0,0 L20,0 L18,2 L2,2 L2,18 L0,20 Z"/>
      <circle cx="6" cy="6" r="1.5"/>
    </g>
    <g transform="translate(1180,440) scale(-1,-1)">
      <path d="M0,0 L20,0 L18,2 L2,2 L2,18 L0,20 Z"/>
      <circle cx="6" cy="6" r="1.5"/>
    </g>
  </g>

  <!-- title cartouche -->
  <g transform="translate(600,55)" text-anchor="middle">
    <rect x="-180" y="-22" width="360" height="36" fill="#f0e3c2" stroke="#6b4423" stroke-width="1.5"/>
    <rect x="-185" y="-18" width="10" height="28" fill="#6b4423"/>
    <rect x="175" y="-18" width="10" height="28" fill="#6b4423"/>
    <text y="3" font-family="Georgia, serif" font-size="16" font-style="italic" fill="#6b4423" letter-spacing="3">A Map of the Two Weeks</text>
  </g>

  <!-- compass rose top-right -->
  <g transform="translate(1080,110)">
    <circle r="32" fill="none" stroke="#6b4423" stroke-width="1"/>
    <circle r="26" fill="none" stroke="#6b4423" stroke-width="0.5"/>
    <g stroke="#6b4423" stroke-width="1.4" fill="#6b4423">
      <path d="M0,-26 L4,0 L0,26 L-4,0 Z" fill="#f0e3c2"/>
      <path d="M-26,0 L0,4 L26,0 L0,-4 Z" fill="#f0e3c2"/>
      <path d="M0,-26 L-4,0 L0,0 Z"/>
      <path d="M26,0 L0,4 L0,0 Z"/>
    </g>
    <text x="0" y="-36" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#6b4423" font-weight="700">N</text>
    <text x="0" y="46" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#6b4423">S</text>
    <text x="-40" y="3" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#6b4423">W</text>
    <text x="40" y="3" text-anchor="middle" font-family="Georgia, serif" font-size="10" fill="#6b4423">E</text>
  </g>

  <!-- the path winding through the map -->
  <path d="M120,300 C200,260 240,340 320,300 C400,260 460,340 540,300 C620,260 680,340 780,300 C860,270 920,340 1000,300"
        fill="none" stroke="#6b4423" stroke-width="3" stroke-linecap="round" stroke-dasharray="0"/>
  <path d="M120,300 C200,260 240,340 320,300 C400,260 460,340 540,300 C620,260 680,340 780,300 C860,270 920,340 1000,300"
        fill="none" stroke="#f0e3c2" stroke-width="1.5" stroke-linecap="round" stroke-dasharray="6 8"/>

  <!-- terrain decorations along the path -->
  <!-- small hill near start -->
  <g transform="translate(75,310)" fill="#6b4423" opacity="0.5">
    <path d="M0,0 q15,-22 30,0 z" fill="none" stroke="#6b4423" stroke-width="1.2"/>
    <path d="M5,-6 l3,-3 l3,3 M20,-8 l3,-3 l3,3" stroke="#6b4423" stroke-width="0.8" fill="none"/>
  </g>

  <!-- small forest cluster -->
  <g transform="translate(220,355)">
    <g fill="#4a6f2c" stroke="#2c4a2e" stroke-width="0.8">
      <path d="M0,0 L5,-14 L10,0 Z"/>
      <path d="M12,2 L18,-14 L24,2 Z"/>
      <path d="M5,5 L11,-8 L17,5 Z"/>
    </g>
  </g>

  <!-- mountain mid-map -->
  <g transform="translate(450,250)">
    <path d="M0,40 L20,-15 L35,5 L50,-25 L70,40 Z" fill="#6b4423" stroke="#6b4423" stroke-width="1.2" stroke-linejoin="round"/>
    <path d="M16,-8 L20,-15 L24,-8 Z" fill="#f0e3c2"/>
    <path d="M46,-18 L50,-25 L54,-18 Z" fill="#f0e3c2"/>
  </g>

  <!-- river - flows down into the path area but stops cleanly above the route -->
  <path d="M380,80 q-10,40 0,80 q10,40 0,80" stroke="#4a6f7c" stroke-width="3" fill="none" opacity="0.6"/>
  <path d="M380,80 q-10,40 0,80 q10,40 0,80" stroke="url(#water)" stroke-width="8" fill="none" opacity="0.5"/>
  <text x="395" y="225" font-family="Georgia, serif" font-size="10" font-style="italic" fill="#4a6f7c" opacity="0.7">~ The Slow River ~</text>

  <!-- another forest cluster -->
  <g transform="translate(700,355)">
    <g fill="#4a6f2c" stroke="#2c4a2e" stroke-width="0.8">
      <path d="M0,0 L5,-14 L10,0 Z"/>
      <path d="M12,2 L18,-14 L24,2 Z"/>
      <path d="M5,5 L11,-8 L17,5 Z"/>
      <path d="M22,4 L28,-12 L34,4 Z"/>
    </g>
  </g>

  <!-- waves in water (top) -->
  <g transform="translate(40,140)" stroke="#4a6f7c" stroke-width="0.7" fill="none" opacity="0.55">
    <path d="M0,0 q5,-3 10,0 q5,3 10,0"/>
    <path d="M30,5 q5,-3 10,0 q5,3 10,0"/>
    <path d="M55,8 q5,-3 10,0 q5,3 10,0"/>
  </g>
  <text x="65" y="160" font-family="Georgia, serif" font-size="11" font-style="italic" fill="#4a6f7c" opacity="0.7">~ Sea of TBD ~</text>

  <!-- LANDMARK 1: Registration -->
  <g transform="translate(120,300)">
    <!-- gateway/arch -->
    <g transform="translate(0,-14)">
      <path d="M-10,14 L-10,-4 q0,-10 10,-10 q10,0 10,10 L10,14" fill="#f0e3c2" stroke="#6b4423" stroke-width="1.8"/>
      <line x1="-12" y1="14" x2="12" y2="14" stroke="#6b4423" stroke-width="2"/>
      <circle cx="0" cy="0" r="2" fill="#6b4423"/>
    </g>
    <!-- label -->
    <g transform="translate(0,-40)"><circle r="9" fill="#f0e3c2" stroke="#6b4423" stroke-width="1.4"/><text y="3" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-weight="700" fill="#6b4423">I</text></g>
    <text x="0" y="35" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="700" fill="#2c4a2e">The Gates</text>
    <text x="0" y="50" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-style="italic" fill="#6b4423">Registration opens</text>
  </g>

  <!-- LANDMARK 2: Hack window begins -->
  <g transform="translate(320,300)">
    <!-- workshop / tent -->
    <g transform="translate(0,-14)">
      <path d="M-14,14 L0,-12 L14,14 Z" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.6" stroke-linejoin="round"/>
      <line x1="0" y1="-12" x2="0" y2="14" stroke="#2c4a2e" stroke-width="1.2"/>
      <path d="M-6,14 L0,4 L6,14 Z" fill="#f0e3c2" stroke="#2c4a2e" stroke-width="1.2"/>
    </g>
    <g transform="translate(0,-40)"><circle r="9" fill="#f0e3c2" stroke="#6b4423" stroke-width="1.4"/><text y="3" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-weight="700" fill="#6b4423">II</text></g>
    <text x="0" y="35" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="700" fill="#2c4a2e">Camp One</text>
    <text x="0" y="50" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-style="italic" fill="#6b4423">Hack window begins</text>
  </g>

  <!-- LANDMARK 3: AMA -->
  <g transform="translate(540,300)">
    <!-- bonfire -->
    <g transform="translate(0,-12)">
      <path d="M0,-14 q-6,4 -2,8 q-4,0 -2,6 q2,-2 4,0 q-2,-4 4,-6 q-2,-4 -4,-8 z" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.4"/>
      <path d="M0,-8 q-3,2 -1,5 q2,-2 4,0 q-1,-3 -3,-5 z" fill="#d4a017" stroke="#2c4a2e" stroke-width="0.8"/>
      <!-- logs -->
      <line x1="-12" y1="6" x2="12" y2="6" stroke="#6b4423" stroke-width="3" stroke-linecap="round"/>
      <line x1="-10" y1="10" x2="10" y2="10" stroke="#6b4423" stroke-width="3" stroke-linecap="round"/>
    </g>
    <g transform="translate(0,-40)"><circle r="9" fill="#f0e3c2" stroke="#6b4423" stroke-width="1.4"/><text y="3" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-weight="700" fill="#6b4423">III</text></g>
    <text x="0" y="35" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="700" fill="#2c4a2e">The Bonfire</text>
    <text x="0" y="50" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-style="italic" fill="#6b4423">Live AMA &amp; office hours</text>
  </g>

  <!-- LANDMARK 4: Submissions -->
  <g transform="translate(780,300)">
    <!-- mailbox / chest -->
    <g transform="translate(0,-12)">
      <rect x="-12" y="-2" width="24" height="14" fill="#6b4423" stroke="#2c4a2e" stroke-width="1.6"/>
      <path d="M-12,-2 q12,-10 24,0" fill="#b84a3e" stroke="#2c4a2e" stroke-width="1.6"/>
      <circle cx="0" cy="6" r="1.5" fill="#d4a017" stroke="#2c4a2e" stroke-width="0.8"/>
      <line x1="-12" y1="2" x2="12" y2="2" stroke="#2c4a2e" stroke-width="0.6"/>
    </g>
    <g transform="translate(0,-40)"><circle r="9" fill="#f0e3c2" stroke="#6b4423" stroke-width="1.4"/><text y="3" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-weight="700" fill="#6b4423">IV</text></g>
    <text x="0" y="35" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="700" fill="#2c4a2e">The Drop-Box</text>
    <text x="0" y="50" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-style="italic" fill="#6b4423">Submissions close</text>
  </g>

  <!-- LANDMARK 5: Winners -->
  <g transform="translate(1000,300)">
    <!-- trophy / cup with star -->
    <g transform="translate(0,-14)">
      <path d="M-10,-10 L-10,0 q0,8 10,8 q10,0 10,-8 L10,-10 Z" fill="#d4a017" stroke="#2c4a2e" stroke-width="1.6"/>
      <path d="M-10,-6 q-4,0 -4,4 q0,4 4,4 M10,-6 q4,0 4,4 q0,4 -4,4" fill="none" stroke="#2c4a2e" stroke-width="1.4"/>
      <rect x="-6" y="8" width="12" height="3" fill="#6b4423" stroke="#2c4a2e" stroke-width="1"/>
      <rect x="-10" y="11" width="20" height="3" fill="#6b4423" stroke="#2c4a2e" stroke-width="1"/>
      <!-- star on cup -->
      <path d="M0,-2 l1.5,4 l4,0 l-3,2.5 l1,4 l-3.5,-2.5 l-3.5,2.5 l1,-4 l-3,-2.5 l4,0 z" fill="#b84a3e" stroke="#2c4a2e" stroke-width="0.8"/>
    </g>
    <g transform="translate(0,-40)"><circle r="9" fill="#f0e3c2" stroke="#6b4423" stroke-width="1.4"/><text y="3" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-weight="700" fill="#6b4423">V</text></g>
    <text x="0" y="35" text-anchor="middle" font-family="Georgia, serif" font-size="13" font-weight="700" fill="#2c4a2e">Winners' Hill</text>
    <text x="0" y="50" text-anchor="middle" font-family="Georgia, serif" font-size="10" font-style="italic" fill="#6b4423">Champions announced</text>
  </g>

  <!-- legend bottom-left -->
  <g transform="translate(60,400)" font-family="Georgia, serif" font-size="10" fill="#6b4423">
    <line x1="0" y1="0" x2="20" y2="0" stroke="#6b4423" stroke-width="2.5"/>
    <line x1="0" y1="0" x2="20" y2="0" stroke="#f0e3c2" stroke-width="1" stroke-dasharray="3 3"/>
    <text x="26" y="3" font-style="italic">the path of the hacker</text>
  </g>

  <!-- distance markers -->
  <g font-family="Georgia, serif" font-size="9" fill="#6b4423" opacity="0.7" text-anchor="middle">
    <text x="220" y="295">~ week 1 ~</text>
    <text x="660" y="295">~ week 2 ~</text>
    <text x="900" y="295">~ judging ~</text>
  </g>
</svg>