HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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);
Also see: Tab Triggers