Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <!-- SEE DETAILS VIEW -->
<!-- codepen.io/tellaho/details/PPRjbj/  -->

<h1 class="title"><a href="http://hallowbaloo.com/2015/event-map" target="_blank">Hallowbaloo</a> Map</h1>
<svg id="map-w-legend" viewBox="0 0 305 338">
  <defs>
    <path id="bolt" d="M10.275,7.6156 L7.466,10.6726 L4.445,13.5366 L1.55,16.7156 L2.498,13.0916 L3.454,9.6926 L0.308,9.7976 L3.19,6.7416 L6.255,3.9026 L9.305,0.9626 L7.243,7.4636 L10.275,7.6156 Z"></path>
    <path id="trolley-stop" d="M2.56628571,0 L0,2.53028571 L0,6.11614286 L2.56628571,9 L6.15214286,9 L9,6.11614286 L9,2.53028571 L6.15214286,0 L2.56628571,0 Z"></path>
    <circle id="dot" r="1.5"></circle>
    <rect id="label-square" width="10" height="10"></rect>
    <path id="logo-hb-ball" d="M14.385,10.725 L12.377,8.547 L15.084,8.547 C14.823,8.939 14.402,9.723 14.385,10.725 L14.385,10.725 Z M13.563,13.379 L12.139,11.812 C12.072,11.655 11.638,10.538 12.083,8.716 L14.401,11.229 C14.189,11.454 13.586,12.196 13.563,13.379 L13.563,13.379 Z M11.766,13.883 C10.136,14.172 9.064,14.79 8.401,15.332 L8.401,14.442 L9.77,12.031 C9.978,11.938 10.933,11.564 11.899,12.039 L13.436,13.73 C13.084,13.731 12.481,13.757 11.766,13.883 L11.766,13.883 Z M4.705,13.883 C3.991,13.757 3.389,13.731 3.037,13.73 L4.576,12.039 C5.543,11.564 6.498,11.938 6.706,12.031 L8.071,14.443 L8.071,15.332 C6.984,14.442 5.66,14.053 4.705,13.883 L4.705,13.883 Z M2.07,11.23 L4.393,8.715 C4.838,10.539 4.404,11.656 4.336,11.812 L2.908,13.381 C2.886,12.197 2.283,11.455 2.07,11.23 L2.07,11.23 Z M1.387,8.547 L4.099,8.547 L2.086,10.727 C2.069,9.723 1.648,8.939 1.387,8.547 L1.387,8.547 Z M2.08,5.977 L4.104,8.217 L1.41,8.217 C1.972,7.45 2.077,6.536 2.08,5.977 L2.08,5.977 Z M2.862,3.332 L4.329,4.945 C4.391,5.152 4.722,6.384 4.385,8.035 L2.088,5.493 C2.644,4.749 2.813,3.865 2.862,3.332 L2.862,3.332 Z M6.888,2.288 C7.431,1.994 7.827,1.681 8.071,1.462 L8.071,2.322 C7.567,3.216 6.839,4.506 6.705,4.737 C5.685,5.277 4.734,4.813 4.58,4.729 L3.066,3.066 C4.765,3.208 6.072,2.732 6.888,2.288 L6.888,2.288 Z M9.583,2.288 C10.399,2.732 11.707,3.208 13.407,3.066 L11.896,4.729 C11.74,4.813 10.79,5.277 9.771,4.737 C9.637,4.506 8.906,3.216 8.401,2.322 L8.401,1.462 C8.645,1.681 9.04,1.994 9.583,2.288 L9.583,2.288 Z M14.383,5.494 L12.091,8.035 C11.754,6.384 12.084,5.152 12.146,4.945 L13.609,3.334 C13.659,3.867 13.827,4.75 14.383,5.494 L14.383,5.494 Z M9.812,9.515 C9.793,9.443 9.729,9.392 9.654,9.391 C9.494,9.389 8.828,9.39 8.401,9.556 L8.401,8.547 L11.784,8.547 C11.401,10.037 11.571,11.088 11.719,11.608 C10.959,11.352 10.259,11.504 9.877,11.634 C9.951,11.202 10.034,10.38 9.812,9.515 L9.812,9.515 Z M8.401,9.921 C8.584,9.791 9.122,9.729 9.522,9.721 C9.748,10.743 9.532,11.699 9.497,11.842 L8.401,13.774 L8.401,9.921 Z M6.978,11.842 C6.943,11.7 6.727,10.746 6.954,9.721 C7.352,9.728 7.888,9.791 8.071,9.922 L8.071,13.772 L6.978,11.842 Z M8.071,8.547 L8.071,9.556 C7.644,9.39 6.981,9.389 6.821,9.391 C6.747,9.392 6.682,9.443 6.664,9.515 C6.442,10.38 6.525,11.202 6.599,11.634 C6.217,11.504 5.517,11.352 4.757,11.608 C4.904,11.088 5.075,10.037 4.692,8.547 L8.071,8.547 Z M6.664,7.251 C6.683,7.322 6.748,7.372 6.821,7.373 C6.831,7.373 6.847,7.374 6.869,7.374 C7.057,7.374 7.663,7.36 8.071,7.201 L8.071,8.217 L4.684,8.217 C4.995,6.807 4.841,5.689 4.723,5.152 C4.953,5.236 5.287,5.325 5.677,5.325 C5.96,5.325 6.273,5.278 6.597,5.15 C6.524,5.595 6.443,6.425 6.664,7.251 L6.664,7.251 Z M6.82,4.696 C6.814,4.696 6.808,4.696 6.802,4.697 C6.797,4.698 6.793,4.699 6.789,4.7 C6.784,4.701 6.779,4.702 6.774,4.703 C6.79,4.698 6.806,4.695 6.823,4.695 C6.826,4.695 6.829,4.695 6.831,4.696 C6.828,4.695 6.824,4.696 6.82,4.696 L6.82,4.696 Z M6.858,4.699 C6.851,4.698 6.844,4.697 6.837,4.696 C6.846,4.697 6.855,4.698 6.864,4.7 C6.862,4.7 6.86,4.7 6.858,4.699 L6.858,4.699 Z M8.071,6.836 C7.856,6.979 7.328,7.036 6.953,7.043 C6.729,6.062 6.943,5.075 6.979,4.923 C6.98,4.92 6.982,4.918 6.983,4.916 C6.994,4.897 7.009,4.87 7.029,4.836 C7.068,4.768 7.123,4.67 7.19,4.553 C7.322,4.319 7.499,4.007 7.675,3.695 C7.814,3.448 7.953,3.202 8.071,2.994 L8.071,6.836 Z M9.493,4.916 C9.494,4.918 9.496,4.92 9.497,4.923 C9.533,5.075 9.748,6.06 9.523,7.043 C9.147,7.036 8.616,6.979 8.401,6.837 L8.401,2.993 C8.519,3.201 8.659,3.448 8.799,3.695 C8.975,4.007 9.152,4.319 9.285,4.553 C9.352,4.67 9.408,4.768 9.447,4.836 C9.466,4.87 9.482,4.897 9.493,4.916 L9.493,4.916 Z M9.612,4.7 L9.612,4.7 C9.618,4.699 9.624,4.698 9.63,4.697 C9.624,4.698 9.618,4.699 9.612,4.7 L9.612,4.7 Z M9.714,4.708 C9.72,4.71 9.725,4.712 9.73,4.715 C9.725,4.712 9.72,4.71 9.714,4.708 L9.714,4.708 Z M9.709,4.706 C9.707,4.705 9.705,4.704 9.703,4.704 C9.695,4.701 9.687,4.699 9.679,4.698 C9.678,4.698 9.676,4.697 9.675,4.697 C9.667,4.696 9.66,4.695 9.652,4.695 C9.65,4.695 9.648,4.696 9.647,4.696 L9.64,4.696 C9.637,4.696 9.634,4.696 9.631,4.697 C9.66,4.693 9.687,4.697 9.712,4.707 C9.711,4.706 9.71,4.706 9.709,4.706 L9.709,4.706 Z M8.401,7.201 C8.81,7.36 9.418,7.374 9.607,7.374 C9.628,7.374 9.645,7.373 9.654,7.373 C9.728,7.372 9.792,7.322 9.811,7.251 C10.032,6.425 9.952,5.595 9.879,5.15 C10.203,5.278 10.516,5.325 10.799,5.325 C11.189,5.325 11.523,5.236 11.752,5.152 C11.635,5.689 11.481,6.807 11.792,8.217 L8.401,8.217 L8.401,7.201 Z M9.609,4.701 L9.61,4.701 L9.61,4.701 L9.609,4.701 Z M6.746,4.715 C6.753,4.711 6.76,4.708 6.768,4.705 C6.764,4.707 6.762,4.708 6.758,4.71 C6.754,4.711 6.75,4.713 6.746,4.715 L6.746,4.715 Z M15.061,8.217 L12.371,8.217 L14.391,5.978 C14.394,6.538 14.5,7.45 15.061,8.217 L15.061,8.217 Z M16.306,8.217 L15.484,8.217 C14.652,7.281 14.707,5.942 14.738,5.594 L15.3,4.971 C15.361,4.903 15.355,4.799 15.288,4.738 C15.22,4.677 15.116,4.682 15.055,4.75 L14.609,5.244 C14.007,4.398 13.929,3.344 13.921,2.991 L14.521,2.33 C14.582,2.263 14.577,2.158 14.51,2.097 C14.442,2.036 14.338,2.041 14.277,2.108 L13.741,2.698 L13.734,2.698 C11.947,2.937 10.583,2.453 9.753,2.005 C8.997,1.597 8.534,1.143 8.401,1.003 L8.401,0.165 C8.401,0.074 8.327,0 8.236,0 C8.144,0 8.071,0.074 8.071,0.165 L8.071,1.003 C7.937,1.143 7.474,1.597 6.718,2.005 C5.888,2.453 4.524,2.937 2.737,2.698 L2.731,2.698 L2.194,2.108 C2.133,2.041 2.029,2.036 1.961,2.097 C1.894,2.158 1.889,2.263 1.95,2.33 L2.55,2.989 C2.542,3.342 2.465,4.397 1.862,5.243 L1.416,4.75 C1.355,4.682 1.251,4.677 1.183,4.738 C1.116,4.799 1.11,4.903 1.171,4.971 L1.733,5.593 C1.764,5.94 1.82,7.281 0.987,8.217 L0.165,8.217 C0.074,8.217 0,8.291 0,8.382 C0,8.473 0.074,8.547 0.165,8.547 L0.98,8.547 C1.167,8.791 1.861,9.796 1.742,11.099 L1.173,11.715 C1.111,11.782 1.115,11.887 1.182,11.949 C1.214,11.978 1.254,11.993 1.294,11.993 C1.338,11.993 1.383,11.975 1.415,11.939 L1.846,11.473 C2.06,11.705 2.68,12.494 2.565,13.759 L1.95,14.434 C1.889,14.501 1.894,14.606 1.961,14.667 C1.993,14.696 2.033,14.71 2.072,14.71 C2.117,14.71 2.162,14.692 2.194,14.656 L2.731,14.067 C2.801,14.063 3.616,14.025 4.656,14.21 C6.401,14.521 7.47,15.219 8.071,15.769 L8.071,16.6 C8.071,16.691 8.145,16.765 8.236,16.765 C8.327,16.765 8.401,16.691 8.401,16.6 L8.401,15.769 C9.463,14.796 10.84,14.384 11.815,14.21 C12.86,14.024 13.678,14.063 13.741,14.067 L14.277,14.656 C14.309,14.692 14.354,14.71 14.399,14.71 C14.438,14.71 14.478,14.696 14.51,14.667 C14.577,14.606 14.582,14.502 14.521,14.434 L13.906,13.758 C13.791,12.493 14.412,11.704 14.625,11.473 L15.056,11.939 C15.088,11.975 15.133,11.993 15.177,11.993 C15.217,11.993 15.257,11.978 15.289,11.949 C15.356,11.887 15.36,11.783 15.299,11.716 L14.729,11.098 C14.61,9.795 15.304,8.791 15.491,8.547 L16.306,8.547 C16.397,8.547 16.471,8.473 16.471,8.382 C16.471,8.291 16.397,8.217 16.306,8.217 L16.306,8.217 Z"></path>
  </defs>

  <g class="legend" transform="translate(0, 210)">
    <g data-legend-set="1">
      <g transform="translate(20, 0)">
        <g class="trolley" transform="translate(0, 0)">
          <use xlink:href="#trolley-stop" transform="translate(1,4)" />
          <text class="text-label" transform="translate(15,11)">TROLLEY STOP</text>
        </g>
        <g class="square" transform="translate(0, 15)">
          <use xlink:href="#label-square" transform="translate(0, 4)" />
          <text class="text-label" transform="translate(15,11)">STAGE</text>
        </g>
        <g class="bolt" transform="translate(0, 30)">
          <use xlink:href="#bolt" transform="translate(0,-.25)"/>
          <text class="text-label" transform="translate(15,11)">CLUB HALLOWBALOO VENUES</text>
        </g>
      </g>
      <g transform="translate(125, 0)">
        <g class="square blue" transform="translate(0, 0)">
          <use xlink:href="#label-square" transform="translate(0, 4)" />
          <text class="text-label" transform="translate(15,11)">CLUB HALLOWBALOO</text>
        </g>
        <g class="square orange" transform="translate(0, 15)">
          <use xlink:href="#label-square" transform="translate(0, 4)" />
          <text class="text-label" transform="translate(15,11)">STREET FESTIVAL</text>
        </g>
        <g class="square purple" transform="translate(0, 30)">
          <use xlink:href="#label-square" transform="translate(0, 4)" />
          <text class="text-label" transform="translate(15,11)">PEDESTRIAN MALL</text>
        </g>
      </g>
      <g transform="translate(220, 0)">
        <g class="trolley" transform="translate(0, 0)">
          <path class="trolley-path" d="M0.598022461,1.29748535 L8.49357674,1.29748535" transform="translate(0, 7.5)"></path>
          <text class="text-label" transform="translate(17,11)">TROLLEY ROUTE</text>
        </g>
        <g class="hb-ball" transform="translate(0, 15)">
          <text class="text-label" transform="translate(17,11)">HALLOWBALOO BALL</text>
          <use xlink:href="#logo-hb-ball" transform="translate(-3,0)">
        </g>
        <g class="chinatown-eats" transform="translate(0, 30)">
          <text class="text-label" transform="translate(17,11)">CHINATOWN EATS</text>
          <use xlink:href="#label-square" transform="translate(0, 4)" />
          <use xlink:href="#dot" transform="translate(5, 9)" />
        </g>
      </g>
    </g>
    <g data-legend-set="2" transform="translate(0, 58)">
      <g class="bolts" transform="translate(20, 0)">
        <g class="bolt" transform="translate(0, 0)">
          <use xlink:href="#bolt" transform="translate(.5,-.5)"/>
          <text transform="translate(4.5,10)">1</text>
          <text class="text-label" transform="translate(15,11)">DOWNBEAT LOUNGE</text>
        </g>
        <g class="bolt" transform="translate(0, 15)">
          <use xlink:href="#bolt" transform="translate(.5,-.25)"/>
          <text transform="translate(4.5,10)">2</text>
          <text class="text-label" transform="translate(15,11)">NEXTDOOR</text>
        </g>
        <g class="bolt" transform="translate(0, 30)">
          <use xlink:href="#bolt" transform="translate(0,-.25)"/>
          <text transform="translate(4,10)">3</text>
          <text class="text-label" transform="translate(15,11)">MANIFEST</text>
        </g>
        <g class="bolt" transform="translate(0, 45)">
          <use xlink:href="#bolt" transform="translate(0,-.25)"/>
          <text transform="translate(4,10)">4</text>
          <text class="text-label" transform="translate(15,11)">BAR35</text>
        </g>
        <g class="bolt" transform="translate(80, 0)">
          <use xlink:href="#bolt" transform="translate(.5,-.75)"/>
          <text transform="translate(4,10)">5</text>
          <text class="text-label" transform="translate(15,11)">FRESH CAFE</text>
        </g>
        <g class="bolt" transform="translate(80, 15)">
          <use xlink:href="#bolt" transform="translate(.5,0)"/>
          <text transform="translate(4.5,10)">6</text>
          <text class="text-label" transform="translate(15,11)">ARTS AT MARKS GARAGE</text>
        </g>
        <g class="bolt" transform="translate(80, 30)">
          <use xlink:href="#bolt" transform="translate(.5,0)"/>
          <text transform="translate(4.5,11)">7</text>
          <text class="text-label" transform="translate(15,11)">SCARLET HONOLULU</text>
        </g>
        <g class="bolt" transform="translate(80, 45)">
          <use xlink:href="#bolt" transform="translate(-.25,-.5)"/>
          <text transform="translate(3.4,10)">8</text>
          <text class="text-label" transform="translate(15,11)">SQUARE BARRELS</text>
        </g>
      </g>
      <g class="squares">
        <g transform="translate(195, 4)">
          <g class="square" transform="translate(0,0)">
            <use xlink:href="#label-square" />
            <text transform="translate(3.5,6.5)">1</text>
            <text class="text-label" transform="translate(15,7)">THE DANCE CAULDRON STAGE</text>
          </g>
          <g class="square" transform="translate(0,15)">
            <use xlink:href="#label-square" />
            <text transform="translate(3.5,6.5)">2</text>
            <text class="text-label" transform="translate(15,7)">THE GRANDEST SPECTACLE STAGE</text>
          </g>
          <g class="square" transform="translate(0,30)">
            <use xlink:href="#label-square" />
            <text transform="translate(3.5,6.5)">3</text>
            <text class="text-label" transform="translate(15,7)">COSTUME CONTEST STAGE</text>
          </g>
          <g class="square" transform="translate(0,45)">
            <use xlink:href="#label-square" />
            <text transform="translate(3.5,6.5)">4</text>
            <text class="text-label" transform="translate(15,7)">AQUA HOTELS & RESORTS STAGE</text>
          </g>
        </g>
      </g>
    </g>
  </g>


  <g class="map" transform="translate(0, 0)">
    <g class="fills" transform="translate(21, 14)">
      <path d="M194.9096,0.3885 L255.9846,2.2755 L254.0496,4.9835 L253.5126,29.2295 L253.1616,57.4315 L252.1636,159.0225 L253.1236,161.5235 L247.6276,163.0695 L248.7716,71.1315 L247.8886,69.2285 L245.5716,68.8085 L199.8836,84.5205 L200.1626,77.8735 L194.9096,0.3885 Z" class="fill-street-fest"></path>
      <path d="M98.5903,42.7617 L96.8383,73.7757 L76.2003,72.7157 L72.5393,110.6587 L41.4513,110.4947 L39.6223,136.9637 L37.2043,159.2517 L0.6673,154.3457 L4.7923,67.5737 L42.9653,71.4107 L46.5473,71.4887 L48.7303,41.2037 L79.0703,41.1767 L98.5903,42.7617 Z" class="fill-club-hb"></path>
    </g>
    <g class="dots" transform="translate(8, 24)">
      <use xlink:href="#dot" transform="translate(37.571327, 142.938880)" />
      <use xlink:href="#dot" transform="translate(17.497409, 120.644536)" />
      <use xlink:href="#dot" transform="translate(82.160017, 102.791044)" />
      <use xlink:href="#dot" transform="translate(62.086099, 80.496699)" />
      <use xlink:href="#dot" transform="translate(99.243340, 47.040169)" />
      <use xlink:href="#dot" transform="translate(30.880021, 135.507432)" />
      <use xlink:href="#dot" transform="translate(10.806103, 113.213087)" />
      <use xlink:href="#dot" transform="translate(75.468711, 95.359596)" />
      <use xlink:href="#dot" transform="translate(55.394792, 73.065251)" />
      <use xlink:href="#dot" transform="translate(92.552034, 39.608721)" />
      <use xlink:href="#dot" transform="translate(24.188715, 128.075984)" />
      <use xlink:href="#dot" transform="translate(4.114797, 105.781639)" />
      <use xlink:href="#dot" transform="translate(68.777405, 87.928148)" />
      <use xlink:href="#dot" transform="translate(48.703486, 65.633803)" />
      <use xlink:href="#dot" transform="translate(105.934646, 54.471617)" />
      <use xlink:href="#dot" transform="translate(85.860728, 32.177272)" />
      <use xlink:href="#dot" transform="translate(45.002775, 136.247574)" />
      <use xlink:href="#dot" transform="translate(24.928857, 113.953230)" />
      <use xlink:href="#dot" transform="translate(69.517547, 73.805393)" />
      <use xlink:href="#dot" transform="translate(106.674788, 40.348863)" />
      <use xlink:href="#dot" transform="translate(2.634512, 134.027148)" />
      <use xlink:href="#dot" transform="translate(79.939590, 145.159307)" />
      <use xlink:href="#dot" transform="translate(59.865672, 122.864962)" />
      <use xlink:href="#dot" transform="translate(39.791754, 100.570618)" />
      <use xlink:href="#dot" transform="translate(84.380443, 60.422781)" />
      <use xlink:href="#dot" transform="translate(52.434224, 129.556268)" />
      <use xlink:href="#dot" transform="translate(32.360306, 107.261924)" />
      <use xlink:href="#dot" transform="translate(76.948995, 67.114087)" />
      <use xlink:href="#dot" transform="translate(10.065961, 127.335842)" />
      <use xlink:href="#dot" transform="translate(74.728568, 109.482350)" />
      <use xlink:href="#dot" transform="translate(54.654650, 87.188005)" />
      <use xlink:href="#dot" transform="translate(67.297120, 116.173656)" />
      <use xlink:href="#dot" transform="translate(47.223202, 93.879311)" />
      <use xlink:href="#dot" transform="translate(91.811892, 53.731475)" />
      <use xlink:href="#dot" transform="translate(38.311469, 128.816126)" />
      <use xlink:href="#dot" transform="translate(18.237551, 106.521781)" />
      <use xlink:href="#dot" transform="translate(82.900159, 88.668290)" />
      <use xlink:href="#dot" transform="translate(62.826241, 66.373945)" />
      <use xlink:href="#dot" transform="translate(73.248284, 137.727859)" />
      <use xlink:href="#dot" transform="translate(53.174366, 115.433514)" />
      <use xlink:href="#dot" transform="translate(33.100448, 93.139169)" />
      <use xlink:href="#dot" transform="translate(77.689137, 52.991333)" />
      <use xlink:href="#dot" transform="translate(65.816836, 144.419165)" />
      <use xlink:href="#dot" transform="translate(45.742918, 122.124820)" />
      <use xlink:href="#dot" transform="translate(25.668999, 99.830475)" />
      <use xlink:href="#dot" transform="translate(70.257689, 59.682639)" />
      <use xlink:href="#dot" transform="translate(23.448573, 142.198738)" />
      <use xlink:href="#dot" transform="translate(3.374655, 119.904394)" />
      <use xlink:href="#dot" transform="translate(68.037262, 102.050902)" />
      <use xlink:href="#dot" transform="translate(47.963344, 79.756557)" />
      <use xlink:href="#dot" transform="translate(80.679732, 131.036553)" />
      <use xlink:href="#dot" transform="translate(60.605814, 108.742208)" />
      <use xlink:href="#dot" transform="translate(40.531896, 86.447863)" />
      <use xlink:href="#dot" transform="translate(85.120585, 46.300027)" />
      <use xlink:href="#dot" transform="translate(51.694082, 143.679023)" />
      <use xlink:href="#dot" transform="translate(31.620163, 121.384678)" />
      <use xlink:href="#dot" transform="translate(11.546245, 99.090333)" />
      <use xlink:href="#dot" transform="translate(76.208853, 81.236842)" />
      <use xlink:href="#dot" transform="translate(56.134935, 58.942497)" />
      <use xlink:href="#dot" transform="translate(9.325819, 141.458596)" />
      <use xlink:href="#dot" transform="translate(66.556978, 130.296411)" />
      <use xlink:href="#dot" transform="translate(46.483060, 108.002066)" />
      <use xlink:href="#dot" transform="translate(26.409142, 85.707721)" />
      <use xlink:href="#dot" transform="translate(70.997831, 45.559885)" />
      <use xlink:href="#dot" transform="translate(59.125530, 136.987717)" />
      <use xlink:href="#dot" transform="translate(39.051612, 114.693372)" />
      <use xlink:href="#dot" transform="translate(18.977693, 92.399027)" />
      <use xlink:href="#dot" transform="translate(83.640301, 74.545535)" />
      <use xlink:href="#dot" transform="translate(63.566383, 52.251191)" />
      <use xlink:href="#dot" transform="translate(16.757267, 134.767290)" />
      <use xlink:href="#dot" transform="translate(81.419875, 116.913798)" />
      <use xlink:href="#dot" transform="translate(61.345956, 94.619454)" />
      <use xlink:href="#dot" transform="translate(41.272038, 72.325109)" />
      <use xlink:href="#dot" transform="translate(73.988426, 123.605104)" />
      <use xlink:href="#dot" transform="translate(53.914508, 101.310760)" />
      <use xlink:href="#dot" transform="translate(33.840590, 79.016415)" />
      <use xlink:href="#dot" transform="translate(98.503198, 61.162923)" />
      <use xlink:href="#dot" transform="translate(78.429279, 38.868579)" />
      <use xlink:href="#dot" transform="translate(35.320874, 50.770906)" />
      <use xlink:href="#dot" transform="translate(15.246956, 28.476562)" />
      <use xlink:href="#dot" transform="translate(72.478116, 17.314376)" />
      <use xlink:href="#dot" transform="translate(28.629568, 43.339458)" />
      <use xlink:href="#dot" transform="translate(8.555650, 21.045113)" />
      <use xlink:href="#dot" transform="translate(65.786809, 9.882928)" />
      <use xlink:href="#dot" transform="translate(42.012180, 58.202355)" />
      <use xlink:href="#dot" transform="translate(79.169422, 24.745824)" />
      <use xlink:href="#dot" transform="translate(21.938262, 35.908010)" />
      <use xlink:href="#dot" transform="translate(59.095503, 2.451479)" />
      <use xlink:href="#dot" transform="translate(42.752323, 44.079600)" />
      <use xlink:href="#dot" transform="translate(22.678404, 21.785255)" />
      <use xlink:href="#dot" transform="translate(79.909564, 10.623070)" />
      <use xlink:href="#dot" transform="translate(13.026530, 70.844824)" />
      <use xlink:href="#dot" transform="translate(57.615219, 30.696988)" />
      <use xlink:href="#dot" transform="translate(37.541301, 8.402643)" />
      <use xlink:href="#dot" transform="translate(5.595081, 77.536131)" />
      <use xlink:href="#dot" transform="translate(50.183771, 37.388294)" />
      <use xlink:href="#dot" transform="translate(30.109853, 15.093949)" />
      <use xlink:href="#dot" transform="translate(87.341012, 3.931764)" />
      <use xlink:href="#dot" transform="translate(27.889426, 57.462212)" />
      <use xlink:href="#dot" transform="translate(7.815508, 35.167868)" />
      <use xlink:href="#dot" transform="translate(20.457978, 64.153518)" />
      <use xlink:href="#dot" transform="translate(65.046667, 24.005682)" />
      <use xlink:href="#dot" transform="translate(36.061016, 36.648152)" />
      <use xlink:href="#dot" transform="translate(15.987098, 14.353807)" />
      <use xlink:href="#dot" transform="translate(73.218258, 3.191622)" />
      <use xlink:href="#dot" transform="translate(6.335223, 63.413376)" />
      <use xlink:href="#dot" transform="translate(50.923913, 23.265540)" />
      <use xlink:href="#dot" transform="translate(43.492465, 29.956846)" />
      <use xlink:href="#dot" transform="translate(23.418547, 7.662501)" />
      <use xlink:href="#dot" transform="translate(21.198120, 50.030764)" />
      <use xlink:href="#dot" transform="translate(13.766672, 56.722070)" />
      <use xlink:href="#dot" transform="translate(58.355361, 16.574234)" />
      <use xlink:href="#dot" transform="translate(4.854939, 91.658885)" />
      <use xlink:href="#dot" transform="translate(49.443629, 51.511048)" />
      <use xlink:href="#dot" transform="translate(86.600870, 18.054518)" />
      <use xlink:href="#dot" transform="translate(29.369710, 29.216704)" />
      <use xlink:href="#dot" transform="translate(9.295792, 6.922359)" />
      <use xlink:href="#dot" transform="translate(19.717836, 78.276273)" />
      <use xlink:href="#dot" transform="translate(64.306525, 38.128436)" />
      <use xlink:href="#dot" transform="translate(44.232607, 15.834092)" />
      <use xlink:href="#dot" transform="translate(12.286387, 84.967579)" />
      <use xlink:href="#dot" transform="translate(56.875077, 44.819742)" />
      <use xlink:href="#dot" transform="translate(36.801159, 22.525398)" />
      <use xlink:href="#dot" transform="translate(34.580732, 64.893661)" />
      <use xlink:href="#dot" transform="translate(14.506814, 42.599316)" />
      <use xlink:href="#dot" transform="translate(27.149284, 71.584967)" />
      <use xlink:href="#dot" transform="translate(7.075366, 49.290622)" />
      <use xlink:href="#dot" transform="translate(71.737973, 31.437130)" />
      <use xlink:href="#dot" transform="translate(51.664055, 9.142786)" />
    </g>
    <g class="streets" transform="translate(0, -1)">
      <path d="M24.429,121.4617 L26.457,123.1777 L55.012,123.8027 L59.381,123.6457 L61.253,122.0857 L60.629,129.7317 L59.069,127.8587 L26.145,127.0787 L23.181,129.5757 L24.429,121.4617 Z" class="pedestrian-mall"></path>
      <path d="M274.0679,20.566 L272.7169,163.729 L269.5499,163.741 L270.2749,86.129 C270.2809,85.175 269.8489,84.3 269.0739,83.734 C268.3009,83.182 267.3149,83.031 266.4119,83.332 L223.0669,98.069 C222.6399,98.219 222.2629,98.454 221.9559,98.763 L221.6479,93.81 C221.6989,93.859 221.7639,93.906 221.8209,93.947 C222.5789,94.451 223.5099,94.576 224.3719,94.282 L268.3869,79.311 C268.9769,79.105 269.4719,78.722 269.8209,78.233 C270.1579,77.762 270.3629,77.183 270.3689,76.572 L270.9009,20.577 C270.9099,19.895 270.6809,19.252 270.2729,18.739 L274.7319,18.742 C274.3189,19.234 274.0759,19.884 274.0679,20.566 L274.0679,20.566 Z M267.8559,175.779 C267.5739,176.07 267.1989,176.268 266.7699,176.318 C266.7219,176.333 266.6939,176.338 266.6079,176.338 L266.5439,176.341 L228.8529,178.022 C227.7999,178.069 226.9209,177.269 226.8529,176.212 L222.0939,100.926 C222.0639,100.487 222.2089,100.061 222.4529,99.719 C222.6789,99.402 223.0039,99.155 223.3969,99.017 L266.7419,84.28 C267.3309,84.075 267.9719,84.176 268.4839,84.542 C268.9909,84.916 269.2809,85.492 269.2709,86.124 L268.4429,174.441 C268.4429,174.957 268.2219,175.438 267.8559,175.779 L267.8559,175.779 Z M221.1849,177.78 C220.8339,178.168 220.3549,178.391 219.8299,178.421 L183.6169,180.028 C182.5639,180.074 181.6609,179.257 181.6069,178.198 L178.4119,115.791 C178.3879,115.344 178.5259,114.926 178.7699,114.584 C179.0029,114.259 179.3269,114.011 179.7199,113.874 L214.5499,102.025 C215.1189,101.829 215.7269,101.907 216.2269,102.24 C216.7349,102.578 217.0479,103.121 217.0839,103.725 L221.6749,176.372 C221.7049,176.897 221.5279,177.386 221.1849,177.78 L221.1849,177.78 Z M174.6019,180.432 L136.7809,182.106 L94.6579,176.59 C93.6469,176.457 92.9159,175.554 92.9849,174.546 L95.9459,130.942 C96.0179,129.912 96.8679,129.118 97.8969,129.141 L132.9629,129.861 L133.0569,129.867 L170.8399,116.894 C171.4149,116.691 172.0389,116.781 172.5329,117.121 C173.0409,117.46 173.3399,118.005 173.3759,118.608 L176.4439,178.405 C176.4929,179.472 175.6699,180.384 174.6019,180.432 L174.6019,180.432 Z M87.1709,174.977 C86.7489,175.326 86.2279,175.47 85.6859,175.403 L63.9289,172.553 C62.9169,172.42 62.1859,171.517 62.2609,170.501 L65.2149,130.296 C65.2809,129.274 66.1479,128.492 67.1759,128.514 L90.8839,128.996 L87.8639,173.628 C87.8239,174.165 87.5809,174.643 87.1709,174.977 L87.1709,174.977 Z M56.4299,170.956 C56.0139,171.297 55.4929,171.441 54.9649,171.372 L24.8299,167.415 C23.8399,167.285 23.1239,166.43 23.1649,165.427 L24.7489,129.392 C24.8649,128.405 25.6959,127.672 26.6969,127.699 L58.1359,128.335 C58.6679,128.347 59.1579,128.573 59.5169,128.965 C59.8759,129.357 60.0539,129.865 60.0139,130.402 L57.1369,169.605 C57.0969,170.142 56.8459,170.614 56.4299,170.956 L56.4299,170.956 Z M25.0409,122.706 C25.5629,123.214 26.2559,123.5 26.9959,123.513 L58.7039,124.169 C59.3799,124.185 60.0169,123.964 60.5179,123.572 L60.1789,128.21 C59.6369,127.662 58.9329,127.356 58.1549,127.328 L26.7149,126.692 C26.0109,126.68 25.3539,126.912 24.8419,127.32 L25.0409,122.706 Z M25.6629,121.921 C25.3059,121.543 25.1169,121.052 25.1389,120.539 L25.1339,120.511 L26.5359,88.636 C26.5519,88.254 26.6789,87.903 26.8949,87.602 C26.9759,87.488 27.0649,87.38 27.1709,87.283 C27.5649,86.938 28.0589,86.762 28.5799,86.79 L61.1209,88.877 C61.6499,88.911 62.1199,89.148 62.4569,89.537 C62.7939,89.925 62.9549,90.421 62.9189,90.936 L60.6839,121.38 L60.6799,121.402 C60.5919,122.421 59.7369,123.186 58.7249,123.176 L27.0169,122.52 C26.4989,122.506 26.0199,122.299 25.6629,121.921 L25.6629,121.921 Z M26.9339,79.617 L28.9999,32.312 C29.0229,31.936 29.1509,31.585 29.3599,31.292 C29.6859,30.836 30.1869,30.53 30.7659,30.477 L65.3539,27.549 C65.9209,27.512 66.4699,27.707 66.8729,28.106 C67.2759,28.505 67.4749,29.053 67.4319,29.612 L63.5849,81.937 C63.5099,82.989 62.5959,83.786 61.5459,83.724 L28.7309,81.626 C27.6869,81.556 26.8919,80.656 26.9339,79.617 L26.9339,79.617 Z M73.0529,27.593 C73.3719,27.146 73.8729,26.84 74.4609,26.793 L95.7169,24.995 C96.2759,24.952 96.8329,25.153 97.2279,25.546 C97.6229,25.939 97.8359,26.485 97.7929,27.044 L96.1239,51.809 C96.0549,52.817 95.2069,53.575 94.2059,53.548 L72.8539,52.831 C72.3409,52.808 71.8739,52.585 71.5389,52.211 C71.1959,51.831 71.0289,51.342 71.0649,50.827 L72.7049,28.562 C72.7249,28.207 72.8549,27.87 73.0529,27.593 L73.0529,27.593 Z M69.2239,83.643 C68.8789,83.249 68.7179,82.752 68.7539,82.237 L70.4089,59.675 C70.4779,58.667 71.3209,57.917 72.3219,57.944 L93.7259,58.674 C94.2309,58.69 94.6959,58.9 95.0389,59.28 C95.3809,59.66 95.5489,60.148 95.5179,60.655 L93.9419,83.864 C93.8849,84.769 93.1919,85.516 92.3169,85.64 C92.1909,85.661 92.0489,85.67 91.9049,85.665 L70.5459,84.304 C70.0309,84.268 69.5609,84.031 69.2239,83.643 L69.2239,83.643 Z M91.5299,90.817 C92.5959,90.891 93.4019,91.81 93.3339,92.868 L91.2289,123.835 L67.7569,123.349 C67.2249,123.337 66.7379,123.125 66.3839,122.725 C66.0249,122.333 65.8389,121.819 65.8869,121.288 L68.0929,91.229 C68.1189,90.866 68.2429,90.537 68.4409,90.261 C68.8129,89.74 69.4399,89.413 70.1269,89.449 L91.5299,90.817 Z M104.7959,24.329 L166.2899,19.057 C166.8049,19.007 167.3129,19.174 167.7069,19.517 C168.1099,19.865 168.3469,20.342 168.3769,20.868 L172.8989,109.247 C172.9409,110.1 172.3989,110.893 171.5909,111.163 L131.8909,124.67 L98.4359,123.983 C97.9039,123.971 97.4059,123.738 97.0469,123.347 C96.6879,122.955 96.5099,122.447 96.5459,121.932 L98.5149,92.945 C98.5839,91.937 99.4579,91.16 100.4689,91.207 L117.0209,92.107 C117.7079,92.143 118.3649,91.912 118.8759,91.454 C119.3879,90.996 119.6909,90.365 119.7209,89.686 C119.8009,88.268 118.7099,87.059 117.2999,86.985 L100.8649,86.094 C100.3729,86.062 99.9049,85.839 99.5789,85.47 C99.2439,85.096 99.0769,84.607 99.1149,84.106 L100.7009,60.695 C100.7689,59.688 101.6179,58.93 102.6189,58.957 L118.9839,59.515 C119.6689,59.537 120.3239,59.292 120.8189,58.822 C121.3139,58.353 121.6089,57.716 121.6319,57.031 C121.6829,55.617 120.5669,54.427 119.1479,54.384 L103.0849,53.833 C102.5799,53.816 102.1069,53.601 101.7719,53.227 C101.4299,52.847 101.2619,52.358 101.3009,51.857 L103.0449,26.126 C103.1149,25.168 103.8439,24.423 104.7959,24.329 L104.7959,24.329 Z M173.8839,19.284 C173.9359,19.211 173.9959,19.143 174.0509,19.084 C174.4159,18.693 174.9109,18.482 175.4409,18.48 L209.8739,18.366 C210.2959,18.361 210.6909,18.495 211.0089,18.722 C211.4639,19.048 211.7659,19.571 211.8079,20.166 L216.4979,94.396 C216.5499,95.269 216.0169,96.067 215.1949,96.34 L180.4719,108.143 C179.8969,108.347 179.2719,108.257 178.7699,107.911 C178.2619,107.572 177.9639,107.027 177.9279,106.424 L173.5339,20.496 C173.5119,20.063 173.6339,19.634 173.8839,19.284 L173.8839,19.284 Z M217.5349,18.998 C217.9059,18.599 218.4009,18.387 218.9389,18.391 L267.9819,18.626 C268.2039,18.625 268.4189,18.668 268.5879,18.74 L268.6189,18.749 C269.3949,19.022 269.9039,19.754 269.8969,20.572 L269.3639,76.568 C269.3629,77.378 268.8319,78.104 268.0579,78.362 L224.0419,93.333 C223.4859,93.526 222.8699,93.442 222.3699,93.11 C221.8699,92.777 221.5599,92.248 221.5099,91.647 L217.0079,20.44 C216.9749,19.901 217.1609,19.382 217.5349,18.998 L217.5349,18.998 Z M291.9849,13.568 L218.3489,13.213 C217.3449,13.208 216.5019,12.41 216.4429,11.409 L215.9359,3.328 C215.8859,2.641 215.5799,2.004 215.0589,1.546 C214.5379,1.088 213.8769,0.861 213.1899,0.911 C212.4089,0.955 211.6989,1.346 211.2399,1.988 C210.8909,2.477 210.7249,3.071 210.7639,3.652 L211.2429,11.135 C211.2699,11.682 211.0899,12.193 210.7189,12.591 C210.3599,12.974 209.8589,13.193 209.3339,13.187 L175.0099,13.304 C173.9719,13.312 173.1209,12.508 173.0709,11.477 L172.6679,3.63 C172.6379,2.932 172.3309,2.295 171.8239,1.835 C171.3089,1.369 170.6479,1.142 169.9579,1.178 C168.5709,1.244 167.4149,2.519 167.5059,3.887 L167.9139,11.848 C167.9579,12.887 167.1829,13.783 166.1499,13.869 L75.4529,21.516 C74.8939,21.559 74.3449,21.364 73.9419,20.965 C73.5389,20.566 73.3319,20.013 73.3749,19.454 L73.5649,16.849 C73.6719,15.426 72.5969,14.178 71.1739,14.071 C69.8029,13.977 68.4929,15.105 68.4039,16.468 L68.1019,20.504 C68.0379,21.454 67.2949,22.201 66.3539,22.279 L14.7149,26.641 C13.2879,26.764 12.2339,28.014 12.3489,29.436 C12.4189,30.199 12.8129,30.886 13.4229,31.322 C13.9189,31.676 14.5269,31.84 15.1419,31.788 L21.6949,31.235 C22.2539,31.192 22.7949,31.381 23.1959,31.766 C23.5969,32.151 23.8149,32.688 23.7919,33.237 L21.7689,79.208 C21.7409,79.729 21.5199,80.21 21.1339,80.561 C20.7399,80.906 20.2459,81.081 19.7249,81.053 L11.4509,80.524 C10.0299,80.431 8.7969,81.504 8.7059,82.939 C8.6549,83.836 9.0539,84.687 9.7789,85.204 C10.1609,85.478 10.6249,85.637 11.1179,85.67 L19.5829,86.224 C20.6099,86.282 21.4189,87.18 21.3769,88.219 L19.9619,120.491 C19.9149,121.538 19.0469,122.356 17.9989,122.344 L6.9699,122.109 C6.2799,122.095 5.6199,122.348 5.1269,122.832 C4.6309,123.301 4.3519,123.95 4.3299,124.635 C4.3079,125.491 4.7149,126.298 5.4139,126.798 C5.8459,127.106 6.3529,127.273 6.8639,127.281 L17.6819,127.501 C18.1999,127.515 18.6869,127.728 19.0439,128.106 C19.4029,128.498 19.5929,128.989 19.5649,129.51 L18.0279,164.411 C18.0049,164.96 17.7639,165.451 17.3509,165.807 C16.9289,166.157 16.4019,166.309 15.8519,166.236 L2.9259,164.546 C2.2429,164.452 1.5629,164.629 1.0169,165.05 C0.4639,165.479 0.1059,166.083 0.0259,166.763 C-0.1101,167.711 0.2979,168.654 1.0789,169.212 C1.4289,169.462 1.8339,169.616 2.2519,169.669 L15.9629,171.465 C16.9459,171.602 17.6789,172.469 17.6349,173.458 L17.3299,180.319 C17.2669,181.749 18.3849,182.954 19.8009,183.019 C20.6819,183.059 21.5109,182.655 22.0219,181.939 C22.3189,181.524 22.4759,181.047 22.4999,180.548 L22.7719,174.474 C22.7959,173.925 23.0359,173.434 23.4519,173.092 C23.8659,172.736 24.4069,172.582 24.9489,172.649 L54.7969,176.561 C55.8159,176.699 56.5469,177.603 56.4649,178.613 L55.7759,188.039 C55.6769,189.468 56.7499,190.701 58.1669,190.817 C59.5459,190.917 60.8479,189.783 60.9369,188.42 L61.5969,179.515 C61.6309,178.986 61.8799,178.5 62.2899,178.166 C62.7059,177.824 63.2269,177.68 63.7689,177.748 L85.5709,180.605 C86.5819,180.738 87.3189,181.633 87.2499,182.641 L86.5879,192.443 C86.4889,193.871 87.5759,195.103 88.9909,195.204 C90.3469,195.301 91.6579,194.172 91.7519,192.801 L92.3729,183.573 C92.4039,183.03 92.6609,182.55 93.0779,182.208 C93.4939,181.866 94.0149,181.722 94.5419,181.792 L136.0349,187.313 L174.8959,185.595 C175.4069,185.567 175.8949,185.744 176.2759,186.089 C176.6559,186.434 176.8709,186.908 176.8979,187.419 L177.1079,191.391 C177.1869,192.812 178.4029,193.914 179.8179,193.843 C181.1759,193.782 182.3289,192.565 182.2749,191.126 L182.0689,187.218 C182.0469,186.698 182.2299,186.202 182.5669,185.816 C182.9119,185.436 183.3909,185.213 183.9109,185.191 L220.2369,183.579 C221.2899,183.533 222.1749,184.324 222.2429,185.381 L222.6649,192.135 C222.7149,192.822 223.0199,193.445 223.5349,193.912 C224.0559,194.37 224.7229,194.588 225.4039,194.547 C226.7879,194.467 227.9209,193.174 227.8349,191.798 L227.4209,185.222 C227.3849,184.704 227.5539,184.21 227.8989,183.83 C228.2479,183.428 228.7269,183.205 229.2519,183.175 L266.3619,181.533 C266.8899,181.517 267.3859,181.699 267.7769,182.064 C268.1619,182.438 268.3669,182.941 268.3639,183.479 L268.3269,187.263 C268.3269,187.951 268.5859,188.603 269.0699,189.096 C269.5179,189.552 270.0929,189.815 270.7239,189.86 L270.8979,189.874 C272.3269,189.887 273.4959,188.732 273.5089,187.303 L273.5509,183.031 C273.5529,182.013 274.3599,181.176 275.3849,181.134 L298.9729,180.081 C299.7989,180.044 300.5169,179.623 300.9649,178.997 C301.2849,178.549 301.4639,177.989 301.4499,177.389 C301.4169,176.592 301.0169,175.863 300.3579,175.392 C299.8859,175.055 299.3189,174.884 298.7439,174.915 L275.4869,175.935 C274.9909,175.924 274.5419,175.726 274.1919,175.39 C273.8219,175.015 273.6179,174.526 273.6239,174.001 L275.0669,20.579 C275.0699,19.697 275.6689,18.945 276.4999,18.727 L276.5279,18.723 L276.5499,18.726 C276.7009,18.687 276.8629,18.667 277.0069,18.672 L291.9589,18.748 C293.3849,18.747 294.5549,17.592 294.5619,16.171 C294.5599,15.297 294.1299,14.523 293.4709,14.052 C293.0479,13.75 292.5369,13.57 291.9849,13.568 L291.9849,13.568 Z" class="street-paths"></path>
    </g>
    <g class="labels" transform="translate(32, 5)">
      <text class="s2" transform="translate(252, 80) rotate(270)">RICHARDS</text>
      <text class="s3" transform="translate(203, 164) rotate(267)">ALAKEA</text>
      <text class="s2" transform="translate(153, 46) rotate(269)">BISHOP</text>
      <text class="s2" transform="translate(71, 156) rotate(273)">BETHEL</text>
      <text class="s3" transform="translate(47, 45) rotate(274)">NUUANU</text>
      <text class="s2" transform="translate(6, 58) rotate(272)">SMITH</text>
      <text class="s3" transform="translate(88, 188) rotate(7)">S. KING</text>
      <text class="s3" transform="translate(202, 99) rotate(-18)">S. HOTEL</text>
      <text class="s3" transform="translate(107, 133) rotate(-18)">N. HOTEL</text>
      <text class="s3" transform="translate(69, 95) rotate(2)">PAUAHI</text>
      <text class="s3" transform="translate(74, 44) rotate(2)">CHAPLAIN</text>
      <text class="s2" transform="translate(71, 8) rotate(-5)">S. BERETANIA</text>
      <text class="s2" transform="translate(250, 135)">IOLANI</text>
      <text class="s2" transform="translate(250, 143)">PALACE</text>
      <text class="s2" transform="translate(209, 162)">YWCA</text>
      <path d="M102.5697,61.9429 L102.5317,61.9409 C102.5147,61.9409 102.4977,61.9349 102.4827,61.9259 L102.4637,61.9249 C102.4047,61.9299 102.3867,62.0059 102.4397,62.0309 C102.4417,62.0319 102.4427,62.0319 102.4447,62.0329 C102.4477,62.0349 102.4527,62.0359 102.4567,62.0369 C102.4657,62.0389 102.4727,62.0419 102.4777,62.0449 C102.4937,62.0509 102.5097,62.0539 102.5267,62.0539 L102.6217,62.0589 C102.6217,62.0029 102.6047,61.9629 102.5697,61.9429 Z M72.4637,68.1241 C71.6647,68.0861 71.1737,67.4531 71.2117,66.6541 L71.2917,64.9541 C71.2977,64.8271 71.3537,64.7161 71.4807,64.7221 L72.0007,64.7461 C72.1277,64.7521 72.2367,64.8721 72.2297,64.9991 L72.1497,66.6981 C72.1387,66.9391 72.2037,67.1711 72.4827,67.1841 C72.7617,67.1971 72.8487,66.9731 72.8597,66.7321 L73.2177,59.1731 C73.2237,59.0461 73.3307,58.9361 73.4577,58.9421 L73.9777,58.9671 C74.1047,58.9731 74.2127,59.0931 74.2067,59.2191 L73.8487,66.7791 C73.8117,67.5781 73.2627,68.1621 72.4637,68.1241 Z M75.1086,68.0968 L74.6896,68.0768 C74.5636,68.0708 74.4546,67.9508 74.4606,67.8248 L74.5026,66.9368 C74.5086,66.8098 74.6276,66.7008 74.7546,66.7068 L75.1736,66.7268 C75.3006,66.7328 75.4086,66.8528 75.4026,66.9798 L75.3606,67.8668 C75.3546,67.9938 75.2356,68.1028 75.1086,68.0968 Z M77.4857,68.3619 C76.6867,68.3239 76.1957,67.6909 76.2337,66.8919 L76.3137,65.1919 C76.3197,65.0649 76.3757,64.9539 76.5027,64.9599 L77.0227,64.9839 C77.1497,64.9899 77.2587,65.1099 77.2527,65.2369 L77.1717,66.9359 C77.1607,67.1769 77.2257,67.4089 77.5047,67.4219 C77.7837,67.4349 77.8707,67.2109 77.8817,66.9699 L78.2397,59.4109 C78.2457,59.2839 78.3527,59.1739 78.4797,59.1799 L78.9997,59.2049 C79.1267,59.2109 79.2357,59.3309 79.2297,59.4569 L78.8717,67.0169 C78.8337,67.8159 78.2847,68.3999 77.4857,68.3619 Z M80.1307,68.3346 L79.7127,68.3146 C79.5857,68.3086 79.4767,68.1886 79.4827,68.0626 L79.5247,67.1746 C79.5307,67.0476 79.6497,66.9386 79.7767,66.9446 L80.1957,66.9646 C80.3227,66.9706 80.4307,67.0906 80.4247,67.2176 L80.3827,68.1046 C80.3767,68.2316 80.2577,68.3406 80.1307,68.3346 Z M84.2652,68.5304 L83.0852,68.4744 C82.9462,68.4684 82.8492,68.3614 82.8562,68.2224 L83.2632,59.6354 C83.2692,59.4964 83.3752,59.4124 83.5142,59.4184 L84.6942,59.4744 C85.4932,59.5124 86.0732,60.1504 86.0352,60.9494 L85.7402,67.1764 C85.7022,67.9754 85.0642,68.5684 84.2652,68.5304 Z M85.0462,60.9024 C85.0572,60.6614 84.9282,60.4264 84.6492,60.4134 L84.4592,60.4044 C84.3202,60.3974 84.2132,60.4944 84.2072,60.6334 L83.8902,67.3304 C83.8832,67.4704 83.9802,67.5764 84.1192,67.5824 L84.3092,67.5914 C84.5882,67.6044 84.7392,67.3704 84.7512,67.1304 L85.0462,60.9024 Z M88.2658,68.8723 C87.4668,68.8343 86.8878,68.1843 86.9248,67.3853 L87.2328,60.8783 C87.2708,60.0793 87.9098,59.4873 88.7088,59.5253 C89.5068,59.5633 90.0988,60.2133 90.0618,61.0123 L89.7538,67.5193 C89.7158,68.3183 89.0648,68.9103 88.2658,68.8723 Z M89.0718,60.9653 C89.0838,60.7243 88.9418,60.4893 88.6638,60.4763 C88.3838,60.4633 88.2338,60.6843 88.2228,60.9253 L87.9148,67.4323 C87.9028,67.6733 88.0308,67.9203 88.3098,67.9333 C88.5888,67.9463 88.7528,67.7133 88.7638,67.4723 L89.0718,60.9653 Z M92.7372,68.9315 L91.2152,68.8595 C91.0882,68.8535 90.9922,68.7345 90.9982,68.6075 L91.4052,60.0215 C91.4112,59.8945 91.5172,59.7975 91.6442,59.8035 L92.1642,59.8285 C92.2912,59.8345 92.4002,59.9415 92.3942,60.0685 L92.0322,67.7155 C92.0262,67.8425 92.1352,67.9625 92.2622,67.9685 L92.7812,67.9925 C92.9082,67.9985 93.0052,68.1055 92.9992,68.2325 L92.9772,68.7015 C92.9712,68.8275 92.8642,68.9375 92.7372,68.9315 Z M96.7449,69.1213 L96.2249,69.0963 C96.0979,69.0903 95.9759,68.9833 95.9689,68.8553 L95.8889,67.3263 C95.8829,67.1993 95.7729,67.0923 95.6459,67.0863 L95.2919,67.0693 C95.1649,67.0633 95.0329,67.1593 95.0139,67.2853 L94.7899,68.8003 C94.7709,68.9263 94.6529,69.0223 94.5259,69.0163 L94.0059,68.9913 C93.8789,68.9853 93.7819,68.8793 93.8009,68.7533 L95.1969,60.2003 C95.2159,60.0743 95.3479,59.9793 95.4739,59.9853 L96.1339,60.0163 C96.2609,60.0223 96.3829,60.1303 96.3889,60.2573 L96.9589,68.9023 C96.9659,69.0303 96.8719,69.1273 96.7449,69.1213 Z M95.8109,61.7423 C95.8139,61.6793 95.7769,61.6523 95.7259,61.6493 C95.6749,61.6473 95.6229,61.6703 95.6199,61.7333 L95.2039,65.9723 C95.1849,66.0983 95.2809,66.2173 95.4079,66.2233 L95.5979,66.2323 C95.7249,66.2383 95.8439,66.1293 95.8379,66.0023 L95.8109,61.7423 Z M100.5242,69.3002 L100.2452,69.2872 C100.1182,69.2812 99.9962,69.1732 99.9772,69.0452 L99.3212,64.3742 C99.3112,64.3232 99.2862,64.2972 99.2612,64.2962 C99.2362,64.2942 99.2092,64.3182 99.2072,64.3692 L98.9882,68.9862 C98.9822,69.1122 98.8632,69.2212 98.7362,69.2152 L98.2672,69.1932 C98.1402,69.1872 98.0312,69.0672 98.0372,68.9412 L98.4442,60.3542 C98.4502,60.2282 98.5682,60.1312 98.6952,60.1372 L99.0252,60.1532 C99.1902,60.1612 99.2742,60.2672 99.2932,60.3952 C99.4122,61.3792 99.5832,62.8742 99.9022,64.9872 C99.9122,65.0512 99.9492,65.0652 99.9752,65.0542 C100.0012,65.0422 100.0272,65.0312 100.0292,64.9802 L100.2442,60.4402 C100.2502,60.3132 100.3572,60.2162 100.4842,60.2222 L100.9532,60.2442 C101.0802,60.2502 101.1892,60.3572 101.1832,60.4842 L100.7772,69.0702 C100.7712,69.1972 100.6512,69.3062 100.5242,69.3002 Z M102.4321,63.0984 C102.3781,63.1594 102.3001,63.2064 102.2241,63.2034 C102.1601,63.2004 102.1371,63.1604 102.1401,63.0844 C102.1441,63.0084 102.2001,62.8974 102.2441,62.7714 C102.3451,62.5224 102.3821,62.2824 102.4031,61.8264 C102.4081,61.7374 102.3721,61.6844 102.2961,61.6814 L102.1561,61.6744 C102.0301,61.6684 101.9211,61.5484 101.9271,61.4214 L101.9691,60.5344 C101.9751,60.4074 102.0951,60.2984 102.2211,60.3044 L102.6401,60.3244 C102.7661,60.3304 102.8751,60.4504 102.8691,60.5764 L102.8161,61.7054 C102.7871,62.3144 102.6631,62.7784 102.4321,63.0984 Z M104.626,69.647 C103.764,69.606 103.248,68.946 103.299,67.881 C103.314,67.551 103.347,67.12 103.458,66.655 C103.504,66.492 103.56,66.38 103.7,66.387 L104.144,66.408 C104.347,66.418 104.404,66.547 104.384,66.699 C104.348,66.926 104.255,67.545 104.265,67.876 C104.276,68.448 104.379,68.682 104.658,68.695 C105.013,68.712 105.12,68.336 105.14,67.917 C105.2,66.648 104.736,65.991 104.342,65.184 C103.599,63.687 103.441,62.727 103.481,61.877 C103.528,60.887 104.13,60.255 104.98,60.295 C105.919,60.34 106.357,61.009 106.31,62.011 C106.29,62.417 106.224,63.011 106.188,63.238 C106.154,63.414 106.049,63.498 105.909,63.492 L105.503,63.472 C105.364,63.466 105.217,63.345 105.237,63.193 C105.281,62.788 105.355,62.296 105.373,61.928 C105.392,61.51 105.265,61.249 104.948,61.234 C104.631,61.219 104.49,61.505 104.468,61.974 C104.432,62.735 104.658,63.61 105.171,64.576 C105.896,65.919 106.179,66.924 106.138,67.774 C106.089,68.814 105.615,69.694 104.626,69.647 Z" data-label="jjdolans"></path>
    </g>
    <g class="hb-ball" transform="translate(233, 23)">
      <path class="hisam-block" d="M25.7679,32.4559 L3.9749,32.4559 C1.9569,32.4559 0.3209,30.8199 0.3209,28.8019 L0.3209,4.2289 C0.3209,2.2109 1.9569,0.5739 3.9749,0.5739 L25.7679,0.5739 C27.7859,0.5739 29.4219,2.2109 29.4219,4.2289 L29.4219,28.8019 C29.4219,30.8199 27.7859,32.4559 25.7679,32.4559"></path>
      <text transform="translate(7,27)">HiSAM</text>
      <use xlink:href="#logo-hb-ball" transform="translate(6,4)">
    </g>
    <g class="stages" transform="translate(239, 25)">
      <g transform="translate(28, 0)">
        <path d="M10.013,1.0192 L9.934,10.0692 L0.884,9.9902 L0.962,0.9402 L10.013,1.0192 Z" class="stage-block"></path>
        <path d="M5.4486,5.0358 L5.0476,5.4438 L4.7556,5.1368 L5.5136,4.3748 L5.9616,4.3748 L5.9616,6.7828 L5.4486,6.7828 L5.4486,5.0358 Z" data-label="1"></path>
      </g>
      <g transform="translate(0, 39)">
        <path d="M11.7401,0.4192 L12.2511,11.7212 L0.9491,12.2322 L0.4381,0.9302 L11.7401,0.4192 Z" class="stage-block"></path>
        <path d="M5.5509,7.163 C6.5369,6.437 6.8259,6.188 6.8259,5.892 C6.8259,5.682 6.6339,5.578 6.4359,5.578 C6.1609,5.578 5.9519,5.686 5.7889,5.856 L5.4969,5.516 C5.7309,5.245 6.0889,5.123 6.4249,5.123 C6.9369,5.123 7.3449,5.412 7.3449,5.892 C7.3449,6.304 7.0059,6.661 6.3809,7.116 L7.3639,7.116 L7.3639,7.567 L5.5509,7.567 L5.5509,7.163 Z" data-label="2"></path>
      </g>
      <g transform="translate(25, 71)">
        <path d="M8.1035,0.3817 L7.8625,9.4297 L0.0185,9.2177 L0.2595,0.1697 L8.1035,0.3817 Z" class="stage-block"></path>
        <path d="M3.3895,5.1905 C3.5555,5.3635 3.8195,5.4645 4.0545,5.4645 C4.3465,5.4645 4.5085,5.3385 4.5085,5.1585 C4.5085,4.9665 4.3605,4.8795 4.0255,4.8795 C3.9235,4.8795 3.7615,4.8835 3.7255,4.8875 L3.7255,4.4255 C3.7685,4.4285 3.9345,4.4285 4.0255,4.4285 C4.2925,4.4285 4.4695,4.3495 4.4695,4.1725 C4.4695,3.9815 4.2745,3.8875 4.0215,3.8875 C3.7905,3.8875 3.5815,3.9735 3.4115,4.1365 L3.1545,3.8155 C3.3495,3.5945 3.6535,3.4325 4.0755,3.4325 C4.6385,3.4325 4.9855,3.6845 4.9855,4.0855 C4.9855,4.3895 4.7255,4.5875 4.4585,4.6345 C4.7035,4.6595 5.0215,4.8515 5.0215,5.2125 C5.0215,5.6275 4.6495,5.9195 4.0715,5.9195 C3.6275,5.9195 3.2995,5.7505 3.1225,5.5335 L3.3895,5.1905 Z" data-label="3"></path>
      </g>
      <g transform="translate(27, 130)">
        <path d="M10.1099,0.3361 L9.8679,9.3841 L0.8189,9.1401 L1.0609,0.0921 L10.1099,0.3361 Z" class="stage-block"></path>
        <path d="M4.753,5.0825 L5.403,5.0825 L5.403,4.0785 L4.753,5.0825 Z M5.403,5.5345 L4.251,5.5345 L4.251,5.1295 L5.208,3.6245 L5.916,3.6245 L5.916,5.0825 L6.226,5.0825 L6.226,5.5345 L5.916,5.5345 L5.916,6.0315 L5.403,6.0315 L5.403,5.5345 Z" data-label="4"></path>
      </g>
    </g>
    <g class="trolley" transform="translate(57, 85)">
      <use xlink:href="#trolley-stop" transform="translate(11,27)"/>
      <use xlink:href="#trolley-stop" transform="translate(146,0)"/>
      <path d="M95.7871094,148.133464 L165.683594,149.492839 L252.507812,119.258464 L257.240234,203.073568 L169.17513,206.860677 L91.655599,196.648438 L95.7871094,148.133464 Z" class="trolley-path" transform="translate(-90, -108)"></path>
    <g class="bolts" transform="translate(-30, -21)">
      <g class="bolt" transform="translate(169, 46)">
        <use xlink:href="#bolt" transform="translate(.5,-.5)"/>
        <text transform="translate(4.5,10)">8</text>
      </g>
      <g class="bolt" transform="translate(95, 13)">
        <use xlink:href="#bolt" transform="translate(.5,-.25)"/>
        <text transform="translate(4.5,10)">7</text>
      </g>
      <g class="bolt" transform="translate(47, 0)">
        <use xlink:href="#bolt" transform="translate(0,-.25)"/>
        <text transform="translate(4,10)">6</text>
      </g>
      <g class="bolt" transform="translate(44, 31)">
        <use xlink:href="#bolt" transform="translate(0,-.25)"/>
        <text transform="translate(4,10)">5</text>
      </g>
      <g class="bolt" transform="translate(16, 65)">
        <use xlink:href="#bolt" transform="translate(.5,-.75)"/>
        <text transform="translate(4,10)">4</text>
      </g>
      <g class="bolt" transform="translate(19, 39)">
        <use xlink:href="#bolt" transform="translate(.5,0)"/>
        <text transform="translate(4.5,10)">3</text>
      </g>
      <g class="bolt" transform="translate(0, 64)">
        <use xlink:href="#bolt" transform="translate(.5,0)"/>
        <text transform="translate(4.5,11)">2</text>
      </g>
      <g class="bolt" transform="translate(3, 39)">
        <use xlink:href="#bolt" transform="translate(-.25,-.5)"/>
        <text transform="translate(3.4,10)">1</text>
      </g>
    </g>
  </g>
