<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Interactive SVG Viewer</title>
  <style>
    body, html {
      margin: 0;
      padding: 0;
      overflow: hidden; /* Hide scrollbars */
      height: 100%;
      width: 100%;
    }

    #svg-container {
      width: 100%;
      height: 100%;
      background-color: #666666; /* Optional: background color */
      cursor: grab; /* Indicate draggable area */
    }
    .fancy-box{
      font-family: Roboto, Arial, "Arial Black",serif;
      font-size: 10pt;
      stroke: #AAAAAA;
    }
    font{
      font-family: Roboto, Arial, "Arial Black",serif;
      font-size: 10px;
      stroke: #AAAAAA;
      fill: #81d9d9;
      color: #70f8ba;
    }
    /* General SVG Background */
    svg {
      background: linear-gradient(135deg, #1b1b1b, #2e2e2e);
      border: 2px solid #444;
      border-radius: 10px;
    }

    /* Equipment Boxes */
    rect.equipment {
      fill: #333;
      stroke: #0f0;
      stroke-width: 2;
      filter: drop-shadow(0px 4px 6px rgba(0, 255, 0, 0.5));
      rx: 10; /* Rounded corners */
    }

    /* Nodes */
    circle.node {
      fill: #ff4444;
      stroke: #fff;
      stroke-width: 1;
      filter: drop-shadow(0px 4px 6px rgba(255, 68, 68, 0.5));
    }

    circle.nodealt {
      fill: #44aaff;
      stroke: #fff;
      stroke-width: 1;
      filter: drop-shadow(0px 4px 6px rgba(68, 170, 255, 0.5));
    }

    /* Node Labels */
    text.annotation {
      fill: #fff;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
    }

    text.annnotation_alt {
      fill: #aaaaff;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
    }

    /* Wire Paths */
    line.path {
      stroke: #555555;
      stroke-width: 1;
      stroke-linecap: round;
    }

    line.pathbackground {
      stroke: rgba(0, 255, 0, 0.2);
      stroke-width: 8;
      stroke-linecap: round;
    }

    /* Routed Paths */
    path.routed {
      stroke: #44ff44;
      stroke-width: 4;
      stroke-linecap: round;
      filter: drop-shadow(0px 4px 6px rgba(68, 255, 68, 0.5));
    }

    path.routedback {
      stroke: rgba(68, 255, 68, 0.2);
      stroke-width: 8;
      stroke-linecap: round;
    }

    /* Hover Effects */
    circle.node:hover, circle.nodealt:hover {
      stroke: #ff0;
      stroke-width: 2;
      cursor: pointer;
    }

    .pin-text{
      fill: #aaaaff;
      font-family: 'Roboto', sans-serif;
      font-size: 12px;
    }

    .pin-text{
      stroke-width: 0.5;
      stroke: #44aaff;
      fill: #88CCFF;
      font-family: 'Roboto', sans-serif;
      font-size: 10px;
    }

    rect.equipment:hover {
      stroke: #44ff44;
      stroke-width: 3;
      cursor: pointer;
      transform: scale(1.05);
      transition: transform 0.2s ease;
    }

    line.path:hover, path.routed:hover {
      stroke: #ffff44;
      stroke-width: 6;
      cursor: pointer;
    }

    #svg-container:active {
      cursor: grabbing;
    }
  </style>
  <link rel="stylesheet" href="css/svgtest.css">

