<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/sdras/pen/MYQxXe?limit=all&page=79&q=svg" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'><script src='https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js'></script>
<style class="cp-pen-styles">html {
background: #6c7367;
/* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
/* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, #6c7367), color-stop(77%, #3f3b40), color-stop(100%, #261f26));
/* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
/* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
/* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, #6c7367 0%, #3f3b40 77%, #261f26 100%);
/* IE10+ */
background: radial-gradient(ellipse at center, #6c7367 0%, #3f3b40 77%, #261f26 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6c7367', endColorstr='#261f26',GradientType=1 );
width: 100vw;
height: 100vh;
}
.container {
width: 100vw;
height: 300px;
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/sd-bk4.svg") repeat-x;
}
svg {
position: relative;
opacity: 0.8;
margin: 10px auto;
display: table;
width: 400px;
}
.no-svg .container {
background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/steampunk5.png");
width: 472px;
height: 374px;
margin: 0 auto;
display: table;
}
#firefly, #firefly_1_, #firefly_2_, #glow, #big-glow {
visibility: hidden;
opacity: 0;
}
.s0 {
stop-color: #FFFFFF;
}
.s1 {
stop-color: #FCEE91;
stop-opacity: 0;
}
.s2 {
stop-color: #FEFBE4;
stop-opacity: 0.8;
}
.s3 {
stop-color: #FDF5C0;
stop-opacity: 0.6;
}
.s4 {
stop-color: #FDF1A6;
stop-opacity: 0.4;
}
.s5 {
stop-color: #FCEF97;
stop-opacity: 0.2;
}
#faucet {
animation: faucet 4s linear infinite;
transform-origin: 50% 50%;
}
.ff-glow {
animation: stutter 4s linear infinite;
}
@keyframes faucet {
25% {
transform: scaleX(0);
transform-origin: 50% 50%;
}
50% {
transform: scaleX(1);
transform-origin: 50% 50%;
}
75% {
transform: scaleX(0);
transform-origin: 50% 50%;
}
}
@keyframes stutter {
20% {
opacity: 0.3;
}
30% {
opacity: 1;
}
40% {
opacity: 0.4;
}
50% {
opacity: 0.7;
}
70% {
opacity: 0.1;
}
80% {
opacity: 0.5;
}
}
</style></head><body>
<div class="container">
<svg version="1.1" x="0" y="0" viewBox="0 0 500 374" enable-background="new 0 0 500 374" xml:space="preserve">
<g id="Layer_1">
<path fill-rule="evenodd" clip-rule="evenodd" fill="#161216" d="M101.1 300.3v1.4h-4v-1.4h-2.2v-6.3h2.2v-1.4h-2.2v-6.3h2.2v-1.4h4v1.4h2.5v-14.6h-5.2c-3.3 10-11.4 17.3-24 17.3 -12.6 0-25.2-11.1-25.2-24.9 0-13.7 12.6-24.9 25.2-24.9 12.6 0 20.7 7.2 24 17.3h5.3v-12.9h-2.5v1.4h-4v-1.4h-2.2v-6.3h2.2v-1.4h-2.2v-6.3h2.2v-1.4h4v1.4c2.3 0 29.4 0 32.1 0v-1.4h4v1.4h2.3v6.3h-2.3v1.4h2.3v6.3h-2.3v1.4h-4v-1.4h-2.9c0 14.2 0 28.5 0 42.7h2.9v-1.4h4v1.4h2.3v6.3h-2.3v1.4h2.3v6.3h-2.3v1.4h-4v-1.4C125.1 300.3 108.9 300.3 101.1 300.3L101.1 300.3zM130.2 294v-1.4h2.9v1.4H130.2L130.2 294zM130.2 237.2v-1.4h2.9v1.4H130.2L130.2 237.2zM103.6 235.8v1.4h-2.5v-1.4H103.6L103.6 235.8zM103.6 292.6v1.4h-2.5v-1.4H103.6L103.6 292.6zM67.7 267.9c2.1 3.6 6.8 4.9 10.5 2.8 3.7-2.1 4.9-6.8 2.8-10.4 -2.1-3.6-6.8-4.9-10.5-2.8C66.8 259.6 65.6 264.2 67.7 267.9L67.7 267.9zM69.9 266.6c1.4 2.4 4.6 3.3 7 1.9 2.5-1.4 3.3-4.5 1.9-6.9 -1.4-2.4-4.6-3.3-7-1.9C69.3 261.1 68.5 264.2 69.9 266.6L69.9 266.6zM53.8 264.1c0-4.4 1.4-8.4 3.8-11.7 1.6-2.3 4.8-2.8 7.2-1.2 2.3 1.6 2.8 4.7 1.3 7 -1.2 1.7-2 3.7-2 6 0 2.2 0.7 4.3 2 6 1.6 2.3 1 5.4-1.3 7 -2.3 1.6-5.6 0.9-7.2-1.2C55.2 272.5 53.8 268.4 53.8 264.1L53.8 264.1zM84.6 246.5c3.8 2.2 6.7 5.4 8.4 9.1 1.2 2.5 0 5.6-2.5 6.7 -2.5 1.1-5.5 0.1-6.8-2.4 -0.8-1.9-2.3-3.6-4.3-4.7 -2-1.1-4.1-1.5-6.2-1.3 -2.8 0.2-5.2-1.9-5.5-4.6 -0.3-2.8 2-5.2 4.6-5.5C76.5 243.5 80.8 244.3 84.6 246.5L84.6 246.5zM84.6 281.6c-3.8 2.2-8.1 3-12.2 2.6 -2.8-0.3-4.9-2.7-4.6-5.5 0.3-2.7 2.7-4.8 5.5-4.6 2.1 0.2 4.3-0.2 6.2-1.3 2-1.1 3.4-2.8 4.3-4.7 1.2-2.5 4.2-3.5 6.8-2.4 2.6 1.2 3.6 4.3 2.5 6.7C91.3 276.2 88.5 279.4 84.6 281.6L84.6 281.6z"/>
<path fill="none" d="M181.8 150.5c-8.5 0-15.4 7-15.4 15.5 0 8.6 6.9 15.5 15.4 15.5 8.5 0 15.4-7 15.4-15.5C197.2 157.4 190.3 150.5 181.8 150.5z"/>
<path fill="#161216" d="M252.2 125.6l-39 5.5 -11.6 2.2c-7.1 1.4-40.6 8.5-40.6 30.6v2.2c0 11.6 9.8 20.4 20.5 20.4 11.1 0 20.5-9.1 20.5-20.4v-17.8l50.1-3.8c29.5 0 53.4 23.9 53.4 53.7 0 29.8-23.9 53.7-53.3 53.7H89v19h163.1c39.9 0 72.2-32.5 72.2-72.7C324.4 158 292.1 125.6 252.2 125.6zM181.8 181.6c-8.5 0-15.4-7-15.4-15.5 0-8.6 6.9-15.5 15.4-15.5 8.5 0 15.4 7 15.4 15.5C197.2 174.6 190.3 181.6 181.8 181.6z"/>
<path fill="#161216" d="M258.5 128.2l-7 0 0.1-20.8c0.1-7.1 6.6-12.8 14.6-12.8l42.4 0.2c4.2 0 7.7-2.9 7.7-6.6l0.2-20.8 7 0 -0.1 20.8c0 7.1-6.6 12.8-14.6 12.8 0 0 0 0 0 0l-42.4-0.2c-4.2 0-7.7 2.9-7.7 6.6L258.5 128.2zM253.4 126.4l3.3 0 0.1-19c0-4.6 4.3-8.3 9.5-8.3l42.4 0.2c7.1 0 12.8-4.9 12.9-11l0.1-19 -3.3 0 -0.1 19c0 4.6-4.3 8.3-9.5 8.3l-42.4-0.2c-7.1 0-12.8 5-12.9 11L253.4 126.4z"/>
<ellipse fill="none" cx="302.9" cy="54.4" rx="10.2" ry="10"/>
<path fill="#161216" d="M369 67h10.8c7.4 0 13.3-5.2 13.3-12.5 0-7.3-6-12.5-13.3-12.5h-76.8c-7.4 0-13.3 5.2-13.3 12.5 0 7.3 6 12.5 13.3 12.5H315v12c1 0 7 0 9 0V67h27.9 -11.8 0.1 0.1 1.9 7.1H358v21h11V67zM302.9 64.4c-5.6 0-10.2-4.5-10.2-10 0-5.5 4.6-10 10.2-10 5.6 0 10.2 4.5 10.2 10C313.1 59.9 308.6 64.4 302.9 64.4z"/>
<rect x="16" y="277" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" width="16" height="9"/>
<rect x="112" y="300" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" width="9" height="53"/>
<rect x="93" y="347" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" width="46" height="21"/>
<rect x="240" y="347" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" width="103" height="21"/>
<ellipse fill-rule="evenodd" clip-rule="evenodd" fill="#161216" cx="249.9" cy="197.6" rx="5.8" ry="5.7"/>
<rect x="251" y="194" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" width="63" height="5"/>
<path fill="#161216" d="M115 317H48c-17.2 0-29.8-12.6-30.1-29.8L17.9 286h10.3l0 1.1C28.4 299.3 36.6 308 48 308H115V317zM20 288c0.7 15.2 12.4 26 28 26H114v-4H48c-12.4 0-21.2-9.8-21.8-22H20z"/>
<path fill-rule="evenodd" clip-rule="evenodd" fill="#161216" d="M379.4 84.9v-1.4h4v1.4h2.2v6.3h-2.2v1.4h2.2v6.3h-2.2v1.4h-4v-1.4h-2.5v14.6h5.3c3.3-10 11.4-17.3 24-17.3 12.6 0 25.2 11.1 25.2 24.9 0 13.7-12.6 24.9-25.2 24.9 -12.6 0-20.7-7.2-24-17.3h-5.2v12.9h2.5v-1.4h4v1.4h2.2v6.3h-2.2v1.4h2.2v6.3h-2.2v1.4h-4v-1.4c-2.3 0-29.4 0-32.1 0v1.4h-4v-1.4h-2.3v-6.3h2.3v-1.4h-2.3v-6.3h2.3v-1.4h4v1.4h2.9c0-14.2 0-28.5 0-42.7h-2.9v1.4h-4v-1.4h-2.3v-6.3h2.3v-1.4h-2.3v-6.3h2.3v-1.4h4v1.4C355.4 84.9 371.6 84.9 379.4 84.9L379.4 84.9zM350.3 91.2v1.4h-2.9v-1.4H350.3L350.3 91.2zM350.3 147.9v1.4h-2.9v-1.4H350.3L350.3 147.9zM376.9 149.4v-1.4h2.5v1.4H376.9L376.9 149.4zM376.9 92.6v-1.4h2.5v1.4H376.9L376.9 92.6zM412.8 117.3c-2.1-3.6-6.8-4.9-10.5-2.8 -3.7 2.1-4.9 6.8-2.8 10.4 2.1 3.6 6.8 4.9 10.5 2.8C413.7 125.6 415 120.9 412.8 117.3L412.8 117.3zM410.6 118.6c-1.4-2.4-4.6-3.3-7-1.9 -2.5 1.4-3.3 4.5-1.9 6.9 1.4 2.4 4.6 3.3 7 1.9C411.2 124.1 412 121 410.6 118.6L410.6 118.6zM426.7 121.1c0 4.4-1.4 8.4-3.8 11.7 -1.6 2.3-4.8 2.8-7.2 1.2 -2.3-1.6-2.8-4.7-1.3-7 1.2-1.7 2-3.7 2-6 0-2.2-0.7-4.3-2-6 -1.6-2.3-1-5.4 1.3-7 2.3-1.6 5.6-0.9 7.2 1.2C425.3 112.7 426.7 116.7 426.7 121.1L426.7 121.1zM395.9 138.7c-3.8-2.2-6.7-5.4-8.4-9.1 -1.2-2.5 0-5.6 2.5-6.7 2.5-1.1 5.5-0.1 6.8 2.4 0.8 1.9 2.3 3.6 4.3 4.7 2 1.1 4.1 1.5 6.2 1.3 2.8-0.2 5.2 1.9 5.5 4.6 0.3 2.8-2 5.2-4.6 5.5C404 141.7 399.7 140.9 395.9 138.7L395.9 138.7zM395.9 103.5c3.8-2.2 8.1-3 12.2-2.6 2.8 0.3 4.9 2.7 4.6 5.5 -0.3 2.7-2.7 4.8-5.5 4.6 -2.1-0.2-4.3 0.2-6.2 1.3 -2 1.1-3.4 2.8-4.3 4.7 -1.2 2.5-4.2 3.5-6.8 2.4 -2.6-1.2-3.6-4.3-2.5-6.7C389.2 109 392.1 105.7 395.9 103.5L395.9 103.5z"/>
<path fill="#161216" d="M348.4 291.8c-9.2 0-16.7 7.4-16.7 16.5v40.9H321.7v-40.9c0-14.6 12-26.4 26.8-26.4h12.1c0 2.2 0 7.6 0 9.9H348.4z"/>
<path fill="none" d="M438.1 279.1c-0.6 0.3-1.3 0.5-2.1 0.5h-2.7c-0.6 0-1.1 0.5-1.1 1.1 0 0.6 0 13.7 0 14.4 0 0.6 0.5 1.1 1.1 1.1h2.7c0.8 0 1.5 0.2 2.1 0.5l6.3 3.6c2.2 1.3 4.7 2 7.4 2 8.1 0 14.6-6.5 14.6-14.4 0-8-6.5-14.4-14.6-14.4 -2.7 0-5.2 0.7-7.4 2L438.1 279.1z"/>
<path fill="none" d="M362.4 289.4h45.3v7.4h7.9v2.4h-7.9v0.8h-2v-0.9c-4.3-0.6-7.8-3.6-9.1-7.6h-32.9"/>
<path fill="none" d="M359.5 284.4h37c1.3-4 4.9-7 9.1-7.6v-0.9h2v0.7h7.9v2.4h-7.9v7.4h-47"/>
<path fill="none" d="M416.6 276.7h12.8v3.2l-1 0c-0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.2-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.2-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.2-0.6-0.6 0-0.3-0.2-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.2-0.1 0.3-0.2 0.4l-1 1h-6.6v-1.8h3.4V276.7z"/>
<rect x="408.6" y="280" fill="none" width="3.7" height="15.8"/>
<path fill="none" d="M416.6 299.1v-3.3h-3.4V294h6.6l1 1c0.1 0.1 0.2 0.2 0.2 0.4 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.2 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.2 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.2 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6h1v3.2H416.6z"/>
<path fill="none" d="M467 287.9c0 8.3-6.8 15-15.2 15 -2.8 0-5.4-0.7-7.6-2l-6.4-3.7c-0.5-0.3-1.1-0.5-1.8-0.5 -2.5 0-0.2 0-2.7 0 -0.9 0-1.7-0.8-1.7-1.7l-3.2 0c-0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.2 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.2-0.1-0.3-0.2-0.4l-2.4-2.4c-0.2 0-0.3-0.1-0.4-0.2l-2-1.9c-1 0-1.7-0.8-1.7-1.7 0-1 0.8-1.7 1.8-1.7l2-1.9c0.1-0.1 0.2-0.2 0.4-0.2l2.4-2.4c0.1-0.1 0.2-0.2 0.2-0.4 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6l3.2 0c0-0.9 0.8-1.7 1.7-1.7 2.5 0 0.2 0 2.7 0 0.6 0 1.3-0.2 1.8-0.5l6.4-3.7c2.2-1.3 4.8-2 7.6-2C460.2 272.9 467 279.7 467 287.9z"/>
<path fill="#161216" d="M428.4 296c-0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.2-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.2-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.2-0.6 0.6 0 0.3-0.2 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.2-0.1-0.3-0.2-0.4l-1-1h-6.6v1.8h3.4v3.3h12.8v-3.2H428.4z"/>
<rect x="408.6" y="280" fill="#161216" width="3.7" height="15.8"/>
<path fill="#161216" d="M413.2 280v1.8h6.6l1-1c0.1-0.1 0.2-0.2 0.2-0.4 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.2 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.2 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.2 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6l1 0v-3.2h-12.8v3.3H413.2z"/>
<path fill="#161216" d="M363.6 291.4h32.9c1.3 4 4.9 7 9.1 7.6v0.9h2v-0.7h7.9v-2.4h-7.9v-7.4h-45.3"/>
<path fill="#161216" d="M360.7 286.5h47v-7.4h7.9v-2.4h-7.9v-0.7h-2v0.9c-4.3 0.6-7.8 3.6-9.1 7.6h-37"/>
<rect x="358" y="153" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" width="11" height="141"/>
<path fill="#161216" d="M375.1 209.4c0 4.5 3.7 8.1 8.2 8.1h14.3c1.6 0 2.8 1.3 2.8 2.8 0 1.5-1.3 2.8-2.8 2.8h-13.4v-1.3h-1.5v2.2h-15.7v3.5h15.7v2.2h1.5v-1.3h13.4c4.5 0 8.2-3.6 8.2-8.1 0-4.5-3.7-8.1-8.2-8.1h-14.3c-1.6 0-2.8-1.3-2.8-2.8V196.8h-5.3V209.4z"/>
<rect x="368" y="184" fill="#161216" width="17" height="13"/>
<rect x="265" y="311" fill="#161216" width="29" height="8"/>
<path fill="#161216" d="M257 307v13h-1v3h1.8c1.2 9 7.2 15 14.2 17.4V347h4v-27h-14v-14L260.9 307H257z"/>
<path fill="#161216" d="M302 307h-7v13h-14v27h4v-6.6c9-2.4 13.8-8.4 15-17.4H302v-1.9l0 0V307z"/>
<polygon fill="#161216" points="260.9 305.8 262.1 306 262.1 305.8 "/>
<polygon id="faucet" fill="#161216" points="41.364,259 39.375,259 27,269.621 27,269 21,269 21,269.57 9.606,259 7.429,259
4.877,271.9 20.265,273.822 27.114,274.24 43.866,272.59 "/>
<polygon id="screw" fill="#161216" points="26,265 26,263 22,263 22,265 21,265 21,277 27,277 27,265 "/>
</g>
<g id="Layer_2">
<path id="gear" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" d="M247.7 149.5l-1.1 8.1c-2.1 0.2-4.1 0.5-6 0.9l-3.6-7.4c-1.4 0.4-2.9 0.8-4.3 1.4l1.5 8c-1.9 0.8-3.7 1.7-5.4 2.7l-5.7-5.9c-1.2 0.8-2.5 1.7-3.6 2.6l3.9 7.2c-1.5 1.3-3 2.7-4.3 4.3l-7.3-3.9c-0.9 1.2-1.8 2.3-2.6 3.6l6 5.6c-1.1 1.7-2 3.5-2.8 5.4l-8.1-1.5c-0.5 1.4-1 2.8-1.4 4.2l7.5 3.5c-0.5 1.9-0.8 3.9-0.9 6l-8.2 1.1c0 0.7-0.1 1.5-0.1 2.2 0 0.7 0 1.5 0.1 2.2l8.2 1.1c0.2 2 0.5 4 0.9 6l-7.5 3.5c0.4 1.4 0.9 2.8 1.4 4.2l8.1-1.5c0.8 1.9 1.7 3.7 2.8 5.4l-6 5.6c0.8 1.2 1.7 2.4 2.6 3.6l7.3-3.9c1.3 1.5 2.8 3 4.3 4.3l-3.9 7.2c1.2 0.9 2.4 1.8 3.6 2.6l5.7-5.9c1.7 1 3.6 2 5.4 2.7l-1.5 8c1.4 0.5 2.8 1 4.3 1.4l3.6-7.4c2 0.5 4 0.8 6 0.9l1.1 8.1c0.7 0 1.5 0.1 2.2 0.1 0.8 0 1.5 0 2.2-0.1l1.1-8.1c2.1-0.2 4.1-0.5 6-0.9l3.6 7.4c1.5-0.4 2.9-0.9 4.3-1.4l-1.5-8c1.9-0.8 3.7-1.7 5.4-2.7l5.7 5.9c1.3-0.8 2.5-1.7 3.6-2.6l-3.9-7.2c1.5-1.3 3-2.7 4.3-4.3l7.3 3.9c0.9-1.2 1.8-2.3 2.6-3.6l-6-5.6c1.1-1.7 2-3.5 2.8-5.4l8.1 1.5c0.5-1.4 1-2.8 1.4-4.2l-7.5-3.5c0.5-1.9 0.8-3.9 0.9-6l8.2-1.1c0-0.7 0.1-1.5 0.1-2.2 0-0.7 0-1.5-0.1-2.2l-8.2-1.1c-0.2-2-0.5-4-0.9-6l7.5-3.5c-0.4-1.4-0.9-2.8-1.4-4.2l-8.1 1.5c-0.8-1.9-1.7-3.7-2.8-5.4l6-5.6c-0.8-1.2-1.7-2.4-2.6-3.6l-7.3 3.9c-1.3-1.5-2.8-2.9-4.3-4.3l3.9-7.2c-1.2-0.9-2.4-1.8-3.6-2.6l-5.7 5.9c-1.7-1-3.6-2-5.4-2.7l1.5-8c-1.4-0.5-2.8-1-4.3-1.4l-3.6 7.4c-2-0.5-4-0.8-6-0.9l-1.1-8.1c-0.7 0-1.5-0.1-2.2-0.1C249.2 149.4 248.4 149.5 247.7 149.5L247.7 149.5zM249.9 186.6c-6.2 0-11.2 5-11.2 11.1 0 6.1 5 11.1 11.2 11.1 6.2 0 11.2-5 11.2-11.1C261.1 191.6 256.1 186.6 249.9 186.6L249.9 186.6z"/>
<path id="fan-empty" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="#161216" stroke-miterlimit="10" d="M184.4 165.5c0 0.3 0 0.6 0 0.8 2.9 1.5 6.4 4.4 6.2 7.6 -0.1 2.5-4.4 5-6.7 3.8 -2.9-1.5-3.7-5.9-3.6-9.2 -0.1-0.1-0.3-0.1-0.4-0.2 -0.1-0.1-0.2-0.2-0.4-0.2 -2.8 1.7-7 3.3-9.8 1.5 -2.2-1.4-2.2-6.3 0-7.6 2.8-1.7 7-0.2 9.8 1.5 0.2-0.2 0.5-0.3 0.7-0.4l0 0c-0.1-3.3 0.6-7.6 3.6-9.2 2.3-1.2 6.6 1.3 6.7 3.8C190.7 161.1 187.3 164 184.4 165.5L184.4 165.5zM182.1 164.7c0.7 0.4 0.9 1.2 0.5 1.9 -0.4 0.7-1.2 0.9-1.9 0.5 -0.7-0.4-0.9-1.2-0.5-1.9C180.6 164.6 181.5 164.4 182.1 164.7L182.1 164.7zM182.4 164.2c1 0.6 1.3 1.8 0.8 2.8 -0.6 1-1.8 1.3-2.8 0.7 -1-0.6-1.3-1.8-0.7-2.8C180.2 163.9 181.5 163.6 182.4 164.2L182.4 164.2z"/>
<path id="fan-full_1_" fill-rule="evenodd" clip-rule="evenodd" fill="#161216" d="M305.1 54.3c0 0.2 0 0.4 0 0.6 2 1.1 4.4 3 4.4 5.3 -0.1 1.8-3.1 3.5-4.7 2.7 -2-1.1-2.6-4.1-2.5-6.4 -0.1 0-0.2-0.1-0.3-0.1 -0.1-0.1-0.2-0.1-0.2-0.2 -2 1.2-4.9 2.3-6.8 1.1 -1.5-0.9-1.5-4.4 0-5.3 2-1.2 4.9-0.2 6.8 1.1 0.2-0.1 0.3-0.2 0.5-0.3l0 0c-0.1-2.3 0.5-5.3 2.5-6.4 1.6-0.8 4.6 0.9 4.7 2.7C309.6 51.2 307.2 53.2 305.1 54.3L305.1 54.3zM303.6 53.7c0.5 0.3 0.6 0.8 0.4 1.3 -0.3 0.5-0.9 0.6-1.3 0.3 -0.5-0.3-0.6-0.8-0.3-1.3C302.5 53.6 303.1 53.5 303.6 53.7L303.6 53.7zM303.8 53.3c0.7 0.4 0.9 1.3 0.5 1.9 -0.4 0.7-1.3 0.9-2 0.5 -0.7-0.4-0.9-1.3-0.5-1.9C302.3 53.2 303.1 52.9 303.8 53.3L303.8 53.3z"/>
<g id="bellows">
<path fill="#161216" d="M265 310h1v-11.6l-1.2-1.9c-0.2-0.2-0.1-0.3-0.4-0.3 -0.6 0-0.9-0.5-0.9-1 0-0.6 0.6-1 1.2-1 0.6 0 1.1-0.5 1.1-1 0-0.6-0.5-1-1-1 -0.6 0-1.1-0.5-1.1-1s0.5-1 1.1-1c0.6 0 1.1-0.5 1.1-1 0-0.6-0.5-1-1.1-1 -0.6 0-1.1-0.5-1.1-1 0-0.6 0.5-1 1.1-1 0.6 0 1.1-0.5 1.1-1 0-0.6-0.5-1-1.1-1 -0.6 0-1.1 0-1.1-0.6L263.6 283H257v20h8V310z"/>
<path fill="#161216" d="M292.1 284.7c0 0.6 0.5 1 1.1 1 0.6 0 1.1 0.5 1.1 1 0 0.6-0.5 1-1.1 1 -0.6 0-1.1 0.5-1.1 1 0 0.6 0.5 1 1.1 1 0.6 0 1.1 0.5 1.1 1s-0.5 1-1.1 1c-0.6 0-1.1 0.5-1.1 1 0 0.6 0.5 1 1.1 1 0.6 0 1.1 0.5 1.1 1 0 0.6-0.5 1-1.1 1 -0.3 0-0.8 0.1-1 0.3l-2.1 1.9V310h4v-7h8v-20h-8v-0.3c0 0.6-0.4 1-1 1C292.4 283.7 292.1 284.2 292.1 284.7z"/>
<path fill="#161216" d="M266.4 283.7c0.6 0 1.1 0.5 1.1 1 0 0.6-0.5 1-1.1 1 -0.6 0-1.1 0.5-1.1 1 0 0.6 0.5 1 1.1 1 0.6 0 1.1 0.5 1.1 1 0 0.6-0.5 1-1.1 1 -0.6 0-1.1 0.5-1.1 1s0.5 1 1.1 1c0.6 0 1.1 0.5 1.1 1 0 0.6-0.5 1-1.1 1 -0.6 0-1.1 0.5-1.1 1 0 0.6 0.5 1 1.1 1 0.3 0 0.6 0.1 0.8 0.3l4.5 4.4c0 0.3 0.1 0.5 0.3 0.7l3.7 3.6c0 1.8 1.5 3.2 3.3 3.2 1.8 0 3.3-1.4 3.3-3.2l3.7-3.6c0.2-0.2 0.3-0.5 0.3-0.7l4.5-4.4c0.2-0.2 0.5-0.3 0.8-0.3 0.6 0 1.1-0.5 1.1-1 0-0.6-0.5-1-1.1-1 -0.6 0-1.1-0.5-1.1-1 0-0.6 0.5-1 1.1-1 0.6 0 1.1-0.5 1.1-1s-0.5-1-1.1-1c-0.6 0-1.1-0.5-1.1-1 0-0.6 0.5-1 1.1-1 0.6 0 1.1-0.5 1.1-1 0-0.6-0.5-1-1.1-1 -0.6 0-1.1-0.5-1.1-1 0-0.6-0.3-1 0.3-1 0.6 0 0.3-0.5 0.3-1V283h-25.7l0 0.1C265.3 283.7 265.8 283.7 266.4 283.7z"/>
</g>
</g>
<g id="layer">
<path fill="#161216" d="M135.1 141.7c-0.4 0-0.5 0.2-0.8 0.4L132 144.6V161h4v-9h8v-31h-7.5l0 2.5c0 0.8-0.6 1.4-1.4 1.4 -0.8 0-1.4 0.6-1.4 1.4 0 0.8 0.6 1.4 1.4 1.4 0.8 0 1.4 0.6 1.4 1.4 0 0.8-0.6 1.4-1.4 1.4 -0.8 0-1.4 0.6-1.4 1.4 0 0.8 0.6 1.4 1.4 1.4 0.8 0 1.4 0.6 1.4 1.4 0 0.8-0.6 1.4-1.4 1.4 -0.8 0-1.4 0.6-1.4 1.4 0 0.8 0.6 1.4 1.4 1.4 0.8 0 1.4 0.6 1.4 1.4C136.5 141.1 135.9 141.7 135.1 141.7z"/>
<path fill="#161216" d="M98.1 127.7c0.8 0 1.4-0.6 1.4-1.4 0-0.8-0.6-1.4-1.4-1.4 -0.8 0-1.4-0.6-1.4-1.4L96.7 121H89v31h8v9h5v-16.4l-2.7-2.5c-0.3-0.3-0.7-0.4-1.1-0.4 -0.8 0-1.5-0.6-1.5-1.4 0-0.8 0.6-1.4 1.4-1.4 0.8 0 1.4-0.6 1.4-1.4 0-0.8-0.6-1.4-1.4-1.4 -0.8 0-1.4-0.6-1.4-1.4 0-0.8 0.6-1.4 1.4-1.4 0.8 0 1.4-0.6 1.4-1.4 0-0.8-0.6-1.4-1.4-1.4 -0.8 0-1.4-0.6-1.4-1.4C96.7 128.3 97.3 127.7 98.1 127.7z"/>
<path fill="#161216" d="M95 174v-19h-6v19h-2v5h2.1C90.6 189 105 209.3 111 211.4V282h3.3l-1.3-108H95z"/>
<path fill="#161216" d="M144 155h-6v19h-17.8l-1.3 108H122v-70.6c6-2.1 20.5-22.4 22-32.4H146v-5h-2V155z"/>
<rect x="97" y="163" fill="#161216" width="39" height="9"/>
</g>
<g id="big-light">
<path id="light-base_1_" fill="#161216" d="M99.5 114l-0.7 1.6c0 0 0.1 0.1 0.1 0.1l0 7.8c0 0.8 0.6 1.4 1.4 1.4 0.8 0 1.4 0.6 1.4 1.4 0 0.8-0.6 1.4-1.4 1.4 -0.8 0-1.4 0.6-1.4 1.4 0 0.8 0.6 1.4 1.4 1.4 0.8 0 1.4 0.6 1.4 1.4 0 0.8-0.6 1.4-1.4 1.4 -0.8 0-1.4 0.6-1.4 1.4 0 0.8 0.6 1.4 1.4 1.4 0.8 0 1.4 0.6 1.4 1.4 0 0.8-0.6 1.4-1.4 1.4 -0.8 0-1.4 0.6-1.4 1.4 0 0.8 0.6 1.4 1.4 1.4 0.4 0 0.7 0.2 1 0.4l5.9 5.9c0 0.4 0.2 0.7 0.4 1l4.8 4.8c0 2.4 1.9 4.3 4.3 4.3 2.4 0 4.3-1.9 4.3-4.3l4.8-4.8c0.3-0.3 0.4-0.6 0.4-1l5.9-5.9c0.3-0.3 0.6-0.4 1-0.4 0.8 0 1.4-0.6 1.4-1.4 0-0.8-0.6-1.4-1.4-1.4 -0.8 0-1.4-0.6-1.4-1.4 0-0.8 0.6-1.4 1.4-1.4 0.8 0 1.4-0.6 1.4-1.4 0-0.8-0.6-1.4-1.4-1.4 -0.8 0-1.4-0.6-1.4-1.4 0-0.8 0.6-1.4 1.4-1.4 0.8 0 1.4-0.6 1.4-1.4 0-0.8-0.6-1.4-1.4-1.4 -0.8 0-1.4-0.6-1.4-1.4 0-0.8 0.6-1.4 1.4-1.4 0.8 0 1.4-0.6 1.4-1.4l0-7.7c0.1 0 0.3-0.2 0.4-0.2l-1-1.5C129.3 114 104 114 99.5 114z"/>
<path id="bulb_1_" fill="#161216" d="M116.6 4.2c-28.4 0-51.5 23.1-51.5 51.5 0 9.4 2.5 18.2 6.9 25.8l12.7 21.8c1 1.8 10.3 0.1 10.3 1.7 0 6 0 0.6 0 6.6 0 2.3 1.7 3.9 3.9 4l0.6-1.6c-0.3 0-0.5 0-0.6 0 -1.5 0-2.8-0.9-2.8-2.4v-6.6c0-1.8-8.6-0.6-9.8-2.7L73.8 80.9c-4.3-7.4-6.8-16-6.8-25.1 0-27.4 22.2-49.6 49.6-49.6 27.4 0 49.6 22.2 49.6 49.6 0 9.2-2.5 17.8-6.8 25.1l-12.4 21.4c-1.2 2.1-9.9 0.8-9.9 2.7v6.6c0 1.5-1.1 2.4-2.7 2.4 -0.1 0-0.3 0-0.6 0l1.2 1.5c2.1-0.2 4-1.8 4-4 0-6 0-0.6 0-6.6 0-1.6 8.9 0.1 9.9-1.7l12.4-21.8c4.4-7.6 6.8-16.4 6.8-25.8C168.1 27.3 145 4.2 116.6 4.2z"/>
</g>
<g id="little_light">
<g id="light-base">
<path fill="rgb(38, 31, 38)" d="M432 281.2l-0.5-0.5c0 0 0 0 0 0.1l-3.1 0c-0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.3-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.3-0.3 0.6-0.6 0.6 -0.3 0-0.6-0.3-0.6-0.6 0-0.3-0.2-0.6-0.6-0.6 -0.3 0-0.6 0.3-0.6 0.6 0 0.2-0.1 0.3-0.2 0.4l-2.4 2.4c-0.2 0-0.3 0.1-0.4 0.2l-2 1.9c-1 0-1.7 0.8-1.7 1.7 0 1 0.8 1.7 1.8 1.7l2 1.9c0.1 0.1 0.2 0.2 0.4 0.2l2.4 2.4c0.1 0.1 0.2 0.2 0.2 0.4 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6 0.3 0 0.6-0.3 0.6-0.6 0-0.3 0.3-0.6 0.6-0.6 0.3 0 0.6 0.3 0.6 0.6 0 0.3 0.3 0.6 0.6 0.6l3.1 0 0.5-0.6C432 292.2 432 283.3 432 281.2z"/>
</g>
<path id="bulb" fill="rgb(38, 31, 38)" d="M451.8 272.9c-2.8 0-5.4 0.7-7.6 2l-6.4 3.6c-0.5 0.3-1.1 0.4-1.8 0.4 -2.5 0-0.2 0-2.7 0 -0.9 0-1.7 0.8-1.8 1.6l0.5 0.5c0-0.2 0-0.4 0-0.4 0-0.6 0.7-0.7 1.3-0.7h2.7c0.8 0 1.5-0.4 2.1-0.7l6.3-3.7c2.2-1.3 4.7-2 7.4-2 8.1 0 14.6 6.4 14.6 14.4 0 8-6.5 14.4-14.6 14.4 -2.7 0-5.2-0.7-7.4-2l-6.3-3.7c-0.6-0.3-1.3-0.7-2.1-0.7h-2.7c-0.6 0-1.3-0.3-1.3-0.9 0-0.1 0-0.3 0-0.6l-0.5 0.7c0 0.9 0.9 1.8 1.8 1.8 2.5 0 0.2 0 2.7 0 0.6 0 1.3 0.1 1.8 0.3l6.4 3.6c2.2 1.3 4.8 2 7.6 2 8.4 0 15.2-6.7 15.2-15C467 279.7 460.2 272.9 451.8 272.9z"/>
<polygon id="filament" fill-rule="evenodd" clip-rule="evenodd" fill="rgb(38, 31, 38)" points="431.8 285.2 431.8 290.7 442.1 290.7 442.1 289 450.4 289 450.4 292.3 452.1 292.3 452.1 283.5 450.4 283.5 450.4 286.8 442.1 286.8 442.1 285.2 431.8 285.2 "/>
<radialGradient id="glow_1_" cx="449.1" cy="287.6" r="38" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="1" class="s1"/>
</radialGradient>
<circle id="glow" opacity="0.7" fill="url(#glow_1_)" cx="449.1" cy="287.6" r="38"/>
<radialGradient id="big-glow_1_" cx="115.4502" cy="60.3047" r="38.0039" gradientTransform="matrix(1.5823 0 0 1.6052 -67.5918 -31.2188)" gradientUnits="userSpaceOnUse">
<stop offset="0" style="stop-color:#FFFFFF"/>
<stop offset="1" style="stop-color:#FCEE91;stop-opacity:0"/>
</radialGradient>
<ellipse id="big-glow" opacity="0.8" fill="url(#big-glow_1_)" cx="115.082" cy="65.583" rx="60.133" ry="61.004"/>
</g>
<g id="fireflies">
<g id="firefly_2_">
<radialGradient id="SVGID_1_" cx="94.8" cy="7.2" r="13.6" gradientTransform="matrix(0.2557 -1.381 1.381 0.2557 111.9053 207.6387)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="0.2" class="s2"/>
<stop offset="0.4" class="s3"/>
<stop offset="0.6" class="s4"/>
<stop offset="0.8" class="s5"/>
<stop offset="1" class="s1"/>
</radialGradient>
<circle class="ff-glow" opacity="0.7" fill="url(#SVGID_1_)" cx="146.1" cy="78.6" r="19"/>
<ellipse transform="matrix(0.1821 -0.9833 0.9833 0.1821 40.9701 201.7859)" fill="none" stroke="#161216" stroke-miterlimit="10" cx="141.8" cy="76.3" rx="5.2" ry="1.9"/>
<ellipse transform="matrix(-0.2436 -0.9699 0.9699 -0.2436 100.2584 231.4852)" fill="none" stroke="#161216" stroke-miterlimit="10" cx="140.4" cy="76.6" rx="4.4" ry="2.2"/>
<ellipse transform="matrix(-0.3489 -0.9372 0.9372 -0.3489 119.0644 242.3042)" fill="#BFBF8A" cx="143.7" cy="79.8" rx="1.4" ry="4.2"/>
<circle fill="#EFE7AC" cx="146.9" cy="78.8" r="1.6"/>
</g>
<g id="firefly_1_">
<radialGradient id="SVGID_2_" cx="96.7" cy="-35.8" r="13.6" gradientTransform="matrix(-0.7712 -1.1738 -1.1738 0.7712 108.6123 200.6338)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="0.2" class="s2"/>
<stop offset="0.4" class="s3"/>
<stop offset="0.6" class="s4"/>
<stop offset="0.8" class="s5"/>
<stop offset="1" class="s1"/>
</radialGradient>
<circle class="ff-glow" opacity="0.7" fill="url(#SVGID_2_)" cx="76.1" cy="59.6" r="19"/>
<ellipse transform="matrix(-0.5492 -0.8357 0.8357 -0.5492 76.0065 152.5574)" fill="none" stroke="#161216" stroke-miterlimit="10" cx="79.2" cy="55.8" rx="5.2" ry="1.9"/>
<ellipse transform="matrix(-0.1516 -0.9884 0.9884 -0.1516 37.8319 143.6604)" fill="none" stroke="#161216" stroke-miterlimit="10" cx="80.6" cy="55.6" rx="4.4" ry="2.2"/>
<ellipse transform="matrix(-0.0418 -0.9991 0.9991 -0.0418 22.3128 140.9486)" fill="#BFBF8A" cx="78.7" cy="59.8" rx="1.4" ry="4.2"/>
<circle fill="#EFE7AC" cx="75.4" cy="60.1" r="1.6"/>
</g>
<g id="firefly">
<radialGradient id="SVGID_3_" cx="133.7" cy="-0.6" r="13.6" gradientTransform="matrix(0.273 -1.3777 1.3777 0.273 118.4131 222.9336)" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#FFFFFF"/>
<stop offset="0.2" class="s2"/>
<stop offset="0.4" class="s3"/>
<stop offset="0.6" class="s4"/>
<stop offset="0.8" class="s5"/>
<stop offset="1" class="s1"/>
</radialGradient>
<circle class="ff-glow" opacity="0.7" fill="url(#SVGID_3_)" cx="154.1" cy="38.6" r="19"/>
<ellipse transform="matrix(0.1944 -0.9809 0.9809 0.1944 85.1625 176.121)" fill="none" stroke="#161216" stroke-miterlimit="10" cx="149.8" cy="36.2" rx="5.2" ry="1.9"/>
<ellipse transform="matrix(-0.2314 -0.9729 0.9729 -0.2314 147.1825 189.4322)" fill="none" stroke="#161216" stroke-miterlimit="10" cx="148.4" cy="36.6" rx="4.4" ry="2.2"/>
<ellipse transform="matrix(-0.3372 -0.9414 0.9414 -0.3372 165.4048 195.9743)" fill="#BFBF8A" cx="151.7" cy="39.8" rx="1.4" ry="4.2"/>
<circle fill="#EFE7AC" cx="154.9" cy="38.8" r="1.6"/>
</g>
</g>
</svg>
</div><!--container-->
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min.js'></script><script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/modernizr.custom.18922.js'></script>
<script >var $gear = $("#gear"),
$fanEmpty = $("#fan-empty"),
$fanFull = $("#fan-full_1_"),
$bellows = $("#bellows"),
$bigLtBase = $("#light-base_1_"),
$bigLtBulb = $("#bulb_1_"),
$smLtBase = $("#light-base"),
$smLtBulb = $("#bulb"),
$filament = $("#filament"),
$faucet = $("#faucet"),
$bigLtBulb = $("#bulb_1_"),
$smGlow = $("#glow"),
$firefly1 = $("#firefly"),
$firefly2 = $("#firefly_1_"),
$firefly3 = $("#firefly_2_");
TweenMax.set("#firefly, #firefly_1_, #firefly_2_, #glow, #big-glow", { visibility:"visible" });
// the first scene
function sceneOne() {
var tl = new TimelineLite();
tl.add( "start")
.to($smLtBase, 1, {fill:"rgb(108, 115, 103)", ease:Power2.easeOut}, "start+=1.5")
.to($smLtBulb, 1, {fill:"rgb(191, 191, 131)", ease:Power2.easeOut}, "start+=1.5")
.to($filament, 1, {fill:"rgb(242, 224, 138)", ease:Power2.easeOut}, "start+=1.5")
.to($smGlow, 1, {opacity:0.5, ease:Circ.easeOut}, "start+=1.5")
.to($smGlow, 4, {opacity:0.8, ease:Circ.easeOut}, "start+=3")
.to($firefly1, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=3")
.to($firefly1, 6, {
bezier:{
type:"soft",
values:[{x:10, y:30}, {x:-30, y:20}, {x:-40, y:10}, {x:30, y:20}, {x:10, y:30}],
autoRotate:true
},
ease:Linear.easeNone, repeat:-1}, "start+=3")
.to($firefly2, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=3.5")
.to($firefly2, 6, {
bezier:{
type:"soft",
values:[{x:30, y:10}, {x:60, y:40}, {x:50, y:30}, {x:40, y:20}, {x:30, y:10}],
autoRotate:true
},
ease:Linear.easeNone, repeat:-1}, "start+=3.5")
.to($firefly3, 1.5, {opacity:1, ease:Elastic.easeOut}, "start+=4")
.to($("#big-glow"), 1.5, {opacity:0.5, ease:Elastic.easeOut}, "start+=4")
.to($firefly3, 6, {
bezier:{
type:"soft",
values:[{x:-10, y:5}, {x:-20, y:40}, {x:-50, y:30}, {x:-40, y:0}, {x:-10, y:5}],
autoRotate:true
},
ease:Linear.easeNone, repeat:-1}, "start+=4")
.to($bigLtBase, 2.5, {fill:"rgba(191, 191, 131, 0.3)", ease:SlowMo.easeOut}, "start+=3.5")
.to($bigLtBulb, 2, {fill:"rgb(191, 191, 131)", ease:SlowMo.easeOut}, "start+=3.5")
.fromTo($bellows, 2, {scale:1, ease:Back.easeOut}, {scaleY:0.75, y:10, repeat:-1, ease:Circ.easeIn}, "start")
.to($gear, 4, {rotation:-360, repeat:-1, ease:Linear.easeNone, transformOrigin:"50% 50%"}, "start")
.to($fanEmpty, 4, {rotation:360, repeat:-1, ease:Linear.easeNone, transformOrigin:"60% 53%"}, "start")
.to($fanFull, 2, {rotation:360, repeat:-1, ease:Linear.easeNone, transformOrigin:"58% 50%"}, "start");
return tl;
}
var master = new TimelineLite();
master.add(sceneOne(), "sceneOne");
//master.seek("scene1+=4");
//# sourceURL=pen.js
</script>
</body></html>
