HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
Any URL's added here will be added as <script>
s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<svg width="90%" 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 804 340" style="enable-background:new 0 0 804 340;" xml:space="preserve">
<style type="text/css">
path {display:inline;fill-rule:evenodd;clip-rule:evenodd;}
.morph {display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#fff; }
.st0{display:none;}
.st1{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#666666;}
.st2{fill-rule:evenodd;clip-rule:evenodd;fill:#88CE02;}
.st3{opacity:0.4;fill-rule:evenodd;clip-rule:evenodd;}
.st4{display:none;fill-rule:evenodd;clip-rule:evenodd;}
.st5{fill-rule:evenodd;clip-rule:evenodd;}
.st6{fill-rule:evenodd;clip-rule:evenodd;fill:#EFEFEF;}
.st7{fill-rule:evenodd;clip-rule:evenodd;fill:#001423;}
.st8{opacity:0.3;fill-rule:evenodd;clip-rule:evenodd;}
.st9{opacity:0;fill-rule:evenodd;clip-rule:evenodd;}
.st10{fill-rule:evenodd;clip-rule:evenodd;fill:#88CE02;stroke:#000000;stroke-width:2.6415;stroke-linejoin:round;stroke-miterlimit:10;}
.st11{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#999999;}
.st12{display:inline;fill-rule:evenodd;clip-rule:evenodd;fill:#88CE02;}
.st13{display:inline;fill:#999999;}
.st14{display:inline;fill:#88CE02;}
#capeTop1 {stroke-width: 5px; stroke: black; }
#S, #V, #G, .shape { fill: white;visibility: hidden; }
.bulb { fill: white; visibility:hidden;}
#circleInner {fill:#93653B;}
#circleOuter {fill:#744BA3;}
#circleMid {fill:#960027;}
#fromGreenSock {visibility: hidden;}
.text-from {fill:#999999;}
.text-green {fill:white;}
.text-sock {fill:#88CE02;}
#scrubber {fill: #555;stroke-width: 4px;stroke: black;}
#track {stroke-width: 3px;stroke: #333;}
#heart {fill: #FF33FF;}
.hide, #GUY, #capeFlow1, #capeFlow2, #circleInner, #circleOuter, #circleMid, #plugin {visibility:hidden; opacity:0;}
</style>
<rect id="background" width="804" height="340"/>
<g id="capeFlow1">
<path id="rimTop1" d="M102.11,138.04c-8.44,4.03-30.95,22.05-35.37,27.37c-4.43,5.32-5.87-2.97-1.25-16.83
c3.72-11.16,12.99-26.37,28.58-39.3c9.1-7.55,29.36-18.35,41.64-24.59c2.5-1.27,34.78-15.06,63.68-21.82
c2.57-0.6-2.92,4.13-3.88,6.87c-4.38,12.58-90.85,66.88-90.85,66.88L102.11,138.04z"/>
<path id="capeBottom1" class="st2" d="M188.04,77.86c-11.57,3.84-18.65,6.64-42.21,17.31c-13.1,5.93-49.09,20.5-57.83,36.55
c29.14-16.88,35.59,4.6,37.88,28.49c2.14,22.31,13.4,34.04,41.95,33.33c29.56-0.74,38.42,16.45,46.62,36.58
c15.76-77.17,13.98-89.36,17.81-99.91C230.07,100.26,203.92,72.13,188.04,77.86z"/>
<path id="shadowTop1" class="st3" d="M175.4,95.18c-14.91,6.06-55.2,22.35-65.98,28.15c-2,0.83-26.42,14.29-26.42,14.3
c2.33,6.84,28.5,46.39,30.67,46.2c2-0.17,10.42-10.08,13.28-16.68c9.78-26.76,44.93-55.12,46.31-57.32
c0.6-0.96-0.86-5.33,1.51-9.45C177.83,95.08,183.8,91.77,175.4,95.18z"/>
<path id="capeTop1" class="st2" d="M248.13,52.76c-43.89,15.31-87.51,19.08-138.64,50.62c-12.23,7.54-37.78,24.51-42.76,56.92
c18.71-20.72,61.75-46.59,114.61-63.13c26.6-8.33,46.13-13.77,69.8-22.97C249.47,63.6,249.53,59.41,248.13,52.76z"/>
<path id="shadowBottom1" class="st3" d="M210.16,226.76c12.34-15.51,8.53-34.84,8.41-52c-0.05-7.22,5.16-17.37,2.56-14.46
c-10.02,11.2-35.23,31.88-53.29,33.24c-40.84,3.08-44.09,13.51-41.77,18.45C131.36,223.31,207.94,238.18,210.16,226.76z"/>
<path class="st4" d="M211.34,214.91c-0.28-0.38,0.31-0.62-0.04-0.62c-2.16,0-5.21-1.66-6.84-4.02
c-7.19-10.33-17.66-17.21-36.61-16.74c-28.55,0.71-39.81-11.02-41.95-33.33c-1.16-12.11-4.53-24.02-11.35-30.64l-4.07,2.43
c7.64,6.65,10.13,17.53,11.88,32.23c2.64,22.26,20.6,32.64,41.62,32.98c21.82,0.35,29.62,4.79,37.87,15.81
c2.67,3.56,5.74,4.64,7.92,5.09L211.34,214.91z"/>
</g>
<g id="capeFlow2">
<path id="rimTop2" d="M100.12,130.75c-8.44,4.03-44.36,10.2-51.24,9.46c-4-0.43-9.06-1.38-0.63-6.68
c7.07-4.45,28.34-13.96,44.25-24.7c9.8-6.61,30.92-17.91,43.21-24.15c2.5-1.27,34.78-15.06,63.68-21.82
c2.57-0.6-2.92,4.13-3.88,6.87c-4.38,12.58-95.35,62.75-95.35,62.75L100.12,130.75z"/>
<path id="capeBottom2" class="st2" d="M248.13,52.76c-18.35,15.78-53.76,20.18-106.38,40.48c-13.41,5.18-49.42,18.96-58.16,35.01
c7.74-5.02,8.47-16.02,9.71,6.87c0.95,17.48,29.45,36.46,55.7,51.76c18.26,10.64,51.75,10.62,65,38.15
c15.76-77.17,16.98-75.87,33.3-89.09C282.02,107.82,264.01,47.02,248.13,52.76z"/>
<path id="capeTop2" class="st2" d="M248.13,52.76c-43.89,15.31-87.51,19.08-138.64,50.62c-12.23,7.54-34.87,21.25-60.12,33.12
c31.12-2.45,79.11-22.79,131.96-39.33c26.6-8.33,46.13-13.77,69.8-22.97C249.47,63.6,249.53,59.41,248.13,52.76z"/>
<path id="shadowTop2" class="st3" d="M175.37,96.22c-14.91,6.06-53.19,23.78-63.97,29.58c0.01,0.01-23.4,5.08-21.52,6.68
c-0.4,7.82,4.08,17.63,6.75,21.52c0.73,1.07,7.25,7.46,8.25,8.87c0.62,3.04,5.37,5.96,6.25,6.62c0.17,0.13,12.22,10.38,13.25,11.12
c17-27.38,49.65-67.09,51.03-69.29c0.6-0.96-3.01-6.83-0.63-10.94C177.83,95.08,183.77,92.81,175.37,96.22z"/>
<path id="shadowBottom2" class="st3" d="M210.94,221.95c7.74-15.32,7.76-30.03,7.63-47.19c-0.05-7.22,4.07-18.06,2.56-14.46
c-5.42,12.87-36.16,30.66-51.74,37.32C184.5,204.62,206.17,210.75,210.94,221.95z"/>
<path id="rimBottom2" d="M92.38,133.53c14.89-5.03,62.95-25.22,74.83-29.02c11.89-3.79,8.16-8.29,8.16-8.29
S119.12,118,92.72,126.77L92.38,133.53z"/>
</g>
<g id="GUY">
<path d="M223.87,290.68c1.54,9.06,0.23,9.64-9.08,10.74s-16.2-2.29-18.72-4.65s-3-7.55-0.55-12.18c1.58-2.99,3.07-4.07,3.9-7.64
c0.83-3.57,1.58-4.4,2.24-5.65s0.8-2.38,1.05-10.52c0.25-8.14,0.07-23.55,0.87-29.9c0.83-6.6,29.56,2.96,29.56,2.96
s-6.81,16.95-8.64,21.1s-1.66,12.21-1.66,13.87c0,1.66-0.66,4.98-1.16,5.23c-0.5,0.25,1.74,4.49,0.75,6.98
S223.65,289.38,223.87,290.68z"/>
<path d="M234.78,36.18c-1.01-6.39-0.06-18.85,1.4-20.8c4.23-5.69,26.2-6.39,30.83,0.4c1.99,2.92,1.84,9.99,1.46,14.42
s-1.46,14.12-1.73,17.28c-0.2,2.36-24.25,5.93-29.62-0.33C235.63,45.41,234.78,36.18,234.78,36.18z"/>
<path d="M283.73,274.62c10.09,7.25,17.96,8.72,23.09,11.38c5.14,2.66,3.76,7.76-4.82,9.3c-7.02,1.26-18.02-1.36-25.25-1.33
s-23.67,0.87-27.99-2.16c-4.98-3.49-2.82-9.97-2.82-9.97c1.33-3.74,4.73-11.8,3.65-18.52c-1.08-6.73-2.35-10.39-4.87-16.41
c-2.52-6.02-4.35-21.39-1.94-22.22s1.74-0.08,4.65,0.75c2.91,0.83,6.4,1.66,12.88,1.66s13.71-1.08,16.2-1.58s4.52-0.92,3.65,4.24
c-0.86,5.15-3.32,14.79-3.49,22.26c-0.17,7.48-0.17,16.11,0.42,17.69S281.07,272.71,283.73,274.62z"/>
<path class="st5" d="M304.21,143.96c0,0-3.22,10.84-9.46,14.26c0.07-0.06-4.71,1.69-14.01-3.54c-2.67-1.5-4.61-6.68-4.55-8.27
c0.16-4.03,2.58-5.86,2.58-5.86s2.65-4.46,5.84-4.28c3.19,0.18,8.45,0.66,10.13-0.87C296.44,133.89,304.64,138.61,304.21,143.96z"
/>
<path class="st5" d="M236.32,39.3c0,0-0.64,8.46-1.82,13.9c-0.2,0.95-5.16,1.49-8.87,3.04c6.99,19.98,49.19,19.74,54.62,9.96
c-2.62-1.79-8-4.65-10.54-5.73c-2.55-1.07-2.4-0.78-2.55-5.49c-0.15-4.71-0.51-13.24-0.8-15.63
C266.07,36.97,240.39,36.97,236.32,39.3z"/>
<path class="st6" d="M237.92,39.3c0,0-0.07,4.83-0.45,9.57c-0.17,2.15-0.4,3.44-0.72,5.09c-0.19,0.98,5.68,4.94,7.29,13.85
c8.07,17.87,26.48,8.97,34.11,0.49c-2.68-1.89-6.97-4.29-11.95-6.39c-2.54-1.07-1.38-3.16-1.53-7.88
c-0.15-4.71-0.8-11.57-1.09-13.96C263.3,37.69,241.99,36.97,237.92,39.3z"/>
<path class="st5" d="M236.32,39.3c0,0-0.23,2.98-0.66,6.55c2.22,2.21,5.02,5.15,7.16,6.98c1.53,1.3,5.24,1.11,8.5,1.12
c3.06,0.01,5.69,0.3,6.89-0.3c2.74-1.37,6.53-4.74,8.6-7.21c-0.15-3.08-0.31-5.87-0.46-7.08C266.07,36.97,240.39,36.97,236.32,39.3
z"/>
<path class="st5" d="M251.51,51.95c-1.94,0-4.36-0.12-6.22-0.54c-0.86-0.2-1.6-0.62-2.29-1.07c-1.14-0.75-2.34-1.77-3.73-2.81
c-2.61-1.96-2.83-3.14-2.77-3.7c1.16-10.55-0.41-19.39-0.41-19.39s-1.11-4.53,5.19-5.73c6.29-1.19,10.16-1.25,10.16-1.25
s3.92,0.06,10.22,1.25c6.3,1.19,5.19,5.73,5.19,5.73s-1.57,8.84-0.41,19.39c0.06,0.56-0.15,1.74-2.77,3.7
c-2.33,1.75-4.15,3.46-6.02,3.88C255.78,51.83,253.45,51.95,251.51,51.95z"/>
<path class="st5" d="M251.51,13.35c-11.02,0.06-13.24,3.03-16.31,6.4c-0.72,0.79-0.11,5.84,0.96,16.51h1.54
c0,0-0.98-3.04-0.84-6.56c0.14-3.52,0.91-3.28,0.28-4.24c-0.63-0.95-1.95-2.63,0.98-4.3c2.93-1.67,7.67,1.31,13.26,1.49
c5.59-0.18,10.5-3.16,13.43-1.49c2.93,1.67,1.61,3.34,0.98,4.3c-0.63,0.95,0.14,0.72,0.28,4.24c0.14,3.52-0.84,6.56-0.84,6.56h1.54
c1.04-10.67,1.64-15.38,1.1-16.15C265.24,16.37,262.54,13.41,251.51,13.35z"/>
<path class="st5" d="M304.28,144.56c0,0-3.12,10.18-9.36,13.6c-1.38-0.62-1.12-1.72-2.32-3.19c-0.42-0.51-1.47-0.75-1.97-1.34
c-0.43-0.51-0.39-1.37-1.14-1.99c-0.75-0.62-1.24-0.2-1.83-0.74c-0.68-0.62-0.76-1.47-1.35-2c-0.35-0.32-1.61-0.46-1.98-0.82
c-0.8-0.78-8.18-2.39-7.8-3.95c0.64-2.56,2.04-4.36,2.04-4.36s3.14-4.66,6.33-4.48c3.19,0.18,6.12,0.82,7.8-0.7
C294.4,133.08,304.71,139.21,304.28,144.56z"/>
<path class="st5" d="M282.65,70.98c0,0,10.57-2.55,17.7,4.37c7.13,6.92,6.74,15.67,4.56,21.04c1.82,2.09,5.16,8.11,2.62,15.39
c11.04,9.33,6.13,23.68-3.61,33.1c0,0-2.32-8.67-11.61-9.18c0.26-3.33-8.59-6.06-4.52-14.7c-6.4-1.58-6.18-5.82-7.2-11.19
C279.55,104.45,282.65,70.98,282.65,70.98z"/>
<path class="st6" d="M278.86,75.56c0,0,12.19-6.11,19.31,0.81c7.13,6.92,5.12,14.65,2.94,20.02c1.82,2.09,6.14,8.37,3.53,15.64
c-0.58,1.61-4.11,1.64-6.77,6.05c6.72-3.82,10.85-2.91,12.39,2.08c2.33,7.55-2.84,16.56-7.32,21.52c-0.08-0.17-0.16-0.34-0.25-0.51
c-0.59,2.45-1.54,7.39-6.48,12.71c-2.46,2.65-4.52,2.39-7.3,1.69c-3.34-0.84-4.52-2.3-9.23-4.88c-2.68-1.47-1.24-3.25-1.17-4.84
c0.01-0.3,0.33-0.84,0.81-1.48c0.31-0.9,1.29-2.14,2.85-3.59c0,0,2.18-2.99,5.38-2.89c3.13,0.1,6.43-0.5,7.37-1.38v-0.06
c0.03-5.85-6.64-5.98-4.37-16c0.11-0.49,0.96-1.37,3.64-1.59c-4.02-0.76-5.84-1.07-8.71-3.75c-1.95-1.81-3.5-4.14-4.06-7.09
C280.39,102.66,278.86,75.56,278.86,75.56z"/>
<path class="st5" d="M243.66,65.07c-0.95-1.37-6.09-7.97-15.99-10.68c-2.85-0.78-4.58,1.49-7.42,3.1c-0.8-0.48-4.51-2.15-6.47-1.01
c-1.96,1.13-3.27,2.33-5.38,3.16c-1.05-0.43-2.52-1.1-4.72-0.32c-2.1,0.74-6.69,2.77-9.82,7.2c-2.04,7.22,35.27,1.83,35.27,1.83
L243.66,65.07z"/>
<path class="st2" d="M244.03,65.07c-5.4-1.83-4.43-8.02-16.4-9.07c-2.26-0.2-3.78,1.69-5.54,2.91c0.86,0.86,1.68,2.15,2.08,3.54
c-1.44-1.74-4.16-3.86-6.82-4.37c-2.42-0.47-4.15,1.35-6.88,2.74c0.52,0.56,1.07,1.29,1.65,2.27c-2.4-1.54-4.01-1.92-7.12-0.82
c-2.1,0.74-6.34,2.54-9.47,6.97c-2.04,7.22,33.58-0.89,33.58-0.89L244.03,65.07z"/>
<path class="st5" d="M275.33,67.76c0,0,0-1.9-0.1-3.47c-0.02-0.4-1.29-1.22-1.33-1.55l-0.27-0.36c0,0,2.61-1.42,4.72-0.71
c2.11,0.72,3.35,3.46,3.35,3.46c3.81-1.3,4.19,0.17,5.93,2.24c3.93-0.89,4.45,0.64,6.94,4.38c0,0-2.98-0.42-8.8,0.42
C279.96,73.01,275.23,67.58,275.33,67.76z"/>
<path class="st2" d="M274.63,66.86c0,0,1.02-0.88,0.68-1.07c1.83-0.94,4.27-2.1,5.51,0.95c3.81-1.3,4.4,0.5,6.14,2.56
c4.64-2.18,4.94,0.44,5.39,1.72c-1.47,0-3.67,0.1-6.58,0.52C279.96,72.38,274.53,66.68,274.63,66.86z"/>
<path class="st5" d="M217.92,62.75c0,0,9.49,3.4,17.49,2.8c8-0.6,21.64-1.25,29.06,3.04c0,0,7.56-2.62,14.54-0.84
c6.98,1.79,19.87,13.89,16,26.49c-0.28,0.91-2.55,2.09-4.95,2.98c0,0,1.31,5.73-1.02,10.26c-2.28,4.44-7.54,13.13-7.64,25.12l0,0
c-0.23,1.94-0.52,6.15-0.75,8.12c-12.94-0.48-33.04-5.25-52.62-4.95c0.17-2.19,0.27-3.48,0.58-5.67l0.48,0
c-1.02-5.43-1.38-8.33-2.35-12.41c-6.4-4.06-13.05-8.67-18.72-17.5C202.36,91.36,217.92,62.75,217.92,62.75z"/>
<path class="st5" d="M282.36,152.65c0,0,10.32,36.91-1.89,52.42c0,0,1.89,7.09-2.33,14.84c-0.65,3.32-1.54,6.3-2.07,9.67
c-2.18,13.88-5.83,19.63-6.8,41.74l-10.04-0.24c0,0-1.16-15.99-4.65-24.46c-1.96-4.76-9.87-11.35-9.47-17.85
c0.31-5.06,1.41-9.22,9.76-15.8c0.68-9.72-9.04-18.8-7.56-54.77L282.36,152.65z"/>
<path class="st6" d="M279.24,151.19c2.67,17,8.84,42.13-2.26,54.44c0.51,2.4,0.76,5.64,0.1,9.45c-0.34,2-0.94,4.15-1.87,6.43
c-1.6,3.92-2.25,9.87-2.78,13.24c-2.18,13.88-2.19,14.46-3.16,36.58l-10.04-0.24c0,0-1.16-15.99-4.65-24.46
c-1.96-4.76-6.09-9.03-6.48-15.53c-0.3-5.02,3.13-14.91,11.45-14.74c-0.54-20.23-9.84-16.09-12.24-58.15L279.24,151.19z"/>
<path class="st6" d="M217.92,62.75c0,0,3.59,1.16,7.71,1.58c3.93,0.4,8.31,0.05,12.22-0.24c8-0.6,19.32-1.52,26.74,2.78
c0,0,4.2-1.34,8.66-1.03c2.04,0.14,4.04,1.86,6.33,2.46c7.28,1.91,14.4,13.99,11.09,25.04c-0.27,0.91-2.66,0.08-5.28,0.79
c0.45,2.29,0.86,7.74-1.91,13.37c-2.77,5.63-6.44,12.93-5.85,26.99c-17.41-0.8-25.27-1.96-42.68-2.75
c-1.5-6.1-2.42-12.34-2.7-15.48c2.39-1.25,3.71-2.15,5.57-4.09c-5.03,0.8-6.97,0.49-10.06-1.21c-3.06-1.69-8.32-6.96-10.98-10.56
c-0.27-0.37-2.19,5.18-6.3,5.34c-1.44-2.16,4.75-8.34,3.68-10.61C210.17,86.65,217.92,62.75,217.92,62.75z"/>
<path class="st5" d="M280.68,137.38c0,0,0.36,5.97,0.36,7.58c0,1.61,1.33,6.6,1.55,9.04c-1.89,3.1-9.84,10.29-24.24,12.91
c-14.25,2.98-33.31-19.57-33.31-19.57c0.58-2.21,2.1-8.57,3.32-11.81c0.15-0.41,0.45-1.21,0.58-1.46
C230.11,131.81,280.68,137.38,280.68,137.38z"/>
<path class="st6" d="M277.01,137.86c0.08,4.13,0.74,7.2,1.19,9.89c0.82,4.89,2.13,8.05,2.13,11.1c0,9.69-12.72,8.02-23.31,8.34
c-14.25,2.98-26.4-19.57-26.4-19.57c1.01-3.83,1.65-8.11,3.25-11.87l-0.02,0c0.18-1.97,0.53-4.5,0.72-5.66
c20.28,0.06,34.64,1.11,43,2.04C277.55,134.03,277.27,137.24,277.01,137.86L277.01,137.86z"/>
<path class="st5" d="M261.05,159.3c0,0-8.88-19.6-35.35-13.75c-6.4,17.78-14.75,38.3-9.37,60.38
c-5.53,7.52-11.78,11.69-11.78,25.54c0,13.84,0.73,16.23,0.73,16.23l19.49,1.07c0,0,6.38-8.1,8.91-16.99
c0.73-2.58,1.25-7.07,0.91-12.19c0.61-0.92,3.42-3.4,3.78-7.88c0,0,9.45-5.02,15.01-17.23
C258.38,183.49,257.05,174.02,261.05,159.3z"/>
<path class="st6" d="M261.05,159.3c-0.45-1.77-7.24-19.89-31.75-14.41c-14.53,38.61-9.15,54.56-6.99,61.62
c-9.83,12.48-14.29,15.12-12.37,40.45l13.03-0.02c5.92-9.46,7.31-12.94,7.65-25.42c0.01-0.47-1.91,0.96-3.14,2.69
c1.02-5.21,3.8-6.17,5.99-9.33c0.97-1.4,1.81-3.34,1.88-5.95c11.58-7.9,15.91-17.69,18.46-27.84
C255.61,173.95,258.02,162.49,261.05,159.3z"/>
<path class="st5" d="M219.79,132.48c0,0,4.56,0.1,8.41,1.5c3.86,1.41,3.87,2.17,5.35,3.86c1.53,1.75,5.15,4.21,4.49,6.65
c-0.36,1.33-1.21,1.61-2.4,2.89c-0.53,0.57-4.17,4.47-4.98,4.98c-0.56,0.35-1.11,0.82-1.72,1.16c-0.48,0.26-1.96,1.41-2.48,1.66
c-1.73,0.84-2.82,1.27-4.65,1.16c0,0-4.14-0.14-6.76-2.94c0,0-0.28-1.38,0.39-2.04c0,0-3.56-3-4.51-5.03
c-0.95-2.03-0.96-4.77-0.42-6.31C211.07,138.49,217.51,134.3,219.79,132.48z"/>
<path class="st5" d="M224.01,294.56l-0.5,4.15c0,0-1.44,1.9-12.71,1.66c-11.27-0.24-14.34-3.66-15.28-5.57l-0.66-4.32
c0,0,2.15-3.14,2.71-3.09c3.66,0.33,16.21,5.27,24.86,6.6C223.17,294.12,223.35,294.45,224.01,294.56z"/>
<path class="st5" d="M248.17,286.06c-0.01,1.91-0.17,1.79-0.18,3.7c2,1.57,6.94,2.36,16.54,2.09c13.88-0.39,26.64,4.22,42.25,1.49
l0.14-2.98l-1.45-0.24l-55.41-4.48L248.17,286.06z"/>
<path class="st5" d="M260.3,291.9c1.3,0.01,2.71-0.01,4.23-0.05c9-0.25,17.53,1.6,26.67,2.18c4.85-0.23,10.91-1.25,10.26-4.79
l-47.24-3.94C251.26,288.41,253.45,291.02,260.3,291.9z"/>
<path class="st5" d="M206.06,221.8c1.53,0.94,11.64,6.98,28.08,6.15c-0.33,3.14-0.12,9.4-7.49,20.17
c-3.63,5.31-6.84,14.62-7.42,26.43c0.12,2.71,1.73,4.96-0.36,8.41c0.62,2.1,3.27,6.5,4.58,9.13s2.04,5.61-6.91,5.79
c-8.94,0.18-23.43-0.87-21.53-7.76c1.03-3.73,3.77-7.46,4.14-9.01c0.36-1.55,0.29-5.97,3.2-9.07c2.47-8.29,1.71-16.36,1.09-23.86
C202.82,240.71,202.69,228.09,206.06,221.8z"/>
<path class="st5" d="M221.49,86.01c11.84-15.78,1.9-28.46-17.12-24.64c-7.66,1.54-15.36,6.76-15.86,16.42
c-2.47,0.41-8.18,0.7-11.02,10.97c-2.21,7.98-3.29,9.49-7.11,13.54c-2.44,2.88,0.21,8.66,1.95,12.78
c6.08,14.33,25.19,15.67,37.95,26.56c4.35-1.19,8.79-5.92,10.18-9.12c-10.75-12.89-8.49-17.87-12.76-24.41
C212.35,106.37,223.01,99.91,221.49,86.01z"/>
<path class="st6" d="M219.19,85.07c0.71-0.94,1.83-3.08,2.41-3.98c0.14-0.22,2.05,3.03,2.19,2.81c4.58-7.33,5.64-18,0.54-19
c-1.12-0.22-3.3-0.69-5.14-1.34c-3.28-1.15-6.41-1.17-11.71-0.19c-7.4,1.37-14.61,6.7-14.7,14.34c-0.01,0.49,5.1,2.04,6.67,8.14
c-2.47-3.44-6.78-7.4-12.04-4.02c-5.41,3.48-2.63,11.52-10.06,19.85c-2.48,2.78-2.11,6.19,0.56,12.79
c4.28,10.55,24.86,16.22,36.04,26.19c2.64-1.09,4.55-3.79,5.75-5.82c-7.48-7.86-10.46-15.16-12.72-20.49
c-2.61-6.17-5.58-9.62-11.48-14.38c3.05,1.2,5.28,2.25,6.71,3.26c1.54,1.08,3.67,1.08,5.61,0.54
C214.94,101.39,218.77,91.36,219.19,85.07z"/>
<path class="st5" d="M291.62,87.75c-0.44,6.31-5.14,3.09-7.72,1.98c-4.92-2.12-10.02-3.61-15.9-3.67
c-5.76-0.06-13.38,0.44-19.79,2.21c-8.91,2.47-11.59,2.38-15.6,0.27c-4.01-2.1-11.02-7.46-11.02-7.46s-0.22,1.73,1.5,3.82
c2.17,2.65,6.93,5.98,13.54,8.21c3.09,1.05,5.71,0.38,8.52-0.32c14.74-3.69,30.48-4.39,43.63,3.7c0.58,0.36,3-0.59,4.02-2.24
C294.12,92.13,291.62,87.75,291.62,87.75z"/>
<path class="st7" d="M215.86,151.19c1.35,0.76,2.92,1.34,4.8,2.81c0,0-1.46-0.04-2.19-0.61c-0.72-0.57-2.44-1.96-2.76-2.09
C215.77,151.25,215.82,151.22,215.86,151.19z"/>
<path class="st6" d="M263.95,19.04c-0.44-1.55-4.11-4.24-12.72-4.23c-9.14,0.02-11.8,2.79-12,4.27c-0.07,0.5-0.68,5.85-0.76,7.98
c-0.01,0.06-0.01,2.71,0.17,6.73c0.12,2.66,0.8,4.19,1.13,7.64c0.35,3.61,1.37,6.06,3.23,8.91c0.78,0.51,1.53,0.96,2.29,1.13
c3.25,0.73,9.19,0.77,12.36-0.06c1.87-0.42,4.18-3.73,4.71-6.46c0.66-3.52,1.35-6.08,1.46-8.24c0.29-2.16,0.55-7.02,0.7-8.34
C264.95,25.15,264.1,19.53,263.95,19.04z"/>
<path d="M246.43,225.02c0,0,8.82,3.91,30.65,0.51c0,0-6.22,30.99-3.31,46.38c0,0,2.76,3.94,23.85,11.69c0,0,9.38,2.39,8.95,6.92
c0,0,0.29,1.01-10.98,0.72c-11.27-0.3-22.04-2.27-29.53-2.27c-7.49,0-15.42,0.3-16.87-1.79c-1.44-2.07,0.29-7.23,2.47-10.14
c2.33-3.1,1.67-5.43,1.53-11.22C252.83,250.98,241.48,235.64,246.43,225.02z"/>
<path class="st2" d="M244.68,227.84c-1.17,1.6,0.14,7.92,1.85,14.09s5.39,9.9,6.25,19.91c0.85,10.01,0.99,11.3-1.85,17.23
c-2.84,5.94-3.69,11.18,6.25,11.3c9.94,0.12,15.19-0.12,25.12,1.28c9.94,1.4,13.48,1.98,19.02,1.16c5.54-0.82,6.67-2.68,4.26-4.31
c-2.41-1.63-11.92-3.49-16.18-6.75c-4.01-3.07-15.33-8.03-15.47-9.32c-0.5-4.53-0.71-20.84,0.14-26.2s1.99-12.93,2.41-15.02
c0.43-2.1,1.99-4.08-0.85-3.38c-2.84,0.7-13.48,2.21-21.43,1.63C246.24,228.89,245.11,227.26,244.68,227.84z"/>
<path class="st8" d="M250.36,279.31c2.84,1.28,6.95,2.33,10.22,2.33c0,0-1.14,5.47,0.71,8.85c1.85,3.38-13.34,1.28-13.34,1.28
l-0.71-11.76L250.36,279.31z"/>
<path class="st8" d="M294.5,293.52c2.7-0.82,4.54-3.84,2.27-6.64c-2.27-2.79-4.26-3.38-1.28-3.49s14.07,6.53,14.07,6.53l-5.7,5.11
L294.5,293.52z"/>
<path class="st8" d="M244.13,234.3c3.83,1.31,9.69,1.75,14.69,1.57c5-0.17,12.56-0.87,17.35-2.45c4.79-1.57,2.87,1.83,2.87,1.83
l-2.69,2.47c0,0-6.39,2.45-16.61,2.27c-12.14-0.21-15.76-1.57-15.76-1.57L244.13,234.3z"/>
<path class="st8" d="M244.5,242.68c3.83,1.31,9.69,1.75,14.69,1.57s11.71-0.24,16.46-1.92c1.93-0.68,0.85,2.1,0.85,2.1l-0.81,1.46
c0,0-6.48,2.31-16.7,2.13c-12.14-0.21-14.27-1.1-14.27-1.1L244.5,242.68z"/>
<path class="st9" d="M246.43,225.02c0,0,14.51,5.16,30.8,1.7c0,0-6.36,29.8-3.45,45.2c0,0,2.76,3.94,23.85,11.69
c0,0,9.38,2.39,8.95,6.92c0,0,0.29,1.01-10.98,0.72c-11.27-0.3-22.04-2.27-29.53-2.27c-7.49,0-15.42,0.3-16.87-1.79
c-1.44-2.07,0.29-7.23,2.47-10.14c2.33-3.1,1.67-5.43,1.53-11.22C252.83,250.98,241.48,235.64,246.43,225.02z"/>
<path class="st9" d="M246.43,225.02c0,0,14.51,5.02,30.8,1.56c0,0-6.36,29.95-3.45,45.34c0,0,2.76,3.94,23.85,11.69
c0,0,9.38,2.39,8.95,6.92c0,0,0.29,1.01-10.98,0.72c-11.27-0.3-22.14-3.51-29.53-2.27c-7.78,1.31-15.54,0.84-16.87-1.79
c-1.14-2.25,0.29-7.23,2.47-10.14c2.33-3.1,1.67-5.43,1.53-11.22C252.83,250.98,241.48,235.64,246.43,225.02z"/>
<path d="M233.47,125.8c0,1.25,13.06,7.69,20.16,9.07s22.14-0.06,24.56-0.47l-0.34,2.33c0,0-17.81,2.58-31.44-1.02
c-13.63-3.61-12.22-4.58-12.22-4.58L233.47,125.8z"/>
<g>
<path class="st6" d="M205.65,267.88c1.95,1,9.13,2.76,13.82,1.81c0.64-0.15,0.02-11.53,1.89-16.58c2.62-7.1,6.96-12.91,8.99-25.7
c-7-0.71-15.05-2.43-19.21-3.9C205.8,239.98,207.73,254.03,205.65,267.88z"/>
<path class="st6" d="M216.89,278.42c1.11,0.31,1.92,1.68,2.25,0.87c0.62-1.51-1.24-4.27-1.36-6.38c-0.01-0.23-0.01,0.01-0.01-0.23
c-1.48-1.35-11.65-1.53-10.97-0.75c-1.16,2.25-3.03,1.76-3.74,6.09c-0.35,2.16,2.38,0.32,4.83,0.22
c-4.47,2.99-9.65,6.85-10.43,10.2c-1.07,4.6,0.68,5.94,5.6,8.52c4.28,0.96,9.44,1.13,13.47,0.93c4.43-0.77,5.38-2.93,4.01-6.02
C218.59,287.41,217.33,281.57,216.89,278.42z"/>
</g>
<path class="st5" d="M218.7,62.03c5.42,3.15,13.09,2.3,15.96,2.1c0.62-0.04,7.3-1.15,7.66-1.06c0.6,0.14,0.61,0.67,0.61,0.67
s-2.49,1.35-8.18,1.74c-5.34,0.36-11.6-0.08-15.21-1.63C215.5,62.11,218.7,62.03,218.7,62.03z"/>
<path class="st5" d="M275.28,65.29c1.01,0.75,7.56,3.1,10.39,6.1c2.54,2.69,1.25,2.57,0.61,1.77c-0.64-0.8-5.88-4.34-7.82-5.15
s-4.42-2.28-4.47-2.63C273.94,65.04,275.28,65.29,275.28,65.29z"/>
<path class="st6" d="M217.84,134.45c4.84-0.27,9.8,0.8,13.04,4.1c1.68,1.71,4.35,3.44,3.97,5.16c-0.08,0.52-1.06,1.9-1.91,2.82
c-0.51,0.59-1.92,2.17-2.57,2.7c-0.66,0.53-2.93,2.38-3.53,2.74c-0.47,0.28-1.22,1.11-1.73,1.38c-1.7,0.91-3.54,0.21-5.23-0.63
c-1.6-0.79,0.41-0.94-1.48-2.26c-4.45-3.11-6.93-5.36-5.19-11.46C213.64,137.46,215.56,136.28,217.84,134.45z"/>
<path class="st3" d="M236.63,93.11c-3.86-1.55-6.76,2.97-5.82,7.28c0.95,4.31,10.05,9.1,9.57,25.04
c-0.39,13.01-3.18,18.35-3.18,18.35l-6.38-8.04c0,0-0.92-18.02-3.1-20.68s-8.93-7.43-11.61-10c-2.68-2.57,2.99-5.91,2.6-10.47
c-0.39-4.55,2.9-13.52,2.9-13.52L236.63,93.11z"/>
<path class="st3" d="M259.89,164.09c-0.41,12.52,2.5,31.03,3.6,39.83s2.68,9.49,0,13.48c-2.59,3.85-6.16,10.17-6.16,10.17
l-11.48-1.01c0,0,9.19-11.59,9.72-13.82s-4.7-18.72-4.7-18.72L259.89,164.09z"/>
<path class="st3" d="M237.72,47.37c2.26,5.14,5.19,7.42,9.58,9.05c2.7,1,13.23,2.36,17.38-2.38c1.87-2.13,0.65-7.96,0.65-7.96
l-9.51,7.65l-12.89-2.34l-1.47-3.85L237.72,47.37z"/>
<path class="st10" d="M238.7,58.98c4.32,2.86,15.11,5.43,18.14,6.05c3.03,0.62,7.76-3.18,10.19-4.21c2.57-1.09,6.81-1.83,11.8,2.74
c0.57,0.53-1.21,2.65-1.21,2.65c-0.24-0.15-1.13-0.21-2.51-0.83c-1.35-0.6-2.54-1.23-4.42-1.01c-8.31,0.98-9.72,3.83-16.97,2.17
c-7.24-1.65-9.17-2.97-16.28-2.72"/>
<path class="st2" d="M237.22,59.47c5.55,2.39,16.15,4.88,19.17,5.5s7.79-2.27,10.15-3.75c4.15-2.6,9.56-0.42,11.99,2.35
c1.62,1.85,2.27,3.05,2.27,3.49c0,0.6-1.95-0.02-1.95-0.02c-1.1-0.56-2.5-0.72-3.55-1.25c-1.32-0.67-2.74-1.64-4.62-1.42
c-8.31,0.98-9.99,3.8-17.23,2.15c-7.24-1.65-9.06-3.24-16.71-2.69"/>
<path class="st3" d="M288.55,107.83c0.44,2.55,1.88,7.31,4.43,9.64c1.22,1.11,1.38,1.5,0.39,1.5c-1.05,0-8.25-0.39-8.25-0.39
l-1.99-3.43L288.55,107.83z"/>
</g>
<path id="cape" class="st8 hide" d="M218.88,82.15c-3.04-4.3-15.18-12.04-17.02-16c1.83-2.53-0.31-3.91-2.3-3.45
c-28.91,6.76-61.18,20.55-63.68,21.82c-12.29,6.24-32.54,17.04-41.64,24.59c-15.59,12.94-24.86,28.14-28.58,39.3
c-4.62,13.86-3.18,22.15,1.25,16.83c4.43-5.32,26.94-23.34,35.37-27.37l2.56-1.42c0,0,2.27-1.42,6.07-3.86
c0.04-0.02,0.07-0.04,0.11-0.06c7.19,6.69,9.62,17.37,11.32,31.7c2.64,22.26,20.6,32.64,41.62,32.98
c21.82,0.34,29.62,4.79,37.87,15.81c2.49,3.32,5.33,4.48,7.47,4.99c1.92,3.77,3.64,7.79,5.33,11.94
c15.76-77.17,15.06-68.16,18.34-88.91C240.47,93.55,228.05,95.15,218.88,82.15z"/>
<path id="legs" class="st9 hide" d="M306.99,285.84c-5.14-2.66-13-4.13-23.09-11.38c-2.66-1.91-6.06-3.32-6.65-4.9
c-0.58-1.58-0.58-10.22-0.42-17.69c0.17-7.48,2.63-17.11,3.49-22.26c0.82-4.88-0.96-4.76-3.26-4.31c0.42-1.82,0.87-3.63,1.24-5.54
c4.22-7.76,2.33-14.84,2.33-14.84c11.41-14.48,3.17-47.61,2.02-51.94c-0.38-2.61-1.44-6.74-1.44-8.18c0-1.61,0.07-9.31,0.07-9.31
s-2.34,0.23-5.32,0.67c-3.57,0.51-20.4,3.25-41.5-4.75c-1.5-0.66-5.04-2.84-5.21-1.46c-0.13,1.62,0.07,3.55-0.15,3.97
c-0.13,0.25-0.43,1.05-0.58,1.46c-1.22,3.24-2.73,9.56-3.31,11.79c-6.3,17.37-13.94,37.26-8.73,58.61
c-4.17,5.67-8.75,9.45-10.75,16.9c-0.95,2.19-1.57,4.94-1.95,7.9c-0.01,0.05-0.03,0.09-0.04,0.14c-0.1,0.83-0.19,1.82-0.26,2.92
c-0.08,1.11-0.14,2.22-0.17,3.34c-0.3,7.39-0.24,17.56-0.43,23.65c-0.25,8.14-0.39,9.28-1.05,10.52c-0.66,1.25-1.41,2.08-2.24,5.65
c-0.83,3.57-2.33,4.65-3.9,7.64c-2.44,4.63-1.96,9.82,0.55,12.18c2.52,2.37,9.41,5.75,18.72,4.65c9.31-1.1,10.62-1.68,9.08-10.74
c-0.22-1.3-2.44-7.17-1.44-9.66c1-2.49-1.25-6.73-0.75-6.98c0.5-0.25,1.16-3.57,1.16-5.23c0-1.66-0.17-9.72,1.66-13.87
c0.77-1.76,2.44-5.8,4.1-9.88c3.81-6.33,4.86-10.87,5.24-13.99c0.63-2.65,1.05-6.79,0.73-11.48c0.61-0.92,3.42-3.4,3.78-7.88
c0,0,7.59-4.05,13.17-13.69c1.9,6.45,3.64,10.63,3.34,14.94c-6.09,4.8-8.32,8.31-9.2,11.82c-1-0.47-1.17-0.68-2.89-0.09
c-2.41,0.83-0.58,16.2,1.94,22.22c2.52,6.02,3.79,9.68,4.87,16.41s-2.33,14.79-3.65,18.52c0,0-2.16,6.48,2.82,9.97
c4.32,3.03,20.76,2.19,27.99,2.16c7.23-0.04,18.23,2.59,25.25,1.33C310.75,293.6,312.12,288.5,306.99,285.84z"/>
<path id="sock" class="st0 hide" d="M244.85,227.68c-1.17,1.6,0.14,7.92,1.85,14.09c1.7,6.17,5.39,9.9,6.25,19.91c0.85,10.01,0.99,11.3-1.85,17.23
c-2.84,5.94-3.69,11.18,6.25,11.3c9.94,0.12,15.19-0.12,25.12,1.28c9.94,1.4,13.48,1.98,19.02,1.16c5.54-0.82,6.67-2.68,4.26-4.31
s-11.92-3.49-16.18-6.75c-4.01-3.07-15.33-8.03-15.47-9.32c-0.5-4.53-0.71-20.84,0.14-26.2s1.99-12.93,2.41-15.02
s1.99-4.08-0.85-3.38c-2.84,0.7-13.48,2.21-21.43,1.63C246.41,228.73,245.27,227.1,244.85,227.68z"/>
<path id="head" class="st9 hide" d="M259.64,65.04c4.61-1.1,12.78-3.65,10.23-4.72c-2.55-1.07-2.4-0.78-2.55-5.49c-0.07-2.28-0.19-5.45-0.33-8.39
c0.36-3.79,1.3-12.31,1.65-16.39c0.38-4.43,0.53-11.5-1.46-14.42c-4.63-6.79-26.61-6.09-30.83-0.4c-1.45,1.95-2.4,14.41-1.4,20.8
c0,0,0.4,4.28,1.12,7.56c-0.31,2.87-0.78,6.58-1.4,9.46c-0.2,0.95-0.58,0.73-4.29,2.28c4.5,3.85,7.43,4.78,11.72,5.99
C245.39,62.65,255.72,65.04,259.64,65.04z"/>
<path id="torso" class="st10 hide" d="M307.68,111.62c2.55-7.28-0.8-13.3-2.62-15.39c2.18-5.37,2.57-14.12-4.56-21.04
c-1.78-1.73-3.78-2.87-5.77-3.6c-2.49-3.74-3.01-5.27-6.94-4.38c-1.74-2.07-2.12-3.54-5.93-2.24c0,0-1.24-2.74-3.35-3.46
c-0.05-0.02-0.09-0.02-0.14-0.03c-3.81-2.9-7.89-3.56-11.87-1.87c-0.79,0.33-1.71,0.88-2.77,1.51c-2.11,1.25-4.99,2.96-6.64,2.62
l-0.07,0.35c-2.05-0.37-4.19-0.56-6.34-0.63c-3.7-0.93-8.21-2.19-11.63-3.47c-2.64-2.13-6.36-4.42-11.24-5.75
c-2.85-0.78-4.58,1.49-7.42,3.1c-0.8-0.48-4.51-2.15-6.47-1.01c-1.96,1.13-3.27,2.33-5.38,3.16c-1.05-0.43-2.52-1.1-4.72-0.32
c-2.06,0.73-6.53,2.71-9.66,6.99c-3.08,2.72-5.25,6.51-5.51,11.48c-2.47,0.41-8.18,0.7-11.02,10.97
c-2.21,7.98-3.29,9.49-7.11,13.54c-2.44,2.88,0.21,8.66,1.95,12.78c6.07,14.31,25.13,15.67,37.89,26.52
c-0.14,1.48,0.04,3.29,0.72,4.74c0.95,2.03,4.51,5.03,4.51,5.03c-0.66,0.66-0.39,2.04-0.39,2.04c2.62,2.8,6.76,2.94,6.76,2.94
c1.83,0.11,2.92-0.32,4.65-1.16c0.52-0.25,2-1.4,2.48-1.66c0.62-0.34,1.17-0.81,1.72-1.16c0.81-0.51,4.44-4.4,4.98-4.98
c1.19-1.28,2.03-1.56,2.4-2.89c0.66-2.44-2.95-4.9-4.49-6.65c-0.76-0.86-1.14-1.48-1.83-2.07c17.11,0.26,34.25,3.94,46.32,4.81
c-0.47,0.76-1.12,2.02-1.51,3.56c-0.01,0.04,0.01,0.07,0.01,0.11c-0.18,0.64-0.32,1.34-0.35,2.16c-0.06,1.59,1.88,6.77,4.55,8.27
c9.3,5.23,14.09,3.48,14.01,3.54c0.04-0.02,0.08-0.06,0.12-0.08c0.02,0.01,0.03,0.02,0.04,0.02c6.24-3.43,9.36-13.6,9.36-13.6
c0-0.02,0-0.04,0-0.06C313.93,134.92,318.58,120.83,307.68,111.62z M228.79,129.94c-0.22,1.52-0.15,2.62-0.25,3.87
c-2.98-1.08-5.54-1.38-7.54-1.46c0,0,0,0,0,0c-12-12.89-8.68-17.87-12.95-24.41c1.2-0.45,2.71-1.22,4.4-2.34
c4.63,5.39,9.62,8.83,14.51,11.93c0.97,4.08,1.3,6.98,2.33,12.41L228.79,129.94z M285.08,135.13c-1.41-0.08-2.79,0.79-3.91,1.78
c0.14-1.68,0.29-3.41,0.41-4.47c0.04-5.16,1.04-9.7,2.35-13.56c0.93,0.84,2.2,1.51,4.02,1.96c-3.76,7.98,3.49,10.92,4.42,13.95
C290.62,135.82,287.97,135.29,285.08,135.13z"/>
<g id="Morph">
<path id="M" class="morph" d="M219,107.44c0-2.69,2.01-4.44,7.38-4.44h6.79c3.71,0,6.66,1.07,8.07,3.63l22.54,40.16l22.79-40.21
c1.41-2.56,4.35-3.58,8.07-3.58h6.66c5.38,0,7.71,1.75,7.71,4.44v81.95c0,2.69-2.33,3.61-7.71,3.61h-3.71
c-5.38,0-7.58-0.92-7.58-3.61v-53.01l-0.56-0.13l-18.59,33.24c-1.15,1.54-2.72,2.51-5.15,2.51h-3.71c-2.43,0-3.97-0.97-5.12-2.51
l-18.46-33.2l-0.4,0.09v53.01c0,2.69-2.52,3.61-7.9,3.61h-3.71c-5.38,0-7.38-0.92-7.38-3.61V107.44z"/>
<path id="H" class="morph" d="M516,100.78c0-2.69,2.69-3.78,8.07-3.78h3.58c5.38,0,7.35,1.09,7.35,3.78v33.16
c4-4.74,10.68-8.71,18.36-8.71c12.81,0,19.64,6.53,19.64,20.74v43.41c0,2.69-2.58,3.61-7.95,3.61h-3.59
c-5.38,0-7.46-0.92-7.46-3.61V148.8c0-4.99-2.84-7.94-8.48-7.94c-5.25,0-8.52,4.48-10.52,7.43v41.1c0,2.69-1.97,3.61-7.35,3.61
h-3.58c-5.38,0-8.07-0.92-8.07-3.61V100.78z"/>
<path id="P" class="morph" d="M445,148.8c0-12.8-1.28-15.49-1.28-18.06c0-3.07,11.27-4.1,14.47-4.1c4.1,0,4.42,5.12,5.19,8.2
c2.95-5.51,9.25-9.6,17.19-9.6c13.83,0,23.96,12.29,23.96,34.57c0,20.87-9.96,34.45-27.25,34.45c-6.02,0-10.29-2.05-13.29-3.97
v25.23c0,2.69-1.83,4.49-7.21,4.49h-3.59c-5.38,0-8.2-1.8-8.2-4.49V148.8z M473.2,179.27c8.07,0,12.03-6.66,12.03-19.46
c0-12.42-3.51-19.08-10.55-19.08c-4.87,0-7.68,3.59-10.68,7.56v28.55C466,177.99,469.23,179.27,473.2,179.27z"/>
<path id="R" class="morph" d="M396,148.8c0-12.8-1.22-15.49-1.22-18.06c0-3.07,11.3-4.1,14.5-4.1c4.1,0,4.43,5.12,5.2,8.32
c2.69-4.87,6.57-9.73,14-9.73c6.27,0,7.32,4.35,7.32,6.91c0,2.43-1.4,10.76-3.96,10.76c-1.79,0-3.74-1.03-6.3-1.03
c-5.25,0-8.53,3.84-10.53,6.4v41.1c0,2.69-1.73,3.61-7.11,3.61h-3.59c-5.38,0-8.31-0.92-8.31-3.61V148.8z"/>
<path id="O" class="morph" d="M353.31,125.23c20.36,0,30.99,12.17,30.99,34.45c0,22.28-10.63,34.57-30.99,34.57
s-31.12-12.29-31.12-34.57C322.2,137.4,332.95,125.23,353.31,125.23z M365.1,159.68c0-12.81-3.58-19.46-11.78-19.46
s-11.91,6.66-11.91,19.46c0,12.8,3.71,19.59,11.91,19.59S365.1,172.49,365.1,159.68z"/>
</g>
<g id="svg">
<path id="S" class="st16" d="M359.56,181.24c2.49,0,9.27,6.36,20.34,6.36c5.95,0,13-1.8,13-10.1c0-16.33-39.98-9.96-39.98-42.47
c0-20.34,16.6-28.36,32.79-28.36c14.67,0,24.9,5.12,24.9,9.68c0,3.74-4.29,12.04-7.61,12.04c-1.8,0-6.09-3.46-15.36-3.46
c-10.79,0-12.87,4.98-12.87,8.16c0,15.77,39.98,9.41,39.98,41.92c0,22.97-16.19,30.71-31.27,30.71c-21.03,0-32.51-7.47-32.51-12.18
C350.98,189.26,356.65,181.24,359.56,181.24z"/>
<path id="V" class="st16" d="M418.36,113.03c-0.28-0.97-0.55-1.8-0.55-2.49c0-1.94,2.63-3.04,8.44-3.04h4.57
c4.01,0,7.19,0.97,8.16,4.01l20.2,64.75h0.55l20.75-64.75c0.97-2.91,4.15-4.01,8.16-4.01h4.29c5.81,0,8.3,1.11,8.3,3.04
c0,0.69-0.14,1.52-0.41,2.49l-29.88,88.96c-0.69,2.21-3.74,2.91-7.75,2.91h-7.19c-4.01,0-7.06-0.69-7.75-2.91L418.36,113.03z"/>
<path id="G" class="st16" d="M549.37,106.67c12.17,0,29.61,3.87,29.61,9.68c0,3.87-5.53,13.01-8.99,13.01
c-1.66,0-7.89-4.43-21.03-4.43c-16.33,0-23.93,10.38-23.93,31.13c0,20.75,7.75,31.54,23.66,31.54c3.87,0,7.06-0.28,10.79-0.97
v-17.57H547.3c-2.9,0-4.15-2.08-4.15-6.92v-4.43c0-4.84,1.25-6.92,4.15-6.92h28.09c3.87,0,5.53,1.66,5.53,5.53v38.46
c0,9.55-22.41,10.93-32.24,10.93c-30.99,0-45.52-15.63-45.52-49.81C503.16,122.99,518.66,106.67,549.37,106.67z"/>
<path id="circleInner" class="st17" d="M596.17,160.09c0,63.79-51.71,115.5-115.5,115.5s-115.5-51.71-115.5-115.5
s51.71-115.5,115.5-115.5S596.17,96.3,596.17,160.09z"/>
<path id="circleOuter" class="st18" d="M603,160c-0.06,68-54.91,122.33-122.33,122.33c-67.45,0-122.33-54.83-122.33-122.28
S413.21,37.69,480.67,37.69S603,93,603,160h10c0-73-59.36-132.29-132.33-132.29c-72.97,0-132.33,59.39-132.33,132.36
s59.36,132.25,132.33,132.25C553.6,292.31,612.94,233,613,160H603z"/>
<path id="circleMid" class="st19" d="M595.47,160c0,0,0,0.06,0,0.09c0,63.31-51.5,114.81-114.81,114.81s-114.81-51.5-114.81-114.81
c0-63.31,51.5-114.81,114.81-114.81C543.94,45.28,595.42,97,595.47,160h8.03c-0.05-68-55.14-122.75-122.84-122.75
c-67.73,0-122.84,55.11-122.84,122.84c0,67.73,55.11,122.84,122.84,122.84s122.84-55.11,122.84-122.84c0-0.03,0-0.09,0-0.09H595.47
z"/>
</g>
<g id="Shapes">
<path id="heart" class="shape" d="M506.25,117.03c-21.29,0-24.85,14.05-24.85,14.05c-0.41,1.57-1.06,1.57-1.46,0
c0,0-3.56-14.05-24.85-14.05c-21.29,0-28.73,22.67-28.73,32.22c0,30.67,51.8,62.05,51.8,62.05c1.39,0.85,3.68,0.85,5.06,0
c0,0,51.8-31.38,51.8-62.05C534.99,139.7,527.54,117.03,506.25,117.03z"/>
<path id="star" class="shape" d="M542.62,142.44c-0.91-2.77-3.34-4.79-6.27-5.21l-33.06-4.73l-14.79-29.51
c-1.31-2.61-4.01-4.27-6.96-4.27c-2.95,0-5.65,1.65-6.96,4.27l-14.79,29.51l-33.06,4.73c-2.92,0.42-5.35,2.44-6.27,5.21
c-0.91,2.77-0.15,5.8,1.96,7.84l23.93,22.97l-5.65,32.44c-0.5,2.87,0.7,5.77,3.09,7.48c1.35,0.97,2.95,1.46,4.56,1.46
c1.23,0,2.48-0.29,3.61-0.88l29.58-15.32l29.57,15.32c1.14,0.59,2.38,0.88,3.61,0.88c1.61,0,3.21-0.49,4.56-1.46
c2.39-1.71,3.59-4.61,3.09-7.48l-5.65-32.44l23.93-22.97C542.77,148.25,543.53,145.21,542.62,142.44z"/>
<path id="light" class="shape" d="M481.74,110.58c8.23,0,15.86,2.54,22.15,6.88c10.22,7.05,16.92,18.86,16.92,32.25
c0,11.69-6.59,20.57-12.64,28.09c-5.07,6.29-9.77,11.63-9.9,16.86c0,2.68-2.22,4.9-4.96,4.9h-22.35c-2.73,0-4.95-2.22-4.95-4.9
c-0.47-6.28-7.31-12.27-13.47-20.07c-5.21-6.59-9.94-14.46-9.94-24.88c0-11.53,4.98-21.89,12.9-29.04
C462.46,114.4,471.66,110.58,481.74,110.58L481.74,110.58z M537.96,177.67c1.87,1.06,2.53,3.44,1.47,5.31
c-1.11,1.87-3.49,2.53-5.36,1.47l-13.14-7.63c1.47-2.12,2.78-4.4,3.89-6.72L537.96,177.67z M442.56,176.81l-13.19,7.63
c-1.87,1.06-4.25,0.4-5.31-1.47c-1.11-1.87-0.45-4.25,1.42-5.31l13.14-7.58C439.73,172.41,441.05,174.69,442.56,176.81
L442.56,176.81z M434.22,153.61H419c-2.13,0-3.89-1.77-3.89-3.89c0-2.17,1.77-3.94,3.89-3.94h15.22c-0.1,1.31-0.15,2.58-0.15,3.94
C434.07,151.03,434.12,152.34,434.22,153.61L434.22,153.61z M438.62,129.34l-13.14-7.58c-1.87-1.11-2.53-3.49-1.42-5.36
c1.06-1.87,3.44-2.53,5.31-1.42l13.19,7.58C441.05,124.69,439.73,126.96,438.62,129.34L438.62,129.34z M454.6,110.53l-7.58-13.19
c-1.11-1.87-0.46-4.25,1.41-5.31c1.87-1.11,4.25-0.45,5.36,1.42l7.58,13.15C458.99,107.7,456.72,109.02,454.6,110.53L454.6,110.53z
M477.8,102.19V86.97c0-2.12,1.77-3.89,3.95-3.89c2.12,0,3.89,1.77,3.89,3.89v15.22c-1.26-0.1-2.58-0.15-3.89-0.15
C480.38,102.04,479.11,102.09,477.8,102.19L477.8,102.19z M502.12,106.59l2.02-3.51l2.27-3.94l3.29-5.7
c1.06-1.87,3.44-2.53,5.31-1.42c1.87,1.06,2.53,3.44,1.47,5.31l-3.45,5.97l-2.09,3.61l-2.09,3.61c-1.19-0.85-2.43-1.64-3.7-2.36
C504.15,107.6,503.14,107.08,502.12,106.59L502.12,106.59z M520.93,122.57l3.06-1.76l3.49-2.01l6.6-3.81
c1.87-1.11,4.25-0.46,5.36,1.42c1.06,1.87,0.4,4.25-1.47,5.36l-6.45,3.72l-3.67,2.12l-3.02,1.74
C524.28,128.19,521.68,123.66,520.93,122.57L520.93,122.57z M529.22,145.77h15.22c2.17,0,3.89,1.77,3.89,3.94
c0,2.12-1.72,3.89-3.89,3.89h-15.22c0.1-1.26,0.15-2.58,0.15-3.89C529.37,148.35,529.32,147.08,529.22,145.77L529.22,145.77z
M482.15,235.46c4.45,0,8.39-3.18,11.17-8.29h-22.35C473.7,232.27,477.7,235.46,482.15,235.46L482.15,235.46z M470.97,214.68h22.35
c2.73,0,4.96,2.22,4.96,4.95l0,0c0,2.73-2.22,4.9-4.96,4.9h-22.35c-2.73,0-4.95-2.17-4.95-4.9l0,0
C466.02,216.9,468.24,214.68,470.97,214.68L470.97,214.68z M470.97,202.19h22.35c2.73,0,4.96,2.22,4.96,4.95l0,0
c0,2.68-2.22,4.9-4.96,4.9h-22.35c-2.73,0-4.95-2.23-4.95-4.9l0,0C466.02,204.41,468.24,202.19,470.97,202.19L470.97,202.19z"/>
<path id="thumb" class="shape" d="M543.88,150.1c0-8.02-6.5-14.52-14.51-14.52c0,0-1.04,0.02-2.77,0.02c-8,0-30.64-0.56-30.49-6.86
c0.01-1.92,0.12-4.02,0.29-6.38c0.34-2.7,0.83-5.33,1.02-7.64c1.33-16.64-4.42-25.72-9.45-25.72c-1.17,0-10.27,0.61-9.7,5.48
c0.25,2.28,1.22,13.95-1.79,23.77c-4.81,8.87-19.47,24.99-28.41,32.22l-0.63-2.13l-1.87-6.36l-6.37,1.88l-25.09,7.41l-6.36,1.88
l1.87,6.36l18.49,62.76l1.87,6.36l6.37-1.87l25.09-7.39l6.36-1.88l-1.87-6.36l-4.26-14.47c2.35-0.53,6.07-1.08,11.6-1.08
c2.69,0,5.8,0.14,9.36,0.46c10.57,0.95,20.6,1.67,26.19,2.4c1.3,0.17,2.77,0.28,4.28,0.28c4.99,0,10.47-1.21,12.03-5.38
c0.46-1.24,0.7-2.39,0.82-3.48c4.58-1.63,8-5.8,8.27-10.86c0.06-0.97,0-1.89-0.17-2.82c3.43-2.01,5.82-5.61,6.04-9.8
c0.13-1.99-0.27-3.88-1.02-5.57C542.01,158.13,543.88,154.36,543.88,150.1z M434.47,220.38l-18.48-62.76l25.09-7.41l18.49,62.77
L434.47,220.38z"/>
<path id="plug" class="shape" d="M481.41,123.93l-8.41-8.42l28.8-28.8c2.32-2.32,6.09-2.32,8.41,0.01c2.32,2.32,2.32,6.08,0,8.41
L481.41,123.93z M550.32,126.84c-2.32-2.32-6.09-2.32-8.41,0l-28.8,28.8l8.42,8.42l28.8-28.8
C552.65,132.93,552.65,129.16,550.32,126.84z M459.08,108.07c-0.18-0.18-0.47-0.17-0.65,0l-7.76,7.77c-0.18,0.17-0.18,0.47,0,0.64
l2.27,2.27l-11.65,11.65c-11.99,11.99-12.79,30.91-2.44,43.85l-2.31,2.31c-3.9,3.89-4.52,9.76-1.98,14.35l-12.97,12.97l11.57,11.57
l12.97-12.97c4.59,2.54,10.46,1.91,14.35-1.98l2.31-2.31c12.93,10.36,31.86,9.56,43.85-2.43l11.65-11.65l2.26,2.26
c0.18,0.18,0.47,0.18,0.65,0l7.77-7.76c0.17-0.18,0.17-0.47,0-0.66L459.08,108.07z"/>
<path id="apple" class="shape" d="M438.53,141.96c-18.47,15.01-9.81,55,13.34,70.02c7.17,4.66,15.12,5.33,25.32,0.6
c13.93,5.4,20.21,4.88,30.9-4.94c18.85-17.3,24.66-51.95,7.76-65.68c-14.49-11.77-26.9-8.56-33.52-5.15
c-0.07-3.99-0.76-8.51-2.54-13.33c1.01-0.53,2.02-1.08,3-1.67c0.57-0.34,1.16-0.67,1.71-1.03c0.97-0.62,1.92-1.27,2.85-1.92
c6.5-4.61,12.12-10.36,16.77-16.73c0,0-3.28,12.62-10.83,19.42c34.89,11.3,32.95-27.95,32.52-38.41c-0.03-0.77-1.08-0.77-1.58-0.18
c-6.59,7.77-24.41-1.87-35.37,9.9c-7.76,8.34-5.87,17.25-3.62,22.42c-0.98,0.65-1.96,1.26-2.97,1.85c-1.38,0.81-2.8,1.54-4.24,2.24
c-1.72-3.54-4.05-7.21-7.17-10.94c-0.88-1.06-2.47-1.12-3.49-0.2l-3.25,2.94c-1.04,0.94-1.07,2.54-0.18,3.63
c6.93,8.46,8.9,16.36,8.98,22.47C466.54,133.71,453.67,129.66,438.53,141.96z"/>
<path id="clock" class="shape" d="M479.64,141.08l1.9-2.34c0.72-0.88,2.02-1.02,2.91-0.3l22.06,17.92c0.57-0.16,1.17-0.25,1.79-0.24
c0.68,0,1.34,0.11,1.95,0.31l14.98-13.55c0.84-0.76,2.16-0.7,2.92,0.15l2.02,2.24c0.76,0.84,0.7,2.16-0.15,2.92l-1.18,1.06
c-0.14,0.27-0.33,0.52-0.57,0.73l-13.6,12.31l0,0.29c-0.02,3.55-2.91,6.41-6.46,6.39c-3.55-0.02-6.41-2.91-6.39-6.46
c0-0.23,0.01-0.46,0.04-0.69l-21.94-17.83C479.06,143.27,478.92,141.96,479.64,141.08L479.64,141.08z M507.99,110.66
c14.18,0,27.03,5.75,36.32,15.05c9.3,9.3,15.05,22.14,15.05,36.32c0,14.18-5.75,27.03-15.05,36.32
c-9.3,9.3-22.14,15.05-36.32,15.05c-14.18,0-27.03-5.75-36.32-15.05c-3.71-3.71-6.86-7.99-9.3-12.69c-1.83,1.3-3.57,3.27-8.66,4.32
c-8.21,1.69-14.02-1.39-19.16-6.64c-3.57-3.65-13.44-0.57-17.31,0.36c3.91-6.29,15.07-8.82,22.6-6.11
c13.2,4.75,11.83-14.23-4.16-9.01c-5.4,0.76-19.21,9.58-25.68,1.07c-7.37-9.69-13.35-20.26-27.34-14.98
c0.9-4.68,15.39-13.31,20.84-7.28c9.07,10.02,28.5,10.76,19.74-0.64c-1.82-2.37-6.29-6.34-9.36-6.62
c-2.93-1.47-6.74-1.05-10.02-0.94c4.46-2.31,4.22-2.24,9.58-3.64c5.67-1.49,8.94-1.44,14.17,1.16c5.92,2.94,10.27,6.84,17.43,4.99
l0.64-0.17c5.11-1.32,7-5.14,5.18-9.86c-1.79-4.65-7.03-5.42-11.24-5.42c-5.74,0-19.09-4.82-19.09-11.81
c12.15,7.65,19.3,0.28,23.27,0.19c16.39-0.37,12.63,6.57,20.42,10.59c4.35,2.25,3.53,0.53,5.49,0.87c9.07-9-11.49-1.75-6.25-18.26
c2.91,6.32,12.9,9.57,21.19,8.41C491.66,112.68,499.59,110.66,507.99,110.66L507.99,110.66z M511.88,123.67v5.56
c0,1.34-1.09,2.43-2.43,2.43h-1.92c-1.34,0-2.43-1.09-2.43-2.43v-5.64c-9.49,0.71-18.03,4.85-24.36,11.18
c-6.11,6.12-10.19,14.28-11.1,23.37h5.56c1.34,0,2.43,1.09,2.43,2.43v1.92c0,1.34-1.09,2.43-2.43,2.43h-5.64
c0.71,9.49,4.85,18.03,11.18,24.36c6.11,6.11,14.28,10.19,23.37,11.1v-5.56c0-1.34,1.1-2.43,2.43-2.43h1.92
c1.34,0,2.43,1.09,2.43,2.43v5.64c9.49-0.71,18.03-4.85,24.37-11.18c6.12-6.12,10.19-14.28,11.1-23.37h-5.56
c-1.34,0-2.43-1.1-2.43-2.43v-1.92c0-1.34,1.09-2.43,2.43-2.43h5.64c-0.7-9.49-4.85-18.03-11.18-24.36
C529.13,128.65,520.97,124.58,511.88,123.67L511.88,123.67z"/>
<path id="rocket" class="shape" d="M481.2,182.09c8.79-5.55,17.37-11.95,24.52-19.09c24.15-24.16,26.92-45.49,24.36-53.09
l10.81-10.83c0.99-0.99,0.99-2.59,0-3.58c-0.98-0.98-2.58-0.98-3.57,0.01l-10.82,10.82c-7.61-2.56-28.93,0.2-53.08,24.36
c-7.15,7.14-13.54,15.73-19.09,24.51c-8.13-2-22.19-1.96-32.02,8.89c-11.18,12.34-4.61,24.04-2.15,21.57
c2.07-2.08,5.43-14.37,20.24-4.9c-2.44,5.09-2.3,8.1-0.71,9.67l6.29,6.3c1.58,1.57,4.6,1.73,9.69-0.7
c9.46,14.8-2.83,18.16-4.9,20.22c-2.48,2.48,9.21,9.03,21.55-2.15C483.17,204.28,483.21,190.21,481.2,182.09z M496.51,139.89
c-3.63-3.64-3.63-9.55,0-13.2c3.66-3.64,9.56-3.64,13.2,0c3.65,3.66,3.65,9.56,0,13.2C506.06,143.53,500.17,143.54,496.51,139.89z
M436.42,193.48c0,0-10.06,1.83-13.69,20.2c18.38-3.62,20.21-13.69,20.21-13.69L436.42,193.48z"/>
</g>
<g id="plugin">
<path id="morph1" class="plugin" d="M326.95,111.81c0-1.22,1.04-1.86,3.48-1.86h3.07c1.68,0,3.02,0.41,3.65,1.57l10.21,18.15
l10.32-18.15c0.64-1.16,1.97-1.57,3.65-1.57h3.02c2.44,0,3.48,0.64,3.48,1.86v37.12c0,1.22-1.04,1.86-3.48,1.86h-1.68
c-2.44,0-3.48-0.64-3.48-1.86v-24.01l-0.23-0.06l-8.41,15.02c-0.52,0.7-1.22,1.1-2.32,1.1h-1.68c-1.1,0-1.8-0.41-2.32-1.1
l-8.41-15.02l-0.23,0.06v24.01c0,1.22-1.04,1.86-3.48,1.86h-1.68c-2.44,0-3.48-0.64-3.48-1.86V111.81z"/>
<path id="morph2" class="plugin" d="M387.21,119.87c9.22,0,14.04,5.51,14.04,15.6s-4.81,15.66-14.04,15.66s-14.09-5.57-14.09-15.66
S377.99,119.87,387.21,119.87z M392.55,135.47c0-5.8-1.62-8.82-5.34-8.82s-5.39,3.02-5.39,8.82s1.68,8.87,5.39,8.87
S392.55,141.27,392.55,135.47z"/>
<path id="morph3" class="plugin" d="M407.28,130.54c0-5.8-0.7-7.02-0.7-8.18c0-1.39,5.05-1.86,6.5-1.86c1.86,0,1.97,2.32,2.32,3.77
c1.22-2.2,2.96-4.41,6.32-4.41c2.84,0,3.31,1.97,3.31,3.13c0,1.1-0.64,4.87-1.8,4.87c-0.81,0-1.57-0.46-2.73-0.46
c-2.38,0-3.94,1.74-4.64,2.9v18.62c0,1.22-1.04,1.86-3.48,1.86h-1.62c-2.44,0-3.48-0.64-3.48-1.86V130.54z"/>
<path id="morph4" class="plugin" d="M428.97,130.54c0-5.8-0.7-7.02-0.7-8.18c0-1.39,5.05-1.86,6.5-1.86c1.86,0,1.97,2.32,2.32,3.71
c1.33-2.49,4.18-4.35,7.77-4.35c6.26,0,10.85,5.57,10.85,15.66c0,9.45-4.41,15.6-12.24,15.6c-2.73,0-4.7-0.93-5.92-1.8v11.43
c0,1.22-1.04,1.86-3.48,1.86h-1.62c-2.44,0-3.48-0.64-3.48-1.86V130.54z M441.61,144.34c3.65,0,5.39-3.02,5.39-8.82
c0-5.63-1.51-8.64-4.7-8.64c-2.2,0-3.71,1.62-4.76,3.42v12.93C438.48,143.76,439.82,144.34,441.61,144.34z"/>
<path id="morph5" class="plugin" d="M460.81,108.79c0-1.22,1.04-1.86,3.48-1.86h1.62c2.44,0,3.48,0.64,3.48,1.86v15.02
c1.8-2.15,4.7-3.94,8.18-3.94c5.8,0,8.76,2.96,8.76,9.4v19.66c0,1.22-1.04,1.86-3.48,1.86h-1.62c-2.44,0-3.48-0.64-3.48-1.86
v-18.39c0-2.26-1.16-3.6-3.71-3.6c-2.38,0-3.94,2.03-4.64,3.36v18.62c0,1.22-1.04,1.86-3.48,1.86h-1.62
c-2.44,0-3.48-0.64-3.48-1.86V108.79z"/>
<path id="morph6" class="plugin" d="M494.63,140.86c1.04,0,3.89,2.67,8.53,2.67c2.49,0,5.45-0.75,5.45-4.23
c0-6.84-16.76-4.18-16.76-17.81c0-8.53,6.96-11.89,13.75-11.89c6.15,0,10.44,2.15,10.44,4.06c0,1.57-1.8,5.05-3.19,5.05
c-0.75,0-2.55-1.45-6.44-1.45c-4.52,0-5.39,2.09-5.39,3.42c0,6.61,16.76,3.94,16.76,17.57c0,9.63-6.79,12.88-13.11,12.88
c-8.82,0-13.63-3.13-13.63-5.1C491.03,144.23,493.41,140.86,494.63,140.86z"/>
<path id="morph7" class="plugin" d="M519.28,112.27c-0.12-0.41-0.23-0.75-0.23-1.04c0-0.81,1.1-1.28,3.54-1.28h1.91
c1.68,0,3.02,0.41,3.42,1.68l8.47,27.14h0.23l8.7-27.14c0.41-1.22,1.74-1.68,3.42-1.68h1.8c2.44,0,3.48,0.46,3.48,1.28
c0,0.29-0.06,0.64-0.17,1.04l-12.53,37.29c-0.29,0.93-1.57,1.22-3.25,1.22h-3.02c-1.68,0-2.96-0.29-3.25-1.22L519.28,112.27z"/>
<path id="morph8" class="plugin" d="M574.2,109.6c5.1,0,12.41,1.62,12.41,4.06c0,1.62-2.32,5.45-3.77,5.45
c-0.7,0-3.31-1.86-8.82-1.86c-6.84,0-10.03,4.35-10.03,13.05s3.25,13.22,9.92,13.22c1.62,0,2.96-0.12,4.52-0.41v-7.37h-5.1
c-1.22,0-1.74-0.87-1.74-2.9V131c0-2.03,0.52-2.9,1.74-2.9h11.77c1.62,0,2.32,0.7,2.32,2.32v16.12c0,4-9.4,4.58-13.51,4.58
c-12.99,0-19.08-6.55-19.08-20.88C554.83,116.45,561.32,109.6,574.2,109.6z"/>
<path id="morph9" class="plugin" d="M597.28,111.81c0-1.22,0.52-1.74,1.74-1.74h11.77c4.99,0,12.93,1.57,12.93,11.37
c0,10.61-9.34,11.95-12.35,11.95h-8.99v16.12c0,0.81-0.7,1.28-2.32,1.28h-0.46c-1.62,0-2.32-0.46-2.32-1.28V111.81z
M611.44,128.98c2.32,0,7.02-1.22,7.02-7.54c0-5.74-4.41-6.96-7.83-6.96h-8.24v14.5H611.44z"/>
<path id="morph10" class="st16" d="M629.01,108.33c0-0.81,0.7-1.28,2.32-1.28h0.23c1.62,0,2.32,0.46,2.32,1.28v34.22
c0,3.48,1.45,4.29,3.13,4.29s1.97-0.29,2.49-0.29c0.81,0,1.22,2.26,1.22,2.73c0,1.57-2.67,1.74-4.23,1.74c-2.9,0-7.48-1.28-7.48-8
V108.33z"/>
<path id="morph11" class="plugin" d="M645.83,121.49c0-0.81,0.7-1.28,2.32-1.28h0.23c1.62,0,2.32,0.46,2.32,1.28v19.66
c0,3.54,2.15,5.63,5.92,5.63c2.61,0,5.39-1.57,7.31-4.06v-21.23c0-0.81,0.7-1.28,2.32-1.28h0.23c1.62,0,2.32,0.46,2.32,1.28v20.59
c0,4.76,0.7,7.02,0.7,7.31c0,1.1-2.38,1.33-3.13,1.33c-1.39,0-1.68-2.44-2.03-4.06c-2.44,2.73-5.8,4.35-9.05,4.35
c-5.92,0-9.45-3.54-9.45-9.4V121.49z"/>
<path id="morph12" class="plugin" d="M681.15,148.29c-2.2-0.93-3.71-2.32-3.71-4.7c0-2.84,2.38-4.23,4.41-4.93
c-3.48-1.68-5.28-4.93-5.28-8.64c0-5.51,4-10.03,11.6-10.03c1.39,0,2.67,0.12,3.83,0.35h9.98c0.81,0,1.16,0.52,1.16,1.74v0.7
c0,1.22-0.35,1.74-1.16,1.74h-4.06c1.33,1.62,1.91,3.48,1.91,5.51c0,5.51-4.06,9.98-11.66,9.98h-0.58
c-1.39,0.06-4.99,0.29-4.99,2.44c0,4.58,19.6,0.06,19.6,11.43c0,5.05-5.16,9.11-14.5,9.11c-7.6,0-13.11-1.62-13.11-7.6
C674.6,151.94,677.21,149.68,681.15,148.29z M688.34,158.79c5.28,0,8.7-2.03,8.7-4.64c0-3.54-6.15-3.77-11.6-4.7
c-2.38,0.93-5.8,2.84-5.8,5.39C679.64,157.97,683.53,158.79,688.34,158.79z M694.72,130.02c0-4.47-2.96-5.86-6.55-5.86
c-3.6,0-6.5,1.39-6.5,5.86s2.9,5.8,6.5,5.8C691.77,135.82,694.72,134.48,694.72,130.02z"/>
<path id="morph13" class="plugin" d="M708.18,111.75v-3.42c0-0.81,0.7-1.28,2.32-1.28h0.7c1.62,0,2.32,0.46,2.32,1.28v3.42
c0,0.81-0.7,1.28-2.32,1.28h-0.7C708.88,113.03,708.18,112.56,708.18,111.75z M708.41,121.49c0-0.81,0.7-1.28,2.32-1.28h0.23
c1.62,0,2.32,0.46,2.32,1.28v28.01c0,0.81-0.7,1.28-2.32,1.28h-0.23c-1.62,0-2.32-0.46-2.32-1.28V121.49z"/>
<path id="morph14" class="plugin" d="M721.17,129.15c0-4.76-0.7-7.02-0.7-7.31c0-1.1,2.38-1.33,3.13-1.33
c1.39,0,1.68,2.32,2.03,3.83c2.44-2.73,5.8-4.35,9.05-4.35c5.92,0,9.45,3.54,9.45,9.4v20.13c0,0.81-0.7,1.28-2.32,1.28h-0.23
c-1.62,0-2.32-0.46-2.32-1.28v-19.66c0-3.54-2.15-5.63-5.92-5.63c-2.61,0-5.39,1.57-7.31,4.06v21.23c0,0.81-0.7,1.28-2.32,1.28
h-0.23c-1.62,0-2.32-0.46-2.32-1.28V129.15z"/>
</g>
<g id="fromGreenSock">
<path class="text-from" d="M326.45,175.59c0-0.76,0.33-1.08,1.08-1.08h11.38c0.51,0,0.72,0.33,0.72,1.08v0.58
c0,0.76-0.22,1.08-0.72,1.08h-9.29v8.24h8.64c0.51,0,0.72,0.33,0.72,1.08v0.58c0,0.76-0.22,1.08-0.72,1.08h-8.64v10.84
c0,0.51-0.43,0.79-1.45,0.79h-0.29c-1.01,0-1.45-0.29-1.45-0.79V175.59z"/>
<path class="text-from" d="M343.65,186.39c0-2.96-0.43-4.37-0.43-4.55c0-0.69,1.48-0.83,1.95-0.83c0.87,0,1.05,1.45,1.26,2.38
c1.23-1.73,2.67-2.71,4.19-2.71c1.41,0,2.1,0.61,2.1,1.41c0,0.69-0.29,1.95-0.72,1.95c-0.47,0-0.76-0.4-1.99-0.4
c-1.88,0-3.32,2.2-3.32,2.2v13.22c0,0.51-0.43,0.79-1.45,0.79h-0.14c-1.01,0-1.45-0.29-1.45-0.79V186.39z"/>
<path class="text-from" d="M362.55,180.68c5.31,0,8.2,3.47,8.2,9.76c0,6.25-2.82,9.58-8.2,9.58c-5.46,0-8.38-3.36-8.38-9.58
C354.17,184.19,357.17,180.68,362.55,180.68z M367.61,190.36c0-4.81-1.63-7.08-5.17-7.08c-3.5,0-5.09,2.24-5.09,7.08
c0,4.81,1.55,7.05,5.09,7.05S367.61,195.17,367.61,190.36z"/>
<path class="text-from" d="M375.09,186.39c0-2.96-0.43-4.37-0.43-4.55c0-0.69,1.48-0.83,1.95-0.83c0.87,0,1.05,1.45,1.26,2.38
c1.19-1.37,3.18-2.71,5.49-2.71c1.77,0,4.16,0.54,5.17,3c1.37-1.63,3.47-3,5.75-3c2.31,0,5.67,0.94,5.67,5.85v12.54
c0,0.51-0.43,0.79-1.45,0.79h-0.14c-1.01,0-1.45-0.29-1.45-0.79v-12.25c0-2.13-1.16-3.5-3.47-3.5c-2.2,0-3.9,1.88-4.44,2.49
c0.04,0.25,0.04,0.51,0.04,0.76v12.5c0,0.51-0.43,0.79-1.45,0.79h-0.14c-1.01,0-1.45-0.29-1.45-0.79v-12.25
c0-2.13-1.16-3.5-3.47-3.5c-2.64,0-4.41,2.49-4.41,2.49v13.26c0,0.51-0.43,0.79-1.45,0.79h-0.14c-1.01,0-1.45-0.29-1.45-0.79
V186.39z"/>
<path class="text-green" d="M425.11,174.29c3.58,0,6.9,1.26,6.9,2.24c0,0.61-0.76,2.1-1.23,2.1c-0.4,0-2.13-1.59-5.6-1.59
c-6.4,0-8.49,3.72-8.49,10.01c0,5.53,1.66,10.23,8.09,10.23c1.88,0,3.69-0.22,4.66-0.47v-7.3h-4.23c-0.51,0-0.72-0.33-0.72-1.08
v-0.58c0-0.76,0.22-1.08,0.72-1.08h6.32c0.76,0,1.08,0.33,1.08,1.08v9.58c0,2.02-3.94,2.6-8.06,2.6
c-7.19,0-11.17-4.05-11.17-12.65C413.4,178.37,417.55,174.29,425.11,174.29z"/>
<path class="text-green" d="M436.35,186.39c0-2.96-0.43-4.37-0.43-4.55c0-0.69,1.48-0.83,1.95-0.83c0.87,0,1.05,1.45,1.26,2.38
c1.23-1.73,2.67-2.71,4.19-2.71c1.41,0,2.1,0.61,2.1,1.41c0,0.69-0.29,1.95-0.72,1.95c-0.47,0-0.76-0.4-1.99-0.4
c-1.88,0-3.32,2.2-3.32,2.2v13.22c0,0.51-0.43,0.79-1.45,0.79h-0.14c-1.01,0-1.45-0.29-1.45-0.79V186.39z"/>
<path class="text-green" d="M455.28,180.68c4.95,0,7.44,3.29,7.44,9.43c0,0.43-0.76,1.48-1.19,1.48h-11.42
c0.29,4.01,1.99,5.82,5.56,5.82c3.14,0,4.91-1.52,5.28-1.52c0.51,0,1.26,1.41,1.26,1.81c0,0.87-2.85,2.31-6.5,2.31
c-6,0-8.85-3.07-8.85-9.54C446.86,184.08,449.75,180.68,455.28,180.68z M459.51,188.99c0-3.79-1.45-5.71-4.34-5.71
c-3.14,0-4.81,1.92-5.06,5.71H459.51z"/>
<path class="text-green" d="M474.04,180.68c4.95,0,7.44,3.29,7.44,9.43c0,0.43-0.76,1.48-1.19,1.48h-11.42
c0.29,4.01,1.99,5.82,5.56,5.82c3.14,0,4.91-1.52,5.28-1.52c0.51,0,1.26,1.41,1.26,1.81c0,0.87-2.85,2.31-6.5,2.31
c-6,0-8.85-3.07-8.85-9.54C465.62,184.08,468.51,180.68,474.04,180.68z M478.26,188.99c0-3.79-1.45-5.71-4.34-5.71
c-3.14,0-4.81,1.92-5.06,5.71H478.26z"/>
<path class="text-green" d="M484.77,186.39c0-2.96-0.43-4.37-0.43-4.55c0-0.69,1.48-0.83,1.95-0.83c0.87,0,1.05,1.45,1.26,2.38
c1.52-1.7,3.61-2.71,5.64-2.71c3.69,0,5.89,2.2,5.89,5.85v12.54c0,0.51-0.43,0.79-1.45,0.79h-0.14c-1.01,0-1.45-0.29-1.45-0.79
v-12.25c0-2.2-1.34-3.5-3.69-3.5c-1.63,0-3.36,0.98-4.55,2.53v13.22c0,0.51-0.43,0.79-1.45,0.79h-0.14
c-1.01,0-1.45-0.29-1.45-0.79V186.39z"/>
<path class="text-sock" d="M505.55,193.69c0.65,0,2.42,1.66,5.31,1.66c1.55,0,3.4-0.47,3.4-2.64c0-4.26-10.44-2.6-10.44-11.09
c0-5.31,4.34-7.41,8.56-7.41c3.83,0,6.5,1.34,6.5,2.53c0,0.98-1.12,3.14-1.99,3.14c-0.47,0-1.59-0.9-4.01-0.9
c-2.82,0-3.36,1.3-3.36,2.13c0,4.12,10.44,2.46,10.44,10.95c0,6-4.23,8.02-8.17,8.02c-5.49,0-8.49-1.95-8.49-3.18
C503.31,195.78,504.79,193.69,505.55,193.69z"/>
<path class="text-sock" d="M530.88,180.61c5.75,0,8.74,3.43,8.74,9.72s-3,9.76-8.74,9.76s-8.78-3.47-8.78-9.76
S525.13,180.61,530.88,180.61z M534.2,190.33c0-3.61-1.01-5.49-3.32-5.49s-3.36,1.88-3.36,5.49s1.05,5.53,3.36,5.53
S534.2,193.94,534.2,190.33z"/>
<path class="text-sock" d="M551.23,180.61c2.57,0,6,0.83,6,2.49c0,0.69-1.3,2.78-1.92,2.78c-0.14,0-0.36-0.11-0.65-0.25
c-0.65-0.33-1.63-0.79-3.14-0.79c-2.89,0-4.08,1.81-4.08,5.49c0,3.72,1.12,5.53,3.87,5.53c1.7,0,2.85-0.51,3.54-0.83
c0.29-0.11,0.51-0.22,0.65-0.22c0.79,0,1.88,2.02,1.88,2.75c0,2.02-5.13,2.53-6.32,2.53c-6.18,0-9.11-3.14-9.11-9.61
C541.94,184.04,544.76,180.61,551.23,180.61z"/>
<path class="text-sock" d="M559.97,173.71c0-0.76,0.65-1.16,2.17-1.16h1.01c1.52,0,2.17,0.4,2.17,1.16v14.31l0.14,0.04l4.37-6.54
c0.43-0.61,1.16-0.69,2.2-0.69h1.34c1.37,0,2.02,0.22,2.02,0.54c0,0.18-0.11,0.43-0.33,0.72l-5.02,7.15l5.89,9.32
c0.18,0.33,0.29,0.54,0.29,0.76c0,0.33-0.65,0.54-2.06,0.54h-1.52c-1.05,0-1.84-0.14-2.17-0.69l-5.02-8.31l-0.14,0.04v7.8
c0,0.76-0.65,1.16-2.17,1.16h-1.01c-1.52,0-2.17-0.4-2.17-1.16V173.71z"/>
</g>
<g id="bulb">
<path id="bulb1" class="bulb" d="M442.56,176.81l-13.19,7.63c-1.87,1.06-4.25,0.4-5.31-1.47c-1.11-1.87-0.45-4.25,1.42-5.31
l13.14-7.58C439.73,172.41,441.05,174.69,442.56,176.81L442.56,176.81z"/>
<path id="bulb2" class="bulb" d="M434.22,153.61H419c-2.13,0-3.89-1.77-3.89-3.89c0-2.17,1.77-3.94,3.89-3.94h15.22
c-0.1,1.31-0.15,2.58-0.15,3.94C434.07,151.03,434.12,152.34,434.22,153.61L434.22,153.61z"/>
<path id="bulb3" class="bulb" d="M438.62,129.34l-13.14-7.58c-1.87-1.11-2.53-3.49-1.42-5.36c1.06-1.87,3.44-2.53,5.31-1.42
l13.19,7.58C441.05,124.69,439.73,126.96,438.62,129.34L438.62,129.34z"/>
<path id="bulb4" class="bulb" d="M454.6,110.53l-7.58-13.19c-1.11-1.87-0.46-4.25,1.41-5.31c1.87-1.11,4.25-0.45,5.36,1.42
l7.58,13.15C458.99,107.7,456.72,109.02,454.6,110.53L454.6,110.53z"/>
<path id="bulb5" class="bulb" d="M477.8,102.19V86.97c0-2.12,1.77-3.89,3.95-3.89c2.12,0,3.89,1.77,3.89,3.89v15.22
c-1.26-0.1-2.58-0.15-3.89-0.15C480.38,102.04,479.11,102.09,477.8,102.19L477.8,102.19z"/>
<path id="bulb6" class="bulb" d="M481.74,110.58c8.23,0,15.86,2.54,22.15,6.88c10.22,7.05,16.92,18.86,16.92,32.25
c0,11.69-6.59,20.57-12.64,28.09c-5.07,6.29-9.77,11.63-9.9,16.86c0,2.68-2.22,4.9-4.96,4.9h-22.35c-2.73,0-4.95-2.22-4.95-4.9
c-0.47-6.28-7.31-12.27-13.47-20.07c-5.21-6.59-9.94-14.46-9.94-24.88c0-11.53,4.98-21.89,12.9-29.04
C462.46,114.4,471.66,110.58,481.74,110.58L481.74,110.58z"/>
<path id="bulb7" class="bulb" d="M470.97,202.19h22.35c2.73,0,4.96,2.22,4.96,4.95l0,0c0,2.68-2.22,4.9-4.96,4.9h-22.35
c-2.73,0-4.95-2.23-4.95-4.9l0,0C466.02,204.41,468.24,202.19,470.97,202.19L470.97,202.19z"/>
<path id="bulb8" class="bulb" d="M470.97,214.68h22.35c2.73,0,4.96,2.22,4.96,4.95l0,0c0,2.73-2.22,4.9-4.96,4.9h-22.35
c-2.73,0-4.95-2.17-4.95-4.9l0,0C466.02,216.9,468.24,214.68,470.97,214.68L470.97,214.68z"/>
<path id="bulb9" class="bulb" d="M482.15,235.46c4.45,0,8.39-3.18,11.17-8.29h-22.35C473.7,232.27,477.7,235.46,482.15,235.46
L482.15,235.46z"/>
<path id="bulb10" class="bulb" d="M502.12,106.59l2.02-3.51l2.27-3.94l3.29-5.7c1.06-1.87,3.44-2.53,5.31-1.42
c1.87,1.06,2.53,3.44,1.47,5.31l-3.45,5.97l-2.09,3.61l-2.09,3.61c-1.19-0.85-2.43-1.64-3.7-2.36
C504.15,107.6,503.14,107.08,502.12,106.59L502.12,106.59z"/>
<path id="bulb11" class="bulb" d="M520.93,122.57l3.06-1.76l3.49-2.01l6.6-3.81c1.87-1.11,4.25-0.46,5.36,1.42
c1.06,1.87,0.4,4.25-1.47,5.36l-6.45,3.72l-3.67,2.12l-3.02,1.74C524.28,128.19,521.68,123.66,520.93,122.57L520.93,122.57z"/>
<path id="bulb12" class="bulb" d="M529.22,145.77h15.22c2.17,0,3.89,1.77,3.89,3.94c0,2.12-1.72,3.89-3.89,3.89h-15.22
c0.1-1.26,0.15-2.58,0.15-3.89C529.37,148.35,529.32,147.08,529.22,145.77L529.22,145.77z"/>
<path id="bulb13" class="bulb" d="M537.96,177.67c1.87,1.06,2.53,3.44,1.47,5.31c-1.11,1.87-3.49,2.53-5.36,1.47l-13.14-7.63
c1.47-2.12,2.78-4.4,3.89-6.72L537.96,177.67z"/>
<path id="bulb14" class="bulb" d="M537.96,177.67c1.87,1.06,2.53,3.44,1.47,5.31c-1.11,1.87-3.49,2.53-5.36,1.47l-13.14-7.63
c1.47-2.12,2.78-4.4,3.89-6.72L537.96,177.67z"/>
</g>
<g id="controls">
<line id="track" x1="62" y1="322" x2="744" y2="322"/>
<circle id="scrubber" cx="62" cy="322" r="9"/>
</g>
</svg>
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
background-color: black;
}
svg {
width: 100%;
max-height: 100%;
}
gsap.set("svg", {position:"absolute", left:"50%", xPercent:-50});
gsap.defaultEase = "power4.inOut";
var tl = gsap.timeline({delay:0.3}),
flap = gsap.timeline({repeat:10}),
scrubTween = gsap.to("#scrubber", {duration: 10, x:682, ease:"none", paused:true});
tl.to("#M", {duration: 2, morphSVG:{shape:"#cape", shapeIndex:-19}, fill:"#444"}, 0)
.to("#H", {duration: 2, morphSVG:"#torso", fill:"#777"}, 0.1)
.to("#P", {duration: 2, morphSVG:{shape:"#legs", shapeIndex:-24}, fill:"#777"}, 0.1)
.to("#O", {duration: 2, morphSVG:"#head", fill:"#777"}, 0.05)
.to("#R", {duration: 1.5, morphSVG:{shape:"#sock", shapeIndex:-11}, fill:"#88CE02", transformOrigin:"-100 60"}, 0.5)
.to("#GUY, #capeFlow1", {autoAlpha:1}, 1.7)
.to("#M, #O, #R, #P, #H", 0.7, {autoAlpha:0, ease:"none"}, 1.6);
flap.add([
waveSVG(document.getElementById("capeBottom1"), {taperEnd: 80, invertFlow:false, taperStart:2, loose:true, length:120, angle:-52, magnitude:10, phase:110, duration:2, start:6, end:14, repeat:10}),
waveSVG(document.getElementById("shadowBottom1"), {taperEnd: 80, taperStart:2, loose:true, length:120, angle:-32, magnitude:10, phase:110, duration:2, start:7, end:12, repeat:10}),
waveSVG(document.getElementById("shadowTop1"), {loose:true, length:120, angle:-16, magnitude:20, phase:-140, duration:2, start:10, end:13, repeat:10}),
waveSVG(document.getElementById("capeTop1"), {loose:true, angle: 70, length:120, magnitude:10, phase:20, duration:2, start:2, end:9, repeat:10})
]);
tl.add(flap, 2)
.addLabel("SVG", 2.3)
.from("#S, #V, #G", {duration: 0.8, x:-50, autoAlpha:0, rotation:-90, ease:"back", transformOrigin:"center center", stagger: 0.15}, "SVG")
.addLabel("circles", "SVG+=2")
.to("#S", {duration: 0.8, morphSVG:{shape:"#circleOuter", shapeIndex:-1}, fill:"#444", ease:"power3.inOut"}, "circles")
.to("#G", {duration: 0.8, morphSVG:{shape:"#circleMid", shapeIndex:-8}, fill:"#777", ease:"power3.inOut"}, "circles+=0.1")
.to("#V", {duration: 0.8, morphSVG:{shape:"#circleInner", shapeIndex:10}, fill:"#000", ease:"power3.inOut"}, "circles+=0.2")
.addLabel("shapes", 4.9)
.from("#heart", {duration: 0.4, scale:0.1, autoAlpha:0, ease:"back", transformOrigin:"center center"}, "shapes")
.to("#heart", {duration: 1, morphSVG:{shape:"#star"}, fill:"#FFFF66"}, "shapes+=1")
.to("#heart", {duration: 1, morphSVG:{shape:"#thumb"}, fill:"#3399CC"}, "shapes+=2.5")
.to("#heart", {duration: 1, morphSVG:{shape:"#rocket"}, fill:"orange"}, "shapes+=4")
.to("#heart", {duration: 1, morphSVG:{shape:"#apple"}, fill:"#CC0000"}, "shapes+=5.5")
.to("#heart", {duration: 1, morphSVG:{shape:"#plug"}, fill:"#9966CC"}, "shapes+=7")
.to("#heart", {duration: 1, morphSVG:{shape:"#light", shapeIndex:[-19, -13], map:"complexity"}, fill:"white"}, "shapes+=8.5")
.to("#S, #V, #G", {duration: 0.8, scale:0, autoAlpha:0, ease:"back.in", transformOrigin:"center center", stagger: 0.1}, "shapes+=10")
.set("#heart", {autoAlpha:0}, "shapes+=10")
.set(".bulb", {autoAlpha:1}, "shapes+=10")
.to(".bulb", {duration: 1.5, morphSVG:gsap.utils.wrap(["#morph1", "#morph2", "#morph3", "#morph4", "#morph5", "#morph6", "#morph7", "#morph8", "#morph9", "#morph10", "#morph11", "#morph12", "#morph13", "#morph14"]), stagger: 0.05}, "shapes+=10.3")
.from("#fromGreenSock", {duration: 1, x:50, autoAlpha:0, ease:"power2"}, "shapes+=12");
Draggable.create("#scrubber", {
type:"x",
bounds:{maxX:682, minX:0},
onPress: function() {
tl.pause();
},
onDrag:function() {
tl.time(20 * this.x / 682);
},
onRelease:function() {
tl.resume();
}
});
function updateScrubber() {
scrubTween.progress(Math.min(1, tl.time() / 20));
}
tl.time(20).restart(true); //force initialization up front to improve runtime performance thereafter
tl.eventCallback("onUpdate", updateScrubber);
//the function below is a bit advanced and it handles the flapping cape. It leverages MorphSVGPlugin to do some heavy lifting, but ultimately relies on some custom trigonometry applied in an onUpdate to manipulate the points on a sine wave.
function waveSVG(e, vars) {
var _placeDot = function (x, y, vars) {
var _createSVG = function(type, attributes) {
var element = document.createElementNS("http://www.w3.org/2000/svg", type),
reg = /([a-z])([A-Z])/g,
p;
for (p in attributes) {
element.setAttributeNS(null, p.replace(reg, "$1-$2").toLowerCase(), attributes[p]);
}
return element;
},
dot = _createSVG("circle", {cx:x, cy:y, r:vars.size || 6, fill:vars.color || "red"}),
container = vars.container || document.querySelector("svg");
if (container) {
container.appendChild(dot);
}
return dot;
},
_transformBezier = function(b, matrix) {
var i, x, y;
if (matrix && (matrix.a !== 1 || matrix.b || matrix.c || matrix.d !== 1 || matrix.e || matrix.f)) {
for (var i = 0; i < b.length; i+=2) {
x = b[i];
y = b[i+1];
b[i] = x * matrix.a + y * matrix.c + matrix.e;
b[i+1] = x * matrix.b + y * matrix.d + matrix.f;
}
}
return b;
},
_getLength = function(x, y, x2, y2) {
x = x2 - x;
y = y2 - y;
return Math.sqrt(x * x + y * y);
},
_getTotalLength = function(bezier, start, end) {
var x = bezier[start],
y = bezier[start+1],
length = 0,
i;
for (i = start; i < end; i += 2) {
length += _getLength(x, y, x=bezier[i], bezier[i+1]);
}
return length;
},
_DEG2RAD = Math.PI / 180,
_RAD2DEG = 180 / Math.PI,
_round = function(value) {
return Math.round(value * 1000) / 1000;
},
bezier = _transformBezier(MorphSVGPlugin.stringToRawPath(e.getAttribute("d"))[0], (debug && e.transform.baseVal.length) ? e.transform.baseVal.consolidate().matrix : null),
start = (vars.start || 0) * 2,
end = (vars.end === 0) ? 0 : (vars.end * 2) || (bezier.length - 1),
length = vars.length || 100,
magnitude = vars.magnitude || 50,
proxy = {a:0},
debug = !!vars.debug,
phase = (vars.phase || 0) * _DEG2RAD,
taperStart = vars.taperStart || 0,
taperEnd = vars.taperEnd || 0,
startX = bezier[start],
startY = bezier[start + 1],
changes = [],
bezierLength = 0,
loose = !!vars.loose,//if true, we'll just make the points influence the current positions instead of forcing them strictly onto the wave.
tl = gsap.timeline({repeat: vars.repeat}),
bezierTotalLength, angle, i, x, y, dx, dy, sin, cos, sin2, cos2, m, pathStart, t, negCos, negSin, rotatedStartX;
i = bezier.length;
while (i--) {
bezier[i] = _round(bezier[i]);
}
if (end >= bezier.length-1) {
end = bezier.length - 2;
}
if (start >= bezier.length) {
start = bezier.length - 1;
}
bezierTotalLength = _getTotalLength(bezier, start, end);
dx = bezier[end] - startX;
dy = bezier[end+1] - startY;
if (vars.angle || vars.angle === 0) {
angle = vars.angle * _DEG2RAD;
} else {
angle = Math.atan2(dy, dx) - Math.PI / 2;
}
sin = Math.sin(angle);
cos = Math.cos(angle);
sin2 = Math.sin(angle + Math.PI / 2);
cos2 = Math.cos(angle + Math.PI / 2);
negCos = Math.cos(-angle);
negSin = Math.sin(-angle);
rotatedStartX = startX * negCos + startY * negSin;
if (debug) { //note: if debug is true, we drop a red dot at the beginning, yellow at the end, blue dots as control points, and purple as anchors.
_placeDot(bezier[start], bezier[start + 1], {container: e.parentNode, color:"red"});
_placeDot(bezier[end], bezier[end + 1], {container: e.parentNode, color:"yellow"});
console.log("waveSVG() angle: ", angle * _RAD2DEG, "degrees. RED dot is start, YELLOW is end.");
}
x = startX;
y = startY;
for (i = start; i <= end; i += 2) {
bezierLength += _getLength(x, y, x=bezier[i], y=bezier[i+1]);
dx = x * negCos + y * negSin; //rotated in the opposite direction
dy = x * negSin + y * negCos;
t = (taperStart && bezierLength < taperStart) ? bezierLength / taperStart : (taperEnd && bezierLength > bezierTotalLength - taperEnd && bezierLength < bezierTotalLength) ? ((bezierTotalLength - bezierLength) / taperEnd) : 1; //taper
m = Math.sin((dx / length) * Math.PI * 2 + phase) * magnitude;
changes.push( {i: i - (start ? 2 : 0), p:dx, a: (dx / length) * Math.PI * 2 + phase, t:t, x: loose ? x - m * sin * t : startX + (dx - rotatedStartX) * cos2 * t, y: loose ? y - m * cos * t : startY + (dx - rotatedStartX) * sin2 * t, smooth: (i % 6 === 0 && i > start && i < end) ? Math.abs( Math.atan2(y - bezier[i-1], x - bezier[i-2]) - Math.atan2(bezier[i+3] - y, bezier[i+2] - x) ) < 0.01 : false} );
if (debug) {
changes[changes.length-1].dot = _placeDot(x, y, {container: e.parenNode, size:3, color: (i % 6) ? "blue" : "purple"});
}
}
//when we're not animating the first point, optimize things by taking out the first x/y and treat them independently so we can merely bezier.join(",") on each update.
if (start) {
pathStart = "M" + bezier.shift() + "," + bezier.shift() + " C";
}
tl.to(proxy, {duration:vars.duration || 3, a:Math.PI * (vars.invertFlow ? -2 : 2), ease:vars.ease || "none", onUpdate:function() {
var l = changes.length,
angle = proxy.a,
node, i, m, x, y, x2, y2, x1, y1, cp, dx, dy, d, a, cpCos, cpSin;
for (i = 0; i < l; i++) {
node = changes[i];
if (node.smooth || i === l - 1 || !changes[i + 1].smooth) {
m = Math.sin(node.a + angle) * magnitude * node.t;
bezier[node.i] = x = _round(node.x + m * sin);
bezier[node.i + 1] = y = _round(node.y + m * cos);
if (node.smooth) { //make sure smooth anchors stay smooth!
cp = changes[i - 1];
m = Math.sin(cp.a + angle) * magnitude * cp.t;
x1 = cp.x + m * sin;
y1 = cp.y + m * cos;
cp = changes[i + 1];
m = Math.sin(cp.a + angle) * magnitude * cp.t;
x2 = cp.x + m * sin;
y2 = cp.y + m * cos;
a = Math.atan2(y2 - y1, x2 - x1);
cpCos = Math.cos(a);
cpSin = Math.sin(a);
dx = x2 - x;
dy = y2 - y;
d = Math.sqrt(dx * dx + dy * dy);
bezier[cp.i] = _round(x + cpCos * d);
bezier[cp.i + 1] = _round(y + cpSin * d);
cp = changes[i - 1];
dx = x1 - x;
dy = y1 - y;
d = Math.sqrt(dx * dx + dy * dy);
bezier[cp.i] = _round(x - cpCos * d);
bezier[cp.i + 1] = _round(y - cpSin * d);
i++;
}
}
}
if (debug) {
for (i = 0; i < l; i++) {
node = changes[i];
node.dot.setAttribute("cx", bezier[node.i]);
node.dot.setAttribute("cy", bezier[node.i + 1]);
}
} else if (start) {
e.setAttribute("d", pathStart + bezier.join(","));
} else {
e.setAttribute("d", "M" + bezier[0] + "," + bezier[1] + " C" + bezier.slice(2).join(","));
}
}});
return tl;
}
Also see: Tab Triggers