</head>
<body>
<div id="svg-container">
  <svg id="my-svg" xmlns="http://www.w3.org/2000/svg" width="2000" height="2000">
    <!-- BACKGROUND - SVG DRAWS IN ORDER -->
    <defs>
      <pattern id="smallGrid" width="10" height="10" patternUnits="userSpaceOnUse">
        <path d="M 10 0 L 0 0 0 10" fill="none" stroke="#666666" stroke-width="0.5"/>
      </pattern>
      <pattern id="grid" width="100" height="100" patternUnits="userSpaceOnUse">
        <rect width="100" height="100" fill="url(#smallGrid)"/>
        <path d="M 100 0 L 0 0 0 100" fill="none" stroke="#333333" stroke-width="1"/>
      </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)"/>

    <!--THE FUN STARTS HERE-->
    <svg xmlns="http://www.w3.org/2000/svg" width="2000" height="1600">

      <svg xmlns="http://www.w3.org/2000/svg" width="1200" height="800" style="background-color:#000022;">
        <rect x="99" y="120" width="100" height="320" rx="10" ry="10" fill="#111133" stroke="#FFFFFF" stroke-width="2.5" />
        <circle cx="200" cy="130" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="135" font-size="12" fill="#AACCFF" text-anchor="end">IO3</text>
        <circle cx="200" cy="150" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="155" font-size="12" fill="#AACCFF" text-anchor="end">VSS</text>
        <circle cx="200" cy="170" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="175" font-size="12" fill="#AACCFF" text-anchor="end">TDI</text>
        <circle cx="200" cy="190" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="195" font-size="12" fill="#AACCFF" text-anchor="end">VCCINT</text>
        <circle cx="200" cy="210" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="215" font-size="12" fill="#AACCFF" text-anchor="end">VCC3V3</text>
        <circle cx="200" cy="230" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="235" font-size="12" fill="#AACCFF" text-anchor="end">VSSA</text>
        <circle cx="200" cy="250" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="255" font-size="12" fill="#AACCFF" text-anchor="end">VSS</text>
        <circle cx="200" cy="270" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="275" font-size="12" fill="#AACCFF" text-anchor="end">TDO</text>
        <circle cx="200" cy="290" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="295" font-size="12" fill="#AACCFF" text-anchor="end">PROGRAM_B</text>
        <circle cx="200" cy="310" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="315" font-size="12" fill="#AACCFF" text-anchor="end">IO1</text>
        <circle cx="200" cy="330" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="335" font-size="12" fill="#AACCFF" text-anchor="end">IO4</text>
        <circle cx="200" cy="350" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="355" font-size="12" fill="#AACCFF" text-anchor="end">TDP_0</text>
        <circle cx="200" cy="370" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="375" font-size="12" fill="#AACCFF" text-anchor="end">TDN_0</text>
        <circle cx="200" cy="390" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="395" font-size="12" fill="#AACCFF" text-anchor="end">TMS</text>
        <circle cx="200" cy="410" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="415" font-size="12" fill="#AACCFF" text-anchor="end">TCK</text>
        <circle cx="200" cy="430" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="188" y="435" font-size="12" fill="#AACCFF" text-anchor="end">IO2</text>
        <rect x="350" y="100" width="100" height="160" rx="10" ry="10" fill="#111133" stroke="#FFFFFF" stroke-width="2.5" />
        <circle cx="350" cy="120" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="125" font-size="12" fill="#AACCFF" text-anchor="start">TDN_0</text>
        <circle cx="350" cy="140" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="145" font-size="12" fill="#AACCFF" text-anchor="start">TDI</text>
        <circle cx="350" cy="160" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="165" font-size="12" fill="#AACCFF" text-anchor="start">TMS</text>
        <circle cx="350" cy="180" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="185" font-size="12" fill="#AACCFF" text-anchor="start">TDO</text>
        <circle cx="350" cy="200" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="205" font-size="12" fill="#AACCFF" text-anchor="start">PROGRAM_B</text>
        <circle cx="350" cy="220" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="225" font-size="12" fill="#AACCFF" text-anchor="start">TCK</text>
        <circle cx="350" cy="240" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="245" font-size="12" fill="#AACCFF" text-anchor="start">TDP_0</text>
        <rect x="350" y="300" width="100" height="160" rx="10" ry="10" fill="#111133" stroke="#FFFFFF" stroke-width="2.5" />
        <circle cx="350" cy="340" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="345" font-size="12" fill="#AACCFF" text-anchor="start">IO2</text>
        <circle cx="350" cy="360" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="365" font-size="12" fill="#AACCFF" text-anchor="start">IO1</text>
        <circle cx="350" cy="380" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="385" font-size="12" fill="#AACCFF" text-anchor="start">IO4</text>
        <circle cx="350" cy="400" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="362" y="405" font-size="12" fill="#AACCFF" text-anchor="start">IO3</text>
        <rect x="550" y="100" width="100" height="160" rx="10" ry="10" fill="#111133" stroke="#FFFFFF" stroke-width="2.5" />
        <circle cx="550" cy="120" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="562" y="125" font-size="12" fill="#AACCFF" text-anchor="start">VCC</text>
        <circle cx="550" cy="140" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="562" y="145" font-size="12" fill="#AACCFF" text-anchor="start">VSS</text>
        <circle cx="550" cy="160" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="562" y="165" font-size="12" fill="#AACCFF" text-anchor="start">VCC</text>
        <circle cx="550" cy="180" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="562" y="185" font-size="12" fill="#AACCFF" text-anchor="start">VSS</text>
        <circle cx="550" cy="200" r="6" fill="#DC143C" stroke="#FFAAFF" stroke-width="1.5" />
        <text class="pin-text" x="562" y="205" font-size="12" fill="#AACCFF" text-anchor="start">VCC</text>
      </svg>



      <line class="connects" stroke-linecap="round" x1='200' y1='130' x2='350' y2='400' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='150' x2='550' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='170' x2='350' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='190' x2='550' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='210' x2='550' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='230' x2='550' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='270' x2='350' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='290' x2='350' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='310' x2='350' y2='360' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='330' x2='350' y2='380' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='350' x2='350' y2='240' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='370' x2='350' y2='120' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='390' x2='350' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='410' x2='350' y2='220' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='430' x2='350' y2='340' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='120' x2='200' y2='370' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='140' x2='200' y2='270' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='160' x2='200' y2='390' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='180' x2='200' y2='170' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='200' x2='200' y2='290' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='220' x2='200' y2='410' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='240' x2='200' y2='350' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='340' x2='200' y2='430' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='360' x2='200' y2='310' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='380' x2='200' y2='330' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='400' x2='200' y2='130' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='140' x2='200' y2='250' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='160' x2='200' y2='190' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='180' x2='200' y2='230' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='200' x2='200' y2='210' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='130' x2='350' y2='400' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='150' x2='550' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='170' x2='350' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='190' x2='550' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='210' x2='550' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='230' x2='550' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='270' x2='350' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='290' x2='350' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='310' x2='350' y2='360' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='330' x2='350' y2='380' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='350' x2='350' y2='240' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='370' x2='350' y2='120' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='390' x2='350' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='410' x2='350' y2='220' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='430' x2='350' y2='340' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='120' x2='200' y2='370' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='140' x2='200' y2='270' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='160' x2='200' y2='390' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='180' x2='200' y2='170' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='200' x2='200' y2='290' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='220' x2='200' y2='410' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='240' x2='200' y2='350' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='340' x2='200' y2='430' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='360' x2='200' y2='310' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='380' x2='200' y2='330' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='400' x2='200' y2='130' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='140' x2='200' y2='250' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='160' x2='200' y2='190' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='180' x2='200' y2='230' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='200' x2='200' y2='210' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='130' x2='350' y2='400' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='150' x2='550' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='170' x2='350' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='190' x2='550' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='210' x2='550' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='230' x2='550' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='270' x2='350' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='290' x2='350' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='310' x2='350' y2='360' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='330' x2='350' y2='380' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='350' x2='350' y2='240' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='370' x2='350' y2='120' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='390' x2='350' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='410' x2='350' y2='220' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='430' x2='350' y2='340' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='120' x2='200' y2='370' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='140' x2='200' y2='270' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='160' x2='200' y2='390' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='180' x2='200' y2='170' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='200' x2='200' y2='290' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='220' x2='200' y2='410' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='240' x2='200' y2='350' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='340' x2='200' y2='430' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='360' x2='200' y2='310' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='380' x2='200' y2='330' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='400' x2='200' y2='130' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='140' x2='200' y2='250' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='160' x2='200' y2='190' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='180' x2='200' y2='230' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='200' x2='200' y2='210' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='130' x2='350' y2='400' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='150' x2='550' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='170' x2='350' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='190' x2='550' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='210' x2='550' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='230' x2='550' y2='180' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='270' x2='350' y2='140' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='290' x2='350' y2='200' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='310' x2='350' y2='360' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='330' x2='350' y2='380' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='350' x2='350' y2='240' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='370' x2='350' y2='120' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='390' x2='350' y2='160' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='410' x2='350' y2='220' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='200' y1='430' x2='350' y2='340' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='120' x2='200' y2='370' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='140' x2='200' y2='270' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='160' x2='200' y2='390' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='180' x2='200' y2='170' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='200' x2='200' y2='290' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='220' x2='200' y2='410' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='240' x2='200' y2='350' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='340' x2='200' y2='430' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='360' x2='200' y2='310' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='380' x2='200' y2='330' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='350' y1='400' x2='200' y2='130' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='140' x2='200' y2='250' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='160' x2='200' y2='190' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='180' x2='200' y2='230' stroke='#AAFFDA88' stroke-dasharray='2,6' />
      <line class="connects" stroke-linecap="round" x1='550' y1='200' x2='200' y2='210' stroke='#AAFFDA88' stroke-dasharray='2,6' />


    </svg>

        </svg>
    </svg>
  </svg>
