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 URL's 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 it's URL and the proper URL extention.
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 Skypack, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ES6 import
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.
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1051 688" style="enable-background:new 0 0 1051 688;" xml:space="preserve">
<defs>
<filter id="mainColor">
<feColorMatrix type="saturate" values="1.5"/>
<feColorMatrix type="hueRotate" values="0"/>
</filter>
<filter id="colorPolygon">
<feColorMatrix type="saturate" values="0.8"/>
<feColorMatrix type="hueRotate" values="0"/>
</filter>
<path id="entrance-path" d="M34,666 C55.33333,666 76.66667,666 98,666 117.83333,652.16667 137.66667,638.33333 157.5,624.5 164,624.5 170.5,624.5 177,624.5 "/>
<clipPath id="entrance-clip">
<rect x="49" y="601" width="114" height="71"/>
</clipPath>
<path id="ball-large-path" d="M1110,384.5H767.055c-46.421,0.25-86.421,36.25-88.421,87.25c-0.467,11.91-8,47-8,47s-6,39.532-58.5,45.766
S413.5,566.5,413.5,566.5"/>
<clipPath id="ball-large-clip">
<rect x="450.5" y="335.5" class="st46" width="712" height="246"/>
</clipPath>
<path id="tube-path0" d="M1051,577H943.314c-1.278,0-2.314,1.036-2.314,2.314v7.373c0,1.278-1.036,2.314-2.314,2.314H792.685
c-2.035,0-3.685,1.65-3.685,3.685v68.63c0,2.035-1.65,3.685-3.685,3.685H675"/>
<path id="tube-path1" d="M1051,596h-20.294c-2.047,0-3.706,1.659-3.706,3.706v41.587c0,2.047-1.659,3.706-3.706,3.706h-19.588
c-2.047,0-3.706-1.659-3.706-3.706v-16.588c0-2.047-1.659-3.706-3.706-3.706H917"/>
<path id="tube-path2" d="M1051,665H944.952c-3.287,0-5.952-2.665-5.952-5.952v-46.096c0-3.287-2.665-5.952-5.952-5.952h-91.096
c-3.287,0-5.952-2.665-5.952-5.952V567"/>
<path id="tube-path3" d="M975,688v-44.314c0-2.588-2.098-4.686-4.686-4.686h-63.628c-2.588,0-4.686,2.098-4.686,4.686v25.628
c0,2.588-2.098,4.686-4.686,4.686H808"/>
<path id="tube-path4" d="M699,688V587.816c0-2.107,1.708-3.816,3.816-3.816h56.369c2.107,0,3.816,1.708,3.816,3.816v36.369
c0,2.107,1.708,3.816,3.816,3.816h103.369c2.107,0,3.816,1.708,3.816,3.816v15.369c0,2.107-1.708,3.816-3.816,3.816H824"/>
<path id="tube-path5" d="M740,688 C740,666 740,644 740,622 699.33333,622 658.66667,622 618,622 618,614.33333 618,606.66667 618,599 589.33333,599 560.66667,599 532,599 532,588.33333 532,577.66667 532,567 "/>
<path id="tube-path6" d="M643,688v-16.288c0-3.154-2.557-5.712-5.712-5.712H503.712c-3.154,0-5.712-2.557-5.712-5.712v-60.577
c0-3.154-2.557-5.712-5.712-5.712H387"/>
<path id="tube-path7" d="M662,567v72.188c0,3.21-2.602,5.812-5.812,5.812h-67.21c-2.749,0-4.978-2.229-4.978-4.978v-14.045
c0-2.749-2.229-4.978-4.978-4.978h-126.21c-3.21,0-5.812,2.602-5.812,5.812v34.376c0,3.21-2.602,5.812-5.812,5.812H330"/>
<path id="tube-path8" d="M547,688v-36.696c0-3.482-2.823-6.304-6.304-6.304H379"/>
<path id="jelly__fluid1" class="st6" d="M580.25,367.989c0,0,12.451-2.631,30.351,2.44s23.817,6.871,31.245,10.424
c4.407,2.108,15.654,5.647,19.435,2.026c5.938-5.688,3.757-10.392,3.757-10.392s-1.091-5.172-10.814-8.08
s-11.762-3.146-11.762-3.146s-21.795-4.692-37.378-3.727C589.5,358.5,583,361.038,580.25,362.269s-2.418,2.064-2.418,2.064
S577,367.477,580.25,367.989z"/>
<path id="jelly__fluid2" class="st6" d="M580.5,366.5c0,0,20-1,38,6s33,14,44,11s23.943-16.167,23.943-16.167s17.553-15.139,28.805-18.986
c11.252-3.847,4.122-11.226,4.122-11.226s-2.975-2.744-10.422-0.682c-7.448,2.061-15.706,3.395-27.577,12.228
C669.5,357.5,662.5,364.5,654.5,363.5s-24.246-3.951-24.246-3.951S607.5,353.5,580.5,361.5V366.5z"/>
<path id="jelly-path" d="M677.062,359.999c16.306-13.092,35.125-22.071,53.212-25.238"/>
<clipPath id="jelly-clip">
<path d="M1106,344.5H748.055c-28.636,0.154-61.677,18.098-83.262,43.796L548,390v-84l558,2V344.5z"/>
</clipPath>
<path id="flask-inside-path" d="M167,590v-46.125c0-6.558,5.317-11.875,11.875-11.875H218h0.5h14.78c6.473,0,11.72-5.247,11.72-11.72
l0.333-17.28l0-41.01c0-5.793,4.696-10.49,10.49-10.49h20.528h3.149h11.148c5.993,0,10.852-4.858,10.852-10.852V410v-3.5v-17.236
c0-5.393-4.372-9.764-9.764-9.764H227.5H225h-11.148c-5.993,0-10.852,4.858-10.852,10.852V401.5v1.5v23.148
c0,5.993-4.858,10.852-10.852,10.852H143h-1h-20.148c-5.993,0-10.852-4.858-10.852-10.852V407v-2v-66v-1v-3.01
c0-5.793,4.696-10.49,10.49-10.49h11.528H134h45.741c5.39,0,9.759-4.369,9.759-9.759v-19.285c0-7.956,4-11.956,11.956-11.956
l69.339-0.015c0.747-0.02,3.705,0.015,6.06,0.694c4.751,1.37,16.645-5.679,18.645-14.679c2.437-10.969-2-15-12-13
c-5.482,1.096-16.391,0.21-16.391,0.21L253,246.29c0,0-8.635-7.298-11.347-22.039c-1.149-6.244-2.741-16.021-0.153-22.751
c5-13,10.433-20.649,11.843-32.251c1.302-10.714,13.157-13.749,18.38-27.002c2.835-7.194,14.435-9.88,22.777-14.747
c12.307-7.179,23.458-14.421,33.249-11.961c19.751,4.961,34.201-0.222,46.751,3.961c10.5,3.5,16.044,11.759,24.375,14.062
C409.5,136.5,407.5,149.25,407.5,163c0,5.37-0.382,17.307,6.473,23.186C422.5,193.5,418.542,205.06,414.5,208
c-11,8-18.415,3.402-21,7c-3.436,4.782,5,15.5-0.69,19.6c-4.695,3.383-0.085,12.061-4.31,18.4c-2.96,4.439-9.986,2.431-11,7.5
c-2,10-26.202,13.302-27,6.5c-0.523-4.462,18-11.5,10.535-20.84c-6.464-8.088,1.975-24.7-7.535-30.16c-27-15.5-5.628-24.05-1-30
c1.995-2.565,0.642-9.764,3-12c5.589-5.299,21.397-1.611,27,18c6,21,41.272,5.18,46,17c3,7.5,3,28.5-4,32.75
c-11.286,6.852-10,24.75-17,31.25c-4.933,4.58-14.587,6.039-20.332,13.089c-7.668,9.411-23.508,4.241-31.918,10.875
c-5.75,4.536-23.567,5.207-32.75-5.964c-3.863-4.7,12-25.5,2.36-33.066c-6.8-5.337-9.36-22.434-25.36-27.934
c-9.952-3.421-11-30.5,1.07-35.146c5.677-2.185,3.851-14.156,6.93-21.854c4-10-4.277-16.696-2-22c3.73-8.688,18.678-2.008,30-10.5
c12-9,24.322-1.061,39,6.5c11.211,5.776,21.57,6.169,23.75,11.167c6.25,14.333,14.045-4.789,27.25-0.167
c2.841,0.994,7.209,5.58,9,8c12.119,16.379,20,47,9,81c-14.123,43.653-22,40-34,52c-13.598,13.598-41,22-74,21
c-46.25-1.402-37-31.5-37-31.5"/>
<path id="soft-objects-path" d="M1103,277.5l-451.99,0.041c-2.88,0-5.58,0.74-7.94,2.04c-5.39,2.52-10.28,7.43-15.17,15.12l-1.83,2.88
c-6.12,9.67-11.42,18.03-16.45,21.38c-5.23,3.49-14.9,3.09-14.99,3.08H468.59"/>
<clipPath id="soft-objects-clip">
<path d="M480.388,270.498c10.011,4.861,16.912,15.126,16.912,27.002c0,12.2-7.283,22.699-17.738,27.388L610.5,324.5
l32-39l408-3v-35l-422,2l-39,28L480.388,270.498z"/>
</clipPath>
<path id="small-balls-path1" d="M1065,171.047H574.953c-9.087,0-16.453,7.366-16.453,16.453s7.366,16.453,16.453,16.453H1065"/>
<path id="jelly__inside2" class="st44" d="M502.674,395.174c0,0-2.471-8.712,8.812-15.471c11.283-6.759,14.762-3.059,19.948-15.632
c3.68-8.921,2.648-14.321,8.086-13.579c3.544,0.484,5.794,8.255,5.618,16.138c-0.183,8.147-1.802,12.977-7.24,19.585
C523.984,403.122,502.674,395.174,502.674,395.174z"/>
<path id="jelly__inside3" class="st44" d="M545.256,369.312c0,0-6.62-6.178-17.788,0.771s-9.464,11.734-23.019,10.604
c-9.617-0.802-13.949-4.186-15.773,0.989c-1.189,3.374,4.697,8.926,11.789,12.37c7.33,3.559,12.367,4.326,20.729,2.507
C542.591,391.898,545.256,369.312,545.256,369.312z"/>
</defs>
<style type="text/css">
.st0{fill:#F8FDFF;}
.st1{fill:none;}
.st2{fill:#F3FDFF;}
.st3{fill:#FCF8E6;stroke:#efd66c;stroke-width:1.2;stroke-miterlimit:10;}
.st4{fill:#F7E7EA;stroke:#E0A4B2;stroke-width:1.2;stroke-miterlimit:10;}
.st6{fill:#F7E6D5;stroke:#F7C68B;stroke-width:1.2;stroke-miterlimit:10;}
.st7{fill:#F9EFE5;stroke:#fcbc7c;stroke-width:1;stroke-miterlimit:10;}
.st8{fill:#FCFBF5;stroke:#F4ECB5;stroke-width:4;stroke-miterlimit:10;}
.st9{fill:#EEFCEB;stroke:#CCE5C7;stroke-width:4;stroke-miterlimit:10;}
.st10{fill:none;stroke:#F9A0AF;stroke-width:3;stroke-miterlimit:10;}
.st13{fill:#F9F2D7;stroke:#F2D766;stroke-width:1.2;stroke-miterlimit:10;}
.st15{fill:#F8E0FC;stroke:#F7A4F5;stroke-width:1.2;stroke-miterlimit:10;}
.st17{fill:#D3EDD3;stroke:#7ACC7A;stroke-width:1.2;stroke-miterlimit:10;}
.st18{fill:#F4DFE4;stroke:#dea1b1;stroke-width:1.2;stroke-miterlimit:10;}
.st22{fill:#E7EDF7;stroke:#ADC2EA;stroke-width:1.1;stroke-miterlimit:10;}
.st23{fill:#DCECF9;}
.st24{fill:#EAEFF9;stroke:#B1CDEF;stroke-width:1;stroke-miterlimit:10;}
.st25{fill:#EAF4F9;stroke:#97BDD3;}
.st25_1{fill:#EAF4F9;stroke:#87B1C6;stroke-width:1.2;}
.st26{fill:#97BDD3;stroke-width:1.3;}
.st27{fill:#FBF0FC;stroke:#F5AFF9;stroke-width:1.1;stroke-miterlimit:10;}
.st28{fill:#EAF4F9;stroke:#7AB2C4;stroke-width:1.1;stroke-miterlimit:10;}
.st29{fill:#F9EFE5;stroke:#EFC49A;stroke-width:1.1;stroke-miterlimit:10;}
.st30{fill:#EAF4F9;stroke:#97BDD3;stroke-width:1.1;stroke-miterlimit:10;}
.st31{fill:#CBD8F7;}
.st32{fill:#E8F4F9;}
.st33{fill:#B3CDDD;}
.st34{fill:#F9E8D2;}
.st35{fill:#F9CD93;}
.st36{fill:#CAE7EF;}
.st37{fill:#DFEADF;stroke:#96AA96;stroke-width:1.1;stroke-miterlimit:10;}
.st39{opacity:0.6;fill:#699ACC;}
.st40{fill:#EAF4F9;stroke:#87B0C4;stroke-width:1.4;stroke-miterlimit:10;}
.st41{opacity:0.5;fill:none;stroke:#699ACC;stroke-width:2;stroke-miterlimit:10;}
.st42{fill:#FFDEFE;stroke:#F286E6;stroke-width:0.7;stroke-miterlimit:10;}
.st43{fill:#F9EBDC;stroke:#F4AA62;stroke-width:0.7;stroke-miterlimit:10;}
.st44{fill:#F7E6D5;stroke:#F4AA62;stroke-width:0.5;stroke-miterlimit:10;}
.st45{fill:#f7d2d8;stroke:#DB8295;stroke-width:1.5;stroke-miterlimit:10;}
.st46{fill:#F7EECB;stroke:#F4CF31;stroke-width:1.85;stroke-miterlimit:10;}
.st47{fill:#EAF4F9;}
.st48{fill:#F7DFE4;stroke:#db8da1;stroke-miterlimit:10;}
.st50{fill:#F7DFE4;stroke:#db8da1;stroke-width:1.5;stroke-miterlimit:10;}
.st51{fill:#F7DFE4;stroke:#db8da1;stroke-width:1;stroke-miterlimit:10;}
.st52{fill:#F9EBDC;stroke:#EFBB8E;stroke-width:1.1;stroke-miterlimit:10;}
</style>
<g filter="url(#mainColor)">
<g id="background">
<rect x="0" y="1" class="st0" width="1051" height="687"/>
<path class="st1" d="M1101.5,136.5c0,0-453,0-521,0s-127.264-2.223-127.264-2.223l-32.522-1.229
C400.471,114.981,373.768,104,344.5,104l1.5-6c0,0,30,3,61-36s39-55,86-55s587,0,587,0L1101.5,136.5z"/>
<path class="st2" d="M1051,394v170H773c-46.94,0-85-38.06-85-85s38.06-85,85-85H1051z"/>
</g>
<g id="elements1">
<g class="balls1">
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
<circle class="ball-large st3" cx="400" cy="549" r="18.2"/>
</g>
<g class="jelly" clip-path="url(#jelly-clip)">
<path class="jelly__line st6" d="M633.5,370.5c0,0,19,16,31,12s21-14,21-14s18-16,27-19c6.708-2.236,10-5,9-9s-3-5-10-5s-23,7-33,15
s-23,18-32,19S633.5,370.5,633.5,370.5z"/>
<path class="jelly__hidden st6" d="M577.505,367.5h-14.01c-1.654,0-2.995-1.341-2.995-2.995v-0.01c0-1.654,1.341-2.995,2.995-2.995h14.01
c1.654,0,2.995,1.341,2.995,2.995v0.01C580.5,366.159,579.159,367.5,577.505,367.5z"/>
</g>
</g>
<g id="elements2">
<g class="polygon-elements" filter="url(#colorPolygon)">
<g class="polygon-box">
<rect x="617" y="96" class="polygon-element st8" width="24" height="21"/>
<polygon class="polygon-element st9" points="552,93 552,124 595,124 595,112 561,112 561,93 "/>
<g class="polygon-element">
<polygon class="st8" points="579,45 579,103 595,103 595,71 641,71 641,45 "/>
<g>
<rect x="598.25" y="55.75" class="st10" width="5.5" height="5.5"/>
<rect x="612.25" y="55.75" class="st10" width="5.5" height="5.5"/>
<rect x="625.25" y="55.75" class="st10" width="5.5" height="5.5"/>
</g>
</g>
<rect x="548" y="12" class="st1" width="100.667" height="120"/>
</g>
<g class="polygon-box">
<polygon class="polygon-element st8" points="582.333,123 582.333,94 554.333,94 554.333,83 594.333,83 594.333,123 "/>
<polygon class="polygon-element st9" points="568.333,61 568.333,46 585.333,46 585.333,37 568.333,37 568.333,22 556.333,22 556.333,61 "/>
<rect x="604.333" y="33" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 664.3333 -579.3333)" class="polygon-element st9" width="35" height="19"/>
<g class="polygon-element">
<rect x="610.333" y="75" class="st9" width="31" height="46"/>
<g>
<rect x="623.333" y="82.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 710.8333 -540.8333)" class="st10" width="5" height="5"/>
<rect x="623.333" y="96.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 724.8333 -526.8333)" class="st10" width="5" height="5"/>
<rect x="623.333" y="109.5" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 737.8333 -513.8333)" class="st10" width="5" height="5"/>
</g>
</g>
<rect x="548" y="12" class="st1" width="100.667" height="120"/>
</g>
<g class="polygon-box">
<rect x="614" y="109" class="polygon-element st8" width="29" height="15"/>
<polygon class="polygon-element st9" points="554,123 592,123 592,113 564,113 564,80 554,80 "/>
<polygon class="polygon-element st9" points="627,52 627,84 603,84 603,95 638,95 638,52 "/>
<g class="polygon-element">
<polygon class="st8" points="589,19 589,53 560,53 560,70 607,70 607,19 "/>
<g>
<rect x="595" y="59" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1194 122)" class="st10" width="4" height="4"/>
<rect x="581" y="59" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1166 122)" class="st10" width="4" height="4"/>
<rect x="568" y="59" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1140 122)" class="st10" width="4" height="4"/>
</g>
</g>
<rect x="548" y="12" class="st1" width="100.667" height="120"/>
</g>
<g class="polygon-box">
<polygon class="polygon-element st8" points="642.333,38 624.333,38 624.333,20 612.333,20 612.333,38 596.333,38 596.333,49 642.333,49 "/>
<polygon class="polygon-element st8" points="603.333,112 603.333,125 642.333,125 642.333,81 628.333,81 628.333,112 "/>
<g class="polygon-element">
<polygon class="st9" points="553.333,22 553.333,82 609.333,82 609.333,59 573.333,59 573.333,22 "/>
<g>
<rect x="593.833" y="67.5" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1192.6666 140)" class="st10" width="5" height="5"/>
<rect x="579.833" y="67.5" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1164.6666 140)" class="st10" width="5" height="5"/>
<rect x="566.833" y="67.5" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1138.6666 140)" class="st10" width="5" height="5"/>
</g>
</g>
<rect x="559.333" y="97" class="polygon-element st9" width="35" height="19"/>
<rect x="548" y="12" class="st1" width="100.667" height="120"/>
</g>
<g class="polygon-box">
<g class="polygon-element">
<polygon class="st8" points="643.667,83 609.667,83 609.667,54 592.667,54 592.667,101 643.667,101 "/>
<g>
<rect x="599.667" y="89" transform="matrix(6.123234e-17 -1 1 6.123234e-17 510.6667 692.6667)" class="st10" width="4" height="4"/>
<rect x="599.667" y="75" transform="matrix(6.123234e-17 -1 1 6.123234e-17 524.6667 678.6667)" class="st10" width="4" height="4"/>
<rect x="599.667" y="62" transform="matrix(6.123234e-17 -1 1 6.123234e-17 537.6667 665.6667)" class="st10" width="4" height="4"/>
</g>
</g>
<rect x="547.667" y="29" transform="matrix(-1.836970e-16 1 -1 -1.836970e-16 603.6667 -526.6667)" class="polygon-element st9" width="35" height="19"/>
<polygon class="polygon-element st9" points="558.667,123 596.667,123 596.667,113 568.667,113 568.667,80 558.667,80 "/>
<rect x="548" y="12" class="st1" width="100.667" height="120"/>
<polygon class="polygon-element st8" points="626.167,61.5 639.167,61.5 639.167,25.5 608.167,25.5 608.167,34.5 626.167,34.5 "/>
</g>
<g class="polygon-box">
<polygon class="polygon-element st8" points="613.667,112 577.667,112 577.667,123 629.667,123 629.667,79 613.667,79 "/>
<polygon class="polygon-element st8" points="605.667,49 605.667,62 641.667,62 641.667,31 632.667,31 632.667,49 "/>
<polygon class="polygon-element st9" points="591.667,31 554.667,31 554.667,82 568.667,82 568.667,45 591.667,45 "/>
<rect x="548" y="12" class="st1" width="100.667" height="120"/>
<rect x="583.167" y="75" transform="matrix(-1 -1.224647e-16 1.224647e-16 -1 1183.3334 167.5)" class="polygon-element st8" width="17" height="17.5"/>
</g>
<g class="signals">
<path class="signal1 st7" d="M497.6,121.512c-0.124,0-0.25-0.008-0.376-0.023c-1.644-0.206-2.81-1.705-2.605-3.349
c0.253-2.021,0.381-4.087,0.381-6.14c0-27.019-21.981-49-49-49c-2.762,0-5.532,0.231-8.233,0.688
c-1.633,0.276-3.182-0.825-3.458-2.458c-0.276-1.634,0.824-3.182,2.458-3.458C439.797,57.26,442.904,57,446,57
c30.327,0,55,24.673,55,55c0,2.301-0.144,4.617-0.427,6.884C500.383,120.401,499.091,121.512,497.6,121.512z"/>
<path class="signal2 st7" d="M523.735,121.512c-0.082,0-0.165-0.003-0.249-0.01c-1.651-0.136-2.88-1.584-2.744-3.236
C520.913,116.19,521,114.083,521,112c0-39.66-30.981-72.546-70.531-74.869c-1.654-0.097-2.916-1.517-2.819-3.17
c0.097-1.654,1.525-2.928,3.17-2.819C493.538,33.65,527,69.167,527,112c0,2.246-0.094,4.52-0.277,6.758
C526.593,120.325,525.281,121.512,523.735,121.512z"/>
</g>
<path class="signal-click st48" d="M496.074,216.058c-0.87,0-1.681-0.549-1.974-1.419c-0.367-1.091,0.219-2.272,1.31-2.64
c4.241-1.428,7.09-5.396,7.09-9.875c0-5.744-4.673-10.417-10.417-10.417c-1.15,0-2.083-0.933-2.083-2.083s0.933-2.083,2.083-2.083
c8.042,0,14.583,6.542,14.583,14.583c0,6.269-3.99,11.824-9.927,13.824C496.519,216.023,496.295,216.058,496.074,216.058z"/>
</g>
<g class="balls2">
<g class="balls-small1">
<g>
<circle class="st13" cx="1124.75" cy="158.35" r="3.75"/>
<circle class="st13" cx="1124.75" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1286.75" cy="166.85" r="3.75"/>
<circle class="st13" cx="1295.25" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1480.5" cy="166.8" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1516" cy="166.8" r="3.75"/>
<circle class="st13" cx="1516" cy="158.3" r="3.75"/>
<circle class="st15" cx="1507.5" cy="166.8" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1434" cy="166.8" r="3.75"/>
<circle class="st15" cx="1425.5" cy="166.8" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1396.75" cy="158.35" r="3.75"/>
<circle class="st15" cx="1396.75" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1356.75" cy="166.85" r="3.75"/>
<circle class="st13" cx="1365.25" cy="166.85" r="3.75"/>
<circle class="st15" cx="1356.75" cy="158.35" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1315.75" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1245.75" cy="158.35" r="3.75"/>
<circle class="st15" cx="1245.75" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1064.75" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1203.75" cy="166.85" r="3.75"/>
<circle class="st15" cx="1203.75" cy="158.35" r="3.75"/>
<circle class="st15" cx="1212.25" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1158.75" cy="166.85" r="3.75"/>
<circle class="st15" cx="1167.25" cy="166.85" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1350.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1281.25" cy="136.7" r="3.75"/>
<circle class="st13" cx="1281.25" cy="128.2" r="3.75"/>
<circle class="st15" cx="1272.75" cy="136.7" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1411.75" cy="128.2" r="3.75"/>
<circle class="st15" cx="1420.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1494.25" cy="136.7" r="3.75"/>
<circle class="st15" cx="1494.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1525.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1453.75" cy="136.7" r="3.75"/>
<circle class="st13" cx="1453.75" cy="128.2" r="3.75"/>
<circle class="st15" cx="1462.25" cy="136.7" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1313.75" cy="128.2" r="3.75"/>
<circle class="st15" cx="1322.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1382.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1064.75" cy="128.2" r="3.75"/>
<circle class="st15" cx="1073.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1139.25" cy="136.7" r="3.75"/>
<circle class="st13" cx="1130.75" cy="136.7" r="3.75"/>
<circle class="st15" cx="1139.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1238.75" cy="136.7" r="3.75"/>
<circle class="st15" cx="1238.75" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1167.75" cy="128.2" r="3.75"/>
<circle class="st15" cx="1176.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1204.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st15" cx="1102.25" cy="128.2" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1546.25" cy="128.5" r="3.75"/>
<circle class="st15" cx="1546.25" cy="137" r="3.75"/>
<circle class="st13" cx="1554.75" cy="137" r="3.75"/>
</g>
<g>
<circle class="st13" cx="1551.25" cy="167.85" r="3.75"/>
<circle class="st15" cx="1551.25" cy="159.35" r="3.75"/>
<circle class="st15" cx="1542.75" cy="167.85" r="3.75"/>
</g>
</g>
</g>
<g class="soft-objects" clip-path="url(#soft-objects-clip)">
<g class="soft-objects__green">
<path class="soft-object st17" d="M534.496,322H527c-1.657,0-3-1.343-3-3s1.343-3,3-3h7v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8.496
C540,319.531,537.531,322,534.496,322z"/>
<path class="soft-object st17" d="M534.496,322H527c-1.657,0-3-1.343-3-3s1.343-3,3-3h7v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8.496
C540,319.531,537.531,322,534.496,322z"/>
<path class="soft-object st17" d="M534.496,322H527c-1.657,0-3-1.343-3-3s1.343-3,3-3h7v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8.496
C540,319.531,537.531,322,534.496,322z"/>
<path class="soft-object st17" d="M534.496,322H527c-1.657,0-3-1.343-3-3s1.343-3,3-3h7v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8.496
C540,319.531,537.531,322,534.496,322z"/>
<path class="soft-object st17" d="M534.496,322H527c-1.657,0-3-1.343-3-3s1.343-3,3-3h7v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8.496
C540,319.531,537.531,322,534.496,322z"/>
</g>
<g class="soft-objects__red">
<path class="soft-object st18" d="M581,322h-7.496c-3.035,0-5.504-2.469-5.504-5.504V308c0-1.657,1.343-3,3-3s3,1.343,3,3v8h7
c1.657,0,3,1.343,3,3S582.657,322,581,322z"/>
<path class="soft-object st18" d="M581,322h-7.496c-3.035,0-5.504-2.469-5.504-5.504V308c0-1.657,1.343-3,3-3s3,1.343,3,3v8h7
c1.657,0,3,1.343,3,3S582.657,322,581,322z"/>
<path class="soft-object st18" d="M581,322h-7.496c-3.035,0-5.504-2.469-5.504-5.504V308c0-1.657,1.343-3,3-3s3,1.343,3,3v8h7
c1.657,0,3,1.343,3,3S582.657,322,581,322z"/>
<path class="soft-object st18" d="M581,322h-7.496c-3.035,0-5.504-2.469-5.504-5.504V308c0-1.657,1.343-3,3-3s3,1.343,3,3v8h7
c1.657,0,3,1.343,3,3S582.657,322,581,322z"/>
<path class="soft-object st18" d="M581,322h-7.496c-3.035,0-5.504-2.469-5.504-5.504V308c0-1.657,1.343-3,3-3s3,1.343,3,3v8h7
c1.657,0,3,1.343,3,3S582.657,322,581,322z"/>
</g>
</g>
</g>
<g id="structure1">
<path class="st22" d="M1051,340.99v6.52H749.92c-27,0.15-59.47,17.28-80.76,42.63l-5-4.19c22.81-27.16,56.46-44.8,85.74-44.96
H1051z"/>
<path class="st23" d="M1051,567v121H0V220.68C49.62,332.84,164.9,558.75,384,566c16.84,0.56,47.19,1.16,86.12,1.35l361.38-0.22h9
L1051,567z"/>
<path class="st24" d="M450.94,520.54l-0.59,47c-10.81-0.13-20.4-0.4-28.85-0.63c-8.55-0.24-15.93-0.45-21.37-0.41h-1.86
c-63.4,0.01-123.49-17.77-178.66-52.86c-45.32-28.81-87.69-69.59-125.93-121.19C51.03,334.9,20.31,272.99,0,225.85V97.37
c4.39,11.25,9.33,23.88,14.88,38.06c1.17,2.99,2.58,6.76,4.35,11.54c13.49,36.28,49.32,132.65,112.21,217.49
c76.65,103.43,166.93,155.61,268.43,155.04c6.23-0.03,13.96,0.18,22.92,0.43C431.08,520.15,440.48,520.41,450.94,520.54z"/>
<g>
<path class="st25" d="M253.092,231.125c-1.05,0-1.932-0.754-2.097-1.794c-0.743-4.708-1.12-9.53-1.12-14.332
c0-50.247,40.879-91.125,91.125-91.125c19.183,0,37.533,5.892,53.068,17.039c0.951,0.683,1.17,2.014,0.487,2.965
c-0.398,0.555-1.045,0.886-1.729,0.886c-0.446,0-0.874-0.138-1.237-0.398c-14.809-10.625-32.302-16.242-50.59-16.242
c-47.903,0-86.875,38.972-86.875,86.875c0,4.586,0.359,9.185,1.069,13.668c0.182,1.157-0.611,2.248-1.769,2.43
C253.313,231.117,253.201,231.125,253.092,231.125z"/>
<path class="st25" d="M347.581,313.312c-0.803,0-1.6-0.01-2.407-0.03c-9.401-0.237-18.647-1.854-27.481-4.804
c-1.111-0.372-1.713-1.578-1.342-2.689c0.291-0.869,1.1-1.453,2.016-1.453c0.228,0,0.454,0.037,0.673,0.11
c8.434,2.818,17.264,4.361,26.243,4.588c0.768,0.019,1.534,0.029,2.298,0.029c23.493,0,45.738-9.061,62.639-25.514
c16.93-16.481,26.581-38.534,27.176-62.095c0.409-16.216-3.558-32.22-11.472-46.283l-0.151-0.269l-4.907,1.622
c-0.216,0.071-0.44,0.107-0.666,0.107c-0.92,0-1.731-0.586-2.019-1.458c-0.178-0.539-0.135-1.115,0.12-1.622
c0.255-0.507,0.693-0.884,1.232-1.062l8.168-2.697l0.871,1.47c8.999,15.18,13.52,32.574,13.072,50.301
c-0.623,24.672-10.731,47.767-28.463,65.029C395.479,303.822,372.182,313.312,347.581,313.312z"/>
<path class="st25" d="M282.65,241.826c-0.903,0-1.71-0.574-2.007-1.427c-2.5-7.186-3.768-14.721-3.768-22.398
c0-14.619,4.546-28.534,13.148-40.241l0.231-0.314l-5.445-3.685c-0.97-0.657-1.225-1.98-0.568-2.951
c0.396-0.585,1.054-0.934,1.762-0.934c0.424,0,0.835,0.126,1.189,0.366l9.215,6.237l-1.429,1.796
c-9.062,11.396-13.853,25.133-13.853,39.726c0,7.2,1.188,14.266,3.533,21.001c0.385,1.107-0.202,2.32-1.309,2.706
C283.123,241.786,282.887,241.826,282.65,241.826z"/>
<path class="st25" d="M347,285.125c-4.176,0-8.357-0.381-12.43-1.132l-2.557-0.472l0.971-2.412
c0.462-1.162,10.979-28.641-17.203-48.369c-0.465-0.326-0.775-0.812-0.874-1.372s0.026-1.123,0.353-1.587
c0.396-0.568,1.048-0.907,1.742-0.907c0.437,0,0.857,0.133,1.217,0.384c25.104,17.573,22.077,41.197,19.61,50.539l-0.108,0.409
l0.419,0.058c2.923,0.405,5.903,0.61,8.86,0.61c15.986,0,31.285-5.935,43.077-16.711c11.717-10.708,18.998-25.268,20.504-40.999
l0.121-1.263l7.973-3.36c0.264-0.111,0.541-0.167,0.824-0.167c0.857,0,1.626,0.51,1.959,1.299
c0.455,1.08-0.053,2.329-1.133,2.784l-5.646,2.38l-0.025,0.217c-1.908,16.193-9.618,31.196-21.709,42.246
C380.367,278.795,364.051,285.125,347,285.125z"/>
<path class="st25" d="M405.472,195.64c-0.844,0-1.608-0.499-1.948-1.272c-10.189-23.232-33.162-38.243-58.524-38.243
c-9.152,0-17.988,1.895-26.261,5.63c-0.278,0.126-0.571,0.189-0.873,0.189c-0.834,0-1.595-0.491-1.938-1.251
c-0.482-1.068-0.006-2.329,1.062-2.811c8.826-3.986,18.25-6.007,28.01-6.007c27.049,0,51.549,16.009,62.417,40.786
c0.471,1.073-0.02,2.329-1.093,2.8C406.053,195.58,405.766,195.64,405.472,195.64z"/>
<path class="st25" d="M375.999,249.125c-0.308,0-0.607-0.066-0.89-0.196c-1.06-0.489-1.527-1.752-1.041-2.814
c0.459-1.011,10.928-25.005-15.514-49.558l-1.973-1.832l11.24-7.493c0.351-0.234,0.758-0.357,1.177-0.357
c0.713,0,1.375,0.354,1.77,0.947c0.315,0.472,0.427,1.039,0.316,1.596s-0.433,1.036-0.905,1.351l-6.797,4.532l0.321,0.324
c13.18,13.255,16.476,26.359,16.919,35.018c0.521,10.139-2.561,16.964-2.693,17.25
C377.583,248.641,376.825,249.125,375.999,249.125z"/>
<path class="st25" d="M350.998,243.125c-1.007,0-1.882-0.718-2.082-1.707c-0.239-1.167-6.256-28.591-41.201-33.313l-2.396-0.324
l0.629-2.334c0.064-0.24,6.751-23.941,34.487-24.79c0,0,0,0,0.001,0c1.212,0,2.152,0.904,2.188,2.059
c0.035,1.171-0.889,2.153-2.06,2.189c-19.459,0.596-27.126,13.449-29.519,18.947l-0.189,0.435l0.467,0.084
c18.043,3.237,28.312,12.513,33.747,19.724c6.356,8.433,7.947,16.162,8.012,16.487c0.112,0.557,0,1.124-0.314,1.596
c-0.315,0.472-0.795,0.794-1.352,0.905C351.276,243.112,351.137,243.125,350.998,243.125z"/>
</g>
<path class="st27" d="M343.5,335C278.71,335,226,282.29,226,217.5S278.71,100,343.5,100S461,152.71,461,217.5
S408.29,335,343.5,335z M343.5,106C282.019,106,232,156.019,232,217.5S282.019,329,343.5,329S455,278.981,455,217.5
S404.981,106,343.5,106z"/>
<path class="st27" d="M386.5,328.5c-16.542,0-30,13.458-30,30c0,0.416,0.015,0.829,0.031,1.241
c-2.752,0.155-5.522,0.259-8.281,0.259c-79.815,0-144.75-64.935-144.75-144.75c0-28.121,8.056-55.269,23.281-78.712
c4.465,2.64,9.667,4.162,15.219,4.162c16.542,0,30-13.458,30-30s-13.458-30-30-30s-30,13.458-30,30
c0,8.469,3.534,16.125,9.197,21.585c-16.15,24.681-24.697,53.309-24.697,82.965c0,83.675,68.075,151.75,151.75,151.75
c3.131,0,6.277-0.121,9.395-0.311c3.574,12.573,15.152,21.811,28.855,21.811c16.542,0,30-13.458,30-30S403.042,328.5,386.5,328.5z
M218,110.7c0-13.234,10.766-24,24-24s24,10.766,24,24s-10.766,24-24,24S218,123.934,218,110.7z M386.5,382.5
c-13.234,0-24-10.767-24-24c0-13.234,10.766-24,24-24s24,10.766,24,24C410.5,371.733,399.734,382.5,386.5,382.5z"/>
<path class="st28" d="M1030.99,1.04l-48,0.04l-96.01,0.09l-96.01,0.1l-96.02,0.18L502.93,2l-12.02,0.07
c-4.08,0.02-8.18,0.22-12.29,0.56c-8.2,0.71-16.56,2.25-24.46,5.54c-3.94,1.64-7.72,3.71-11.2,6.15c-3.48,2.44-6.67,5.2-9.64,8.11
c-5.92,5.84-11.02,12.17-16,18.48s-9.83,12.7-14.77,18.89c-2.42,3.07-5.02,5.97-7.69,8.81c-2.71,2.79-5.53,5.45-8.49,7.95
c-5.36,4.52-11.19,8.44-17.42,11.48C372.75,83.02,375,76.77,375,70c0-16.54-13.46-30-30-30s-30,13.46-30,30
c0,16.49,13.38,29.91,29.85,30c0.65,0.05,1.1,0.05,1.64,0.06c0.56,0.01,1.1-0.01,1.65-0.03c1.07-0.05,2.15-0.12,3.2-0.25
c2.12-0.23,4.2-0.6,6.26-1.07c4.11-0.93,8.08-2.32,11.92-3.95c7.65-3.34,14.7-7.87,21.08-13.11c3.18-2.63,6.2-5.43,9.09-8.35
c2.85-2.97,5.62-6,8.19-9.19c5.1-6.27,9.98-12.58,14.98-18.79c4.98-6.19,10.02-12.3,15.56-17.64c2.77-2.67,5.68-5.13,8.77-7.25
c3.09-2.13,6.39-3.89,9.85-5.29c6.92-2.82,14.5-4.18,22.22-4.77c3.87-0.28,7.77-0.43,11.69-0.42L502.93,10l192.02,0.55l96.02,0.18
l96.01,0.1l96.01,0.09l48,0.04l20.01,0.03V1.01L1030.99,1.04z M345,94c-13.23,0-24-10.77-24-24c0-13.23,10.77-24,24-24
s24,10.77,24,24C369,83.23,358.23,94,345,94z"/>
<path class="st29" d="M579.5,133.11c-49.5,0-97.71-0.05-119.86-0.08c7.71-5.44,12.76-14.4,12.76-24.53c0-16.54-13.46-30-30-30
c-16.54,0-30,13.46-30,30c0,16.54,13.46,30,30,30c0.56,0,1.12-0.02,1.67-0.05c16.1,0.59,77.37,2.66,135.43,2.66H1051v-8H579.5z
M442.4,132.5c-13.23,0-24-10.77-24-24c0-13.23,10.77-24,24-24c13.23,0,24,10.77,24,24C466.4,121.73,455.63,132.5,442.4,132.5z"/>
<path class="st30" d="M1045.55,239.99l-37.94-0.01l-75.89-0.03l-151.79,0.04l-151.78,0.2l-37.94,0.05
c-6.32-0.02-12.68,0.09-18.95-0.01l-9.43-0.09l-9.41-0.36c-12.53-0.62-25.04-1.66-37.35-3.73c-6.16-1-12.24-2.34-18.19-4.02
c-0.18-0.05-0.37-0.11-0.56-0.16c13.62-2.84,23.88-14.93,23.88-29.37c0-16.54-13.46-30-30-30c-16.54,0-30,13.46-30,30
c0,12.08,7.18,22.5,17.49,27.26c0.6,0.42,1.11,0.72,1.68,1.07c0.74,0.46,1.48,0.82,2.22,1.23c1.49,0.73,2.98,1.47,4.5,2.07
c0.76,0.31,1.51,0.65,2.27,0.93l2.29,0.84c1.53,0.58,3.08,1.04,4.62,1.52c6.19,1.9,12.46,3.37,18.77,4.47
c12.62,2.28,25.35,3.52,38.07,4.19l9.55,0.42l9.55,0.15c3.18,0.07,6.35,0.09,9.51,0.09l9.49,0.02l37.94,0.05l151.78,0.2
l151.79,0.04l75.89-0.03l37.94-0.01h5.45v-7.02H1045.55z M490.2,226.5c-13.23,0-24-10.77-24-24c0-13.23,10.77-24,24-24
c13.23,0,24,10.77,24,24C514.2,215.73,503.43,226.5,490.2,226.5z"/>
<path class="st30" d="M563.5,187.5c0,6.34,5.16,11.5,11.5,11.5h476v5H575c-9.1,0-16.5-7.4-16.5-16.5c0-9.1,7.4-16.5,16.5-16.5h476
v5H575C568.66,176,563.5,181.16,563.5,187.5z"/>
<path class="st30" d="M645.4,283.96c2.21-0.98,4.51-1.46,6.98-1.46H1051v-5H651c-2.88,0-5.58,0.74-7.94,2.04
c-5.39,2.52-10.28,7.43-15.17,15.12l-1.83,2.88c-6.12,9.67-11.42,18.03-16.45,21.38c-5.23,3.49-14.9,3.09-14.99,3.08H484.58
c7.69-5.44,12.72-14.39,12.72-24.5c0-16.54-13.46-30-30-30c-16.54,0-30,13.46-30,30c0,16.54,13.46,30,30,30
c0.83,0,1.66-0.04,2.47-0.11L594.45,327c0.16,0.01,0.59,0.02,1.22,0.02c3.15,0,11.36-0.37,16.72-3.94
c5.91-3.94,11.47-12.71,17.9-22.87l1.82-2.87c0.81-1.27,1.61-2.44,2.4-3.54c0,0.07-0.01,0.13-0.01,0.2c0,9.1,7.4,16.5,16.5,16.5
h400v-5H651c-6.34,0-11.5-5.16-11.5-11.5C639.5,289.69,641.88,285.93,645.4,283.96z M467.3,321.5c-13.23,0-24-10.77-24-24
c0-13.23,10.77-24,24-24c13.23,0,24,10.77,24,24C491.3,310.73,480.53,321.5,467.3,321.5z"/>
<path class="st29" d="M691,478.5c0,44.94,36.56,81.5,81.5,81.5H1051v7H772.5c-48.8,0-88.5-39.7-88.5-88.5s39.7-88.5,88.5-88.5
H1051v7H772.5C727.56,397,691,433.56,691,478.5z"/>
<path class="st31" d="M1051,383.75v7H769.92c-21.93,0.12-42.7,8.51-58.44,23.62c-16.16,15.51-25.57,36.91-26.48,60.27
c-0.47,11.89-7.55,45.14-8.06,47.51c-0.21,1.28-2.1,11.28-10.21,22.01c-5.97,7.88-16.33,17.65-33.65,23.14h-55.05
c11.49-0.68,23.88-2,36.56-3.51c49.05-5.82,55.21-41.32,55.45-42.83l0.04-0.19c0.07-0.35,7.47-34.93,7.92-46.41
c0.99-25.17,11.16-48.27,28.63-65.04c17.05-16.36,39.52-25.44,63.27-25.57H1051z"/>
</g>
<g id="balls3">
<circle class="ball-middle st52" cx="231" cy="481" r="11"/>
<circle class="ball-middle st52" cx="126" cy="373" r="11"/>
<circle class="ball-middle st52" cx="273" cy="592" r="11"/>
<circle class="ball-middle st52" cx="194" cy="547" r="11"/>
<circle class="ball-middle st52" cx="53.3" cy="276" r="11"/>
<circle class="ball-middle st52" cx="387.7" cy="475" r="11"/>
<circle class="ball-middle st52" cx="75.5" cy="588.5" r="11"/>
<circle class="ball-middle st52" cx="499" cy="433" r="11"/>
<circle class="ball-middle st52" cx="261" cy="395" r="11"/>
<circle class="ball-middle st52" cx="71" cy="151.4" r="11"/>
</g>
<g id="structure2">
<g class="gears">
<g class="gear gear__big">
<g>
<path class="st1" d="M709.618,451.854c-2.157-3.229-5.371-6.997-8.888-10.917c-4.284,8.071-7.247,16.947-8.601,26.347
c5.158-1.089,9.979-2.22,13.617-3.525C706.682,459.638,707.978,455.656,709.618,451.854z"/>
<path class="st1" d="M772.531,410.469c2.164,0,4.302,0.112,6.415,0.309c2.419-3.048,5.017-7.265,7.659-11.819
c-4.574-0.799-9.271-1.24-14.074-1.24c-4.803,0-9.5,0.441-14.074,1.24c2.642,4.554,5.239,8.771,7.659,11.819
C768.229,410.581,770.367,410.469,772.531,410.469z"/>
<path class="st1" d="M737.512,420.098c0.128-3.872-0.276-8.807-0.83-14.047c-8.397,4.136-15.969,9.682-22.422,16.325
c4.817,2.14,9.392,4.041,13.121,5.102C730.519,424.724,733.905,422.248,737.512,420.098z"/>
<path class="st1" d="M835.444,506.083c2.157,3.229,5.371,6.997,8.888,10.917c4.284-8.071,7.246-16.947,8.601-26.347
c-5.158,1.089-9.979,2.22-13.617,3.525C838.381,498.299,837.085,502.282,835.444,506.083z"/>
<path class="st1" d="M807.551,420.098c3.606,2.15,6.992,4.626,10.131,7.38c3.729-1.061,8.304-2.962,13.121-5.102
c-6.453-6.643-14.025-12.189-22.422-16.325C807.828,411.291,807.423,416.226,807.551,420.098z"/>
<path class="st1" d="M839.315,463.759c3.639,1.305,8.459,2.436,13.617,3.525c-1.354-9.399-4.316-18.275-8.6-26.346
c-3.517,3.92-6.731,7.688-8.888,10.916C837.085,455.656,838.381,459.638,839.315,463.759z"/>
<path class="st1" d="M705.747,494.178c-3.639-1.305-8.459-2.436-13.617-3.525c1.354,9.4,4.317,18.276,8.601,26.347
c3.517-3.92,6.731-7.688,8.888-10.916C707.977,502.281,706.682,498.299,705.747,494.178z"/>
<path class="st1" d="M817.681,530.46c-3.138,2.754-6.524,5.23-10.13,7.379c-0.128,3.872,0.276,8.807,0.83,14.047
c8.397-4.136,15.969-9.682,22.422-16.325C825.986,533.422,821.411,531.521,817.681,530.46z"/>
<path class="st1" d="M737.511,537.839c-3.606-2.15-6.992-4.626-10.131-7.38c-3.729,1.061-8.305,2.962-13.121,5.102
c6.453,6.643,14.025,12.189,22.422,16.325C737.235,546.646,737.639,541.711,737.511,537.839z"/>
<path class="st1" d="M772.531,547.469c-2.164,0-4.302-0.112-6.415-0.309c-2.419,3.048-5.017,7.265-7.659,11.819
c4.574,0.799,9.271,1.24,14.074,1.24c4.803,0,9.5-0.441,14.074-1.24c-2.642-4.554-5.239-8.771-7.659-11.819
C776.833,547.356,774.695,547.469,772.531,547.469z"/>
<g>
<path class="st32" d="M757.944,557.871c-7.017-1.288-13.805-3.499-20.196-6.577c0.465-4.48,0.896-9.487,0.762-13.488
l-0.018-0.546l-0.47-0.28c-3.512-2.094-6.87-4.54-9.981-7.271l-0.41-0.36l-0.523,0.149c-3.875,1.103-8.503,3.049-12.614,4.866
c-4.941-5.176-9.159-10.962-12.55-17.219c2.843-3.183,6.253-7.133,8.506-10.506l0.303-0.452l-0.216-0.5
c-1.613-3.739-2.896-7.686-3.813-11.729l-0.122-0.535l-0.516-0.186c-3.745-1.343-8.646-2.476-13.062-3.416
c-0.492-3.635-0.742-7.281-0.742-10.852s0.25-7.217,0.742-10.852c4.416-0.94,9.317-2.074,13.062-3.417l0.516-0.186l0.122-0.534
c0.917-4.046,2.2-7.992,3.813-11.73l0.216-0.5l-0.303-0.452c-2.251-3.37-5.662-7.321-8.506-10.505
c3.392-6.258,7.61-12.046,12.551-17.22c4.11,1.816,8.736,3.763,12.613,4.866l0.523,0.149l0.409-0.359
c3.116-2.734,6.476-5.181,9.983-7.271l0.47-0.28l0.018-0.546c0.133-4.008-0.297-9.013-0.762-13.489
c6.389-3.077,13.176-5.287,20.195-6.576c2.147,3.682,4.854,8.141,7.389,11.333l0.337,0.424l0.539-0.05
c2.204-0.205,4.272-0.305,6.322-0.305s4.118,0.1,6.322,0.305l0.539,0.05l0.337-0.424c2.539-3.199,5.244-7.654,7.389-11.333
c7.018,1.288,13.805,3.499,20.196,6.577c-0.465,4.48-0.896,9.487-0.762,13.488l0.018,0.546l0.47,0.28
c3.512,2.094,6.87,4.54,9.981,7.271l0.41,0.36l0.523-0.149c3.875-1.103,8.503-3.049,12.614-4.866
c4.941,5.176,9.159,10.962,12.55,17.219c-2.843,3.183-6.253,7.133-8.506,10.506l-0.303,0.452l0.216,0.5
c1.613,3.739,2.896,7.686,3.813,11.729l0.122,0.535l0.516,0.186c3.745,1.343,8.646,2.476,13.062,3.416
c0.492,3.635,0.742,7.281,0.742,10.852s-0.25,7.217-0.742,10.852c-4.416,0.94-9.317,2.074-13.062,3.417l-0.516,0.186
l-0.122,0.534c-0.917,4.044-2.2,7.99-3.813,11.73l-0.216,0.5l0.302,0.452c2.252,3.371,5.663,7.322,8.507,10.505
c-3.392,6.257-7.609,12.044-12.551,17.219c-4.112-1.817-8.74-3.763-12.613-4.865l-0.523-0.149l-0.409,0.359
c-3.116,2.734-6.476,5.181-9.983,7.271l-0.47,0.28l-0.018,0.546c-0.133,4.008,0.297,9.013,0.762,13.489
c-6.389,3.077-13.176,5.287-20.196,6.576c-2.146-3.681-4.851-8.138-7.388-11.333l-0.337-0.424l-0.539,0.05
c-2.204,0.205-4.272,0.305-6.322,0.305s-4.118-0.1-6.322-0.305l-0.539-0.05l-0.337,0.424
C762.799,549.73,760.092,554.189,757.944,557.871z"/>
<path class="st33" d="M757.437,401.179c2.101,3.582,4.674,7.77,7.113,10.842l0.673,0.848l1.078-0.1
c2.174-0.202,4.212-0.3,6.23-0.3c2.018,0,4.055,0.098,6.23,0.3l1.078,0.1l0.673-0.848c2.439-3.072,5.012-7.26,7.113-10.842
c6.457,1.245,12.708,3.28,18.622,6.064c-0.439,4.327-0.822,9.066-0.695,12.922l0.036,1.092l0.939,0.56
c3.458,2.062,6.767,4.472,9.836,7.165l0.819,0.719l1.048-0.298c3.728-1.061,8.119-2.881,12.097-4.628
c4.512,4.809,8.399,10.141,11.577,15.881c-2.764,3.109-5.959,6.851-8.122,10.089l-0.604,0.905l0.431,0.999
c1.589,3.682,2.853,7.57,3.757,11.555l0.243,1.07l1.033,0.37c3.605,1.293,8.237,2.387,12.499,3.305
c0.426,3.358,0.642,6.723,0.642,10.021c0,3.299-0.216,6.664-0.642,10.022c-4.263,0.918-8.894,2.013-12.499,3.305l-1.033,0.37
l-0.243,1.07c-0.904,3.986-2.168,7.873-3.757,11.555l-0.431,0.999l0.604,0.905c2.163,3.238,5.358,6.979,8.122,10.089
c-3.178,5.74-7.064,11.072-11.577,15.881c-3.978-1.747-8.37-3.568-12.097-4.629l-1.048-0.298l-0.819,0.719
c-3.069,2.693-6.378,5.104-9.835,7.165l-0.939,0.56l-0.036,1.092c-0.128,3.856,0.255,8.595,0.695,12.922
c-5.913,2.783-12.164,4.819-18.622,6.063c-2.101-3.582-4.674-7.77-7.113-10.842l-0.673-0.848l-1.078,0.1
c-2.174,0.202-4.212,0.3-6.23,0.3s-4.055-0.098-6.23-0.3l-1.078-0.1l-0.673,0.848c-2.439,3.072-5.012,7.26-7.113,10.842
c-6.457-1.245-12.708-3.28-18.622-6.063c0.439-4.327,0.822-9.066,0.695-12.922l-0.036-1.092l-0.939-0.56
c-3.458-2.062-6.767-4.472-9.836-7.165l-0.819-0.719l-1.048,0.298c-3.728,1.061-8.12,2.881-12.098,4.628
c-4.512-4.809-8.399-10.141-11.577-15.881c2.764-3.109,5.959-6.85,8.122-10.089l0.604-0.905l-0.431-0.999
c-1.589-3.682-2.853-7.57-3.757-11.555l-0.243-1.07l-1.033-0.37c-3.605-1.293-8.237-2.388-12.499-3.305
c-0.426-3.358-0.642-6.723-0.642-10.021c0-3.299,0.216-6.663,0.642-10.022c4.262-0.918,8.894-2.013,12.499-3.305l1.033-0.37
l0.243-1.07c0.904-3.986,2.168-7.873,3.757-11.555l0.431-0.999l-0.604-0.905c-2.163-3.238-5.358-6.98-8.122-10.089
c3.177-5.74,7.064-11.072,11.577-15.881c3.978,1.747,8.37,3.568,12.098,4.629l1.048,0.298l0.819-0.719
c3.068-2.692,6.377-5.103,9.836-7.165l0.939-0.56l0.036-1.092c0.128-3.856-0.255-8.595-0.695-12.922
C744.729,404.459,750.98,402.424,757.437,401.179 M758.458,398.958c-7.683,1.343-14.997,3.753-21.776,7.092
c0.554,5.24,0.958,10.175,0.83,14.047c-3.606,2.15-6.992,4.625-10.131,7.379c-3.729-1.061-8.305-2.962-13.121-5.102
c-5.338,5.495-9.906,11.737-13.529,18.562c3.517,3.92,6.731,7.688,8.888,10.917c-1.641,3.802-2.937,7.784-3.871,11.905
c-3.639,1.305-8.459,2.436-13.617,3.525c-0.55,3.817-0.849,7.715-0.849,11.684c0,3.969,0.299,7.867,0.849,11.684
c5.158,1.089,9.979,2.22,13.617,3.525c0.935,4.121,2.23,8.103,3.871,11.905c-2.157,3.229-5.371,6.997-8.888,10.916
c3.623,6.825,8.191,13.067,13.529,18.562c4.817-2.14,9.392-4.041,13.121-5.102c3.138,2.754,6.524,5.23,10.131,7.38
c0.128,3.872-0.276,8.807-0.83,14.047c6.779,3.339,14.093,5.75,21.776,7.092c2.642-4.554,5.24-8.771,7.659-11.819
c2.113,0.196,4.25,0.309,6.415,0.309s4.302-0.112,6.415-0.309c2.419,3.048,5.017,7.265,7.659,11.819
c7.683-1.343,14.997-3.753,21.776-7.092c-0.554-5.24-0.958-10.175-0.83-14.047c3.606-2.15,6.992-4.625,10.13-7.379
c3.729,1.061,8.304,2.962,13.121,5.102c5.338-5.495,9.906-11.737,13.529-18.562c-3.517-3.92-6.731-7.688-8.888-10.917
c1.641-3.802,2.937-7.784,3.871-11.905c3.639-1.305,8.459-2.436,13.617-3.525c0.55-3.817,0.849-7.715,0.849-11.684
c0-3.969-0.299-7.867-0.849-11.684c-5.158-1.089-9.979-2.22-13.617-3.525c-0.935-4.121-2.23-8.103-3.871-11.905
c2.157-3.229,5.371-6.997,8.888-10.916c-3.623-6.825-8.191-13.067-13.529-18.562c-4.817,2.14-9.392,4.041-13.121,5.102
c-3.138-2.754-6.524-5.23-10.131-7.38c-0.128-3.872,0.276-8.807,0.83-14.047c-6.779-3.34-14.093-5.75-21.776-7.093
c-2.642,4.554-5.24,8.771-7.659,11.819c-2.113-0.196-4.251-0.309-6.415-0.309c-2.164,0-4.302,0.112-6.415,0.309
C763.697,407.73,761.099,403.512,758.458,398.958L758.458,398.958z"/>
</g>
</g>
<g>
<g>
<path class="st34" d="M773,534.125c-30.396,0-55.125-24.729-55.125-55.125s24.729-55.125,55.125-55.125
s55.125,24.729,55.125,55.125S803.396,534.125,773,534.125z M773,427.125c-28.604,0-51.875,23.271-51.875,51.875
s23.271,51.875,51.875,51.875s51.875-23.271,51.875-51.875S801.604,427.125,773,427.125z"/>
</g>
<path class="st35" d="M773,424.25c30.189,0,54.75,24.561,54.75,54.75c0,30.189-24.561,54.75-54.75,54.75
s-54.75-24.561-54.75-54.75C718.25,448.811,742.811,424.25,773,424.25 M773,531.25c28.811,0,52.25-23.439,52.25-52.25
c0-28.811-23.439-52.25-52.25-52.25s-52.25,23.439-52.25,52.25C720.75,507.811,744.189,531.25,773,531.25 M773,423.5
c-30.603,0-55.5,24.897-55.5,55.5s24.897,55.5,55.5,55.5s55.5-24.897,55.5-55.5S803.603,423.5,773,423.5L773,423.5z M773,530.5
c-28.397,0-51.5-23.103-51.5-51.5s23.103-51.5,51.5-51.5s51.5,23.103,51.5,51.5S801.397,530.5,773,530.5L773,530.5z"/>
</g>
<g>
<g>
<path class="st34" d="M773,516.125c-20.471,0-37.125-16.654-37.125-37.125s16.654-37.125,37.125-37.125
s37.125,16.654,37.125,37.125S793.471,516.125,773,516.125z M773,445.125c-18.679,0-33.875,15.196-33.875,33.875
s15.196,33.875,33.875,33.875s33.875-15.196,33.875-33.875S791.679,445.125,773,445.125z"/>
</g>
<path class="st35" d="M773,442.25c20.264,0,36.75,16.486,36.75,36.75c0,20.264-16.486,36.75-36.75,36.75
s-36.75-16.486-36.75-36.75C736.25,458.736,752.736,442.25,773,442.25 M773,513.25c18.885,0,34.25-15.365,34.25-34.25
s-15.365-34.25-34.25-34.25s-34.25,15.365-34.25,34.25S754.115,513.25,773,513.25 M773,441.5c-20.678,0-37.5,16.822-37.5,37.5
s16.822,37.5,37.5,37.5s37.5-16.822,37.5-37.5S793.678,441.5,773,441.5L773,441.5z M773,512.5c-18.472,0-33.5-15.028-33.5-33.5
s15.028-33.5,33.5-33.5s33.5,15.028,33.5,33.5S791.472,512.5,773,512.5L773,512.5z"/>
</g>
<g>
<g>
<path class="st34" d="M773,497.125c-9.994,0-18.125-8.131-18.125-18.125s8.131-18.125,18.125-18.125
s18.125,8.131,18.125,18.125S782.994,497.125,773,497.125z M773,464.125c-8.202,0-14.875,6.673-14.875,14.875
s6.673,14.875,14.875,14.875s14.875-6.673,14.875-14.875S781.202,464.125,773,464.125z"/>
</g>
<path class="st35" d="M773,461.25c9.787,0,17.75,7.963,17.75,17.75c0,9.787-7.963,17.75-17.75,17.75s-17.75-7.963-17.75-17.75
C755.25,469.213,763.213,461.25,773,461.25 M773,494.25c8.409,0,15.25-6.841,15.25-15.25s-6.841-15.25-15.25-15.25
s-15.25,6.841-15.25,15.25S764.591,494.25,773,494.25 M773,460.5c-10.201,0-18.5,8.299-18.5,18.5s8.299,18.5,18.5,18.5
s18.5-8.299,18.5-18.5S783.201,460.5,773,460.5L773,460.5z M773,493.5c-7.995,0-14.5-6.505-14.5-14.5s6.505-14.5,14.5-14.5
s14.5,6.505,14.5,14.5S780.995,493.5,773,493.5L773,493.5z"/>
</g>
</g>
<g class="gear gear__middle">
<g>
<path class="st1" d="M916.5,443.965c1.692,0,3.362,0.088,5.014,0.241c1.891-2.382,3.921-5.678,5.986-9.237
c-3.575-0.625-7.246-0.969-11-0.969c-3.753,0-7.424,0.344-10.999,0.969c2.065,3.559,4.095,6.855,5.986,9.237
C913.138,444.053,914.809,443.965,916.5,443.965z"/>
<path class="st1" d="M867.331,476.309c-1.686-2.523-4.198-5.468-6.946-8.532c-3.348,6.308-5.663,13.245-6.722,20.591
c4.031-0.851,7.799-1.735,10.642-2.755C865.036,482.392,866.049,479.28,867.331,476.309z"/>
<path class="st1" d="M889.131,451.49c0.1-3.026-0.216-6.883-0.649-10.979c-6.562,3.233-12.48,7.567-17.524,12.758
c3.765,1.673,7.34,3.158,10.255,3.987C883.666,455.105,886.312,453.171,889.131,451.49z"/>
<path class="st1" d="M943.87,451.491c2.818,1.68,5.465,3.615,7.917,5.767c2.915-0.829,6.49-2.315,10.255-3.987
c-5.043-5.192-10.961-9.526-17.524-12.759C944.086,444.607,943.769,448.464,943.87,451.491z"/>
<path class="st1" d="M968.695,485.613c2.844,1.02,6.611,1.904,10.642,2.755c-1.058-7.346-3.373-14.283-6.722-20.591
c-2.749,3.063-5.26,6.008-6.946,8.532C966.951,479.28,967.964,482.393,968.695,485.613z"/>
<path class="st1" d="M965.669,518.691c1.686,2.523,4.198,5.468,6.946,8.532c3.348-6.308,5.663-13.245,6.722-20.591
c-4.031,0.851-7.799,1.735-10.642,2.755C967.964,512.608,966.951,515.72,965.669,518.691z"/>
<path class="st1" d="M951.787,537.742c-2.453,2.152-5.099,4.087-7.917,5.767c-0.1,3.026,0.216,6.883,0.649,10.979
c6.562-3.233,12.48-7.566,17.523-12.758C958.277,540.057,954.701,538.572,951.787,537.742z"/>
<path class="st1" d="M864.306,509.387c-2.844-1.02-6.611-1.904-10.642-2.755c1.058,7.346,3.373,14.283,6.722,20.591
c2.749-3.063,5.26-6.008,6.946-8.532C866.049,515.72,865.036,512.607,864.306,509.387z"/>
<path class="st1" d="M889.13,543.509c-2.818-1.68-5.465-3.615-7.917-5.767c-2.915,0.829-6.49,2.315-10.255,3.987
c5.043,5.192,10.961,9.526,17.523,12.759C888.915,550.393,889.231,546.536,889.13,543.509z"/>
<path class="st1" d="M916.5,551.035c-1.691,0-3.362-0.088-5.013-0.241c-1.891,2.382-3.921,5.678-5.986,9.237
c3.575,0.625,7.246,0.969,10.999,0.969c3.753,0,7.424-0.344,10.999-0.969c-2.065-3.559-4.095-6.855-5.986-9.237
C919.862,550.947,918.191,551.035,916.5,551.035z"/>
<g>
<path class="st32" d="M928.011,558.923c-1.667-2.855-3.752-6.278-5.714-8.751l-0.337-0.424l-0.539,0.05
c-1.717,0.16-3.326,0.237-4.921,0.237s-3.204-0.077-4.921-0.237l-0.539-0.05l-0.337,0.424
c-1.962,2.473-4.047,5.896-5.714,8.751c-5.363-0.999-10.551-2.688-15.44-5.028c0.357-3.468,0.684-7.321,0.581-10.418
l-0.018-0.546l-0.47-0.279c-2.732-1.63-5.347-3.534-7.771-5.661l-0.409-0.359l-0.523,0.149
c-2.997,0.853-6.562,2.346-9.746,3.751c-3.769-3.967-6.992-8.39-9.596-13.164c2.207-2.474,4.824-5.515,6.565-8.12l0.302-0.452
l-0.216-0.5c-1.256-2.91-2.254-5.981-2.968-9.129l-0.122-0.535l-0.516-0.186c-2.903-1.041-6.672-1.917-10.086-2.646
c-0.37-2.78-0.558-5.568-0.558-8.3s0.188-5.52,0.558-8.3c3.42-0.73,7.192-1.608,10.086-2.646l0.516-0.186l0.122-0.535
c0.714-3.147,1.712-6.219,2.968-9.129l0.216-0.5l-0.302-0.452c-1.741-2.605-4.358-5.646-6.565-8.12
c2.605-4.777,5.83-9.2,9.597-13.164c3.186,1.405,6.749,2.897,9.744,3.751l0.524,0.149l0.409-0.359
c2.424-2.127,5.038-4.031,7.771-5.661l0.47-0.279l0.018-0.546c0.104-3.096-0.223-6.949-0.58-10.418
c4.889-2.34,10.076-4.029,15.439-5.028c1.667,2.855,3.752,6.278,5.714,8.751l0.337,0.424l0.539-0.05
c1.717-0.16,3.326-0.237,4.921-0.237s3.204,0.077,4.921,0.237l0.539,0.05l0.337-0.424c1.96-2.47,4.046-5.894,5.715-8.751
c5.363,0.999,10.551,2.688,15.439,5.028c-0.357,3.468-0.684,7.321-0.581,10.418l0.018,0.546l0.47,0.28
c2.732,1.629,5.347,3.533,7.771,5.66l0.409,0.358l0.523-0.148c2.995-0.852,6.56-2.345,9.746-3.751
c3.768,3.965,6.991,8.389,9.596,13.164c-2.207,2.474-4.824,5.515-6.565,8.12l-0.302,0.452l0.216,0.5
c1.256,2.91,2.254,5.981,2.968,9.129l0.122,0.535l0.516,0.186c2.903,1.041,6.672,1.917,10.086,2.646
c0.37,2.78,0.558,5.568,0.558,8.3s-0.188,5.52-0.558,8.3c-3.42,0.73-7.192,1.608-10.086,2.646l-0.516,0.186l-0.122,0.535
c-0.714,3.147-1.712,6.219-2.968,9.129l-0.216,0.5l0.302,0.452c1.741,2.605,4.358,5.646,6.565,8.12
c-2.605,4.777-5.83,9.2-9.597,13.164c-3.033-1.338-6.733-2.894-9.744-3.751l-0.524-0.149l-0.409,0.359
c-2.424,2.127-5.038,4.031-7.771,5.66l-0.47,0.28l-0.018,0.546c-0.103,3.103,0.223,6.953,0.58,10.418
C938.562,556.234,933.374,557.924,928.011,558.923z"/>
<path class="st33" d="M904.484,437.193c1.62,2.751,3.575,5.912,5.436,8.257l0.673,0.848l1.078-0.1
c1.686-0.157,3.265-0.233,4.828-0.233s3.143,0.076,4.829,0.233l1.078,0.1l0.673-0.848c1.862-2.345,3.817-5.505,5.437-8.257
c4.802,0.951,9.455,2.465,13.868,4.515c-0.332,3.312-0.611,6.902-0.514,9.849l0.036,1.092l0.939,0.56
c2.68,1.598,5.244,3.466,7.622,5.553l0.819,0.719l1.048-0.298c2.849-0.811,6.18-2.18,9.227-3.513
c3.342,3.598,6.235,7.566,8.623,11.829c-2.202,2.483-4.526,5.227-6.179,7.701l-0.604,0.905l0.431,0.999
c1.231,2.853,2.211,5.865,2.911,8.954l0.243,1.07l1.033,0.37c2.755,0.988,6.26,1.827,9.521,2.533
c0.305,2.504,0.46,5.011,0.46,7.471c0,2.46-0.155,4.966-0.46,7.471c-3.261,0.707-6.766,1.546-9.521,2.534l-1.033,0.37
l-0.243,1.07c-0.701,3.089-1.68,6.101-2.911,8.954l-0.431,0.999l0.604,0.905c1.652,2.473,3.976,5.218,6.179,7.701
c-2.388,4.263-5.281,8.232-8.623,11.829c-3.047-1.333-6.378-2.702-9.227-3.513l-1.048-0.298l-0.819,0.719
c-2.379,2.087-4.943,3.955-7.622,5.553l-0.938,0.56l-0.036,1.092c-0.098,2.947,0.182,6.537,0.514,9.849
c-4.413,2.05-9.067,3.565-13.868,4.515c-1.62-2.751-3.575-5.912-5.436-8.257l-0.673-0.848l-1.078,0.1
c-1.686,0.157-3.265,0.233-4.828,0.233s-3.143-0.076-4.828-0.233l-1.078-0.1l-0.673,0.848
c-1.862,2.345-3.817,5.505-5.437,8.257c-4.802-0.951-9.455-2.465-13.868-4.515c0.332-3.312,0.611-6.902,0.514-9.849
l-0.036-1.092l-0.939-0.56c-2.68-1.598-5.244-3.466-7.622-5.553l-0.819-0.719l-1.048,0.298c-2.849,0.811-6.18,2.18-9.227,3.513
c-3.342-3.597-6.236-7.567-8.623-11.829c2.121-2.393,4.527-5.228,6.179-7.7l0.604-0.905l-0.431-0.999
c-1.231-2.853-2.211-5.866-2.911-8.954l-0.243-1.07l-1.033-0.37c-2.755-0.988-6.26-1.827-9.521-2.533
c-0.305-2.504-0.46-5.011-0.46-7.471c0-2.459,0.154-4.966,0.46-7.471c3.261-0.707,6.766-1.546,9.521-2.534l1.033-0.37
l0.243-1.07c0.701-3.089,1.68-6.101,2.911-8.954l0.431-0.999l-0.604-0.905c-1.652-2.473-3.976-5.218-6.179-7.701
c2.388-4.262,5.281-8.232,8.623-11.829c3.047,1.333,6.378,2.702,9.227,3.513l1.048,0.298l0.819-0.719
c2.378-2.087,4.942-3.955,7.622-5.553l0.938-0.56l0.036-1.092c0.098-2.947-0.182-6.537-0.514-9.849
C895.029,439.658,899.682,438.143,904.484,437.193 M905.501,434.969c-6.005,1.049-11.721,2.933-17.019,5.543
c0.433,4.095,0.749,7.953,0.649,10.979c-2.818,1.68-5.465,3.615-7.917,5.767c-2.915-0.829-6.49-2.315-10.255-3.987
c-4.172,4.295-7.742,9.173-10.573,14.507c2.749,3.063,5.26,6.008,6.946,8.532c-1.282,2.971-2.295,6.084-3.026,9.304
c-2.844,1.02-6.611,1.904-10.642,2.755c-0.43,2.983-0.663,6.03-0.663,9.132s0.233,6.149,0.663,9.132
c4.031,0.851,7.799,1.735,10.642,2.755c0.73,3.221,1.743,6.333,3.025,9.304c-1.686,2.523-4.198,5.468-6.946,8.532
c2.831,5.334,6.402,10.212,10.573,14.507c3.765-1.673,7.34-3.158,10.255-3.987c2.453,2.152,5.099,4.087,7.917,5.767
c0.1,3.026-0.216,6.883-0.649,10.979c5.298,2.61,11.014,4.494,17.019,5.543c2.065-3.559,4.095-6.855,5.986-9.237
c1.651,0.153,3.322,0.241,5.013,0.241s3.362-0.088,5.013-0.241c1.891,2.382,3.921,5.678,5.986,9.237
c6.005-1.049,11.721-2.933,17.019-5.543c-0.433-4.095-0.749-7.952-0.649-10.979c2.818-1.68,5.465-3.615,7.917-5.767
c2.915,0.829,6.49,2.315,10.255,3.987c4.172-4.295,7.742-9.173,10.573-14.507c-2.749-3.063-5.26-6.008-6.946-8.532
c1.282-2.971,2.295-6.084,3.026-9.304c2.844-1.02,6.611-1.904,10.642-2.755c0.43-2.983,0.663-6.03,0.663-9.132
s-0.233-6.149-0.663-9.132c-4.031-0.851-7.799-1.735-10.642-2.755c-0.731-3.221-1.743-6.333-3.026-9.304
c1.686-2.523,4.198-5.468,6.946-8.532c-2.831-5.334-6.402-10.212-10.573-14.507c-3.765,1.673-7.34,3.158-10.255,3.987
c-2.453-2.152-5.099-4.087-7.917-5.767c-0.1-3.026,0.216-6.883,0.649-10.979c-5.298-2.61-11.014-4.494-17.019-5.543
c-2.065,3.559-4.095,6.855-5.986,9.237c-1.652-0.153-3.322-0.241-5.014-0.241c-1.691,0-3.362,0.088-5.013,0.241
C909.596,441.824,907.566,438.528,905.501,434.969L905.501,434.969z"/>
</g>
</g>
<g>
<g>
<path class="st34" d="M917,540.125c-22.677,0-41.125-18.448-41.125-41.125s18.448-41.125,41.125-41.125
s41.125,18.448,41.125,41.125S939.677,540.125,917,540.125z M917,460.125c-21.436,0-38.875,17.439-38.875,38.875
s17.439,38.875,38.875,38.875s38.875-17.439,38.875-38.875S938.436,460.125,917,460.125z"/>
</g>
<path class="st35" d="M917,458.25c22.47,0,40.75,18.28,40.75,40.75c0,22.47-18.28,40.75-40.75,40.75s-40.75-18.28-40.75-40.75
C876.25,476.53,894.53,458.25,917,458.25 M917,538.25c21.643,0,39.25-17.607,39.25-39.25s-17.607-39.25-39.25-39.25
s-39.25,17.607-39.25,39.25S895.357,538.25,917,538.25 M917,457.5c-22.883,0-41.5,18.617-41.5,41.5s18.617,41.5,41.5,41.5
s41.5-18.617,41.5-41.5S939.883,457.5,917,457.5L917,457.5z M917,537.5c-21.229,0-38.5-17.271-38.5-38.5s17.271-38.5,38.5-38.5
s38.5,17.271,38.5,38.5S938.229,537.5,917,537.5L917,537.5z"/>
</g>
<g>
<g>
<path class="st34" d="M917,526.671c-15.258,0-27.671-12.413-27.671-27.671s12.413-27.671,27.671-27.671
s27.671,12.413,27.671,27.671S932.258,526.671,917,526.671z M917,473.579c-14.018,0-25.421,11.403-25.421,25.421
s11.403,25.421,25.421,25.421s25.421-11.403,25.421-25.421S931.018,473.579,917,473.579z"/>
</g>
<path class="st35" d="M917,471.704c15.051,0,27.296,12.245,27.296,27.296S932.051,526.296,917,526.296
S889.704,514.051,889.704,499S901.949,471.704,917,471.704 M917,524.796c14.224,0,25.796-11.572,25.796-25.796
S931.224,473.204,917,473.204S891.204,484.776,891.204,499S902.776,524.796,917,524.796 M917,470.954
c-15.465,0-28.046,12.581-28.046,28.046s12.581,28.046,28.046,28.046s28.046-12.581,28.046-28.046S932.465,470.954,917,470.954
L917,470.954z M917,524.046c-13.811,0-25.046-11.235-25.046-25.046s11.235-25.046,25.046-25.046s25.046,11.235,25.046,25.046
S930.811,524.046,917,524.046L917,524.046z"/>
</g>
<g>
<g>
<path class="st34" d="M917,513.579c-8.039,0-14.579-6.54-14.579-14.579s6.54-14.579,14.579-14.579s14.579,6.54,14.579,14.579
S925.039,513.579,917,513.579z M917,486.671c-6.798,0-12.329,5.531-12.329,12.329s5.531,12.329,12.329,12.329
s12.329-5.531,12.329-12.329S923.798,486.671,917,486.671z"/>
</g>
<path class="st35" d="M917,484.796c7.832,0,14.204,6.372,14.204,14.204s-6.372,14.204-14.204,14.204
s-14.204-6.372-14.204-14.204S909.168,484.796,917,484.796 M917,511.704c7.005,0,12.704-5.699,12.704-12.704
s-5.699-12.704-12.704-12.704s-12.704,5.699-12.704,12.704S909.995,511.704,917,511.704 M917,484.046
c-8.246,0-14.954,6.708-14.954,14.954s6.708,14.954,14.954,14.954s14.954-6.708,14.954-14.954S925.246,484.046,917,484.046
L917,484.046z M917,510.954c-6.592,0-11.954-5.362-11.954-11.954s5.362-11.954,11.954-11.954s11.954,5.362,11.954,11.954
S923.592,510.954,917,510.954L917,510.954z"/>
</g>
</g>
<g class="gear gear__small">
<g>
<path class="st1" d="M984.576,510.319c-1.009-1.51-2.512-3.272-4.157-5.106c-2.004,3.775-3.389,7.926-4.022,12.322
c2.412-0.509,4.667-1.038,6.369-1.649C983.203,513.959,983.809,512.097,984.576,510.319z"/>
<path class="st1" d="M997.622,495.467c0.06-1.811-0.129-4.119-0.388-6.57c-3.927,1.935-7.469,4.528-10.487,7.635
c2.253,1.001,4.393,1.89,6.137,2.386C994.351,497.63,995.935,496.472,997.622,495.467z"/>
<path class="st1" d="M1014,490.963c1.012,0,2.012,0.053,3,0.144c1.132-1.425,2.346-3.398,3.582-5.528
c-2.139-0.374-4.336-0.58-6.582-0.58c-2.246,0-4.443,0.206-6.582,0.58c1.235,2.13,2.451,4.102,3.582,5.528
C1011.988,491.016,1012.988,490.963,1014,490.963z"/>
<path class="st1" d="M1045.234,515.887c1.702,0.61,3.956,1.139,6.369,1.649c-0.633-4.396-2.019-8.547-4.022-12.322
c-1.645,1.833-3.148,3.595-4.157,5.105C1044.191,512.097,1044.797,513.959,1045.234,515.887z"/>
<path class="st1" d="M1043.424,535.681c1.009,1.51,2.512,3.272,4.157,5.106c2.004-3.775,3.389-7.926,4.022-12.322
c-2.412,0.509-4.667,1.038-6.369,1.649C1044.797,532.041,1044.191,533.903,1043.424,535.681z"/>
<path class="st1" d="M1030.379,495.467c1.687,1.005,3.27,2.163,4.738,3.451c1.744-0.496,3.884-1.385,6.137-2.386
c-3.018-3.107-6.559-5.701-10.486-7.635C1030.508,491.348,1030.319,493.656,1030.379,495.467z"/>
<path class="st1" d="M1035.116,547.082c-1.468,1.288-3.051,2.446-4.738,3.451c-0.06,1.811,0.129,4.119,0.388,6.57
c3.927-1.935,7.469-4.528,10.487-7.635C1039,548.467,1036.861,547.578,1035.116,547.082z"/>
<path class="st1" d="M1014,555.037c-1.012,0-2.012-0.053-3-0.144c-1.132,1.425-2.347,3.398-3.582,5.528
c2.139,0.374,4.336,0.58,6.582,0.58c2.246,0,4.443-0.206,6.582-0.58c-1.235-2.13-2.451-4.102-3.582-5.528
C1016.012,554.984,1015.012,555.037,1014,555.037z"/>
<path class="st1" d="M997.621,550.533c-1.687-1.005-3.27-2.163-4.738-3.451c-1.744,0.496-3.884,1.385-6.137,2.386
c3.018,3.107,6.559,5.701,10.487,7.635C997.492,554.652,997.681,552.344,997.621,550.533z"/>
<path class="st1" d="M982.766,530.113c-1.702-0.61-3.956-1.139-6.369-1.649c0.633,4.396,2.019,8.547,4.022,12.322
c1.645-1.833,3.148-3.595,4.157-5.106C983.809,533.903,983.203,532.041,982.766,530.113z"/>
<g>
<path class="st32" d="M1021.092,559.31c-0.979-1.669-2.175-3.611-3.309-5.039l-0.337-0.424l-0.539,0.05
c-1.016,0.095-1.967,0.141-2.907,0.141s-1.892-0.046-2.907-0.141l-0.539-0.05l-0.337,0.424
c-1.134,1.428-2.329,3.37-3.309,5.039c-2.983-0.579-5.873-1.52-8.607-2.803c0.203-2.016,0.38-4.217,0.319-6.007l-0.018-0.546
l-0.469-0.279c-1.615-0.963-3.159-2.088-4.591-3.345l-0.409-0.358l-0.523,0.148c-1.731,0.492-3.771,1.336-5.626,2.149
c-2.082-2.225-3.878-4.688-5.351-7.341c1.341-1.509,2.769-3.188,3.773-4.691l0.303-0.452l-0.216-0.5
c-0.74-1.716-1.331-3.53-1.753-5.394l-0.122-0.534l-0.516-0.186c-1.682-0.603-3.829-1.111-5.81-1.538
C977.099,526.08,977,524.524,977,523s0.099-3.08,0.294-4.634c1.98-0.427,4.128-0.936,5.81-1.538l0.516-0.186l0.122-0.534
c0.422-1.863,1.013-3.678,1.753-5.394l0.216-0.5l-0.303-0.452c-1.007-1.507-2.486-3.243-3.772-4.691
c1.471-2.65,3.267-5.115,5.351-7.341c1.85,0.812,3.887,1.655,5.625,2.149l0.523,0.149l0.409-0.359
c1.43-1.255,2.974-2.38,4.591-3.345l0.469-0.279l0.018-0.546c0.061-1.79-0.116-3.991-0.319-6.007
c2.734-1.283,5.624-2.224,8.607-2.803c0.979,1.669,2.175,3.611,3.309,5.039l0.337,0.424l0.539-0.05
c1.016-0.095,1.967-0.141,2.907-0.141s1.892,0.046,2.907,0.141l0.539,0.05l0.337-0.424c1.134-1.428,2.329-3.37,3.309-5.039
c2.984,0.579,5.874,1.52,8.607,2.803c-0.203,2.016-0.38,4.217-0.319,6.007l0.018,0.546l0.469,0.279
c1.614,0.963,3.158,2.088,4.592,3.345l0.409,0.358l0.523-0.148c1.734-0.493,3.773-1.337,5.625-2.149
c2.082,2.225,3.878,4.688,5.351,7.341c-1.341,1.509-2.769,3.188-3.773,4.691l-0.303,0.452l0.216,0.5
c0.74,1.716,1.331,3.53,1.753,5.394l0.122,0.534l0.516,0.186c1.682,0.603,3.829,1.111,5.81,1.538
c0.195,1.554,0.294,3.109,0.294,4.634s-0.099,3.08-0.294,4.634c-1.98,0.427-4.128,0.936-5.81,1.538l-0.516,0.186l-0.122,0.534
c-0.422,1.863-1.013,3.678-1.753,5.394l-0.216,0.5l0.303,0.452c1.007,1.507,2.486,3.243,3.772,4.691
c-1.471,2.65-3.267,5.115-5.351,7.341c-1.85-0.812-3.887-1.655-5.625-2.149l-0.523-0.149l-0.409,0.359
c-1.435,1.259-2.979,2.384-4.59,3.344l-0.47,0.28l-0.018,0.546c-0.061,1.79,0.116,3.991,0.319,6.007
C1026.965,557.79,1024.075,558.73,1021.092,559.31z"/>
<path class="st33" d="M1006.41,487.813c0.921,1.545,1.991,3.238,3.023,4.538l0.673,0.848l1.078-0.1
c0.984-0.091,1.905-0.136,2.815-0.136s1.831,0.044,2.815,0.136l1.078,0.1l0.673-0.848c1.032-1.299,2.102-2.992,3.023-4.538
c2.428,0.52,4.789,1.289,7.045,2.293c-0.175,1.845-0.309,3.789-0.255,5.427l0.036,1.092l0.939,0.56
c1.561,0.931,3.056,2.02,4.443,3.237l0.819,0.719l1.048-0.298c1.584-0.451,3.395-1.176,5.096-1.91
c1.668,1.853,3.137,3.867,4.384,6.013c-1.219,1.39-2.465,2.888-3.383,4.263l-0.604,0.905l0.431,0.999
c0.717,1.662,1.288,3.417,1.696,5.218l0.243,1.07l1.033,0.37c1.531,0.549,3.423,1.019,5.236,1.422
c0.136,1.278,0.205,2.554,0.205,3.809c0,1.255-0.069,2.531-0.205,3.809c-1.813,0.402-3.705,0.873-5.236,1.422l-1.033,0.37
l-0.243,1.07c-0.408,1.8-0.979,3.555-1.696,5.218l-0.431,0.999l0.604,0.905c0.918,1.374,2.164,2.873,3.383,4.263
c-1.247,2.146-2.716,4.16-4.384,6.013c-1.701-0.734-3.512-1.459-5.096-1.91l-1.048-0.298l-0.819,0.719
c-1.387,1.217-2.882,2.306-4.443,3.237l-0.939,0.56l-0.036,1.092c-0.054,1.638,0.08,3.582,0.255,5.427
c-2.256,1.004-4.616,1.773-7.045,2.293c-0.921-1.545-1.991-3.238-3.023-4.538l-0.673-0.848l-1.078,0.1
c-0.984,0.091-1.905,0.136-2.815,0.136s-1.831-0.044-2.815-0.136l-1.078-0.1l-0.673,0.848c-1.032,1.3-2.102,2.993-3.023,4.538
c-2.428-0.52-4.788-1.289-7.045-2.293c0.175-1.845,0.309-3.79,0.255-5.427l-0.036-1.092l-0.938-0.56
c-1.562-0.931-3.057-2.02-4.443-3.237l-0.819-0.719l-1.048,0.298c-1.584,0.451-3.395,1.176-5.096,1.91
c-1.668-1.852-3.137-3.867-4.384-6.013c1.219-1.39,2.465-2.888,3.383-4.263l0.604-0.905l-0.431-0.999
c-0.718-1.662-1.288-3.418-1.696-5.218l-0.243-1.07l-1.033-0.37c-1.531-0.549-3.423-1.019-5.236-1.422
C978.069,525.531,978,524.255,978,523c0-1.255,0.069-2.531,0.205-3.809c1.813-0.402,3.705-0.873,5.236-1.422l1.033-0.37
l0.243-1.07c0.408-1.8,0.979-3.555,1.696-5.218l0.431-0.999l-0.604-0.905c-0.918-1.374-2.164-2.873-3.383-4.263
c1.247-2.146,2.716-4.16,4.384-6.013c1.701,0.734,3.512,1.459,5.096,1.91l1.048,0.298l0.819-0.719
c1.386-1.216,2.881-2.305,4.443-3.237l0.938-0.56l0.036-1.092c0.054-1.637-0.08-3.582-0.255-5.427
C1001.622,489.101,1003.982,488.333,1006.41,487.813 M1007.418,485.58c-3.593,0.628-7.014,1.755-10.184,3.317
c0.259,2.451,0.448,4.759,0.388,6.57c-1.687,1.005-3.27,2.163-4.738,3.451c-1.744-0.496-3.884-1.385-6.137-2.386
c-2.496,2.57-4.633,5.489-6.327,8.681c1.645,1.833,3.148,3.595,4.157,5.106c-0.767,1.778-1.373,3.641-1.811,5.568
c-1.702,0.61-3.956,1.139-6.369,1.649C976.14,519.32,976,521.144,976,523s0.14,3.68,0.397,5.465
c2.412,0.509,4.667,1.038,6.369,1.649c0.437,1.927,1.043,3.79,1.811,5.568c-1.009,1.51-2.512,3.272-4.157,5.106
c1.694,3.192,3.831,6.111,6.327,8.681c2.253-1.001,4.393-1.89,6.137-2.386c1.468,1.288,3.051,2.446,4.738,3.451
c0.06,1.811-0.129,4.119-0.388,6.57c3.171,1.562,6.591,2.689,10.185,3.317c1.236-2.13,2.451-4.102,3.582-5.528
c0.988,0.092,1.988,0.144,3,0.144s2.012-0.053,3-0.144c1.131,1.425,2.347,3.398,3.582,5.528
c3.594-0.628,7.014-1.755,10.184-3.317c-0.259-2.451-0.448-4.759-0.388-6.57c1.687-1.005,3.27-2.163,4.738-3.451
c1.744,0.496,3.884,1.385,6.137,2.386c2.496-2.57,4.633-5.489,6.327-8.681c-1.645-1.833-3.148-3.595-4.157-5.106
c0.767-1.778,1.374-3.641,1.811-5.568c1.702-0.61,3.956-1.139,6.369-1.649c0.257-1.785,0.397-3.608,0.397-5.465
c0-1.856-0.14-3.68-0.397-5.465c-2.412-0.509-4.667-1.038-6.369-1.649c-0.437-1.927-1.043-3.79-1.811-5.568
c1.009-1.51,2.512-3.272,4.157-5.105c-1.694-3.192-3.831-6.111-6.327-8.681c-2.253,1.001-4.393,1.89-6.137,2.386
c-1.468-1.288-3.051-2.446-4.738-3.451c-0.06-1.811,0.129-4.119,0.388-6.57c-3.171-1.562-6.591-2.689-10.185-3.317
c-1.236,2.13-2.45,4.102-3.582,5.528c-0.988-0.092-1.988-0.144-3-0.144s-2.012,0.053-3,0.144
C1009.868,489.682,1008.653,487.71,1007.418,485.58L1007.418,485.58z"/>
</g>
</g>
<g>
<g>
<path class="st34" d="M1014,545.125c-12.2,0-22.125-9.925-22.125-22.125s9.925-22.125,22.125-22.125
s22.125,9.925,22.125,22.125S1026.2,545.125,1014,545.125z M1014,503.125c-10.959,0-19.875,8.916-19.875,19.875
s8.916,19.875,19.875,19.875s19.875-8.916,19.875-19.875S1024.959,503.125,1014,503.125z"/>
</g>
<path class="st35" d="M1014,501.25c11.993,0,21.75,9.757,21.75,21.75s-9.757,21.75-21.75,21.75s-21.75-9.757-21.75-21.75
S1002.007,501.25,1014,501.25 M1014,543.25c11.166,0,20.25-9.084,20.25-20.25s-9.084-20.25-20.25-20.25
s-20.25,9.084-20.25,20.25S1002.834,543.25,1014,543.25 M1014,500.5c-12.406,0-22.5,10.094-22.5,22.5s10.094,22.5,22.5,22.5
s22.5-10.094,22.5-22.5S1026.406,500.5,1014,500.5L1014,500.5z M1014,542.5c-10.752,0-19.5-8.748-19.5-19.5
s8.748-19.5,19.5-19.5s19.5,8.748,19.5,19.5S1024.752,542.5,1014,542.5L1014,542.5z"/>
</g>
<g>
<g>
<path class="st34" d="M1014,534.125c-6.135,0-11.125-4.99-11.125-11.125s4.99-11.125,11.125-11.125s11.125,4.99,11.125,11.125
S1020.135,534.125,1014,534.125z M1014,514.125c-4.894,0-8.875,3.981-8.875,8.875s3.981,8.875,8.875,8.875
s8.875-3.981,8.875-8.875S1018.894,514.125,1014,514.125z"/>
</g>
<path class="st35" d="M1014,512.25c5.928,0,10.75,4.822,10.75,10.75s-4.822,10.75-10.75,10.75s-10.75-4.822-10.75-10.75
S1008.072,512.25,1014,512.25 M1014,532.25c5.1,0,9.25-4.15,9.25-9.25s-4.15-9.25-9.25-9.25s-9.25,4.15-9.25,9.25
S1008.9,532.25,1014,532.25 M1014,511.5c-6.341,0-11.5,5.159-11.5,11.5s5.159,11.5,11.5,11.5s11.5-5.159,11.5-11.5
S1020.341,511.5,1014,511.5L1014,511.5z M1014,531.5c-4.687,0-8.5-3.813-8.5-8.5s3.813-8.5,8.5-8.5s8.5,3.813,8.5,8.5
S1018.687,531.5,1014,531.5L1014,531.5z"/>
</g>
</g>
</g>
<g class="small-gears">
<g>
<g>
<g>
<path class="st36" d="M651,305c-6.065,0-11-4.935-11-11s4.935-11,11-11s11,4.935,11,11S657.065,305,651,305z"/>
<path class="st26" d="M651,283.5c5.79,0,10.5,4.71,10.5,10.5s-4.71,10.5-10.5,10.5s-10.5-4.71-10.5-10.5
S645.21,283.5,651,283.5 M651,282.5c-6.351,0-11.5,5.149-11.5,11.5s5.149,11.5,11.5,11.5s11.5-5.149,11.5-11.5
S657.351,282.5,651,282.5L651,282.5z"/>
</g>
<g>
<path class="st26" d="M651,290c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S648.794,290,651,290 M651,288.5
c-3.038,0-5.5,2.462-5.5,5.5s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5S654.038,288.5,651,288.5L651,288.5z"/>
</g>
</g>
<g>
<g>
<path class="st36" d="M817.5,305.5c-6.065,0-11-4.935-11-11s4.935-11,11-11s11,4.935,11,11S823.565,305.5,817.5,305.5z"/>
<path class="st26" d="M817.5,284c5.79,0,10.5,4.71,10.5,10.5s-4.71,10.5-10.5,10.5s-10.5-4.71-10.5-10.5S811.71,284,817.5,284
M817.5,283c-6.351,0-11.5,5.149-11.5,11.5s5.149,11.5,11.5,11.5s11.5-5.149,11.5-11.5S823.851,283,817.5,283L817.5,283z"/>
</g>
<g>
<path class="st26" d="M817.5,290.5c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S815.294,290.5,817.5,290.5 M817.5,289
c-3.038,0-5.5,2.462-5.5,5.5s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5S820.538,289,817.5,289L817.5,289z"/>
</g>
</g>
<g>
<g>
<path class="st36" d="M984.5,305.5c-6.065,0-11-4.935-11-11s4.935-11,11-11s11,4.935,11,11S990.565,305.5,984.5,305.5z"/>
<path class="st26" d="M984.5,284c5.79,0,10.5,4.71,10.5,10.5s-4.71,10.5-10.5,10.5s-10.5-4.71-10.5-10.5S978.71,284,984.5,284
M984.5,283c-6.351,0-11.5,5.149-11.5,11.5s5.149,11.5,11.5,11.5s11.5-5.149,11.5-11.5S990.851,283,984.5,283L984.5,283z"/>
</g>
<g>
<path class="st26" d="M984.5,290.5c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S982.294,290.5,984.5,290.5 M984.5,289
c-3.038,0-5.5,2.462-5.5,5.5s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5S987.538,289,984.5,289L984.5,289z"/>
</g>
</g>
</g>
<g>
<g>
<g>
<path class="st36" d="M575,198.5c-6.065,0-11-4.935-11-11s4.935-11,11-11s11,4.935,11,11S581.065,198.5,575,198.5z"/>
<path class="st26" d="M575,177c5.79,0,10.5,4.71,10.5,10.5S580.79,198,575,198s-10.5-4.71-10.5-10.5S569.21,177,575,177
M575,176c-6.351,0-11.5,5.149-11.5,11.5S568.649,199,575,199s11.5-5.149,11.5-11.5S581.351,176,575,176L575,176z"/>
</g>
<g>
<path class="st26" d="M575,183.5c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S572.794,183.5,575,183.5 M575,182
c-3.038,0-5.5,2.462-5.5,5.5s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5S578.038,182,575,182L575,182z"/>
</g>
</g>
<g>
<g>
<path class="st36" d="M729,198.5c-6.065,0-11-4.935-11-11s4.935-11,11-11s11,4.935,11,11S735.065,198.5,729,198.5z"/>
<path class="st26" d="M729,177c5.79,0,10.5,4.71,10.5,10.5S734.79,198,729,198s-10.5-4.71-10.5-10.5S723.21,177,729,177
M729,176c-6.351,0-11.5,5.149-11.5,11.5S722.649,199,729,199s11.5-5.149,11.5-11.5S735.351,176,729,176L729,176z"/>
</g>
<g>
<path class="st26" d="M729,183.5c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S726.794,183.5,729,183.5 M729,182
c-3.038,0-5.5,2.462-5.5,5.5s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5S732.038,182,729,182L729,182z"/>
</g>
</g>
<g>
<g>
<path class="st36" d="M885.5,198.5c-6.065,0-11-4.935-11-11s4.935-11,11-11s11,4.935,11,11S891.565,198.5,885.5,198.5z"/>
<path class="st26" d="M885.5,177c5.79,0,10.5,4.71,10.5,10.5s-4.71,10.5-10.5,10.5s-10.5-4.71-10.5-10.5S879.71,177,885.5,177
M885.5,176c-6.351,0-11.5,5.149-11.5,11.5s5.149,11.5,11.5,11.5s11.5-5.149,11.5-11.5S891.851,176,885.5,176L885.5,176z"/>
</g>
<g>
<path class="st26" d="M885.5,183.5c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S883.294,183.5,885.5,183.5 M885.5,182
c-3.038,0-5.5,2.462-5.5,5.5s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5S888.538,182,885.5,182L885.5,182z"/>
</g>
</g>
<g>
<g>
<path class="st36" d="M1038.5,198.5c-6.065,0-11-4.935-11-11s4.935-11,11-11s11,4.935,11,11S1044.565,198.5,1038.5,198.5z"/>
<path class="st26" d="M1038.5,177c5.79,0,10.5,4.71,10.5,10.5s-4.71,10.5-10.5,10.5s-10.5-4.71-10.5-10.5
S1032.71,177,1038.5,177 M1038.5,176c-6.351,0-11.5,5.149-11.5,11.5s5.149,11.5,11.5,11.5s11.5-5.149,11.5-11.5
S1044.851,176,1038.5,176L1038.5,176z"/>
</g>
<g>
<path class="st26" d="M1038.5,183.5c2.206,0,4,1.794,4,4s-1.794,4-4,4s-4-1.794-4-4S1036.294,183.5,1038.5,183.5 M1038.5,182
c-3.038,0-5.5,2.462-5.5,5.5s2.462,5.5,5.5,5.5s5.5-2.462,5.5-5.5S1041.538,182,1038.5,182L1038.5,182z"/>
</g>
</g>
</g>
</g>
<g class="tubes">
<g>
<path class="st37" d="M1051,572.5v9H945.5v5.19c0,3.75-3.06,6.81-6.81,6.81H793.5v67.82c0,4.51-3.67,8.18-8.18,8.18H675v-9h109.5
v-67.82c0-4.51,3.67-8.18,8.18-8.18H936.5v-5.19c0-3.75,3.06-6.81,6.81-6.81H1051z"/>
<circle class="bubble__tube st25_1" cx="875" cy="589" r="3.5" stroke-width="1" stroke="#97BDD3
"/>
</g>
<g>
<path class="st37" d="M1051,591.5v9h-19.5v40.79c0,4.53-3.68,8.21-8.21,8.21h-19.58c-4.53,0-8.21-3.68-8.21-8.21V625.5H917v-9
h79.29c4.53,0,8.21,3.68,8.21,8.21v15.79h18v-40.79c0-4.53,3.68-8.21,8.21-8.21H1051z"/>
<circle class="bubble__tube st25_1" cx="1027" cy="624" r="3.5"/>
</g>
<g>
<path class="st37" d="M840.5,567.4v34.05c0,0.8,0.65,1.45,1.45,1.45h91.1c5.76,0,10.45,4.69,10.45,10.45v46.1
c0,0.8,0.65,1.45,1.45,1.45H1051v9H944.95c-5.76,0-10.45-4.69-10.45-10.45v-46.1c0-0.8-0.65-1.45-1.45-1.45h-91.1
c-5.76,0-10.45-4.69-10.45-10.45V567.4"/>
<circle class="bubble__tube st25_1" cx="923" cy="607" r="3.5"/>
</g>
<g>
<path class="st37" d="M979.5,688h-9v-44.314c0-0.103-0.083-0.186-0.186-0.186h-63.629c-0.103,0-0.186,0.083-0.186,0.186v25.629
c0,5.064-4.121,9.186-9.186,9.186H808v-9h89.314c0.103,0,0.186-0.083,0.186-0.186v-25.629c0-5.064,4.121-9.186,9.186-9.186h63.629
c5.064,0,9.186,4.121,9.186,9.186V688z"/>
<circle class="bubble__tube st25_1" cx="902" cy="656" r="3.5"/>
</g>
<g>
<path class="st37" d="M703.5,688h-9V587.815c0-4.585,3.73-8.315,8.315-8.315h56.369c4.585,0,8.315,3.73,8.315,8.315V623.5h102.685
c4.585,0,8.315,3.73,8.315,8.315v15.369c0,4.585-3.73,8.315-8.315,8.315H824v-9h45.5v-14H766.815c-4.585,0-8.315-3.73-8.315-8.315
V588.5h-55V688z"/>
<circle class="bubble__tube st25_1" cx="781" cy="628" r="3.5"/>
</g>
<g>
<path class="st37" d="M536.5,567v27.5H618c2.485,0,4.5,2.015,4.5,4.5v18.5H740c2.485,0,4.5,2.015,4.5,4.5v66h-9v-61.5H618
c-2.485,0-4.5-2.015-4.5-4.5v-18.5H532c-2.485,0-4.5-2.015-4.5-4.5v-32"/>
<circle class="bubble__tube st25_1" cx="628" cy="622" r="3.5"/>
</g>
<g>
<path class="st37" d="M647.5,688h-9v-16.288c0-0.668-0.544-1.212-1.212-1.212H503.712c-5.631,0-10.212-4.581-10.212-10.212
v-60.576c0-0.668-0.543-1.212-1.211-1.212H387v-9h105.289c5.63,0,10.211,4.581,10.211,10.212v60.576
c0,0.668,0.543,1.212,1.212,1.212h133.576c5.631,0,10.212,4.581,10.212,10.212V688z"/>
<circle class="bubble__tube st25_1" cx="469" cy="594" r="3.5"/>
</g>
<g>
<path class="st37" d="M666.5,567v72.188c0,5.687-4.626,10.312-10.312,10.312h-67.21c-5.226,0-9.478-4.252-9.478-9.478v-14.045
c0-0.264-0.214-0.478-0.478-0.478h-126.21c-0.724,0-1.312,0.589-1.312,1.312v34.375c0,5.687-4.626,10.312-10.312,10.312H330v-9
h111.188c0.724,0,1.312-0.589,1.312-1.312v-34.375c0-5.687,4.626-10.312,10.312-10.312h126.21c5.226,0,9.478,4.252,9.478,9.478
v14.045c0,0.264,0.214,0.478,0.478,0.478h67.21c0.724,0,1.312-0.589,1.312-1.312V567"/>
<circle class="bubble__tube st25_1" cx="527" cy="621" r="3.5"/>
</g>
<g>
<path class="st37" d="M551.5,688h-9v-36.695c0-0.995-0.81-1.805-1.805-1.805H379v-9h161.695c5.958,0,10.805,4.847,10.805,10.805
V688z"/>
<circle class="bubble__tube st25_1" cx="467" cy="645" r="3.5"/>
</g>
</g>
<path class="flask st40" d="M610.971,486.907c-0.555-10.423-9.347-18.811-19.784-18.906c-10.793-0.099-19.609,8.36-20.136,18.999h-15.709
c-2.95,0-5.342-2.392-5.342-5.342v-13.012c10.795-1.894,19-11.309,19-22.646c0-5.13-1.681-9.867-4.52-13.692l23.249-18.778
c2.27,1.735,5.167,2.691,8.301,2.427c5.58-0.47,10.194-4.878,10.877-10.436c0.962-7.831-5.628-14.408-13.463-13.423
c-5.494,0.691-9.868,5.225-10.388,10.737c-0.237,2.513,0.303,4.885,1.406,6.905l-23.391,18.893
C557.033,425.127,551.767,423,546,423c-12.028,0-21.894,9.235-22.908,21h-48.35c-1.806-14.472-13.27-25.936-27.742-27.742v-25.487
c0-5.396,4.374-9.771,9.771-9.771h28.962c5.377,10.112,16.016,17,28.267,17c17.001,0,30.898-13.259,31.932-30H580.5v-7h-34.891
c-2.401-15.298-15.637-27-31.609-27c-17.673,0-32,14.327-32,32c0,2.052,0.201,4.056,0.57,6h-25.799
C446.404,372,438,380.404,438,390.771v25.621c-14.164,2.223-25.242,13.736-26.806,28.109l-26.943,0
c-3.322,0-6.609,1.037-9.17,3.153c-3.273,2.704-5.097,6.6-5.096,10.776l0.014,35.041c-4.925,0.923-9.378,3.179-12.969,6.384
l-13.884-13.016c0.758-1.858,1.055-3.953,0.711-6.152c-0.76-4.865-4.672-8.801-9.539-9.547c-7.811-1.197-14.437,5.474-13.16,13.297
c0.792,4.852,4.756,8.724,9.621,9.437c3.29,0.482,6.348-0.446,8.701-2.249l13.545,12.698C349.865,508.743,348,514.152,348,520
c0,1.709,0.166,3.379,0.47,5h-14.643c-8.189,0-14.827,6.638-14.827,14.827v32.335c-14.082,2.906-24.78,15.064-25.462,29.838
h-33.147c-4.634,0-8.391-3.757-8.391-8.391v-28.867c15.784-1.97,28-15.425,28-31.742c0-16.888-13.084-30.71-29.667-31.906v-39.259
c0-2.946,2.389-5.335,5.335-5.335h19.967c5.886,7.645,15.145,12.56,25.554,12.499c16.642-0.096,30.666-13.268,31.742-29.875
c0.192-2.961-0.021-5.841-0.586-8.594l32.186-10.413c2.401,4.492,7.359,7.411,12.932,6.802c5.851-0.639,10.636-5.29,11.417-11.124
c1.125-8.4-5.781-15.511-14.12-14.738c-5.723,0.53-10.503,4.914-11.542,10.567c-0.234,1.272-0.271,2.515-0.149,3.711
l-32.117,10.391c-3.936-10.451-13.182-18.292-24.451-20.245v-16.371c0-8.069-6.541-14.609-14.609-14.609h-63.124
c-1.777-13.716-13.838-24.206-28.202-23.463c-13.619,0.705-24.741,11.761-25.519,25.377c-0.815,14.255,9.436,26.281,22.955,28.289
v21.6c0,3.146-2.551,5.697-5.697,5.697h-47.447c-1.437-15.443-13.845-27.694-29.355-28.893v-62.428
c8.255-1.162,15.494-5.472,20.472-11.679h43.812c7.852,0,14.217-6.365,14.217-14.217v-21.308c0-3.024,2.451-5.475,5.475-5.475
h71.345c5.353,5.403,12.97,8.559,21.312,7.918c13.273-1.019,23.973-11.88,24.812-25.166C317.936,255.047,305.491,242,290,242
c-8.604,0-16.258,4.033-21.202,10.302l-12.571-9.326l-5.363,7.229l13.593,10.084c-0.933,2.735-1.456,5.66-1.456,8.711
c0,3.534,0.686,6.906,1.921,10H198.47c-7.439,0-13.47,6.031-13.47,13.47v22.314c0,2.881-2.335,5.216-5.216,5.216h-38.725
c1.538-4.202,2.221-8.817,1.835-13.634c-1.219-15.247-13.381-27.681-28.601-29.201c-17.592-1.757-32.636,10.749-34.972,27.335
H49.617c-3.931,0-7.117-3.186-7.117-7.117v-43.577c14.372-1.564,25.886-12.641,28.109-26.806h35.745
c1.894,10.795,11.309,19,22.646,19c2.819,0,5.518-0.509,8.014-1.437l7.155,12.561c-1.303,1.744-1.954,4.004-1.549,6.428
c0.605,3.621,3.629,6.479,7.277,6.893c5.536,0.627,10.148-4.148,9.238-9.729c-0.513-3.148-2.879-5.777-5.949-6.642
c-1.758-0.495-3.44-0.393-4.942,0.104l-6.759-11.866C147.811,238.214,152,231.098,152,223c0-1.935-0.242-3.813-0.692-5.609
l16.66-8.33c1.725,1.716,4.193,2.687,6.88,2.384c3.691-0.416,6.743-3.332,7.302-7.004c0.8-5.255-3.29-9.771-8.411-9.69
c-2.429,0.039-4.646,1.339-6.194,3.212c-2.035,2.461-2.266,4.671-1.902,6.671l-16.09,8.045C145.77,205.161,137.99,200,129,200
c-3.238,0-6.317,0.672-9.112,1.879l-6.853-12.094c1.591-1.731,2.473-4.124,2.149-6.727c-0.465-3.736-3.5-6.778-7.237-7.241
c-5.397-0.67-9.944,3.801-9.403,9.176c0.308,3.063,2.401,5.701,5.245,6.88c1.749,0.725,3.405,0.759,4.921,0.42l6.834,12.06
c-5.013,3.624-8.504,9.217-9.342,15.647h-35.27c-0.94-15.236-12.537-27.582-27.432-29.679v-40.076c0-5.382,4.363-9.745,9.745-9.745
h46.417c3.162,15.322,17.276,26.642,33.796,25.408c15.702-1.173,28.38-13.929,29.463-29.638C164.211,117.57,149.424,102,131,102
c-8.234,0-15.74,3.112-21.41,8.222L82.549,82.86C85.947,78.851,88,73.667,88,68c0-5.088-1.655-9.788-4.453-13.597l15.057-15.057
c2.232,1.358,4.843,2.154,7.646,2.154c4.104,0,7.813-1.679,10.487-4.383l16.149,13.42c-1.008,2.164-1.525,4.602-1.354,7.185
c0.494,7.473,6.734,13.523,14.219,13.77C154.125,71.768,161,65.062,161,56.75c0-2.625-0.693-5.085-1.895-7.22l16.675-14.815
c2.542,2.197,5.846,3.535,9.47,3.535c3.805,0,7.256-1.477,9.843-3.874l17.446,13.957c-1.317,2.603-1.881,5.652-1.328,8.879
c1.065,6.211,6.259,11.066,12.528,11.711c8.548,0.88,15.761-5.804,15.761-14.172c0-2.739-0.786-5.288-2.125-7.46l15.903-14.136
c2.409,2.08,5.54,3.346,8.973,3.346c3.297,0,6.321-1.163,8.69-3.098l13.337,12.503c-1.98,2.764-2.957,6.294-2.347,10.073
c0.942,5.827,5.741,10.441,11.599,11.165c8.803,1.088,16.201-6.309,15.114-15.112c-0.397-3.217-1.973-6.092-4.263-8.2
l11.897-10.677c2.409,2.08,5.54,3.346,8.973,3.346c7.594,0,13.75-6.156,13.75-13.75C339,15.156,332.844,9,325.25,9
s-13.75,6.156-13.75,13.75c0,2.354,0.594,4.569,1.636,6.506l-13.202,11.837c-0.979-0.365-2.007-0.624-3.073-0.749
c-3.327-0.389-6.439,0.446-8.97,2.096l-13.718-12.861c1.46-2.543,2.146-5.587,1.684-8.823c-0.876-6.142-5.938-11.024-12.107-11.677
c-8.266-0.875-15.25,5.582-15.25,13.67c0,2.354,0.594,4.569,1.636,6.506l-16.087,14.3c-2.424-1.908-5.475-3.056-8.799-3.056
c-3.754,0-7.159,1.463-9.704,3.835L198.126,30.4c1.114-2.153,1.716-4.614,1.612-7.23c-0.296-7.463-6.444-13.617-13.907-13.909
c-8.273-0.323-15.081,6.288-15.081,14.489c0,2.578,0.68,4.995,1.86,7.093l-16.667,14.808C153.35,43.384,149.965,42,146.25,42
c-4.116,0-7.834,1.689-10.51,4.408l-16.142-13.414c1.015-2.165,1.538-4.607,1.37-7.195c-0.484-7.481-6.727-13.543-14.219-13.791
c-8.374-0.277-15.25,6.43-15.25,14.742c0,2.803,0.796,5.414,2.154,7.646L78.597,49.453C74.788,46.655,70.088,45,65,45
c-5.583,0-10.7,1.99-14.683,5.298L33.595,34.05c1.14-2.006,1.665-4.408,1.279-6.958c-0.688-4.543-4.324-8.231-8.861-8.952
c-7.33-1.164-13.563,5.088-12.364,12.423c0.758,4.639,4.617,8.301,9.285,8.858c2.694,0.322,5.216-0.359,7.253-1.712l16.655,16.183
c-3.481,4.474-5.352,10.263-4.72,16.501c1.079,10.653,9.622,19.283,20.264,20.461c5.492,0.608,10.642-0.728,14.869-3.395l27.671,28
c-3.456,4.851-5.596,10.702-5.888,17.04H53.245c-9.8,0-17.745,7.945-17.745,17.745v39.949C19.474,191.938,7,205.51,7,222
c0,15.797,11.449,28.911,26.5,31.519v43.863c0,8.901,7.216,16.117,16.117,16.117h29.704c1.981,14.07,13.108,25.198,27.179,27.179
v62.983c-7.32,1.511-13.725,5.522-18.285,11.101L60.71,396.276c1.549-2.952,2.394-6.331,2.28-9.922
c-0.329-10.319-8.748-18.851-19.06-19.332c-2.957-0.138-5.77,0.388-8.33,1.409l-9.968-20.358c2.779-2.035,4.597-5.305,4.618-9.008
c0.034-5.984-4.83-11.079-10.81-11.307C13.026,327.514,7.75,332.641,7.75,339c0,6.213,5.037,11.25,11.25,11.25
c0.335,0,0.665-0.021,0.992-0.05l10.415,21.271c-5.073,4.119-8.095,10.667-7.273,17.878c1.036,9.08,8.332,16.412,17.406,17.503
c6.124,0.736,11.757-1.321,15.862-5.037l28.004,18.823c-2.476,4.92-3.73,10.561-3.334,16.53
c1.043,15.733,13.715,28.548,29.438,29.737c16.354,1.237,30.347-9.83,33.713-24.906h48.08c8.669,0,15.697-7.028,15.697-15.697
v-21.98c9.925-2.253,17.771-9.968,20.207-19.823h63.683c2.546,0,4.609,2.064,4.609,4.609v16.212
C280.959,407.51,269,420.855,269,437c0,3.308,0.502,6.499,1.434,9.5h-14.766c-8.469,0-15.335,6.866-15.335,15.335v40.096
c-12.062,2.967-21.429,12.77-23.763,25.069h-37.85c-9.234,0-16.72,7.486-16.72,16.72v31.85c-14.804,2.81-26,15.809-26,31.43
c0,0.447,0.016,0.89,0.034,1.333h-34.672c-3.513,0-6.361-2.848-6.361-6.361v-35.229c15.784-1.97,28-15.425,28-31.742
c0-4.77-1.051-9.292-2.923-13.359l25.074-15.224c3.466,3.917,8.748,6.19,14.541,5.44c7.289-0.943,13.176-6.788,14.154-14.072
c1.434-10.682-7.364-19.724-17.974-18.707c-7.258,0.695-13.274,6.28-14.598,13.45c-0.577,3.124-0.21,6.089,0.786,8.747
l-24.993,15.174C111.265,508.312,101.756,503,91,503c-8.296,0-15.853,3.157-21.539,8.335L48.21,494.703
c0.947-2.053,1.316-4.428,0.819-6.934c-0.906-4.57-4.664-8.188-9.271-8.885c-7.66-1.16-14.147,5.413-12.839,13.094
c0.787,4.621,4.507,8.328,9.13,9.107c3.09,0.521,5.994-0.224,8.291-1.793l21.073,16.492c-3.455,4.594-5.699,10.148-6.266,16.191
l-25.005-0.455c-0.722-5.477-5.372-9.716-11.034-9.769c-5.997-0.056-11.118,4.811-11.349,10.804
c-0.247,6.416,4.88,11.695,11.241,11.695c4.985,0,9.206-3.246,10.683-7.737l25.384,0.462c0.341,5.599,2.123,10.806,4.979,15.262
l-20.259,15.655c-2.459-2.362-5.981-3.627-9.786-2.969c-4.599,0.795-8.301,4.502-9.083,9.104
c-1.291,7.603,5.054,14.118,12.613,13.122c4.515-0.595,8.276-4.003,9.38-8.422c0.594-2.378,0.371-4.636-0.374-6.641l20.525-15.86
c5.028,5.666,12.034,9.53,19.939,10.517v35.229c0,7.932,6.43,14.361,14.361,14.361h36.025c4.173,13.704,17.29,23.51,32.554,22.61
c15.577-0.919,28.421-13.254,29.908-28.786c1.696-17.71-11.058-32.803-27.849-34.899V543.72c0-3.711,3.009-6.72,6.72-6.72h37.538
c1.806,14.472,13.27,25.936,27.742,27.742v28.867c0,9.052,7.338,16.391,16.391,16.391h33.771c0.703,3.405,1.953,6.608,3.644,9.524
l-27.036,18.024c-4.226-4.638-10.583-7.3-17.541-6.361c-9.032,1.22-16.196,8.643-17.121,17.709
c-1.208,11.838,7.918,21.847,19.448,22.099c10.544,0.23,19.635-8.039,20.392-18.559c0.256-3.561-0.452-6.922-1.846-9.898
l27.188-18.125c6.361,7.358,16.011,11.793,26.671,10.996c15.418-1.154,27.994-13.498,29.402-28.895
c1.629-17.823-11.37-32.969-28.362-34.818v-31.867c0-2.666,2.161-4.827,4.827-4.827h18.723
c5.184,7.744,14.267,12.658,24.442,11.928c13.612-0.977,24.5-12.294,24.99-25.932c0.528-14.687-10.681-26.867-24.983-27.915
l-0.014-34.412c-0.001-1.755,0.559-3.498,1.72-4.814c1.336-1.514,3.205-2.356,5.204-2.356h27.285
C412.938,467.526,426.51,480,443,480c7.388,0,14.186-2.51,19.602-6.716l17.035,19.725c-2.283,2.882-3.506,6.642-3.038,10.701
c0.791,6.862,6.513,12.295,13.404,12.756c8.748,0.585,15.976-6.595,15.472-15.327c-0.397-6.883-5.78-12.659-12.62-13.523
c-3.504-0.442-6.782,0.392-9.483,2.068l-17.07-19.765c4.747-5.044,7.875-11.625,8.554-18.92h48.696
c2.072,9.343,9.823,16.544,19.448,17.799v12.859c0,6.816,5.526,12.342,12.342,12.342h16.577c2.549,8.114,10.127,14,19.082,14
C602.408,508,611.585,498.449,610.971,486.907z"/>
<g id="lights1">
<circle class="red-light1 st45" cx="106.25" cy="26.75" r="13.5"/>
<circle class="red-light1 st45" cx="146.25" cy="56.75" r="13.5"/>
<circle class="red-light1 st45" cx="185.25" cy="23.75" r="13.25"/>
<circle class="red-light1 st45" cx="225.25" cy="54.75" r="13.25"/>
<circle class="red-light1 st45" cx="262.3" cy="22.75" r="12.5"/>
<circle class="red-light1 st45" cx="295.3" cy="53.75" r="12.5"/>
<circle class="red-light1 st45" cx="325.3" cy="22.7" r="12.5"/>
<circle class="yellow-light1 st46" cx="24.2" cy="28.7" r="9.25"/>
</g>
<g id="lights2">
<circle class="red-light2 st50" cx="36" cy="576" r="10.25"/>
<circle class="red-light2 st50" cx="23" cy="533" r="10.25"/>
<circle class="red-light2 st50" cx="38" cy="490" r="10.25"/>
<circle class="red-light3 st50" cx="19" cy="339" r="10.25"/>
<circle class="red-light4 st51" cx="106.9" cy="184.125" r="7.75"/>
<circle class="red-light4 st51" cx="174" cy="203.2" r="7.75"/>
<circle class="red-light4 st51" cx="150.9" cy="262.1" r="7.75"/>
</g>
<g class="entrance">
<rect x="36" y="653" class="st39" width="13" height="13"/>
<polyline class="st41" points="36,666 98,666 157.5,624.5 "/>
<rect x="153" y="610" class="st39" width="10" height="15"/>
<g id="bubbles bubbles__entrance" clip-path="url(#entrance-clip)">
<circle class="bubble__entrance st42" cx="40" cy="661.5" r="4"/>
<circle class="bubble__entrance st42" cx="40" cy="661.5" r="4"/>
<circle class="bubble__entrance st42" cx="40" cy="661.5" r="4"/>
<circle class="bubble__entrance st42" cx="40" cy="661.5" r="4"/>
<circle class="bubble__entrance st42" cx="40" cy="661.5" r="4"/>
<circle class="bubble__entrance st42" cx="40" cy="661.5" r="4"/>
<circle class="bubble__entrance st42" cx="40" cy="661.5" r="4"/>
</g>
</g>
</g>
<g id="bubbles">
<g class="bubbles bubbles__move">
<circle class="bubble__move" cx="167.5" cy="596.5" r="4"/>
</g>
<path class="flask-mask st40" d="M314.917,258.583C316.259,261.789,317,265.308,317,269c0,14.912-12.088,27-27,27
c-3.346,0-6.55-0.609-9.508-1.722"/>
<path class="flask-mask2 st47" d="M137.276,601.176c2.712-14.526,15.428-25.519,30.705-25.519c15.08,0,27.664,10.711,30.595,24.958"/>
<g class="bubbles">
<circle class="st42" cx="590.5" cy="502.5" r="4"/>
<circle class="st42" cx="537.5" cy="461.5" r="4"/>
<circle class="st42" cx="431.5" cy="472.5" r="4"/>
<circle class="st42" cx="439.5" cy="474.5" r="4"/>
<circle class="st42" cx="292.5" cy="462.5" r="4"/>
<circle class="st42" cx="301.5" cy="464.5" r="4"/>
<circle class="st42" cx="365.5" cy="539.5" r="4"/>
<circle class="st42" cx="374.5" cy="541.5" r="4"/>
<circle class="st42" cx="252" cy="665" r="4"/>
<circle class="st42" cx="340" cy="626" r="4"/>
<circle class="st42" cx="323" cy="630" r="4"/>
<circle class="st42" cx="221.5" cy="387.5" r="4"/>
<circle class="st42" cx="213.5" cy="397.5" r="4"/>
<circle class="st42" cx="103.5" cy="459.5" r="4"/>
<circle class="st42" cx="114.5" cy="461.5" r="4"/>
<circle class="st42" cx="77.5" cy="556.5" r="4"/>
<circle class="st42" cx="103.5" cy="558.5" r="4"/>
<circle class="st42" cx="121.5" cy="334.5" r="4"/>
<circle class="st42" cx="102.5" cy="334.5" r="4"/>
<circle class="st42" cx="32.5" cy="248.5" r="4"/>
<circle class="st42" cx="121.5" cy="159.5" r="4"/>
<circle class="st42" cx="139.5" cy="159.5" r="4"/>
<circle class="st43" cx="276.5" cy="286.5" r="4"/>
</g>
<path class="jelly__inside st44" d="M492.5,388.5c0,0,1-9,14-11s12-1,20-12s18-7,18-7s6.414,23.793-16,35C506.5,404.5,492.5,388.5,492.5,388.5z"/>
</g>
</g>
</svg>
<div id="pathData"></div>
<canvas id="myCanvas"></canvas>
<button id="square"></button>
html, body {
margin: 0;
}
canvas {
position: absolute;
top: 0;
left: 0;
margin: 0;
padding: 0;
/* visibility: hidden; */
}
.bubble__move {
fill:#FFDEFE;
stroke:#F286E6;
stroke-width:0.7;
stroke-miterlimit:10;
}
#square {
display: block;
position: absolute;
top: 0;
left: 0;
cursor: pointer;
opacity: 0;
}
import decomp from "https://cdn.skypack.dev/poly-decomp@0.3.0";
const select = s => document.querySelector(s);
const selectAll = s => document.querySelectorAll(s);
const makeTwoArrays = (els, className) => {
els.forEach(el => {
el.parentElement.appendChild(el.cloneNode(true));
});
const elsTotal = selectAll(className);
const elsArray = gsap.utils.toArray(elsTotal);
const num = elsArray.length / 2;
const els1 = elsArray.splice(0, num);
const els2 = elsArray;
return [els1, els2];
}
// gears animation
gsap.to('.gear', {
rotation: 360,
duration: 10,
transformOrigin: 'center',
repeat: -1,
ease: 'none'
})
// entrance bubbles bottom left animation
gsap.to('.bubble__entrance', {
duration: 7.0,
motionPath: {
path: '#entrance-path',
align: '#entrance-path',
alignOrigin: [0.5, 1.0],
autoRotate: true
},
stagger: {
each: 1.0,
repeat: -1,
},
ease: 'none'
});
// red and yellow balls animation
const largeBalls = selectAll('.ball-large');
const [ballsL1, ballsL2] = makeTwoArrays(largeBalls, '.ball-large')
ballsL2[ballsL2.length - 1].style.display = 'none';
const animateLargeBalls = (balls) => {
balls.forEach(ball => {
const color = gsap.utils.random(['st3', 'st4'], true);
ball.setAttribute('class', `ball-large ${color()}`);
})
return gsap.to(balls, {
duration: 13,
motionPath: {
path: '#ball-large-path',
align: '#ball-large-path',
alignOrigin: [0.5, 1.0],
autoRotate: true,
start: 1,
end: 0
},
stagger: {
each: 1.6,
},
ease: 'none',
onComplete: () => animateLargeBalls(balls)
})
}
const ballLTL = gsap.timeline();
ballLTL.add(animateLargeBalls(ballsL1), -13)
.add(animateLargeBalls(ballsL2), '<13')
// bubbles in the tube animation
const bubblesInTube = selectAll('.bubble__tube');
bubblesInTube.forEach((bubble, index) => {
const tubePath = select(`#tube-path${index}`);
const randomSpeed = gsap.utils.random(5, 10, 1, true);
const randomDelay = gsap.utils.random(-0.5, 1.5, 0.1, true);
const animateBubble = (bubble) => {
return gsap.to(bubble, {
duration: randomSpeed(),
motionPath: {
path: tubePath,
align: tubePath,
alignOrigin: [0.5, 0.5],
},
ease: 'none',
yoyo: true,
onComplete: () => animateBubble(bubble)
})
}
const colorBubble = (bubble) => {
return gsap.to(bubble, {
duration: 0.5,
strokeWidth: 3,
attr: {
r: 5
},
ease: 'power2.in',
repeat: 1,
yoyo: true,
delay: randomDelay(),
onComplete: () => colorBubble(bubble)
})
}
animateBubble(bubble);
colorBubble(bubble);
})
// jelly animation
const jellyHidden = select('.jelly__hidden');
const jellyPop1 = select('#jelly__fluid1');
const jellyPop2 = select('#jelly__fluid2');
const jelly1 = select('.jelly__line');
for (let i = 0; i < 3; i++) {
jelly1.parentElement.appendChild(jelly1.cloneNode(true));
}
const jellyOnLine = selectAll('.jelly__line');
jellyOnLine.forEach(jelly => {
jelly.style.display = 'none';
})
const jellyTL = (jelly) =>
gsap.timeline({
onComplete: () => jellyTL(jelly)
})
.set(jelly, {
display: 'none',
transformOrigin: '50% 50%',
})
.to(jellyHidden, {
duration: 0.3,
morphSVG: {
shape: jellyPop1,
}
})
.to(jellyHidden, {
duration: 0.3,
morphSVG: {
shape: jellyPop2,
origin: '50% 50%, 53% 86%',
}
}, '>-0.1')
.addLabel('jellyBack')
.to(jelly, {display: 'block'})
.to(jelly, {
duration: 0.5,
motionPath: {
path: '#jelly-path',
align: '#jelly-path',
transformOrigin: '50% 50%',
alignOrigin: [0.5, 0.5],
autoRotate: 38,
},
ease: 'none'
}, '>-0.5')
.to(jelly, {
x: 580,
duration: 9,
ease: 'none'
})
.to(jellyHidden, {
duration: 0,
morphSVG: {
shape: jellyPop1,
origin: '50% 50%, 53% 86%',
}
}, 'jellyBack')
.to(jellyHidden, {
duration: 0.2,
morphSVG: {
shape: jellyHidden
}
}, 'jellyBack+=0.06')
const jellyMainTL = gsap.timeline();
jellyMainTL.add(jellyTL(jellyOnLine[0]), 0.5)
.add(jellyTL(jellyOnLine[1]), 3)
.add(jellyTL(jellyOnLine[2]), 5.5)
.add(jellyTL(jellyOnLine[3]), 8)
const jellyInFlask = select('.jelly__inside');
gsap.timeline({repeat: -1})
.to(jellyInFlask, {
duration: 0.62,
morphSVG: {
shape: '#jelly__inside2',
}
})
.to(jellyInFlask, {
duration: 0.63,
morphSVG: {
shape: jellyInFlask
}
})
.to(jellyInFlask, {
duration: 0.63,
morphSVG: {
shape: '#jelly__inside3'
}
})
.to(jellyInFlask, {
duration: 0.63,
morphSVG: {
shape: jellyInFlask
}
})
// red and green soft objects animation
const softObjects = selectAll('.soft-object');
const [softObjects1, softObjects2] = makeTwoArrays(softObjects, '.soft-object');
const softObjectsPath = [
"M470.996,321.5H463.5c-1.657,0-3-1.343-3-3s1.343-3,3-3h7v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8.496C476.5,319.031,474.031,321.5,470.996,321.5z",
"M471.5,321.5h-7.496c-3.035,0-5.504-2.469-5.504-5.504V307.5c0-1.657,1.343-3,3-3s3,1.343,3,3v8h7c1.657,0,3,1.343,3,3S473.157,321.5,471.5,321.5z",
"M470.996,321.5H463.5c-1.657,0-3-1.343-3-3s1.343-3,3-3h7v-8c0-1.657,1.343-3,3-3s3,1.343,3,3v8.496C476.5,319.031,474.031,321.5,470.996,321.5z",
"M471.5,321.5h-7.496c-3.035,0-5.504-2.469-5.504-5.504V307.5c0-1.657,1.343-3,3-3s3,1.343,3,3v8h7c1.657,0,3,1.343,3,3S473.157,321.5,471.5,321.5z",
"M466.959,321.5h-4.918c-1.403,0-2.541-1.138-2.541-2.541v-7.918c0-1.403,1.138-2.541,2.541-2.541h4.918c1.403,0,2.541,1.138,2.541,2.541v7.918C469.5,320.362,468.362,321.5,466.959,321.5z",
"M459.5,318.801v-4.602c0-1.491,1.208-2.699,2.699-2.699h9.602c1.491,0,2.699,1.208,2.699,2.699v4.602c0,1.491-1.208,2.699-2.699,2.699h-9.602C460.708,321.5,459.5,320.292,459.5,318.801z"
];
const animateSoftObjects = (objects) => {
objects.forEach(obj => {
const path = gsap.utils.random(softObjectsPath, true);
const color = gsap.utils.random(['st17', 'st18', 'st18'], true);
obj.setAttribute('d', path());
obj.setAttribute('class', `soft-object ${color()}`);
})
return gsap.to(objects, {
duration: 13,
motionPath: {
path: '#soft-objects-path',
align: '#soft-objects-path',
alignOrigin: [0.5, 1.0],
autoRotate: true,
start: 1,
end: 0
},
stagger: {
each: 1.2
},
ease: 'none',
onComplete: () => animateSoftObjects(objects)
})
}
const softObjectsTL = gsap.timeline();
softObjectsTL.add(animateSoftObjects(softObjects1), -13)
.add(animateSoftObjects(softObjects2), '<12')
// pink and yellow balls animation
const smallBalls = select('.balls-small1');
const ballsArray = gsap.utils.toArray(smallBalls.children);
const [smallBalls1, smallBalls2] = makeTwoArrays(ballsArray, '.balls-small1 g');
const animateSmallBalls = (balls) => {
return gsap.to(balls, {
duration: 30.8,
motionPath: {
path: '#small-balls-path1',
align: '#small-balls-path1',
alignOrigin: [0.5, 1.0],
autoRotate: 180,
},
stagger: {
each: 1.1,
from: 'random'
},
ease: 'none',
onComplete: () => animateSmallBalls(balls)
})
}
const ballSTL = gsap.timeline();
ballSTL.add(animateSmallBalls(smallBalls1), -30)
.add(animateSmallBalls(smallBalls2), '<30.8')
// polygon elements animation
const polygonBox = selectAll('.polygon-box');
const polygonTL = gsap.timeline({delay: -12})
polygonTL
.set(polygonBox, {
autoAlpha: 0,
x: -100.667
})
.to(polygonBox, {
duration: 12,
ease: CustomEase.create('custom', 'M0,0C0.084, 0.61 0.2,1 0.2,1 0.2,1 0.374,1 1,1'),
autoAlpha: 1,
stagger: {
each: 2,
repeat: -1
}
})
.to(polygonBox, {
duration: 12,
x: 503.335,
ease: 'none',
stagger: {
each: 2,
repeat: -1
}
}, '<')
const polygonElement = selectAll('.polygon-element');
gsap.to(polygonElement, {
autoAlpha: 0,
ease: 'none',
ease: 'expo.in',
duration: 2,
stagger: {
from: 'random',
each: 0.2,
yoyo: true,
repeat: -1,
repeatDelay: 0.5
}
})
// orange signals animation
gsap.timeline({repeat: -1, repeatDelay: 0.66})
.set('.signal1', {
autoAlpha: 0
})
.set('.signal2', {
autoAlpha: 0
})
.to('.signal1', {
duration: 0,
autoAlpha: 1,
ease: 'none'
}, 0.66)
.to('.signal2', {
duration: 0,
autoAlpha: 1,
ease: 'none'
}, '<0.66')
//red round lights animation
const LightsTL = gsap.timeline({
onComplete: () => gsap.delayedCall(Math.random() * 2, () => LightsTL.restart())
})
.set('.yellow-light1', {
display: 'none'
})
.set('.red-light1', {
display: 'none',
})
.to('.yellow-light1', {
display: 'block'
}, 2)
.to('.red-light1', {
display: 'block',
stagger: {
each: 0.1
}
}, '<0.6')
.to('.yellow-light1', {
display: 'none'
}, '>-0.5')
.to('.red-light1', {
display: 'none'
}, '<')
gsap.timeline({repeat: -1, repeatDelay: 0.5})
.to('.red-light2', {
duration: 0.5,
autoAlpha: 0,
stagger: {
each: 1
}
})
.to('.red-light2', {
duration: 0.5,
autoAlpha: 1,
stagger: {
each: 1
}
}, '<1')
gsap.timeline({repeat: -1, repeatDelay: 0.5})
.to('.red-light3', {
duration: 0.5,
autoAlpha: 0
})
.to('.red-light3', {
duration: 0.5,
autoAlpha: 1
}, '<1')
gsap.timeline({repeat: -1, repeatDelay: 0.5})
.to('.red-light4', {
duration: 0.5,
autoAlpha: 0,
stagger: {
each: 1
}
})
.to('.red-light4', {
duration: 0.5,
autoAlpha: 1,
stagger: {
each: 1
}
}, '<1')
// moving bubbles animation
const bubbleMove = select('.bubble__move');
for (let i = 0; i < 23; i++) {
bubbleMove.parentElement.appendChild(bubbleMove.cloneNode(true));
}
const bubbleMoveAll = selectAll('.bubble__move')
gsap.timeline()
.set(bubbleMoveAll, {
fill: '#FFDEFE',
stroke: '#F286E6'
})
.to(bubbleMoveAll, {
duration: 120,
ease: 'none',
motionPath: {
path: '#flask-inside-path',
align: '#flask-inside-path',
alignOrigin: [0.5, 0.5]
},
stagger: {
each: 5,
repeat: -1
}
}, -110)
.to(bubbleMoveAll, {
duration: 120,
ease: 'none',
fill: '#F9EBDC',
stroke: '#F4AA62',
stagger: {
each: 5,
repeat: -1
}
}, '<')
// clickable signal animation
const redSignal = select('.signal-click');
const redSignalTL = gsap.timeline({repeat: -1, repeatDelay: 0.5})
.to(redSignal, {
duration: 0.6,
autoAlpha: 0.4,
})
.to(redSignal, {
duration: 0.6,
autoAlpha: 1
})
// orange balls animation
gsap.to('.ball-middle', {
duration: 0.5,
autoAlpha: 0.5,
stagger: {
amount: 5,
repeat: -1,
yoyo: true
}
})
// matter.js
// bubbles in the flask and balls pop out from the circle
const {Engine, Render, Runner, World, Bodies, Body, Composite, Svg, Common, Vertices, Resolver, Events} = Matter;
const setupCanvas = () => {
const canvas = select('#myCanvas');
const engine = Engine.create();
const world = engine.world;
let cWidth = window.innerWidth;
let cHeight = cWidth * 0.6546;
Common.setDecomp(decomp);
const percentX = (percent) => {
return Math.round(percent / 100 * cWidth);
}
const percentY = (percent) => {
return Math.round(percent / 100 * cHeight);
}
world.gravity.y = 0;
Resolver._restingThresh = 0;
const render = Render.create({
canvas: canvas,
engine: engine,
options: {
width: cWidth,
height: cHeight,
wireframes: false,
background: 'transparent'
},
})
Render.run(render);
const runner = Runner.create();
Runner.run(runner, engine);
// flask L path above
const flaskPath1 = '360.5,603.6,355.5,603.6,355.3,600.5,354.1,594.7,351.9,589.3,348.6,584.5,344.6,580.5,339.8,577.2,334.4,575,328.6,573.8,325.5,573.6,322.4,573.8,316.6,575,311.2,577.2,306.4,580.5,302.4,584.5,299.1,589.3,296.9,594.7,295.7,600.5,295.5,603.6,290.5,603.6,290.7,600,292.1,593.2,294.7,586.9,298.5,581.3,303.2,576.6,308.8,572.8,315.1,570.2,321.9,568.8,325.5,568.6,329.1,568.8,335.9,570.2,342.2,572.8,347.8,576.6,352.5,581.3,356.3,586.9,358.9,593.2,360.3,600,360.5,603.6,360.5,603.6'
// flask L path below
const flaskPath2 = '325.5,638.6,321.9,638.4,315.1,637,308.8,634.4,303.2,630.6,298.5,625.9,294.7,620.3,292.1,614,290.7,607.2,290.5,603.6,295.5,603.6,295.7,606.7,296.9,612.5,299.1,617.9,302.4,622.7,306.4,626.7,311.2,630,316.6,632.2,322.4,633.4,325.5,633.6,328.6,633.4,334.4,632.2,339.8,630,344.6,626.7,348.6,622.7,351.9,617.9,354.1,612.5,355.3,606.7,355.5,603.6,360.5,603.6,360.3,607.2,358.9,614,356.3,620.3,352.5,625.8,347.8,630.6,342.2,634.4,335.9,637,329.1,638.4,325.5,638.6,325.5,638.6';
// flask M path above
const flaskPath3 = '405.1,520,400.1,520,400,517.4,399,512.5,397.1,508,394.4,504,391,500.6,387,497.9,382.5,496,377.6,495,375,494.9,372.4,495,367.5,496,363,497.9,359,500.6,355.6,504,352.9,508,351,512.5,350,517.4,349.9,520,344.9,520,345,516.9,346.2,511,348.5,505.6,351.7,500.8,355.8,496.7,360.6,493.5,366,491.2,371.9,490,375,489.9,378.1,490,384,491.2,389.4,493.5,394.2,496.7,398.3,500.8,401.5,505.6,403.8,511,405,516.9,405.1,520,405.1,520'
//flask M path below
const flaskPath4 = '375,550.1,371.9,550,366,548.8,360.6,546.5,355.8,543.3,351.7,539.2,348.5,534.4,346.2,529,345,523.1,344.9,520,349.9,520,350,522.6,351,527.5,352.9,532,355.6,536,359,539.4,363,542.1,367.5,544,372.4,545,375,545.1,377.6,545,382.5,544,387,542.1,391,539.4,394.4,536,397.1,532,399,527.5,400,522.6,400.1,520,405.1,520,405,523.1,403.8,529,401.5,534.4,398.3,539.2,394.2,543.3,389.4,546.5,384,548.8,378.1,550,375,550.1,375,550.1'
// flask S path above
const flaskPath5 = '572,446,567,446,566.9,443.9,566.1,439.8,564.5,436,562.2,432.6,559.4,429.8,556,427.5,552.2,425.9,548.1,425.1,546,425,543.9,425.1,539.8,425.9,536,427.5,532.6,429.8,529.8,432.6,527.5,436,525.9,439.8,525.1,443.9,525,446,520,446,520.1,443.3,521.2,438.3,523.1,433.6,525.9,429.5,529.5,425.9,533.6,423.1,538.3,421.2,543.3,420.1,546,420,548.7,420.1,553.7,421.2,558.4,423.1,562.5,425.9,566.1,429.5,568.9,433.6,570.8,438.3,571.9,443.3,572,446,572,446'
// flask S path above
const flaskPath6 = '546,472,543.3,471.9,538.3,470.8,533.6,468.9,529.5,466.1,525.9,462.5,523.1,458.4,521.2,453.7,520.1,448.7,520,446,525,446,525.1,448.1,525.9,452.2,527.5,456,529.8,459.4,532.6,462.2,536,464.5,539.8,466.1,543.9,466.9,546,467,548.1,466.9,552.2,466.1,556,464.5,559.4,462.2,562.2,459.4,564.5,456,566.1,452.2,566.9,448.1,567,446,572,446,571.9,448.7,570.8,453.7,568.9,458.4,566.1,462.5,562.5,466.1,558.4,468.9,553.7,470.8,548.7,471.9,546,472,546,472'
// flask SS path above
const flaskPath7 = '614,488,609,488,608.6,484.4,605.9,477.9,601.1,473.1,594.6,470.4,591,470,587.4,470.4,580.9,473.1,576.1,477.9,573.4,484.4,573,488,568,488,568.1,485.7,569,481.2,570.8,477,573.3,473.4,576.4,470.3,580,467.8,584.2,466,588.7,465.1,591,465,593.3,465.1,597.8,466,602,467.8,605.6,470.3,608.7,473.4,611.2,477,613,481.2,613.9,485.7,614,488,614,488'
// flask SS path below
const flaskPath8 = '591,511,588.7,510.9,584.2,510,580,508.2,576.4,505.7,573.3,502.6,570.8,499,569,494.8,568.1,490.3,568,488,573,488,573.4,491.6,576.1,498.1,580.9,502.9,587.4,505.6,591,506,594.6,505.6,601.1,502.9,605.9,498.1,608.6,491.6,609,488,614,488,613.9,490.3,613,494.8,611.2,499,608.7,502.6,605.6,505.7,602,508.2,597.8,510,593.3,510.9,591,511,591,511'
// flask orange path above
const flaskPath9 = '544.3,348.3,540,350.8,538.3,348.2,534.4,343.8,529.7,340.3,524.5,337.8,518.9,336.4,513.1,336,507.3,336.8,501.7,338.7,499,340.1,496.4,341.8,492,345.8,488.5,350.5,486,355.7,484.5,361.3,484.2,367,484.9,372.8,486.9,378.5,488.3,381.2,484,383.7,482.3,380.5,480.1,373.9,479.2,367.2,479.6,360.5,481.3,354,484.2,347.9,488.3,342.4,493.5,337.8,496.4,335.8,499.6,334.2,506.2,331.9,513,331,519.7,331.4,526.2,333.1,532.3,336,537.7,340.1,542.4,345.3,544.3,348.3,544.3,348.3'
// flask orange path below
const flaskPath10 = '496.6,383.8,490.8,383.5,483.2,382.2,482.1,381.8,483.9,376.2,486.1,376.8,494.3,377.9,502,377.7,510.7,375.8,519.7,371.3,526.3,365.9,530.4,361,534.2,355.1,537.6,348,539.2,344,544.8,346,542.6,351.7,537.4,361.4,531.6,368.9,525.3,374.6,518.7,378.8,512,381.5,502.5,383.5,496.6,383.8,496.6,383.8'
const linePath1 = '1045.5,240,1007.6,240,931.7,240,779.9,240,628.1,240.2,590.2,240.2,580.7,240.3,571.3,240.2,561.8,240.1,552.4,239.8,543,239.2,524.3,237.4,515.1,236.1,506.4,234.4,497.9,232.3,482.1,232.3,483.1,239.5,485.1,270,486.1,277.1,776.8,276.7,1067,276,1067,240,1045.5,240,1045.5,240'
const vertices1 = Vertices.fromPath(flaskPath1);
const vertices2 = Vertices.fromPath(flaskPath2);
const vertices3 = Vertices.fromPath(flaskPath3);
const vertices4 = Vertices.fromPath(flaskPath4);
const vertices5 = Vertices.fromPath(flaskPath5);
const vertices6 = Vertices.fromPath(flaskPath6);
const vertices7 = Vertices.fromPath(flaskPath7);
const vertices8 = Vertices.fromPath(flaskPath8);
const vertices9 = Vertices.fromPath(flaskPath9);
const vertices10 = Vertices.fromPath(flaskPath10);
const vertices11 = Vertices.fromPath(linePath1);
const flaskPos = [
[30.97, 85.19],
[30.97, 90.276],
[42.15, 62.59],
[42.15, 67.67],
[28.64, 60.99],
[28.64, 66.08],
[23.60, 74.93],
[23.60, 80.01],
[8.66, 75.22],
[8.66, 80.31],
[10.75, 60.68],
[10.75, 65.77],
[10.56, 42.37],
[10.56, 47.46],
[3.71, 29.72],
[3.71, 34.81],
[12.46, 16.93],
[12.46, 22.02],
[35.68, 73.40],
[35.68, 77.77],
[19.22, 52.75],
[19.22, 57.13],
[27.59, 36.9],
[27.59, 41.29],
[51.95, 62.94],
[51.95, 66.72],
[12.27, 30.52],
[12.27, 34.3],
[6.18, 7.99],
[6.18, 11.77],
[56.23, 69.26],
[56.23, 72.6],
[24.36, 92.95],
[24.36, 96.29],
[4.09, 54.58],
[4.09, 57.92],
[47.89, 50.94],
[48.85, 53.89]
]
const wallSet = {
isStatic: true,
render: {
fillStyle: 'rgba(0, 0, 0, 0.5)',
visible: false
}
}
for (let i = 0; i < 19; i++) {
const flaskAbove = Bodies.fromVertices(
percentX(flaskPos[i * 2][0]),
percentY(flaskPos[i * 2][1]),
i < 9 ? vertices1 : (i < 12 ? vertices3 : (i < 15 ? vertices5 : (i < 18 ? vertices7 : vertices9))),
wallSet,
true);
const flaskBelow = Bodies.fromVertices(
percentX(flaskPos[i * 2 + 1][0]),
percentY(flaskPos[i * 2 + 1][1]),
i < 9 ? vertices2 : (i < 12 ? vertices4 : (i < 15 ? vertices6 : (i < 18 ? vertices8 : vertices10))),
wallSet,
true);
Body.scale(flaskAbove, cWidth / 1051, cHeight / 688);
Composite.add(world, flaskAbove)
Body.scale(flaskBelow, cWidth / 1051, cHeight / 688);
Composite.add(world, flaskBelow)
}
const circleWall = Bodies.circle(
percentX(46.64),
percentY(29.43),
percentX(2.87),
wallSet
)
const lineWall = Bodies.fromVertices(
percentX(51.3),
percentY(35),
vertices11,
{
label: 'line',
isStatic: true,
restitution: 0,
friction: 0,
render: {
fillStyle: 'rgba(0, 0, 0, 0.3)',
visible: false
}
},
true
)
const endWall = Bodies.rectangle(
percentX(150),
percentY(37),
percentX(100),
percentY(1.45),
{
label: 'end',
isStatic: true
}
)
Body.scale(lineWall, cWidth / 1051, cHeight / 688);
Composite.add(world, circleWall);
Composite.add(world, lineWall);
Composite.add(world, endWall);
const bubbleSet = {
frictionAir: 0,
friction: 0,
restitution: 1,
inertia: Infinity,
frictionStatic: 0,
render: {
fillStyle: '#ffdefe',
strokeStyle: '#f286e6',
lineWidth: 2
}
}
const bubblePos = [
[30.64, 88.67],
[42.20, 65.04],
[28.78, 64.6],
[23.83, 77.69],
[8.8, 79],
[10.32, 63],
[11.5, 46.44],
[4.5, 33.21],
[13.3, 19.11],
[34.3, 75.22],
[19.74, 55.74],
[27.97, 39.32],
[51.14, 65.19],
[11.37, 31.61],
[5.95, 7.78],
[57.14, 71.44],
[24.36, 95.2],
[4.9, 56.32],
[48.57, 54.58]
]
const bubbles = [];
for (let i = 0; i < 19; i++) {
bubbles[i] = [];
for (let j = 0; j < (i < 9 ? 6 : (i < 12 ? 5 : (i < 15 ? 4 : (i < 18 ? 3 : 2)))); j++) {
const bubble = Bodies.circle(
percentX(bubblePos[i][0]),
percentY(bubblePos[i][1]),
percentX(0.38),
bubbleSet)
bubbles[i].push(bubble);
Composite.add(world, bubble);
}
}
bubbles[11].forEach(bubble => {
bubble.render.fillStyle = '#f9ebdc';
bubble.render.strokeStyle = '#f4aa62';
})
bubbles[18].forEach(bubble => {
bubble.render.fillStyle = '#f9ebdc';
bubble.render.strokeStyle = '#f4aa62';
})
bubbles.forEach(flask => {
flask.forEach(bubble => {
Body.setVelocity(bubble, {
x: Common.random(-0.4, 0.4),
y: Common.random(-0.4, 0.4)
})
})
})
let ballPos = [
[50.11, 26.01],
[50.42, 27.15],
[50.69, 28.32],
[49.9, 28.54],
[49.81, 30.8]
]
const smallBalls = [];
const addLabel = (ball) => {
setTimeout(() => {
ball.label = 'ball1';
}, 1000)
}
const animateSmallBalls = () => {
const balls = [];
for (let i = 0; i < 5; i++) {
const pink = ['#f1d7f7', '#f48ef4'];
const yellow = ['#f9e9c2', '#f9d84e'];
const color = gsap.utils.random([pink, yellow], true)
const style = color();
const ball = Bodies.circle(
percentX(ballPos[i][0]),
percentY(ballPos[i][1]),
percentX(0.36),
{
friction: 0.08,
restitution: 0,
inertia: Infinity,
render: {
fillStyle: style[0],
strokeStyle: style[1],
lineWidth: 2
}
}
)
balls.push(ball);
Composite.add(world, ball)
addLabel(ball);
}
smallBalls.push(balls);
}
const clickSignal = select('#square');
clickSignal.style.marginLeft = `${percentX(46.92)}px`;
clickSignal.style.marginTop = `${percentY(27.26)}px`;
clickSignal.style.width = `${percentX(1.59)}px`;
clickSignal.style.height = `${percentY(4.14)}px`;
const disableSignal = () => {
redSignalTL.pause();
redSignal.style.opacity = 0.5;
clickSignal.disabled = true;
clickSignal.style.cursor = 'default';
}
const enableSignal = () => {
redSignalTL.restart();
redSignal.style.opacity = 1;
clickSignal.disabled = false;
clickSignal.style.cursor = 'pointer';
}
let ballReady = true;
clickSignal.addEventListener('click', () => {
if (smallBalls.length < 8) {
animateSmallBalls();
ballReady = false;
disableSignal();
setTimeout(() => {
ballReady = true;
enableSignal();
}, 3000)
}
})
Events.on(engine, 'beforeUpdate', () => {
smallBalls.forEach(balls => {
balls.forEach(ball => {
if (ball.label === 'ball1') {
Body.applyForce(ball, {x: ball.position.x, y: ball.position.y}, {x: 0, y: 0.0001});
}
if (ball.isHit) {
Body.applyForce(ball, {x: ball.position.x, y: ball.position.y}, {x: 0.00025, y: 0.0001})
}
})
})
if (smallBalls.length >= 8 && !clickSignal.disabled) {
disableSignal();
}
if (smallBalls.length < 8 && clickSignal.disabled && ballReady) {
enableSignal();
}
})
let removed = 0;
Events.on(engine, 'collisionStart', (event) => {
const pairs = event.pairs;
pairs.forEach(pair => {
if (pair.bodyB.label === 'ball1' && pair.bodyA.label === 'line') {
pair.bodyB.isHit = true
}
if (pair.bodyB.label === 'ball1' && pair.bodyA.label === 'end') {
Composite.remove(world, pair.bodyB);
removed++;
if (removed === 5) {
smallBalls.shift()
removed = 0;
}
}
})
})
let lastInnerWidth = window.innerWidth;
window.addEventListener('resize', () => {
if (lastInnerWidth !== window.innerWidth) {
lastInnerWidth = window.innerWidth;
World.clear(world);
Engine.clear(engine);
Runner.stop(runner);
Runner.stop(engine);
Render.stop(render);
setupCanvas();
}
})
}
setupCanvas();
Also see: Tab Triggers