cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <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
Loading ..................

Console