</div>

<script>
  (function () {
    const container = document.getElementById('svg-container');
    const svg = document.getElementById('my-svg');
    const viewBox = {x: 0, y: 0, width: svg.getAttribute('width'), height: svg.getAttribute('height')};
    let isPanning = false;
    let start = {x: 0, y: 0};
    let viewBoxStart = {x: 0, y: 0};

    // RESIZE VIEWBOX
    function updateViewBox() {
      svg.setAttribute('viewBox', `${viewBox.x} ${viewBox.y} ${viewBox.width} ${viewBox.height}`);
    }

    // MAKE VIEWBOX
    updateViewBox();

    // HANDLE THE ZOOM EVENTS
    container.addEventListener('wheel', function (event) {
      event.preventDefault();

      const scaleFactor = 1.1;
      const mouseX = event.offsetX;
      const mouseY = event.offsetY;

      const svgRect = container.getBoundingClientRect();
      const svgWidth = parseFloat(svg.getAttribute('width'));
      const svgHeight = parseFloat(svg.getAttribute('height'));

      // LOCATE ZOOM
      const svgViewBox = svg.getAttribute('viewBox').split(' ').map(Number);
      const svgX = (mouseX / svgRect.width) * svgViewBox[2] + svgViewBox[0];
      const svgY = (mouseY / svgRect.height) * svgViewBox[3] + svgViewBox[1];

      if (event.deltaY < 0) {
        // ZOOM IN
        viewBox.width /= scaleFactor;
        viewBox.height /= scaleFactor;
      } else {
        // ZOOM OUT
        viewBox.width *= scaleFactor;
        viewBox.height *= scaleFactor;
      }

      // ZOOM NEAR MOUSE
      viewBox.x = svgX - (mouseX / svgRect.width) * viewBox.width;
      viewBox.y = svgY - (mouseY / svgRect.height) * viewBox.height;

      updateViewBox();
    });

    // PAN
    container.addEventListener('mousedown', function (event) {
      if (event.button !== 2) return;
      event.preventDefault();
      isPanning = true;
      start.x = event.clientX;
      start.y = event.clientY;
      viewBoxStart.x = viewBox.x;
      viewBoxStart.y = viewBox.y;
    });

    container.addEventListener('mousemove', function (event) {
      if (!isPanning) return;
      event.preventDefault();

      const dx = event.clientX - start.x;
      const dy = event.clientY - start.y;

      const svgRect = container.getBoundingClientRect();


      const deltaX = (dx / svgRect.width) * viewBox.width;
      const deltaY = (dy / svgRect.height) * viewBox.height;

      viewBox.x = viewBoxStart.x - deltaX;
      viewBox.y = viewBoxStart.y - deltaY;

      updateViewBox();
    });

    container.addEventListener('mouseup', function (event) {
      if (event.button !== 2) return;
      isPanning = false;
    });

    container.addEventListener('mouseleave', function (event) {
      isPanning = false;
    });


    container.addEventListener('contextmenu', function (event) {
      event.preventDefault();
    });
  })();
</script>
</body>
</html>
