css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="header">
  <div class="header__title">Geometrical Birds</div>
  <div class="header__tagline">Slideshow</div>
</div>

<div class="container">
  <svg xmlns="http://www.w3.org/2000/svg" width="600" height="500" viewBox="0 0 600 500" preserveAspectRatio="xMinYMin" class="birds">
        <rect onclick="goTo(0)" class="box" x="45" y="15" width="30" height="30"></rect>
        <circle cx="60" cy="30" r="5"></circle>
        <rect onclick="goTo(1)" class="box" x="75" y="15" width="30" height="30"></rect>
        <circle cx="90" cy="30" r="5"></circle>
        <rect onclick="goTo(2)" class="box" x="105" y="15" width="30" height="30"></rect>
        <circle cx="120" cy="30" r="5"></circle>
        <rect onclick="goTo(3)" class="box" x="135" y="15" width="30" height="30"></rect>
        <circle cx="150" cy="30" r="5"></circle>
        <rect onclick="goTo(4)" class="box" x="165" y="15" width="30" height="30"></rect>
        <circle cx="180" cy="30" r="5"></circle>
      </svg>
  <div class="bird-text">
    <div class="bird-text__title"></div>
    <div class="bird-text__body"></div>
  </div>
</div>
<svg class="keys" width="182" height="35" viewBox="0 0 104 20">
      <path d="M3.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59"/>
        <path fill="#364e59" stroke="#364e59" stroke-width=".2" d="M9.82 7.61v.695h.695V7.61H9.82zm.645-2.392V3.843H9.87v1.375l.157 1.943h.28l.158-1.942zM10.656 16.118v-4.432h-.407q-.044.25-.163.413-.12.16-.294.255-.17.094-.38.13-.214.033-.44.033v.425h1.15v3.175h.533z"/>
        <path d="M39.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
        <path fill="#364e59" stroke="#364e59" stroke-width=".2" d="M44.09 5.13q0-.144.018-.3.018-.162.075-.294.062-.137.168-.225.108-.092.283-.092.18 0 .28.093.107.09.163.226.057.132.07.294.018.156.018.294 0 .144-.02.306-.018.163-.08.3-.056.13-.163.22-.105.086-.286.086-.175 0-.28-.087-.1-.095-.158-.226-.056-.138-.075-.294-.01-.162-.01-.3zm-.47.013q0 .256.05.48.056.226.175.395.12.168.313.268.193.094.475.094.275 0 .462-.106.188-.106.306-.275.126-.176.176-.4.057-.232.057-.476 0-.256-.05-.48-.044-.233-.163-.4-.112-.17-.306-.27-.188-.1-.48-.1-.29 0-.483.106-.192.1-.31.275-.12.175-.17.406-.05.226-.05.483zm3.556 1.987q0-.144.02-.3.018-.162.074-.294.063-.137.17-.225.105-.092.28-.092.18 0 .28.093.108.09.164.226.056.132.07.294.017.156.017.294 0 .144-.017.306-.02.163-.082.3-.055.13-.16.22-.107.086-.29.086-.174 0-.28-.087-.1-.095-.156-.226-.056-.138-.075-.294-.014-.162-.014-.3zm-.468.013q0 .256.05.48.056.226.175.395.118.162.312.262.194.094.475.094.275 0 .463-.1.187-.106.306-.275.124-.176.174-.4.056-.232.056-.476 0-.256-.05-.48-.044-.233-.162-.4-.113-.17-.307-.27-.186-.1-.48-.1-.287 0-.48.106-.195.1-.314.275-.118.175-.168.406-.05.226-.05.483zm.875-3.35L44.22 8.436h.538l3.356-4.643h-.53zM47.368 12.23v-.47H45.18l-.412 2.3.456.026q.157-.187.357-.3.207-.118.47-.118.224 0 .406.075.187.075.318.212.132.13.2.32.075.18.075.4 0 .26-.076.46-.075.195-.206.326-.125.133-.3.2-.17.064-.356.064-.2 0-.37-.056-.16-.063-.286-.17-.12-.112-.194-.255-.07-.15-.08-.32h-.533q.006.3.118.538.113.24.306.4.194.158.444.245.256.08.544.08.387 0 .675-.117.294-.125.487-.332.194-.206.288-.468.1-.27.1-.55 0-.382-.113-.663-.113-.287-.307-.475-.194-.194-.456-.287-.263-.094-.556-.094-.224 0-.456.08-.225.075-.368.238l-.013-.013.238-1.275h1.788z"/>
        <path fill="#364e59" d="M24 12.666V14h1.334v-1.334H24zM27.333 12.666V14h1.334v-1.334h-1.334zM30.666 12.666V14H32v-1.334h-1.334z"/>
        <path d="M63.5.5h13c1.662 0 3 1.338 3 3v13c0 1.662-1.338 3-3 3h-13c-1.662 0-3-1.338-3-3v-13c0-1.662 1.338-3 3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M72.5 10v4l-5-2z" fill="#364e59" fill-rule="evenodd"/>
        <path d="M100.5.5h-13c-1.662 0-3 1.338-3 3v13c0 1.662 1.338 3 3 3h13c1.662 0 3-1.338 3-3v-13c0-1.662-1.338-3-3-3z" fill="none" stroke="#364e59" stroke-linecap="round" stroke-linejoin="round"/>
        <path d="M91.5 10v4l5-2z" fill="#364e59" fill-rule="evenodd"/>
      </svg>
            
          
!
            
              body {
  font-family: Inconsolata, sans-serif;
  font-size: 18px;
  margin: 0;
}

.header {
  margin: 30px;
}

.header__title {
  display: inline-block;
  font-weight: bold;
  margin-right: 20px;
}

.header__tagline {
  display: inline-block;
}

.keys {
  bottom: 20px;
  position: absolute;
  right: 20px;
}

@media all and (max-width: 768px) {
  .keys {
    display: none;
  }
}