</svg>
              
            
!

CSS

              
                @import url(https://fonts.googleapis.com/css?family=Oswald);

/*
  VARIABLES
*/
$easeOutExpo:           cubic-bezier(0.19, 1, 0.22, 1);
$c-body-bg:             #7AA226;
$c-map-purple:          #C768E8;
$c-map-pink:            #AA0E76;
$c-map-red:             #B83D54;
$c-map-orange:          #f8a514;
$c-map-yellow:          #EDE213;
$c-map-teal:            #13a3aa;
$c-map-baby-blue:       #BCF9F4;
$header-font-family:    Oswald, sans-serif;
$body-font-family:      "Source Sans Pro", sans-serif;

/*
  ANIMATIONS
*/
@keyframes trolley-path-move {
  to {
    stroke-dashoffset: 100%;
  }
}

/*
  GLOBAL STYLING
*/
body {
  background: $c-body-bg;
  color: #fff;
  font-family: $body-font-family;
}

h1.title {
  font-family: $header-font-family;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: .1rem;
  color: $c-map-pink;
  a {
    color: darken($c-map-pink,5%);
    text-decoration: none;
    &:hover { color: darken($c-map-pink,10%); }
  }
}

@media screen and (min-width: 640px) {
  h1.title {
    font-size: 4rem;
    letter-spacing: .2rem;
  }
}

/*
  SVG STYLING
*/
svg#map-w-legend {
  display: block;
  margin: 0 auto;
  max-width: 800px;
  text {
    text-rendering: geometricPrecision;
    font-size: .35rem;
    font-weight: 400;
    &.text-label {
      font-family: $header-font-family !important;
      fill: #fff !important;
      letter-spacing: .02rem;
    }
  }

  .fills {
    .fill-street-fest       { fill: $c-map-orange; }
    .fill-club-hb           { fill: $c-map-teal; }
  }
  .dots                     { fill: $c-map-baby-blue; }
  .streets {
    .pedestrian-mall        { fill: $c-map-purple; }
    .street-paths           { fill: #fff; }
  }
  .labels                   { fill: #fff;
    text {
      font-family: $header-font-family;
      text-transform: uppercase;
      letter-spacing: .025rem;
      font-size: .4rem;
      &.s2 {
        font-size: .4rem;
      }
      &.s3 {
        font-size: .35rem;
      }
    }
  }
  .chinatown-eats {
    use {
      &:nth-of-type(1) {
        stroke: #fff;
        fill: transparent;
      }
      &:nth-of-type(2) {
        fill: $c-map-baby-blue;
      }
    }
  }
  .hb-ball {
    text { fill: #fff; }
    .hisam-block            { fill: #111; }
    use                     { fill: #fff;
    }
  }
  .stages {
    .stage-block            { fill: $c-map-red; }
    [data-label]            { fill: #fff; }
  }
  .trolley {
    use                     { fill: $c-map-yellow; }
    .trolley-path {
      fill: transparent;
                              stroke: $c-map-pink;
      stroke-linecap: round;
      stroke-linejoin: round;
      stroke-width: 2px;

      animation: trolley-path-move 30s linear infinite;
      stroke-dasharray: 5;
    }
  }
  .bolts, .squares {
    text {
      font-family: $body-font-family;
    }
  }
  .bolt {
    text                    { fill: darken($c-map-orange, 25%); }
    use                     { fill: $c-map-orange; }
  }
  .square {
    use                     { fill: $c-map-red; }
    text                    { fill: #fff; }
    &.purple use            { fill: $c-map-purple; }
    &.orange use            { fill: $c-map-orange; }
    &.blue use              { fill: $c-map-teal; }
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console