.container {
  align-items: center;
  display: flex;
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

@media all and (max-width: 768px) {
  .container {
    flex-direction: column;
  }
}

.birds {
  flex-shrink: 1;
  height: auto;
  max-width: 600px;
  width: 100%;
}

.birds circle {
  fill: #e0e0e0;
  pointer-events: none;
}

.birds path {
  pointer-events: none;
}

.bird-text {
  box-sizing: border-box;
  flex-shrink: 0;
  line-height: 1.44;
  padding: 0 20px;
  width: 320px;
}

@media all and (max-width: 768px) {
  .bird-text {
    max-width: 600px;
    width: 100%;
    padding: 20px;
  }
}

.bird-text__title {
  font-size: 50px;
  font-weight: bold;
  margin-bottom: 20px;
}

@media all and (max-width: 768px) {
  .bird-text__title {
    font-size: 32px;
  }
}

.box {
  fill: #fff;
  cursor: pointer;
}

.box:hover {
  fill: #f2f2f2;
}

            
          
!
            
              var birds = [
[
  {id: 'path14437', d: 'm 495.67653,93.719633 7.65012,-19.67631 31.441,11.23795 z', fill: '#413b3d'},
  {id: 'path14439', d: 'm 495.62423,93.867573 7.70242,-19.82425 -9.59645,-19.31917 z', fill: '#060606'},
  {id: 'path4158', d: 'm 496.00304,93.993843 -2.26694,-39.3102 -22.76178,20.4497 z', fill: '#3e3c3d'},
  {id: 'path4160', d: 'm 452.43161,51.136693 41.43076,3.79949 -22.13044,20.70223 z', fill: '#050507'},
  {id: 'path4166', d: 'm 451.92654,51.389233 42.44091,3.54695 -29.95913,-18.18864 z', fill: '#4d4b4c'},
  {id: 'path4168', d: 'm 452.68415,50.884153 -33.69934,-13.12056 46.18112,-1.26859 z', fill: '#3c3a3b'},
  {id: 'path4174', d: 'm 452.43161,51.136693 -33.57306,14.15356 52.87338,10.34816 z', fill: '#c0c0b4'},
  {id: 'path4176', d: 'm 484.35602,121.61278 -66.02049,-56.827607 53.3964,10.34817 z', fill: '#a3a494'},
  {id: 'path4178', d: 'm 483.99888,119.82707 12.13633,-25.494927 -25.16089,-19.1988 z', fill: '#b2b0b7'},
  {id: 'path4213', d: 'm 464.88829,67.565263 6.26487,3.42068 -6.62908,4.43955 z', fill: '#151515'},
  {id: 'path4215', d: 'm 471.95935,76.025293 -0.80619,-5.03935 -7.00789,4.18701 z', fill: '#151515'},
  {id: 'path4217', d: 'm 471.95935,76.025293 -1.43754,4.93591 -7.13415,-6.4196 z', fill: '#151515'},
  {id: 'path4219', d: 'm 465.6459,82.970083 4.74964,-2.26142 -6.25027,-5.53571 z', fill: '#151515'},
  {id: 'path4221', d: 'm 465.6459,82.970083 -5.35188,-1.75635 4.4826,-6.67213 z', fill: '#151515'},
  {id: 'path4223', d: 'm 456.80707,76.530363 3.73949,4.80964 4.23006,-6.7984 z', fill: '#151515'},
  {id: 'path4225', d: 'm 456.80707,76.530363 2.22426,-6.0495 6.75544,4.94463 z', fill: '#151515'},
  {id: 'path4227', d: 'm 464.88829,67.565253 -5.85696,2.91561 5.74529,5.0709 z', fill: '#151515'},
  {id: 'path4229', d: 'm 452.68415,50.884153 -32.60252,-12.84636 -1.65809,28.18301 z', fill: '#060608'},
  {id: 'path4231', d: 'm 374.82701,64.812723 45.7993,-27.80675 -0.26912,29.68029 z', fill: '#3e3c3d'},
  {id: 'path4233', d: 'm 374.82701,64.812723 75.7993,64.336107 -31.53181,-63.725257 z', fill: '#060606'},
  {id: 'path4235', d: 'm 484.82701,120.88416 -34.2007,8.26467 -32.7945,-64.735407 z', fill: '#3e3c3d'},
  {id: 'path4237', d: 'm 484.82701,120.88416 -35.46339,7.50706 43.30231,38.10379 z', fill: '#060606'},
  {id: 'path4387', d: 'm 374.82701,64.812723 75.7993,64.336107 -93.65619,-17.25823 z', fill: '#ebc26b'},
  {id: 'path4389', d: 'm 388.46407,148.65539 62.16224,-19.50656 -93.65619,-17.25823 z', fill: '#f2d392'},
  {id: 'path4391', d: 'm 391.24199,149.413 -74.4609,-1.07127 40.18903,-36.45113 z', fill: '#cbcbcb'},
  {id: 'path4399', d: 'm 442.85003,197.52194 40.81199,24.66261 9.00391,-55.68954 z', fill: '#dda95d'},
  {id: 'path4401', d: 'm 444.11272,198.02702 4.37073,-71.02104 44.18248,39.48903 z', fill: '#eec16e'},
  {id: 'path4403', d: 'm 444.11272,198.02702 4.37073,-71.02104 -51.40925,60.9176 z', fill: '#e6b767'},
  {id: 'path4405', d: 'm 389.827,148.74131 58.65645,-21.73533 -51.40925,60.9176 z', fill: '#ecc171'},
  {id: 'path4407', d: 'm 389.827,148.74131 58.65645,-21.73533 -92.96036,-15.51097 z', fill: '#f2d392'},
  {id: 'path4409', d: 'm 389.827,148.74131 -72.05784,-1.73533 81.2387,42.85125 z', fill: '#bfbfbf'},
  {id: 'path4514', d: 'm 295.88281,209.35046 21.88635,-62.34448 -70.78926,73.6609 z', fill: '#b2b1b7'},
  {id: 'path4516', d: 'm 295.88281,209.35046 21.88635,-62.34448 34.26661,56.48831 z', fill: '#bfbfbf'},
  {id: 'path4518', d: 'm 397.90822,188.13726 -80.13906,-41.13128 34.26661,56.48831 z', fill: '#b2b1b7'},
  {id: 'path4520', d: 'm 397.90822,188.13726 -28.74384,48.18057 -17.12861,-32.82354 z', fill: '#6c677a'},
  {id: 'path4522', d: 'm 398.4133,187.12711 -30.67749,49.905 76.22385,-39.59873 z', fill: '#ddaa5e'},
  {id: 'path4524', d: 'm 413.06051,230.56367 -41.75327,4.32559 72.90495,-37.70842 z', fill: '#d19858'},
  {id: 'path4526', d: 'm 413.06051,230.56367 70.87874,-8.30132 -40.48467,-25.33405 z', fill: '#dea44a'},
  {id: 'path4528', d: 'm 411.81051,230.3851 72.12874,-8.12275 -51.59635,22.14312 z', fill: '#e1b156'},
  {id: 'path4548', d: 'm 443.36509,267.93931 40.57416,-45.67696 -51.59635,22.14312 z', fill: '#efc472'},
  {id: 'path4550', d: 'm 443.36509,267.93931 -66.32869,-1.94453 55.3065,-21.58931 z', fill: '#deaa5e'},
  {id: 'path4490', d: 'm 195.48234,305.86569 -24.85604,5.426 54.92503,-53.48195 z', fill: '#a4a1a4'},
  {id: 'path4701', d: 'm 223.33949,260.50855 -52.71319,50.78314 76.3536,-90.62481 z', fill: '#cccbcc'},
  {id: 'path4488', d: 'm 194.45424,306.13617 69.74348,-39.84448 -41.14639,-5.62481 z', fill: '#c3c3c6'},
  {id: 'path4703', d: 'm 221.95424,261.49332 42.24348,4.79837 -17.21782,-45.62481 z', fill: '#b2b1b7'},
  {id: 'path4705', d: 'm 295.88281,208.81474 -33.20032,57.72949 -15.70259,-45.87735 z', fill: '#cbcbcb'},
  {id: 'path4707', d: 'm 295.88281,208.63617 -33.76668,58.97948 49.86377,-34.80592 z', fill: '#adaea3'},
  {id: 'path4718', d: 'm 295.52567,208.63617 58.3149,-5.20163 -43.28924,30.80376 z', fill: '#a3a590'},
  {id: 'path4720', d: 'm 369.45424,234.35045 -16.6851,-30.20162 -44.00353,30.44661 z', fill: '#8a8893'},
  {id: 'path4722', d: 'm 369.45424,234.35045 -107.57796,33.01267 48.67505,-34.37482 z', fill: '#95939d'},
  {id: 'path4724', d: 'm 369.45424,234.35045 -107.9351,32.8341 47.42504,0.62519 z', fill: '#a1a0a4'},
  {id: 'path4726', d: 'm 369.45424,234.35045 -25.97082,33.72695 -35.96781,-0.62479 z', fill: '#ddba65'},
  {id: 'path4728', d: 'm 369.45424,234.35045 -25.61367,33.19124 35.46075,0.62521 z', fill: '#dbaa60'},
  {id: 'path4730', d: 'm 369.27567,234.17188 44.29441,-3.59448 -35.8759,35.0895 z', fill: '#deba66'},
  {id: 'path4732', d: 'm 433.02567,244.35045 -20.97082,-13.77305 -34.36067,35.0895 z', fill: '#eec16e'},
  {id: 'path4791', d: 'm 38.508233,405.87079 132.118067,-94.5791 -132.242894,85.64681 z', fill: '#a8a1b4'},
  {id: 'path4793', d: 'm 38.508233,405.87079 132.118067,-94.5791 25.59344,-6.27707 z', fill: '#b1b0b5'},
  {id: 'path4795', d: 'm 38.508233,405.87079 107.874407,-57.20345 50.84725,-44.66287 z', fill: '#8e8d93'},
  {id: 'path4806', d: 'm 225.38644,305.36061 -79.0038,43.30673 49.58456,-43.65272 z', fill: '#746f81'},
  {id: 'path4808', d: 'm 225.38644,305.36061 37.16374,-38.51563 -68.09821,38.16964 z', fill: '#bbbcae'},
  {id: 'path4810', d: 'm 225.38644,305.36061 37.16374,-38.51563 -6.22637,32.10873 z', fill: '#8a898f'},
  {id: 'path5485', d: 'm 277.47927,304.1001 -15.28623,-37.79083 -6.62684,32.64444 z', fill: '#999687'},
  {id: 'path4812', d: 'm 305.69356,311.42153 -43.50052,-45.11226 14.9803,37.64444 z', fill: '#a7a598'},
  {id: 'path4492', d: 'm 305.69356,311.42153 -2.2322,-24.37349 -42.03294,-21.22015 z', fill: '#cab653'},
  {id: 'path4814', d: 'm 305.69356,311.42153 -4.75758,-26.3938 51.57949,30.05779 z', fill: '#b0a25f'},
  {id: 'path4816', d: 'm 310.87957,264.9672 -48.32939,1.87778 40.55447,22.03784 z', fill: '#d19858'},
  {id: 'path4836', d: 'm 309.97402,265.2937 40.9645,50.0386 -49.63228,-27.59487 z', fill: '#ddba63'},
  {id: 'path4838', d: 'm 310.15259,266.05132 40.78593,49.28098 -6.44826,-48.37697 z', fill: '#e1a95e'},
  {id: 'path4840', d: 'm 379.73056,266.02067 -28.79204,49.31163 -6.98397,-48.1984 z', fill: '#e5b767'},
  {id: 'path4851', d: 'm 379.73056,265.66353 -28.79204,49.66877 27.86629,-8.29737 z', fill: '#aba067'},
  {id: 'path4853', d: 'm 378.65914,266.02067 27.83777,31.12889 -27.6921,9.88537 z', fill: '#cbb96e'},
  {id: 'path4855', d: 'm 377.23056,265.30639 29.26635,31.84317 37.67195,-29.7198 z', fill: '#edc269'},
  {id: 'path4895', d: 'm 365.83262,315.17767 -14.8941,0.15463 56.15056,-18.3989 z', fill: '#8a8894'},
  {id: 'path4897', d: 'm 365.83262,314.82053 -15.90425,-1.00346 49.91325,60.04998 z', fill: '#8a8894'},
  {id: 'path4921', d: 'm 365.83262,315.17767 39.21304,48.01177 -5.20404,10.67761 z', fill: '#b2b1b9'},
  {id: 'path4923', d: 'm 452.26119,375.17767 -48.28696,-12.88109 -4.13261,11.57047 z', fill: '#6d6776'},
  {id: 'path4925', d: 'm 373.68976,378.7491 18.32018,-13.95251 7.83168,9.07046 z', fill: '#6d6776'},
  {id: 'path4927', d: 'm 309.40405,317.32053 42.03955,-2.99838 -42.49484,-2.59796 z', fill: '#8a8894'},
  {id: 'path4929', d: 'm 309.22548,316.60624 15.17987,-0.78151 1.15055,50.00664 z', fill: '#8a8894'},
  {id: 'path4931', d: 'm 309.40405,317.32053 3.32019,58.54749 12.83166,-10.03669 z', fill: '#b2b1b7'},
  {id: 'path4933', d: 'm 367.97548,376.60624 -55.25124,-0.73822 12.83166,-10.03669 z', fill: '#6f6679'},
  {id: 'path4935', d: 'm 289.22548,379.9991 23.49876,-4.13108 -0.5612,-12.00098 z', fill: '#6f6679'},
  {id: 'path4604', d: 'm 52.987578,37.012422 0,-14.012422 14.012422,14.012422 z', fill: '#eec16e'},
  {id: 'path5200', d: 'm 67,23 0,14.1 -14.1,-14.1 z', fill: '#eec16e'},
],
[
  {id: '#path14437', d: 'm 439.66868,103.73835 37.57052,-12.003657 -25.65263,-23.5609 z', fill: '#393939'},
  {id: '#path14439', d: 'm 440.74012,104.09548 -30.64378,-29.860787 41.6688,-6.06091 z', fill: '#464b5e'},
  {id: '#path4158', d: 'm 410.75154,74.322373 23.00942,-28.19338 18.46594,22.17106 z', fill: '#5b6073'},
  {id: '#path4160', d: 'm 434.69933,46.490883 -31.71738,-5.68686 7.89251,33.83614 z', fill: '#777b87'},
  {id: '#path4166', d: 'm 403.3846,40.682503 -41.8189,5.42482 49.5613,28.78538 z', fill: '#595f6f'},
  {id: '#path4168', d: 'm 336.90579,72.058503 74.15738,1.82801 -49.68618,-28.54077 z', fill: '#686c77'},
  {id: '#path4174', d: 'm 337.08436,71.701363 73.97881,2.18515 -37.05927,13.88564 z', fill: '#343a48'},
  {id: '#path4176', d: 'm 406.31045,97.564853 4.75272,-23.67834 -39.21482,14.27342 z', fill: '#464d5a'},
  {id: '#path4178', d: 'm 405.65744,96.955173 5.40573,-23.06866 30.66428,29.395067 z', fill: '#5b6073'},
  {id: '#path4213', d: 'm 409.44552,65.936313 -7.34745,3.40452 9.02893,5.55187 z', fill: '#151515'},
  {id: '#path4215', d: 'm 400.60668,73.765003 1.74393,-4.67671 8.77639,5.80441 z', fill: '#151515'},
  {id: '#path4217', d: 'm 400.60668,73.259923 0.9863,7.19258 9.53402,-5.5598 z', fill: '#151515'},
  {id: '#path4219', d: 'm 408.56163,84.624143 -7.09491,-4.29791 9.66028,-5.5598 z', fill: '#151515'},
  {id: '#path4221', d: 'm 408.30909,84.497873 8.30992,-2.40387 -5.61828,-7.58011 z', fill: '#151515'},
  {id: '#path4223', d: 'm 409.44552,65.936313 7.42603,2.64691 -6.12336,6.94083 z', fill: '#151515'},
  {id: '#path4225', d: 'm 418.78943,74.648883 -1.91788,-6.06566 -5.74455,6.30948 z', fill: '#151515'},
  {id: '#path4227', d: 'm 418.78943,74.648883 -2.29669,7.69767 -5.36574,-7.45385 z', fill: '#151515'},
  {id: '#path4229', d: 'm 337.97722,70.987073 -33.34262,40.756577 29.01216,1.0285 z', fill: '#a22920'},
  {id: '#path4231', d: 'm 337.97722,70.987073 34.33596,46.649427 -40.80927,-4.50721 z', fill: '#d8503a'},
  {id: '#path4233', d: 'm 337.97722,71.344213 45.19509,19.57556 -11.18192,26.500227 z', fill: '#c63f2b'},
  {id: '#path4235', d: 'm 371.42599,117.52459 10.37005,-27.214497 59.26353,13.094037 z', fill: '#eb654a'},
  {id: '#path4237', d: 'm 369.93243,117.27206 71.57094,-13.91293 10.71481,46.55588 z', fill: '#d8503a'},
  {id: '#path4387', d: 'm 296.25549,143.7592 9.27197,-32.37269 -26.60841,30.81312 z', fill: '#6c6876'},
  {id: '#path4389', d: 'm 296.07692,143.7592 9.09339,-32.55126 26.60588,1.34884 z', fill: '#b2b1b9'},
  {id: '#path4391', d: 'm 295.00549,144.29491 76.23626,-27.55126 -39.64413,-4.0083 z', fill: '#8a8991'},
  {id: '#path4399', d: 'm 296.25549,143.7592 -59.29945,47.62731 41.96301,-49.18688 z', fill: '#b2b1b7'},
  {id: '#path4401', d: 'm 296.25549,143.7592 -59.29945,47.62731 35.53444,4.38454 z', fill: '#8a8895'},
  {id: '#path4403', d: 'm 296.25549,143.7592 76.77198,-28.08698 -100.53699,80.09883 z', fill: '#b2b1b7'},
  {id: '#path4405', d: 'm 351.96978,174.47348 19.98626,-58.44412 -99.46556,79.74169 z', fill: '#8a8895'},
  {id: '#path4407', d: 'm 351.96978,174.47348 19.27198,-58.44412 31.963,53.31311 z', fill: '#a22920'},
  {id: '#path4409', d: 'm 402.86264,169.65205 -31.97803,-53.26555 81.24872,33.31311 z', fill: '#c63f2b'},
  {id: '#path4514', d: 'm 402.86264,169.65205 48.89545,-21.4432 0.37524,50.06219 z', fill: '#d8503a'},
  {id: '#path4516', d: 'm 452.14835,197.86634 -49.31883,-29.30035 38.54928,74.84321 z', fill: '#c63f2b'},
  {id: '#path4518', d: 'm 388.93407,205.36634 13.55678,-37.79563 38.53081,74.05278 z', fill: '#d8503a'},
  {id: '#path4520', d: 'm 403.93407,168.22348 -16.08608,40.41866 -38.01055,-34.96936 z', fill: '#b23227'},
  {id: '#path4522', d: 'm 348.3144,223.69521 40.24788,-17.91021 -36.93912,-32.46936 z', fill: '#a82822'},
  {id: '#path4524', d: 'm 259.38583,267.26664 89.53361,-42.91022 3.41801,-51.39792 z', fill: '#3e3c3e'},
  {id: '#path4526', d: 'm 260.10012,266.55235 3.68444,-37.26591 89.26717,-56.68508 z', fill: '#1c202c'},
  {id: '#path4528', d: 'm 352.95726,172.98092 -81.53783,22.80408 -8.79843,35.55239 z', fill: '#b2b1b7'},
  {id: '#path4548', d: 'm 264.31638,230.30707 7.10305,-34.52207 -51.22484,61.81636 z', fill: '#9d9ca3'},
  {id: '#path4550', d: 'm 272.60012,195.48092 -93.41021,73.8755 41.34015,-11.69007 z', fill: '#8a8991'},
  {id: '#path4490', d: 'm 272.60012,195.48092 -35.46641,-4.33878 -57.90966,78.162 z', fill: '#6c6877'},
  {id: '#path4701', d: 'm 417.21834,273.55164 24.66845,-31.73472 -53.39306,-37.064 z', fill: '#c3402b'},
  {id: '#path4488', d: 'm 417.72342,273.80417 -41.24401,-7.23852 12.26685,-61.30765 z', fill: '#b23227'},
  {id: '#path4703', d: 'm 348.02289,223.04401 28.70906,43.52165 12.51939,-62.06528 z', fill: '#c63f2b'},
  {id: '#path4705', d: 'm 348.27543,223.04401 28.91827,42.91197 -36.17715,22.89214 z', fill: '#a22920'},
  {id: '#path4707', d: 'm 341.4569,289.209 6.99078,-66.0799 -60.96921,59.91065 z', fill: '#9e989a'},
  {id: '#path4718', d: 'm 259.12947,266.98564 89.31821,-43.85654 -60.96921,59.91065 z', fill: '#1c202c'},
  {id: '#path4720', d: 'm 260.16261,266.06345 -27.73454,27.27126 55.6754,-10.47353 z', fill: '#423c3e'},
  {id: '#path4722', d: 'm 260.24422,266.11576 -25.76258,27.04038 -90.44483,28.77449 z', fill: '#1d1f2e'},
  {id: '#path4724', d: 'm 260.23656,266.34663 -103.21279,33.55408 -12.67446,22.38706 z', fill: '#3e3c3d'},
  {id: '#path4726', d: 'm 260.19192,266.37596 -103.39136,33.74796 28.6525,-17.08417 z', fill: '#1b1e2e'},
  {id: '#path4728', d: 'm 260.68934,266.3683 -80.93714,2.72275 5.70086,13.9487 z', fill: '#3e3c3d'},
  {id: '#path4730', d: 'm 260.71866,266.59151 -81.72407,2.87835 41.81381,-12.44154 z', fill: '#2d2f2d'},
  {id: '#path4732', d: 'm 260.6052,267.5625 4.69459,-38.27606 -45.08312,27.9152 z', fill: '#3c3c3c'},
  {id: '#path4791', d: 'm 417.72342,273.80417 -41.9583,-9.02423 17.26685,36.19235 z', fill: '#a22920'},
  {id: '#path4793', d: 'm 376.71454,265.64861 16.43239,35.00969 -40.73028,16.58103 z', fill: '#b03327'},
  {id: '#path4795', d: 'm 353.2285,316.91385 23.50345,-51.10581 -35.12855,22.51631 z', fill: '#b93c38'},
  {id: '#path4806', d: 'm 352.97596,316.91385 -30.78227,6.08037 19.66225,-34.9224 z', fill: '#bfbfbf'},
  {id: '#path4808', d: 'm 275.38021,325.70935 48.07617,-2.46259 18.39956,-35.17494 z', fill: '#acaaab'},
  {id: '#path4810', d: 'm 278.05879,324.99507 9.53717,-42.15441 54.25998,5.23116 z', fill: '#918b8d'},
  {id: '#path5485', d: 'm 259.53685,324.48999 28.81672,-42.40694 -10.09392,43.82617 z', fill: '#867d7e'},
  {id: '#path4812', d: 'm 259.71542,324.66856 29.39577,-42.33298 -55.31582,10.7165 z', fill: '#918b8d'},
  {id: '#path4492', d: 'm 263.64399,325.73999 -35.33374,3.35066 5.48512,-36.03857 z', fill: '#9a9a9a'},
  {id: '#path4814', d: 'm 228.64399,328.23999 -31.40517,4.06495 36.55655,-39.25286 z', fill: '#bfbfbf'},
  {id: '#path4816', d: 'm 190.07256,307.34713 7.16626,24.95781 36.55655,-39.25286 z', fill: '#867d7f'},
  {id: '#path4836', d: 'm 190.07256,307.34713 7.16626,24.95781 -119.514876,94.49714 z', fill: '#1c202c'},
  {id: '#path4838', d: 'm 100.9266,430.08066 96.31222,-97.77572 -119.514876,94.49714 z', fill: '#3e3c3d'},
  {id: '#path4840', d: 'm 100.9266,430.08066 96.31222,-97.77572 -89.46285,114.44765 z', fill: '#21202f'},
  {id: '#path4851', d: 'm 201.43678,345.22784 -4.19796,-12.9229 -89.46285,114.44765 z', fill: '#bcbbb9'},
  {id: '#path4853', d: 'm 201.43678,345.22784 -4.19796,-12.9229 32.08721,-4.09733 z', fill: '#acaaab'},
  {id: '#path4855', d: 'm 201.43678,345.22784 26.35915,-16.45843 34.86513,-5.10749 z', fill: '#868385'},
  {id: '#path4895', d: 'm 277.70164,325.35221 43.25474,-1.92688 3.93528,7.6822 z', fill: '#3e3c3d'},
  {id: '#path4897', d: 'm 323.95164,329.81649 -16.92383,-1.7483 33.39956,50.18219 z', fill: '#3e3c3d'},
  {id: '#path4921', d: 'm 340.38021,378.38792 6.6476,-14.2483 -23.74329,-35.17495 z', fill: '#4e4a4b'},
  {id: '#path4923', d: 'm 339.48735,378.38792 55.04046,5.03741 -47.85044,-19.99637 z', fill: '#4e4a4b'},
  {id: '#path4925', d: 'm 341.0945,378.38792 -20.67383,6.28741 13.7567,-16.96066 z', fill: '#3e3c3d'},
  {id: '#path4927', d: 'm 239.8445,330.88792 20.57617,-6.39116 23.93528,1.4322 z', fill: '#191e31'},
  {id: '#path4929', d: 'm 261.0945,327.13792 30.57617,39.68027 -7.67186,-41.24637 z', fill: '#191e31'},
  {id: '#path4931', d: 'm 299.30879,358.03078 -7.81669,8.43027 -7.49329,-40.88923 z', fill: '#4c4845'},
  {id: '#path4933', d: 'm 299.30879,358.03078 -8.70955,8.43027 35.721,1.61077 z', fill: '#4c4845'},
  {id: '#path4935', d: 'm 286.0945,358.92364 5.3976,7.53741 -31.60043,5.71791 z', fill: '#191e31'},
  {id: '#path4604', d: 'm 82.987578,22.987654 0,14.024692 14.012422,-14.024692 z', fill: '#c63f2b'},
  {id: '#path5200', d: 'm 82.9,37.012346 14.1,0.08765 0,-14.2 z', fill: '#c63f2b'},
],
[
  {id: '#path14437', d: 'm 537.04092,136.75167 -0.0694,-35.03304 37.21961,17.59542 z', fill: '#1f1e2c'},
  {id: '#path14439', d: 'm 537.74432,137.10337 1.68907,-35.38474 -53.4163,5.88627 z', fill: '#554c4d'},
  {id: '#path4158', d: 'm 540.64327,102.67931 -12.48931,-17.885005 -43.13163,23.059285 z', fill: '#6c6877'},
  {id: '#path4160', d: 'm 488.15445,74.852251 41.07961,10.336422 -43.21697,22.913597 z', fill: '#8a8895'},
  {id: '#path4166', d: 'm 488.75119,74.830921 -49.20095,14.226464 47.21293,19.790965 z', fill: '#b5afb6'},
  {id: '#path4168', d: 'm 470.21769,133.23465 -29.424,-44.134605 46.96424,18.504855 z', fill: '#774220'},
  {id: '#path4174', d: 'm 468.81089,133.93805 48.50799,23.74375 -30.05834,-50.82298 z', fill: '#8d5429'},
  {id: '#path4176', d: 'm 538.09604,137.10336 -21.43789,19.87502 -30.39237,-49.62217 z', fill: '#6c6877'},
  {id: '#path4178', d: 'm 538.09604,137.10336 -22.22663,19.48066 16.11753,22.51924 z', fill: '#1f1e2c'},
  {id: '#path4213', d: 'm 509.08275,108.9392 6.60071,2.41618 -7.1599,6.9432 z', fill: '#020202'},
  {id: '#path4215', d: 'm 518.7195,117.64336 -3.03604,-6.35016 -7.1599,7.00538 z', fill: '#020202'},
  {id: '#path4217', d: 'm 518.7195,117.58118 -2.04128,7.51433 -8.15466,-6.79693 z', fill: '#020202'},
  {id: '#path4219', d: 'm 508.77189,129.02094 8.03068,-3.92543 -8.27901,-6.79693 z', fill: '#020202'},
  {id: '#path4221', d: 'm 508.77189,129.02094 -6.7664,-3.3037 6.51807,-7.41866 z', fill: '#020202'},
  {id: '#path4223', d: 'm 498.82427,119.07332 3.18122,6.64392 6.51807,-7.41866 z', fill: '#020202'},
  {id: '#path4225', d: 'm 498.82427,119.07332 3.42992,-7.53142 6.26937,6.75668 z', fill: '#020202'},
  {id: '#path4227', d: 'm 509.14492,108.87702 -6.89073,2.66488 6.26937,6.75668 z', fill: '#020202'},
  {id: '#path4229', d: 'm 518.20082,225.13974 -2.33141,-69.96252 16.11753,23.92604 z', fill: '#444140'},
  {id: '#path4231', d: 'm 518.44951,224.14498 -1.8767,-70.02287 -41.53595,117.74265 z', fill: '#1c202c'},
  {id: '#path4233', d: 'm 474.9287,224.14498 40.94071,-67.56096 -41.08124,116.27549 z', fill: '#4f4d5b'},
  {id: '#path4235', d: 'm 475.17739,225.63713 40.69202,-69.05311 -37.59957,11.07949 z', fill: '#6c6877'},
  {id: '#path4237', d: 'm 478.65907,168.18966 37.21034,-11.60564 -47.04981,-23.48848 z', fill: '#8a8895'},
  {id: '#path4387', d: 'm 412.45389,125.16142 28.35746,-36.310047 30.82186,45.299277 z', fill: '#6b3c1e'},
  {id: '#path4389', d: 'm 430.12429,182.96111 -18.71016,-59.7887 58.81228,9.21973 z', fill: '#8e5327'},
  {id: '#path4391', d: 'm 429.77259,183.31281 49.27118,-13.92185 -8.81736,-36.99882 z', fill: '#b2b1b7'},
  {id: '#path4399', d: 'm 430.82769,182.60941 -16.95166,-59.7887 -20.67219,43.68645 z', fill: '#9b5c30'},
  {id: '#path4401', d: 'm 386.44819,128.53579 27.42784,-5.71508 -19.41106,44.49285 z', fill: '#af6630'},
  {id: '#path4403', d: 'm 340.44047,137.23995 46.32832,-8.69936 8.19356,39.02166 z', fill: '#8e5327'},
  {id: '#path4405', d: 'm 429.77259,183.31281 49.41687,-15.32865 -3.33583,59.0156 z', fill: '#8a8895'},
  {id: '#path4407', d: 'm 428.48647,182.11202 2.62293,47.62588 45.32695,-3.64756 z', fill: '#c6c5cd'},
  {id: '#path4409', d: 'm 404.55918,279.16515 26.55022,-49.42725 44.82956,-5.1397 z', fill: '#898890'},
  {id: '#path4514', d: 'm 404.3105,278.91645 71.06578,-53.90366 -0.32907,47.13274 z', fill: '#6c6877'},
  {id: '#path4516', d: 'm 475.43592,271.70443 -44.24118,29.7275 -27.02428,-22.82045 z', fill: '#8a8991'},
  {id: '#path4518', d: 'm 341.14388,137.23995 -32.42651,8.08963 91.16879,22.58438 z', fill: '#a6602f'},
  {id: '#path4520', d: 'm 331.99964,183.66451 65.14043,-16.77815 -88.69623,-22.18468 z', fill: '#8e5327'},
  {id: '#path4522', d: 'm 347.18919,199.30146 -17.01804,-16.33985 65.4946,-16.45445 z', fill: '#a6602f'},
  {id: '#path4524', d: 'm 368.57656,225.16526 -23.48399,-25.79008 50.57318,-32.86802 z', fill: '#8a5027'},
  {id: '#path4526', d: 'm 367.87316,223.75845 64.29136,-41.85194 -37.20218,-15.75105 z', fill: '#6b3c1e'},
  {id: '#path4528', d: 'm 367.87316,223.75845 63.23626,-42.20364 -53.02874,58.80961 z', fill: '#924f24'},
  {id: '#path4548', d: 'm 431.88279,229.03397 -1.3311,-48.20756 -53.35027,60.06557 z', fill: '#b2b1b7'},
  {id: '#path4550', d: 'm 431.88279,229.03397 -27.50267,50.99719 -26.29944,-39.31503 z', fill: '#c6c5cd'},
  {id: '#path4490', d: 'm 368.22486,321.1797 37.91376,-42.90705 26.45575,22.58439 z', fill: '#6c6877'},
  {id: '#path4701', d: 'm 347.12279,284.95446 57.25733,-4.9233 -35.44368,41.57626 z', fill: '#b2b1b7'},
  {id: '#path4488', d: 'm 348.17789,286.71297 -7.4557,-26.37708 64.08779,19.77079 z', fill: '#c4c3c9'},
  {id: '#path4703', d: 'm 377.01739,238.88161 -35.2401,22.50938 63.38439,19.06739 z', fill: '#b2b1b7'},
  {id: '#path4705', d: 'm 348.88129,285.65787 -33.48158,21.80598 53.53673,14.14357 z', fill: '#8a8991'},
  {id: '#path4707', d: 'm 348.88129,285.65787 -31.72308,21.80598 -12.23139,-46.34904 z', fill: '#b2b1b7'},
  {id: '#path4718', d: 'm 348.88129,285.65787 -6.7523,-24.61858 -39.68908,-1.27094 z', fill: '#8a8895'},
  {id: '#path4720', d: 'm 379.4793,238.88159 -37.35031,22.5094 -37.20217,-0.62788 z', fill: '#706671'},
  {id: '#path4722', d: 'm 378.07248,239.93669 -51.29772,-2.04934 -21.84805,22.87571 z', fill: '#8e5226'},
  {id: '#path4724', d: 'm 380.18271,241.3435 -54.90002,-2.17002 43.65375,-15.339 z', fill: '#b3afb7'},
  {id: '#path4726', d: 'm 348.23734,199.42982 -20.8798,40.50741 41.5789,-16.10275 z', fill: '#7c7a89'},
  {id: '#path4728', d: 'm 330.59282,181.20259 -3.23528,58.73464 21.1863,-40.47441 z', fill: '#8a8895'},
  {id: '#path4730', d: 'm 331.64792,181.90598 -4.29038,57.8554 -26.65114,-56.02084 z', fill: '#b2b0b7'},
  {id: '#path4732', d: 'm 331.64792,181.90599 -22.22714,-36.92808 -8.71438,38.76263 z', fill: '#8a8895'},
  {id: '#path4791', d: 'm 269.7485,156.23179 39.67228,-11.25388 -7.65927,38.76263 z', fill: '#b2b1b7'},
  {id: '#path4793', d: 'm 305.62204,260.68708 -12.02781,37.63254 23.99383,9.57145 z', fill: '#c3c2ca'},
  {id: '#path4795', d: 'm 305.97374,259.98368 -44.56928,22.95589 32.97131,16.15897 z', fill: '#8a8895'},
  {id: '#path4806', d: 'm 307.46588,259.98368 -76.47448,9.84814 30.80594,13.35054 z', fill: '#757381'},
  {id: '#path4808', d: 'm 306.47112,259.98368 -75.47972,10.19984 -24.18924,-38.96332 z', fill: '#b2b1b7'},
  {id: '#path4810', d: 'm 305.97374,259.98368 -58.80407,-30.2458 -40.36751,1.83402 z', fill: '#693d1f'},
  {id: '#path5485', d: 'm 305.97374,259.98368 -60.21088,-29.8941 16.2564,-38.61163 z', fill: '#8e5327'},
  {id: '#path4812', d: 'm 305.97374,260.72974 -4.64207,-77.06473 -40.36751,7.81294 z', fill: '#a6602f'},
  {id: '#path4492', d: 'm 305.47636,261.08146 -4.14469,-77.41645 26.45573,55.64432 z', fill: '#6d3c1c'},
  {id: '#path4814', d: 'm 270.45191,156.23181 31.23147,27.4332 -40.36752,9.21975 z', fill: '#8b5528'},
  {id: '#path4816', d: 'm 270.45191,156.23181 -24.68903,7.38622 15.55298,29.26673 z', fill: '#6b3c1e'},
  {id: '#path4836', d: 'm 175.84427,179.0924 70.27031,-14.77096 15.20128,28.56332 z', fill: '#a6602f'},
  {id: '#path4838', d: 'm 175.84427,179.0924 70.27031,52.75568 15.55298,-38.96332 z', fill: '#6b3c1e'},
  {id: '#path4840', d: 'm 175.84427,179.0924 70.62201,51.34887 -38.96071,1.13063 z', fill: '#a75f2c'},
  {id: '#path4851', d: 'm 175.84427,179.0924 -113.420747,11.46095 145.785457,41.72196 z', fill: '#6a3b1d'},
  {id: '#path4853', d: 'm 178.33118,179.0924 -154.140081,0.35219 40.77225,11.89982 z', fill: '#512d16'},
  {id: '#path4855', d: 'm 175.84427,179.0924 -141.453836,-15.82606 -9.769501,16.60549 z', fill: '#9e5c2a'},
  {id: '#path4895', d: 'm 372.79697,332.08244 -57.39726,-24.61859 53.18503,13.44016 z', fill: '#8a8991'},
  {id: '#path4897', d: 'm 372.26942,330.32393 21.96135,49.21797 -44.28619,-57.93448 z', fill: '#8a8991'},
  {id: '#path4921', d: 'm 395.6015,379.74313 -14.94564,2.78305 -30.71124,-60.91876 z', fill: '#a4a3a8'},
  {id: '#path4923', d: 'm 394.95843,379.74314 -9.08012,-14.87396 55.30258,23.91318 z', fill: '#88878d'},
  {id: '#path4925', d: 'm 369.27996,387.29953 8.72257,-10.55054 3.94686,5.55706 z', fill: '#a4a3a8'},
  {id: '#path4927', d: 'm 317.38848,316.9791 -44.36878,-28.50712 43.93994,19.03203 z', fill: '#514f5d'},
  {id: '#path4929', d: 'm 317.53417,313.75862 -21.81081,-11.53583 15.20737,78.89356 z', fill: '#514f5d'},
  {id: '#path4931', d: 'm 317.03679,313.50992 8.52942,55.59808 -14.63548,12.00835 z', fill: '#898794'},
  {id: '#path4933', d: 'm 364.28795,389.85786 -38.72174,-20.74986 -15.13286,11.51097 z', fill: '#898794'},
  {id: '#path4935', d: 'm 288.6861,383.39191 19.47178,-16.77082 3.76761,13.99788 z', fill: '#504c5d'},
  {id: '#path4604', d: 'm 112.98758,37.012422 0,-14.012422 14.01242,14.012422 z', fill: '#8d5429'},
  {id: '#path5200', d: 'm 127,23 0,14.1 -14.1,-14.1 z', fill: '#8d5429'},
],
[
  {id: '#path14437', d: 'm 509.45378,78.954395 -25.43143,-0.601737 6.27334,-22.048228 z', fill: '#6b7681'},
  {id: '#path14439', d: 'm 488.04051,76.862306 -10.19802,-18.476833 -0.0711,36.25707 z', fill: '#a8b4c0'},
  {id: '#path4158', d: 'm 487.8033,77.50262 -9.96081,-19.117147 14.02508,-19.911 z', fill: '#dbe0f6'},
  {id: '#path4160', d: 'm 463.05801,22.600693 14.78448,35.78478 14.82865,-19.55386 z', fill: '#8192ac'},
  {id: '#path4166', d: 'm 463.59372,22.600693 14.24877,35.78478 -62.31421,-28.48243 z', fill: '#99aac6'},
  {id: '#path4168', d: 'm 420.66224,57.450953 57.18025,0.93452 -61.68286,-28.73497 z', fill: '#8192ae'},
  {id: '#path4174', d: 'm 420.66224,57.450953 -4.81786,-27.72856 -42.23743,56.87546 z', fill: '#a7b9cf'},
  {id: '#path4176', d: 'm 420.66224,57.450953 57.55906,0.55571 -38.7019,29.60134 z', fill: '#a7b9cf'},
  {id: '#path4178', d: 'm 478.11467,94.574063 0.10663,-36.5674 -38.7019,29.60134 z', fill: '#8498b3'},
  {id: '#path4213', d: 'm 483.54424,53.789153 -6.08055,4.47005 0.82031,-7.26923 z', fill: '#151515'},
  {id: '#path4215', d: 'm 483.47793,53.678203 -6.72853,4.581 7.59552,-0.57697 z', fill: '#151515'},
  {id: '#path4217', d: 'm 483.32103,63.014453 -6.48234,-5.11239 7.59552,-0.3984 z', fill: '#151515'},
  {id: '#path4219', d: 'm 483.54424,62.880523 -6.08055,-4.62132 0.0955,7.14624 z', fill: '#151515'},
  {id: '#path4221', d: 'm 471.75853,62.612673 5.70516,-4.35347 0.45266,7.14624 z', fill: '#151515'},
  {id: '#path4223', d: 'm 471.80317,63.014453 5.66052,-4.75525 -7.67234,-0.44304 z', fill: '#151515'},
  {id: '#path4225', d: 'm 473.23174,52.300173 4.85695,6.22689 -8.2527,-0.66626 z', fill: '#151515'},
  {id: '#path4227', d: 'm 473.00853,52.344813 4.45516,5.91439 0.94373,-7.31804 z', fill: '#151515'},
  {id: '#path4229', d: 'm 420.66224,57.450953 18.66819,30.60775 -65.72348,-1.46085 z', fill: '#7f92b0'},
  {id: '#path4231', d: 'm 360.05309,144.07153 79.52988,-57.022977 -65.47094,-1.20831 z', fill: '#59908d'},
  {id: '#path4233', d: 'm 475.71556,123.36341 -37.90036,-36.188587 40.59508,6.99918 z', fill: '#78849b'},
  {id: '#path4235', d: 'm 359.29548,143.81899 80.16122,-57.149247 -18.87765,57.019677 z', fill: '#7e9c9d'},
  {id: '#path4237', d: 'm 475.71556,123.36341 -37.26902,-36.567397 45.26704,75.563287 z', fill: '#548481'},
  {id: '#path4387', d: 'm 419.39956,143.06139 19.67833,-56.391647 44.63569,75.689557 z', fill: '#668f91'},
  {id: '#path4389', d: 'm 419.39956,143.06139 77.61841,82.53692 -13.30439,-63.23901 z', fill: '#615770'},
  {id: '#path4391', d: 'm 419.39956,143.06139 77.53547,81.46549 -56.79288,-13.59616 z', fill: '#766983'},
  {id: '#path4399', d: 'm 419.39956,143.06139 -10.67882,45.39406 32.84998,22.47527 z', fill: '#8291ae'},
  {id: '#path4401', d: 'm 419.39956,142.3471 -10.67882,46.86596 -67.15002,-10.42519 z', fill: '#a7b9cf'},
  {id: '#path4403', d: 'm 419.39956,142.3471 -59.60739,0.75121 -18.22145,35.68956 z', fill: '#8291ae'},
  {id: '#path4405', d: 'm 309.04242,193.41853 50.74975,-50.32022 -15.72145,34.97527 z', fill: '#726d84'},
  {id: '#path4407', d: 'm 374.39956,232.3471 34.32118,-43.89165 -67.15002,-9.66758 z', fill: '#99abc3'},
  {id: '#path4409', d: 'm 375.47099,233.06139 -67.82168,-39.24879 33.92141,-15.02473 z', fill: '#bdd0df'},
  {id: '#path4514', d: 'm 373.68527,231.98996 35.03547,-43.53451 -1.43574,54.61813 z', fill: '#a7b9cf'},
  {id: '#path4516', d: 'm 450.11384,275.20425 -41.3931,-86.7488 -1.79288,54.26099 z', fill: '#8192ae'},
  {id: '#path4518', d: 'm 448.68527,275.20425 -39.96453,-86.7488 32.84997,21.76099 z', fill: '#a7b8cf'},
  {id: '#path4520', d: 'm 447.97098,274.84711 45.74976,0.0369 -52.15003,-64.66758 z', fill: '#847a93'},
  {id: '#path4522', d: 'm 496.89955,223.77568 -3.17881,52.17976 -52.15003,-65.73901 z', fill: '#615770'},
  {id: '#path4524', d: 'm 407.61385,243.41853 -34.6074,-13.17736 -5.72145,63.18956 z', fill: '#98a9c5'},
  {id: '#path4526', d: 'm 407.971,241.27567 -9.60741,57.53692 -32.15002,-5.739 z', fill: '#8192ae'},
  {id: '#path4528', d: 'm 407.61386,241.27567 -11.03598,57.53692 52.84998,-24.66757 z', fill: '#a7b9cf'},
  {id: '#path4548', d: 'm 398.13688,396.21439 -1.559,-97.4018 52.49284,-26.81043 z', fill: '#8a9ebc'},
  {id: '#path4550', d: 'm 397.6318,396.71947 70.37466,-73.62116 -19.65003,-49.66758 z', fill: '#847a93'},
  {id: '#path4490', d: 'm 493.68528,274.1328 -25.67882,48.96551 -20.36431,-50.38186 z', fill: '#766983'},
  {id: '#path4701', d: 'm 344.7567,275.56139 29.46912,-45.11101 -7.04542,63.27621 z', fill: '#dee1f0'},
  {id: '#path4488', d: 'm 344.7567,276.27568 28.96404,-45.32022 -83.57859,39.97527 z', fill: '#f2f3f8'},
  {id: '#path4703', d: 'm 268.32813,245.56139 105.39261,-14.60593 -83.93573,40.33241 z', fill: '#a7b9cf'},
  {id: '#path4705', d: 'm 268.68527,246.27568 105.74976,-14.60593 -65.00717,-38.95331 z', fill: '#dee1f0'},
  {id: '#path4707', d: 'm 268.68527,245.20425 -63.66594,56.80469 86.19425,-31.07821 z', fill: '#dee1f0'},
  {id: '#path4718', d: 'm 248.68527,314.48997 -42.40325,-12.94278 85.2887,-30.97361 z', fill: '#bdd0df'},
  {id: '#path4720', d: 'm 248.68527,314.48997 42.17833,8.60834 0.70712,-52.52473 z', fill: '#a7b9cf'},
  {id: '#path4722', d: 'm 346.54241,275.91854 -56.3931,47.17977 1.77855,-53.9533 z', fill: '#dee1f0'},
  {id: '#path4724', d: 'm 346.54241,275.5614 -56.3931,47.89405 40.70713,30.68956 z', fill: '#a8b9cd'},
  {id: '#path4726', d: 'm 345.82812,276.27569 21.10691,17.5369 -36.43573,61.40385 z', fill: '#bdd0df'},
  {id: '#path4728', d: 'm 366.18527,366.27569 1.46405,-74.9631 -37.15002,63.90385 z', fill: '#eff4f8'},
  {id: '#path4730', d: 'm 365.11384,365.91855 1.82119,-74.24882 31.77856,104.97528 z', fill: '#847a93'},
  {id: '#path4732', d: 'm 397.97098,297.70427 -31.03595,-6.39168 31.42142,104.97528 z', fill: '#a7b9cf'},
  {id: '#path4791', d: 'm 365.82813,365.20426 -9.60738,45.0369 42.49284,-13.59615 z', fill: '#8291ae'},
  {id: '#path4793', d: 'm 366.18527,364.13284 -9.96452,46.10832 -52.8643,2.47528 z', fill: '#99abc3'},
  {id: '#path4795', d: 'm 366.18527,365.91855 -34.25023,-12.82025 -29.29288,60.33243 z', fill: '#8093ab'},
  {id: '#path4806', d: 'm 258.68527,407.34712 73.96405,-54.60596 -30.00716,60.68957 z', fill: '#847a93'},
  {id: '#path4808', d: 'm 258.32813,408.77569 73.96405,-54.9631 -120.36431,11.40385 z', fill: '#8291ae'},
  {id: '#path4810', d: 'm 259.7567,407.70426 -44.96452,10.0369 -3.36939,-53.1344 z', fill: '#605770'},
  {id: '#path5485', d: 'm 289.39956,322.70426 42.17833,31.46547 -119.65002,12.11814 z', fill: '#dee1f0'},
  {id: '#path4812', d: 'm 289.39956,322.70426 -42.10739,-8.53453 -35.3643,52.11814 z', fill: '#bdd0df'},
  {id: '#path4492', d: 'm 152.61385,346.63283 95.39261,-32.82024 -35.72145,52.47528 z', fill: '#f2f3f8'},
  {id: '#path4814', d: 'm 152.61385,346.98997 96.46404,-33.17738 -42.50717,-13.59615 z', fill: '#dee1f0'},
  {id: '#path4816', d: 'm 152.61385,346.63283 -86.541036,74.80974 146.212196,-55.1547 z', fill: '#dde1f0'},
  {id: '#path4836', d: 'm 61.246555,437.24995 -2.882951,-13.08022 154.531086,-58.80535 z', fill: '#becfe1'},
  {id: '#path4838', d: 'm 45.470994,461.27569 167.892606,-96.03453 -157.532545,72.60527 z', fill: '#4b5c6c'},
  {id: '#path4840', d: 'm 55.828137,484.13284 131.106893,-69.24882 25.3933,-48.89201 z', fill: '#4a5c72'},
  {id: '#path4851', d: 'm 216.18527,416.98998 -32.10738,-0.32025 27.49283,-49.66757 z', fill: '#687a92'},
  {id: '#path4853', d: 'm 45.828137,460.5614 167.535463,-95.32024 -157.150021,120.33243 z', fill: '#687a92'},
  {id: '#path4855', d: 'm 380.47098,432.34711 -24.25023,-22.10595 42.1357,-14.31044 z', fill: '#847a92'},
  {id: '#path4895', d: 'm 374.75669,427.70425 34.85692,33.96549 -25.00717,-38.41759 z', fill: '#b68892'},
  {id: '#path4897', d: 'm 375.47098,427.34711 33.40668,33.53437 -20.34265,-5.12932 z', fill: '#a75c68'},
  {id: '#path4921', d: 'm 408.81153,460.8229 31.15922,-17.54602 -41.61431,2.47528 z', fill: '#b68892'},
  {id: '#path4923', d: 'm 408.25415,460.86623 26.7166,7.41065 -18.93574,-11.63186 z', fill: '#a75c68'},
  {id: '#path4925', d: 'm 384.93526,447.52567 -17.28594,11.4655 21.24283,-3.23901 z', fill: '#a75c68'},
  {id: '#path4927', d: 'm 326.18527,411.27568 -7.64309,34.5012 -16.25717,-32.70329 z', fill: '#a75c68'},
  {id: '#path4929', d: 'm 301.36384,441.81139 17.35692,3.96549 -16.07861,-32.88186 z', fill: '#b58892'},
  {id: '#path4931', d: 'm 357.61384,432.70425 -38.1788,5.39406 1.95711,-6.45329 z', fill: '#a75c68'},
  {id: '#path4933', d: 'm 346.0067,456.45425 -27.91094,-10.85594 1.51068,-8.41757 z', fill: '#a75c68'},
  {id: '#path4935', d: 'm 303.14955,441.98996 -1.39308,-9.78451 -22.68575,7.65385 z', fill: '#b58892'},
  {id: '#path4604', d: 'm 142.98758,37.012346 14.01242,-14.024692 -14.01242,0 z', fill: '#59908d'},
  {id: '#path5200', d: 'm 142.9,37.012346 14.1,-14.112346 0,14.2 z', fill: '#59908d'},
],
[
  {id: '#path14437', d: 'm 518.19146,91.33282 -9.72168,-7.142449 -39.94487,4.695503 z', fill: '#040404'},
  {id: '#path14439', d: 'm 469.05399,88.753606 49.2036,2.513085 -49.95183,27.213119 z', fill: '#040404'},
  {id: '#path4158', d: 'm 469.80221,88.940659 -37.77691,6.441237 37.02869,24.033184 z', fill: '#484f61'},
  {id: '#path4160', d: 'm 469.05399,89.127712 -37.21575,6.815344 15.14327,-18.989419 z', fill: '#606873'},
  {id: '#path4166', d: 'm 432.76534,74.350371 -0.55298,21.405632 15.14326,-18.802366 z', fill: '#717e87'},
  {id: '#path4168', d: 'm 432.76534,74.163318 0.38229,21.031525 -32.18161,-9.075519 z', fill: '#82909a'},
  {id: '#path4174', d: 'm 396.74125,119.36641 38.08987,4.82193 -33.64596,-37.991531 z', fill: '#808e99'},
  {id: '#path4176', d: 'm 432.76535,95.113462 2.62693,29.823098 -34.61332,-39.191353 z', fill: '#606873'},
  {id: '#path4178', d: 'm 432.39124,94.926408 2.43988,29.636052 33.66171,-5.33443 z', fill: '#808e99'},
  {id: '#path4213', d: 'm 438.00289,95.394047 -5.50996,-4.501463 4.94878,-2.154502 z', fill: '#151515'},
  {id: '#path4215', d: 'm 438.00289,95.394047 -5.22938,-4.688516 -1.59812,5.04711 z', fill: '#151515'},
  {id: '#path4217', d: 'm 438.56405,95.206994 -5.04231,6.534766 -2.15931,-6.456758 z', fill: '#151515'},
  {id: '#path4219', d: 'm 438.00289,95.394047 -4.66821,6.347713 5.04231,0.46426 z', fill: '#151515'},
  {id: '#path4221', d: 'm 438.00289,95.394047 5.2457,5.880073 -5.43276,0.9319 z', fill: '#151515'},
  {id: '#path4223', d: 'm 437.62878,95.01994 5.33923,6.34771 2.33002,-5.427956 z', fill: '#151515'},
  {id: '#path4225', d: 'm 438.00289,95.394047 4.77807,-5.062623 2.33002,5.795324 z', fill: '#151515'},
  {id: '#path4227', d: 'm 437.81583,95.861685 4.96513,-5.530261 -5.52628,-1.873928 z', fill: '#151515'},
  {id: '#path4229', d: 'm 397.27032,120.16002 -26.19227,8.52542 30.10712,-42.488631 z', fill: '#606873'},
  {id: '#path4231', d: 'm 460.16748,156.03411 -24.80729,-32.00073 33.6617,-5.06989 z', fill: '#606873'},
  {id: '#path4233', d: 'm 460.43202,155.76957 -25.6009,-33.05886 -9.19305,27.99704 z', fill: '#808e99'},
  {id: '#path4235', d: 'm 395.88536,118.99914 40.0039,4.24064 -9.98665,27.46797 z', fill: '#90a1a9'},
  {id: '#path4237', d: 'm 396.41443,118.47006 -10.78691,37.83667 41.8623,-5.33444 z', fill: '#808e99'},
  {id: '#path4387', d: 'm 397.73711,118.47006 -12.10959,37.83667 -15.01283,-27.81997 z', fill: '#6f7782'},
  {id: '#path4389', d: 'm 362.02482,164.49924 24.92537,-8.19251 -16.07096,-27.81997 z', fill: '#5f6973'},
  {id: '#path4391', d: 'm 459.90294,154.97597 7.73059,33.07501 -41.99546,-38.40137 z', fill: '#5f6772'},
  {id: '#path4399', d: 'm 410.96388,169.78996 57.19872,18.52555 -42.25999,-38.40136 z', fill: '#808e99'},
  {id: '#path4401', d: 'm 411.22842,170.31903 -25.86543,-14.27684 41.8623,-6.92165 z', fill: '#616b77'},
  {id: '#path4403', d: 'm 410.69934,168.99636 56.93419,19.05462 -25.32973,21.64819 z', fill: '#606873'},
  {id: '#path4405', d: 'm 410.69934,168.73182 5.87883,54.50238 25.99017,-14.06411 z', fill: '#828d96'},
  {id: '#path4407', d: 'm 410.96388,168.46729 5.87882,54.76691 -35.6466,3.39526 z', fill: '#060606'},
  {id: '#path4409', d: 'm 411.22842,168.99636 -25.86544,-13.74778 -4.16688,71.38088 z', fill: '#7e8f99'},
  {id: '#path4514', d: 'm 355.67596,215.55461 30.2161,-61.09964 -4.43142,72.70356 z', fill: '#606873'},
  {id: '#path4516', d: 'm 356.20503,215.55461 29.68703,-61.09964 -44.90535,42.28198 z', fill: '#808e99'},
  {id: '#path4518', d: 'm 362.02482,164.23472 22.8091,-8.98615 -44.11175,42.01744 z', fill: '#485162'},
  {id: '#path4520', d: 'm 362.81842,163.70564 -43.32478,25.40347 22.81575,7.3633 z', fill: '#606873'},
  {id: '#path4522', d: 'm 472.33611,209.47029 -4.43805,-21.41931 -26.65239,21.64819 z', fill: '#808e99'},
  {id: '#path4524', d: 'm 472.33611,208.94121 -10.52237,26.99069 -20.039,-27.55541 z', fill: '#707e87'},
  {id: '#path4526', d: 'm 417.31273,222.69707 45.03008,13.23483 -20.039,-27.29087 z', fill: '#606873'},
  {id: '#path4528', d: 'm 416.51913,222.16799 46.08821,12.97031 -11.83839,22.70633 z', fill: '#8fa3aa'},
  {id: '#path4548', d: 'm 417.0482,222.16799 -10.52239,35.72036 44.77221,0.22082 z', fill: '#c0cfd6'},
  {id: '#path4550', d: 'm 417.31274,221.37439 -9.99333,36.51396 -36.17565,-6.39257 z', fill: '#a4b7ba'},
  {id: '#path4490', d: 'm 417.57727,221.63893 -36.97595,4.7697 -9.45756,25.61623 z', fill: '#342e2f'},
  {id: '#path4701', d: 'm 311.49853,268.19718 69.36732,-41.25948 -9.72209,25.08716 z', fill: '#070707'},
  {id: '#path4488', d: 'm 312.82122,267.13904 69.10277,-40.73041 -77.70772,20.32553 z', fill: '#f3f7f7'},
  {id: '#path4703', d: 'm 355.94051,214.76101 26.24802,12.17669 -77.70772,20.59006 z', fill: '#484f61'},
  {id: '#path4705', d: 'm 356.46958,215.29008 -14.22592,-18.24489 -38.82099,51.01164 z', fill: '#606873'},
  {id: '#path4707', d: 'm 319.17006,188.83652 23.86721,7.41506 -39.35006,51.54072 z', fill: '#484f61'},
  {id: '#path4718', d: 'm 319.43461,188.57199 -27.18816,48.15352 11.7053,11.33132 z', fill: '#606773'},
  {id: '#path4720', d: 'm 319.69915,188.57199 -27.18816,48.94712 -26.1233,-6.39255 z', fill: '#808e99'},
  {id: '#path4722', d: 'm 431.59765,284.86291 -24.8073,-27.76816 43.9786,-0.0437 z', fill: '#a4b7bd'},
  {id: '#path4724', d: 'm 432.12673,283.54024 -25.60092,-26.44549 -5.22501,51.54076 z', fill: '#c0cfd6'},
  {id: '#path4726', d: 'm 371.01902,251.79597 36.03587,5.03424 -5.48955,52.33437 z', fill: '#cfdce4'},
  {id: '#path4728', d: 'm 371.5481,251.26689 -4.96714,34.39769 35.77798,22.7064 z', fill: '#c0cfd6'},
  {id: '#path4730', d: 'm 372.07717,251.00236 -4.43808,35.9849 -39.87916,-1.89541 z', fill: '#a7b6bd'},
  {id: '#path4732', d: 'm 372.60625,250.73782 -60.25509,17.20289 15.93785,17.68022 z', fill: '#352f2f'},
  {id: '#path4791', d: 'm 369.96089,322.69148 -3.37993,-37.0269 36.04252,21.9128 z', fill: '#a4b7bd'},
  {id: '#path4793', d: 'm 369.96089,322.69148 -2.3218,-36.76237 -38.82102,-1.10179 z', fill: '#c0cfd6'},
  {id: '#path4795', d: 'm 371.01902,322.42694 -46.49921,3.71158 4.03373,-41.3112 z', fill: '#8fa2a9'},
  {id: '#path4806', d: 'm 295.6264,313.43273 29.95155,12.70579 3.76919,-41.84028 z', fill: '#a4b6bd'},
  {id: '#path4808', d: 'm 296.15548,314.22633 -16.34218,-16.92219 49.53384,-13.0059 z', fill: '#8fa0a7'},
  {id: '#path4810', d: 'm 250.65536,304.43852 -7.34795,-10.3088 86.03973,-9.83148 z', fill: '#060606'},
  {id: '#path5485', d: 'm 226.58264,280.36579 16.72477,14.293 86.03973,-10.36055 z', fill: '#322c2e'},
  {id: '#path4812', d: 'm 225.87981,281.04981 87.26497,-13.10911 16.4669,16.88662 z', fill: '#060702'},
  {id: '#path4492', d: 'm 227.11171,280.89486 84.64621,-12.36091 -7.54166,-21.27067 z', fill: '#cfdce3'},
  {id: '#path4814', d: 'm 226.84717,281.15939 65.92838,-44.4339 12.49885,10.53779 z', fill: '#4a5162'},
  {id: '#path4816', d: 'm 226.84717,281.15939 67.05071,-44.05978 -28.03928,-5.973 z', fill: '#606873'},
  {id: '#path4836', d: 'm 227.11171,281.15939 -14.97412,-4.75357 55.30823,-45.80829 z', fill: '#808e99'},
  {id: '#path4838', d: 'm 161.37743,289.35409 52.45696,-13.6323 -6.05908,-12.95081 z', fill: '#484f5f'},
  {id: '#path4840', d: 'm 98.417973,322.68557 4.853707,10.21081 111.23761,-57.59273 z', fill: '#606875'},
  {id: '#path4851', d: 'm 227.48583,280.41116 -119.72484,61.08974 105.81302,-65.63609 z', fill: '#4e5465'},
  {id: '#path4853', d: 'm 266.5482,231.29323 -53.47533,45.11259 -5.29756,-13.63484 z', fill: '#5f687d'},
  {id: '#path4855', d: 'm 163.49372,288.29595 51.39881,-13.10324 -116.63492,48.42144 z', fill: '#808e99'},
  {id: '#path4895', d: 'm 109.26715,341.39105 -6.74369,-9.617 111.98583,-56.4704 z', fill: '#555c67'},
  {id: '#path4897', d: 'm 355.74471,323.81381 38.14626,23.95298 -16.70695,-29.34024 z', fill: '#060606'},
  {id: '#path4921', d: 'm 441.41583,348.50505 -47.52486,-0.73826 -9.97299,-14.74996 z', fill: '#060606'},
  {id: '#path4923', d: 'm 370.7091,356.36136 23.18187,-8.59457 -13.33997,-10.63476 z', fill: '#060606'},
  {id: '#path4925', d: 'm 324.3195,326.80668 14.57734,26.57175 5.73963,-29.34024 z', fill: '#060606'},
  {id: '#path4927', d: 'm 325.06773,326.43258 15.32555,28.06819 -15.95874,-10.63476 z', fill: '#060606'},
  {id: '#path4929', d: 'm 394.27802,392.65 -52.3883,-49.74664 -17.45518,0.96265 z', fill: '#060606'},
  {id: '#path4931', d: 'm 393.15569,392.65 -51.26597,-49.74664 64.10074,43.98526 z', fill: '#060606'},
  {id: '#path4933', d: 'm 392.03336,390.77945 50.86597,3.00283 -48.88038,-13.25352 z', fill: '#060606'},
  {id: '#path4935', d: 'm 396.14856,391.15357 -29.5676,12.35556 17.33702,-18.86516 z', fill: '#060606'},
  {id: '#path4604', d: 'm 186.99999,23.000015 0,14.099975 -14.09998,-14.099975 z', fill: '#606873'},
  {id: '#path5200', d: 'm 186.99999,37.012412 -14.0124,0 0,-14.012397 z', fill: '#606873'},
],
[
  {id: '#path14437', d: 'm 495.67653,93.719633 7.65012,-19.67631 31.441,11.23795 z', fill: '#413b3d'},
  {id: '#path14439', d: 'm 495.62423,93.867573 7.70242,-19.82425 -9.59645,-19.31917 z', fill: '#060606'},
  {id: '#path4158', d: 'm 496.00304,93.993843 -2.26694,-39.3102 -22.76178,20.4497 z', fill: '#3e3c3d'},
  {id: '#path4160', d: 'm 452.43161,51.136693 41.43076,3.79949 -22.13044,20.70223 z', fill: '#050507'},
  {id: '#path4166', d: 'm 451.92654,51.389233 42.44091,3.54695 -29.95913,-18.18864 z', fill: '#4d4b4c'},
  {id: '#path4168', d: 'm 452.68415,50.884153 -33.69934,-13.12056 46.18112,-1.26859 z', fill: '#3c3a3b'},
  {id: '#path4174', d: 'm 452.43161,51.136693 -33.57306,14.15356 52.87338,10.34816 z', fill: '#c0c0b4'},
  {id: '#path4176', d: 'm 484.35602,121.61278 -66.02049,-56.827607 53.3964,10.34817 z', fill: '#a3a494'},
  {id: '#path4178', d: 'm 483.99888,119.82707 12.13633,-25.494927 -25.16089,-19.1988 z', fill: '#b2b0b7'},
  {id: '#path4213', d: 'm 464.88829,67.565263 6.26487,3.42068 -6.62908,4.43955 z', fill: '#151515'},
  {id: '#path4215', d: 'm 471.95935,76.025293 -0.80619,-5.03935 -7.00789,4.18701 z', fill: '#151515'},
  {id: '#path4217', d: 'm 471.95935,76.025293 -1.43754,4.93591 -7.13415,-6.4196 z', fill: '#151515'},
  {id: '#path4219', d: 'm 465.6459,82.970083 4.74964,-2.26142 -6.25027,-5.53571 z', fill: '#151515'},
  {id: '#path4221', d: 'm 465.6459,82.970083 -5.35188,-1.75635 4.4826,-6.67213 z', fill: '#151515'},
  {id: '#path4223', d: 'm 456.80707,76.530363 3.73949,4.80964 4.23006,-6.7984 z', fill: '#151515'},
  {id: '#path4225', d: 'm 456.80707,76.530363 2.22426,-6.0495 6.75544,4.94463 z', fill: '#151515'},
  {id: '#path4227', d: 'm 464.88829,67.565253 -5.85696,2.91561 5.74529,5.0709 z', fill: '#151515'},
  {id: '#path4229', d: 'm 452.68415,50.884153 -32.60252,-12.84636 -1.65809,28.18301 z', fill: '#060608'},
  {id: '#path4231', d: 'm 374.82701,64.812723 45.7993,-27.80675 -0.26912,29.68029 z', fill: '#3e3c3d'},
  {id: '#path4233', d: 'm 374.82701,64.812723 75.7993,64.336107 -31.53181,-63.725257 z', fill: '#060606'},
  {id: '#path4235', d: 'm 484.82701,120.88416 -34.2007,8.26467 -32.7945,-64.735407 z', fill: '#3e3c3d'},
  {id: '#path4237', d: 'm 484.82701,120.88416 -35.46339,7.50706 43.30231,38.10379 z', fill: '#060606'},
  {id: '#path4387', d: 'm 374.82701,64.812723 75.7993,64.336107 -93.65619,-17.25823 z', fill: '#ebc26b'},
  {id: '#path4389', d: 'm 388.46407,148.65539 62.16224,-19.50656 -93.65619,-17.25823 z', fill: '#f2d392'},
  {id: '#path4391', d: 'm 391.24199,149.413 -74.4609,-1.07127 40.18903,-36.45113 z', fill: '#cbcbcb'},
  {id: '#path4399', d: 'm 442.85003,197.52194 40.81199,24.66261 9.00391,-55.68954 z', fill: '#dda95d'},
  {id: '#path4401', d: 'm 444.11272,198.02702 4.37073,-71.02104 44.18248,39.48903 z', fill: '#eec16e'},
  {id: '#path4403', d: 'm 444.11272,198.02702 4.37073,-71.02104 -51.40925,60.9176 z', fill: '#e6b767'},
  {id: '#path4405', d: 'm 389.827,148.74131 58.65645,-21.73533 -51.40925,60.9176 z', fill: '#ecc171'},
  {id: '#path4407', d: 'm 389.827,148.74131 58.65645,-21.73533 -92.96036,-15.51097 z', fill: '#f2d392'},
  {id: '#path4409', d: 'm 389.827,148.74131 -72.05784,-1.73533 81.2387,42.85125 z', fill: '#bfbfbf'},
  {id: '#path4514', d: 'm 295.88281,209.35046 21.88635,-62.34448 -70.78926,73.6609 z', fill: '#b2b1b7'},
  {id: '#path4516', d: 'm 295.88281,209.35046 21.88635,-62.34448 34.26661,56.48831 z', fill: '#bfbfbf'},
  {id: '#path4518', d: 'm 397.90822,188.13726 -80.13906,-41.13128 34.26661,56.48831 z', fill: '#b2b1b7'},
  {id: '#path4520', d: 'm 397.90822,188.13726 -28.74384,48.18057 -17.12861,-32.82354 z', fill: '#6c677a'},
  {id: '#path4522', d: 'm 398.4133,187.12711 -30.67749,49.905 76.22385,-39.59873 z', fill: '#ddaa5e'},
  {id: '#path4524', d: 'm 413.06051,230.56367 -41.75327,4.32559 72.90495,-37.70842 z', fill: '#d19858'},
  {id: '#path4526', d: 'm 413.06051,230.56367 70.87874,-8.30132 -40.48467,-25.33405 z', fill: '#dea44a'},
  {id: '#path4528', d: 'm 411.81051,230.3851 72.12874,-8.12275 -51.59635,22.14312 z', fill: '#e1b156'},
  {id: '#path4548', d: 'm 443.36509,267.93931 40.57416,-45.67696 -51.59635,22.14312 z', fill: '#efc472'},
  {id: '#path4550', d: 'm 443.36509,267.93931 -66.32869,-1.94453 55.3065,-21.58931 z', fill: '#deaa5e'},
  {id: '#path4490', d: 'm 195.48234,305.86569 -24.85604,5.426 54.92503,-53.48195 z', fill: '#a4a1a4'},
  {id: '#path4701', d: 'm 223.33949,260.50855 -52.71319,50.78314 76.3536,-90.62481 z', fill: '#cccbcc'},
  {id: '#path4488', d: 'm 194.45424,306.13617 69.74348,-39.84448 -41.14639,-5.62481 z', fill: '#c3c3c6'},
  {id: '#path4703', d: 'm 221.95424,261.49332 42.24348,4.79837 -17.21782,-45.62481 z', fill: '#b2b1b7'},
  {id: '#path4705', d: 'm 295.88281,208.81474 -33.20032,57.72949 -15.70259,-45.87735 z', fill: '#cbcbcb'},
  {id: '#path4707', d: 'm 295.88281,208.63617 -33.76668,58.97948 49.86377,-34.80592 z', fill: '#adaea3'},
  {id: '#path4718', d: 'm 295.52567,208.63617 58.3149,-5.20163 -43.28924,30.80376 z', fill: '#a3a590'},
  {id: '#path4720', d: 'm 369.45424,234.35045 -16.6851,-30.20162 -44.00353,30.44661 z', fill: '#8a8893'},
  {id: '#path4722', d: 'm 369.45424,234.35045 -107.57796,33.01267 48.67505,-34.37482 z', fill: '#95939d'},
  {id: '#path4724', d: 'm 369.45424,234.35045 -107.9351,32.8341 47.42504,0.62519 z', fill: '#a1a0a4'},
  {id: '#path4726', d: 'm 369.45424,234.35045 -25.97082,33.72695 -35.96781,-0.62479 z', fill: '#ddba65'},
  {id: '#path4728', d: 'm 369.45424,234.35045 -25.61367,33.19124 35.46075,0.62521 z', fill: '#dbaa60'},
  {id: '#path4730', d: 'm 369.27567,234.17188 44.29441,-3.59448 -35.8759,35.0895 z', fill: '#deba66'},
  {id: '#path4732', d: 'm 433.02567,244.35045 -20.97082,-13.77305 -34.36067,35.0895 z', fill: '#eec16e'},
  {id: '#path4791', d: 'm 38.508233,405.87079 132.118067,-94.5791 -132.242894,85.64681 z', fill: '#a8a1b4'},
  {id: '#path4793', d: 'm 38.508233,405.87079 132.118067,-94.5791 25.59344,-6.27707 z', fill: '#b1b0b5'},
  {id: '#path4795', d: 'm 38.508233,405.87079 107.874407,-57.20345 50.84725,-44.66287 z', fill: '#8e8d93'},
  {id: '#path4806', d: 'm 225.38644,305.36061 -79.0038,43.30673 49.58456,-43.65272 z', fill: '#746f81'},
  {id: '#path4808', d: 'm 225.38644,305.36061 37.16374,-38.51563 -68.09821,38.16964 z', fill: '#bbbcae'},
  {id: '#path4810', d: 'm 225.38644,305.36061 37.16374,-38.51563 -6.22637,32.10873 z', fill: '#8a898f'},
  {id: '#path5485', d: 'm 277.47927,304.1001 -15.28623,-37.79083 -6.62684,32.64444 z', fill: '#999687'},
  {id: '#path4812', d: 'm 305.69356,311.42153 -43.50052,-45.11226 14.9803,37.64444 z', fill: '#a7a598'},
  {id: '#path4492', d: 'm 305.69356,311.42153 -2.2322,-24.37349 -42.03294,-21.22015 z', fill: '#cab653'},
  {id: '#path4814', d: 'm 305.69356,311.42153 -4.75758,-26.3938 51.57949,30.05779 z', fill: '#b0a25f'},
  {id: '#path4816', d: 'm 310.87957,264.9672 -48.32939,1.87778 40.55447,22.03784 z', fill: '#d19858'},
  {id: '#path4836', d: 'm 309.97402,265.2937 40.9645,50.0386 -49.63228,-27.59487 z', fill: '#ddba63'},
  {id: '#path4838', d: 'm 310.15259,266.05132 40.78593,49.28098 -6.44826,-48.37697 z', fill: '#e1a95e'},
  {id: '#path4840', d: 'm 379.73056,266.02067 -28.79204,49.31163 -6.98397,-48.1984 z', fill: '#e5b767'},
  {id: '#path4851', d: 'm 379.73056,265.66353 -28.79204,49.66877 27.86629,-8.29737 z', fill: '#aba067'},
  {id: '#path4853', d: 'm 378.65914,266.02067 27.83777,31.12889 -27.6921,9.88537 z', fill: '#cbb96e'},
  {id: '#path4855', d: 'm 377.23056,265.30639 29.26635,31.84317 37.67195,-29.7198 z', fill: '#edc269'},
  {id: '#path4895', d: 'm 365.83262,315.17767 -14.8941,0.15463 56.15056,-18.3989 z', fill: '#8a8894'},
  {id: '#path4897', d: 'm 365.83262,314.82053 -15.90425,-1.00346 49.91325,60.04998 z', fill: '#8a8894'},
  {id: '#path4921', d: 'm 365.83262,315.17767 39.21304,48.01177 -5.20404,10.67761 z', fill: '#b2b1b9'},
  {id: '#path4923', d: 'm 452.26119,375.17767 -48.28696,-12.88109 -4.13261,11.57047 z', fill: '#6d6776'},
  {id: '#path4925', d: 'm 373.68976,378.7491 18.32018,-13.95251 7.83168,9.07046 z', fill: '#6d6776'},
  {id: '#path4927', d: 'm 309.40405,317.32053 42.03955,-2.99838 -42.49484,-2.59796 z', fill: '#8a8894'},
  {id: '#path4929', d: 'm 309.22548,316.60624 15.17987,-0.78151 1.15055,50.00664 z', fill: '#8a8894'},
  {id: '#path4931', d: 'm 309.40405,317.32053 3.32019,58.54749 12.83166,-10.03669 z', fill: '#b2b1b7'},
  {id: '#path4933', d: 'm 367.97548,376.60624 -55.25124,-0.73822 12.83166,-10.03669 z', fill: '#6f6679'},
  {id: '#path4935', d: 'm 289.22548,379.9991 23.49876,-4.13108 -0.5612,-12.00098 z', fill: '#6f6679'},
  {id: '#path4604', d: 'm 52.987578,37.012422 0,-14.012422 14.012422,14.012422 z', fill: '#eec16e'},
  {id: '#path5200', d: 'm 67,23 0,14.1 -14.1,-14.1 z', fill: '#eec16e'},
]
];

var ts = [];
var curIndex = 0;
var timeId = null;
var slideTimeout = 7000;

var birdTexts = [
  "The <b>great tit</b> (<i>Parus major</i>) is a passerine bird in the tit family Paridae.",
  "The <b>Eurasian bullfinch</b> (<i>Pyrrhula pyrrhula</i>) is a small passerine bird in the finch family Fringillidae.",
  "The <b>dunnock</b> (<i>Prunella modularis</i>) is a small passerine, or perching bird in the Prunellidae family.",
  "The <b>rock dove</b> or <b>rock pigeon</b> (<i>Columba livia</i>) is a member of the birdfamily Columbidae.",
  "The <b>northern mockingbird</b> (<i>Mimus polyglottos</i>) a bird in the family Mimidae."
];

var birdTitles = ["Great tit", "Bullfinch", "Dunnock", "Dove", "Mockingbird"];

function showText(index) {
  var slashText = birdTexts[index].replace(/[a-zA-Z0-9]/g, "/");
  var element = document.querySelector(".bird-text__body");
  element.innerHTML = birdTexts[index];
  document.querySelector(".bird-text__title").textContent = birdTitles[index];
}

function show(index, withDelay) {
  ts[index].length = 0;
  birds[(index + 4) % 5 + 1].forEach(function(path, i) {
    var delay = withDelay ? 10 * i : 0;
    ts[index].push(
      new anime({
        targets: path.id,
        d: {
          value: path.d,
          duration: 1000,
          easing: "easeInOutQuad"
        },
        fill: {
          value: path.fill,
          duration: 1000,
          easing: "easeInOutQuad"
        },
        delay: delay
      })
    );
  });
  showText(index);
}

function play(index) {
  ts[index].forEach(function(a) {
    a.play();
  });
}

var svg = document.querySelector(".birds");
var count = birds[0].length;

birds[0].forEach(function(path, index) {
  var newPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
  svg.append(newPath);
  newPath.setAttribute("id", path.id);
  newPath.setAttribute("d", path.d);
  newPath.setAttribute("style", "fill:" + path.fill);
});

ts.push([]);
ts.push([]);
ts.push([]);
ts.push([]);
ts.push([]);

setTimeout(() => {
  document.querySelector(".bird-text__body").innerHTML = birdTexts[0];
  document.querySelector(".bird-text__title").textContent = birdTitles[0];
}, 200);

function prev() {
  curIndex--;
  if (curIndex < 0) curIndex = 4;
}

function next() {
  curIndex++;
  curIndex %= 5;
}

function resetAnimations(index) {
  ts.forEach(function(t) {
    if (t)
      t.forEach(function(a) {
        a.pause();
      });
  });
  show(index, false);
  play(index);
  curIndex = index;
  clearTimeout(timeId);
  timeId = setTimeout(slideshow, slideTimeout);
}

function restartAnimation(index) {
  resetAnimations(index);
}

function restartAnimationPrev() {
  prev();
  resetAnimations(curIndex);
}

function restartAnimationNext() {
  next();
  resetAnimations(curIndex);
}

document.addEventListener(
  "keydown",
  function(event) {
    if (event.keyCode >= 49 && event.keyCode <= 53) {
      restartAnimation(event.keyCode - 49);
    } else if (event.keyCode === 37) {
      // left
      restartAnimationPrev();
    } else if (event.keyCode === 39) {
      // right
      restartAnimationNext();
    }
  },
  false
);

function advance() {
  next();
  show(curIndex, true);
  play(curIndex);
}

function goTo(index) {
  restartAnimation(index);
}

function slideshow() {
  advance();
  timeId = setTimeout(slideshow, slideTimeout);
}
timeId = setTimeout(slideshow, slideTimeout);

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console