Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

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.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg version="1.1" id="heroes" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 viewBox="0 0 864 548" style="enable-background:new 0 0 864 548;" xml:space="preserve">
<style type="text/css">
	.st0{fill:#FFFFFF;}
	.st1{fill:#190A05;}
	.st2{fill:#580D6C;}
	.st3{fill:#EDB69A;}
	.st4{fill:#DE9571;}
	.st5{clip-path:url(#mask_1_);fill:#7D448A;}
	.st6{fill:#7D448A;}
	.st7{fill:#F03A24;}
	.st8{fill:#FECBA0;}
	.st9{fill:#EB2913;}
	.st10{fill:#B81500;}
	.st11{fill:#F2A96D;}
	.st12{fill:#818C94;}
	.st13{fill:#EDA787;}
	.st14{fill:#737373;}
	.st15{fill:#B2C2CC;}
	.st16{clip-path:url(#thorMidMask_1_);fill:#F2D150;}
	.st17{fill:#DB8864;}
	.st18{fill:#8DBE3C;}
	.st19{fill:#709F23;}
	.st20{fill:#9D0812;}
	.st21{fill:#D6BA7D;}
	.st22{fill:#7E6A47;}
	.st23{fill:#D1FFFF;}
	.st24{fill:#86FEFF;}
	.st25{fill:#58EEE8;}
	.st26{fill:#64CAFF;}
	.st27{fill:#2980B9;}
	.st28{fill:#EDB787;}
	.st29{clip-path:url(#capRightMask_1_);fill:#B2C2CC;}
	.st30{clip-path:url(#capLeftMask_1_);fill:#B2C2CC;}
	.st31{clip-path:url(#capMidMask_1_);fill:#FFFFFF;}
	.st32{clip-path:url(#maskMorph_1_);}
</style>
<path id="circle" class="st0" d="M691.7,274.5c0,143.4-116.3,259.7-259.7,259.7S172.3,417.9,172.3,274.5S288.6,14.8,432,14.8
	S691.7,131.1,691.7,274.5z"/>
<path id="blackCircle" class="st1" d="M555,274.5c0,67.9-55.1,123-123,123s-123-55.1-123-123c0-67.9,55.1-123,123-123
	S555,206.6,555,274.5z"/>
<path id="logoRing" class="st0" d="M578,274.7c0,80.5-65.5,146-146,146c-24.4,0-47.4-6-67.7-16.7l10-20.6
	c17.2,9.2,36.8,14.4,57.7,14.4c67.9,0,123.1-55.2,123.1-123.1S499.9,151.7,432,151.7s-123.1,55.2-123.1,123.1
	c0,22.5,6.1,43.5,16.6,61.6l-12,23.5c-17.3-24-27.5-53.4-27.5-85.2c0-80.5,65.5-146,146-146C512.5,128.8,578,194.2,578,274.7z"/>
<path id="logoA" class="st0" d="M456.9,318h-64.8l-47.2,106.2l-52.9-1L455.7,84.8h43.6l-1,198.4l-39.8-37.7v-86l-49.2,116.8h49.2
	v-18.7l46.1,43.3l-47.6,36.6V318z M456.8,350.7h41.3v-35.4L456.8,350.7z"/>
<g id="hawkeye">
	<path id="hawkMask" class="st2" d="M569,390.7c-22.6,29.9-55,52-92.6,61.8H432h-44.3c-37.7-9.8-70-31.9-92.6-61.8
		c-20-74.9-20.1-133.9-17.8-175.9c1.3-2.7,2.6-5.4,4.1-8.1c3.4-6.3,7.2-12.4,11.4-18.2c2.9-4.1,6.1-8.1,9.4-12
		c7.8-9.2,16.6-17.5,26.2-24.8c3.6-2.7,7.3-5.4,11.1-7.8c8.3-5.3,17-10,26.2-13.8c5-2.1,10.1-4,15.4-5.6c16.1-5,33.3-7.8,51.1-7.8
		s34.9,2.7,51.1,7.8c5.2,1.6,10.4,3.5,15.4,5.6c9.2,3.9,17.9,8.5,26.2,13.8c3.8,2.5,7.5,5.1,11.1,7.8c9.6,7.3,18.4,15.6,26.2,24.8
		c3.3,3.8,6.4,7.8,9.4,12c4.1,5.8,7.9,11.9,11.4,18.2c1.4,2.6,2.8,5.3,4.1,8.1C589.1,256.7,589,315.7,569,390.7z"/>
	<path id="hawkFace" class="st3" d="M546.9,317.5c-0.4,39.6-2.8,93.4-17.4,110.7c0,0-0.1,0.1-0.1,0.1c0,0,0,0,0,0.1
		c-6.9,4.8-14.2,9.2-21.9,12.9c-5.4,2.7-10.9,5.1-16.6,7.2c-5.2,1.9-10.5,3.6-16,5h-43h-43c-5.4-1.4-10.8-3.1-16-5
		c-5.7-2.1-11.3-4.5-16.6-7.2c-7.6-3.8-14.9-8.1-21.9-12.9c0,0,0,0,0-0.1c0,0-0.1-0.1-0.1-0.1c-14.5-17.3-17-71.1-17.4-110.7
		c4.4,2.6,9,5.2,14,7.8c16.2,9.3,40.6-2.6,55.8-9.5c16.7-7.6,34-11.2,45.2-11.2s28.5,3.6,45.2,11.2c15.1,6.9,39.6,18.8,55.8,9.5
		C537.9,322.7,542.6,320.1,546.9,317.5z"/>
	<path id="hawkCleft" class="st4" d="M464,444.1c0,0-14.9,1-32,1s-32-1-32-1l25.9-4L432,419l6.1,21.2L464,444.1z"/>
	<g id="hMask">
		<defs>
			<rect id="mask" x="359.8" y="114.5" width="144.5" height="115"/>
		</defs>
		<clipPath id="mask_1_">
			<use xlink:href="#mask"  style="overflow:visible;"/>
		</clipPath>
		<path id="hawkH" class="st5" d="M499.8,130.7V201c-11.9,6.5-24.2,14-35.3,22.8v-33.9h-65v33.9c-11.1-8.8-23.3-16.4-35.3-22.8
			v-70.3c0.4-0.2,0.9-0.4,1.3-0.6c5-2.1,10.1-4,15.4-5.6c6.1-1.9,12.2-3.5,18.6-4.7v42.1h65v-42.1c6.3,1.2,12.5,2.8,18.6,4.7
			c5.2,1.6,10.4,3.5,15.4,5.6C498.9,130.3,499.3,130.5,499.8,130.7z"/>
	</g>
	<path id="hawkRightEar" class="st3" d="M601.9,261.3c-1.1,4.9-4.5,20.8-9,42.1c0.5,8.1,1.3,28.7-0.5,35c-1.1,4.1-8.5,5.3-12.5,2.4
		c3.4-19.4,5.4-37.4,6.5-54.1C593.8,278.4,598.6,270,601.9,261.3z"/>
	<path id="hawkLeftEar" class="st3" d="M277.5,286.6c1.1,16.7,3.2,34.7,6.5,54.1c-4,2.9-11.4,1.7-12.5-2.4c-1.8-6.3-1-26.9-0.5-35
		c-4.4-21.3-7.9-37.1-9-42.1C265.4,270,270.2,278.4,277.5,286.6z"/>
	<path id="hawkMouth" class="st0" d="M486,360c-2.8,6.3-6.2,10.2-11.8,14.9c-7,2.6-13.4,4.2-19.5,5.1c-7.8,1.2-15.1,1.4-22.7,1.4
		s-14.9-0.2-22.7-1.4c-6.1-1-12.5-2.5-19.5-5.1c-5.6-4.7-9-8.6-11.8-14.9c16.2,4.8,40.3,5.8,54,5.8S469.8,364.8,486,360z"/>
	<path id="hawkNose" class="st4" d="M432,304.6v31.6l-16.2-3.8l2-26.2C423.1,305.1,428,304.6,432,304.6z"/>
	<path id="hawkRightWing" class="st6" d="M436.6,259.8c21.4-33.9,67.4-55.9,96.4-69c29-13.1,54.8-44.8,70.2-80.8
		c6.5,13.3,10.6,29.4,12.2,47.3c1.6,17.7,0.9,37.2-2.2,57.2c-2.1,13.6-5.3,27.6-9.5,41.5c-7.5,24.4-25.5,45.5-70.8,69.3
		c-16.2,9.3-40.6-2.6-55.8-9.5c-16.7-7.6-34-11.2-45.2-11.2v-43.2L436.6,259.8z"/>
	<path id="hawkRightEyeHole" class="st3" d="M529.8,241.6c7.1-1.8,10.5,1.6,13.2,6.3c11,23.6-2.5,39.9-2.5,39.9L511,301.2L449.6,282
		l-3.3-11.5C446.3,270.5,497.2,250,529.8,241.6z"/>
	<path id="hawkRightEye" class="st0" d="M528.9,241.8c1.4,8.5,0.9,15.6-1,21.5c-2.5,7.6-7.3,13.2-13.5,16.9
		c-12.7,7.6-30.9,7.4-45.6,0.7c-6.6-3-11.4-8.8-13.5-14.1C471.3,260.7,504.9,248.1,528.9,241.8z"/>
	<path id="hawkRightPupil" d="M474.3,259.7c5.4-2,11.3-4.1,17.4-6.3c3.1,2.1,5.1,5.6,5.1,9.6c0,6.4-5.2,11.5-11.5,11.5
		c-6.4,0-11.5-5.2-11.5-11.5C473.9,261.9,474,260.8,474.3,259.7z"/>
	<path id="hawkLeftWing" class="st6" d="M432,261.4v43.2c-11.2,0-28.5,3.6-45.2,11.2c-15.1,6.9-39.6,18.8-55.8,9.5
		c-45.3-23.8-63.3-44.9-70.8-69.3c-4.2-13.9-7.4-27.8-9.5-41.5c-3.1-20.1-3.8-39.5-2.2-57.2c1.7-17.9,5.7-34,12.2-47.3
		c15.4,36,41.2,67.8,70.2,80.8c29,13.1,75,35,96.4,69L432,261.4z"/>
	<path id="hawkLeftEyeHole" class="st3" d="M417.7,270.5l-3.3,11.5L353,301.2l-29.5-13.3c0,0-13.5-16.3-2.5-39.9
		c2.8-4.7,6.2-8.1,13.2-6.3C366.8,250,417.7,270.5,417.7,270.5z"/>
	<path id="hawkLeftEye" class="st0" d="M408.6,266.9c-2.1,5.3-7,11.1-13.5,14.1c-14.7,6.6-32.9,6.9-45.6-0.7
		c-6.2-3.7-11-9.3-13.5-16.9c-1.9-5.9-2.4-13.1-1-21.5C359.1,248.1,392.7,260.7,408.6,266.9z"/>
	<path id="hawkLeftPupil" d="M390.1,263c0,6.4-5.2,11.5-11.5,11.5c-6.4,0-11.5-5.2-11.5-11.5c0-4,2-7.5,5.1-9.6
		c6.1,2.1,12,4.2,17.4,6.3C390,260.8,390.1,261.9,390.1,263z"/>
</g>
<g id="blackwidow">
	<path id="bwHair" class="st7" d="M570,455c-15.7,6.3-40.5,10.7-72.1,7.6c-17.4-1.7-36.9-5.6-58.1-12.7
		c-55.4,13.6-254.7,43.8-176.2-66.4c-50-2.8-64.1-21.4-66.7-35.1c0-13.5,30-25.5,30-25.5c-27-3-44-27.9-34-42.9
		c7-9.1,32.9,6.7,40.4-15.2C241,243,263.7,137,383,81.9c39.7-17.7,84-13.8,105.8,20.1c46.3-8.6,109.4,16.7,99.7,60
		c-8.5,38,5.6,49.9,25.5,61.4c17.2,10,51.3,13.6,6.2,61.8c31.8-4.8,41.8-1.3,44.8,13.5S674.7,403,570,455z"/>
	<path id="bwFace" class="st8" d="M570,275.1c-6.6,74.6-25.4,126.6-37.9,140.9c-21.1,24-64.5,44-78.8,49.8
		c-2.7,1.1-13.6,2.2-21.3,2.2s-18.6-1.1-21.3-2.2c-14.3-5.8-57.6-25.8-78.8-49.8c-12.6-14.3-31.6-66.9-38.1-142.3
		c11-11.7,26.1-21.9,47.1-27.4c59.2-15.6,126.3-39.5,143.4-82.5c16.9-2.3,38.8,2.6,53.7,31.3C549.2,216.6,525.5,237.2,570,275.1z"/>
	<path id="bwRightEar" class="st8" d="M582,330.5c-1.8,2.8-10.3,13.1-20.6,4.6c2.5-12.5,4.8-26.1,6.6-40.8
		c8.2-12.3,17.5-23.1,22.3-6.8C596,306.9,584,327.3,582,330.5z"/>
	<path id="bwLeftEar" class="st8" d="M302.6,335.1c-10.3,8.5-18.8-1.8-20.6-4.6c-1.3-2.1-7-11.8-9.1-23.7
		c3.1-7.6,7.5-16.1,13.6-24.4c3.1,2.8,6.4,7.3,9.5,11.9C297.8,309.1,300.1,322.7,302.6,335.1z"/>
	<path id="bwMouth" class="st9" d="M470.3,411.3c1.5,0,3-0.1,4.5-0.3c-1.4-2.2-3.1-4.2-4.7-6c-2.6-2.7-5.4-4.9-8.1-6.6
		c-5.4-3.4-10.5-4.9-13.1-4.8c-2.6,0.2-5.5,1.6-8.6,2.8c-2.6,1-5.4,2-8.3,2s-5.7-0.9-8.3-2c-3.1-1.2-6-2.6-8.6-2.8
		c-2.6-0.2-7.7,1.4-13.1,4.8c-2.6,1.6-5.2,3.7-7.7,6.2c-1.9,1.9-3.6,4.1-5.2,6.5c1.5,0.2,3,0.2,4.5,0.3c0,0,0,0,0,0c0,0,0,0,0,0
		c2.3,6.7,6.2,12.4,11.5,16.8c6.8,5.5,15.9,8.8,26.8,8.8c10.9,0,20.1-3.3,26.9-8.8C464.2,423.7,468.1,417.9,470.3,411.3
		C470.4,411.3,470.4,411.3,470.3,411.3C470.4,411.3,470.4,411.3,470.3,411.3z M442.4,407.9l-4-1.8h-6.7h-6.7l-4,1.8l-25.3,1.9
		l12.7-8.7l11.3-0.9l12.1,1.1l12-1.1L455,401l12.7,8.7L442.4,407.9z"/>
	<path id="bwBottomLip" class="st9" d="M470.4,411.3c-5.2,15.2-18.9,25.6-38.4,25.6s-33.2-10.4-38.4-25.6c0,0,0,0,0,0
		c9.3,0.3,16.6-1.3,21.5-0.8c5.6,0.6,16.9,2.2,16.9,2.2c0,0,11.3-1.7,16.9-2.2C453.8,409.9,461.1,411.5,470.4,411.3
		C470.4,411.3,470.4,411.3,470.4,411.3z"/>
	<path id="bwTopLip" class="st10" d="M474.9,411c-11.4,1.1-20.3-1.1-25.9-0.6c-5.6,0.6-16.9,2.2-16.9,2.2s-11.3-1.7-16.9-2.2
		c-5.6-0.6-14.5,1.7-25.9,0.6c8-12.4,21.2-17.7,25.9-17.4c4.8,0.3,10.6,4.8,16.9,4.8s12.1-4.5,16.9-4.8
		C453.7,393.3,466.9,398.6,474.9,411z"/>
	<path id="bwNose" class="st11" d="M447.3,372.8H432h-15.3c0,0-12.5-2.8,1.2-8.1c4.3-1.6,9.2-2.3,14.1-2.3c4.8,0,9.8,0.7,14.1,2.3
		C459.8,370.1,447.3,372.8,447.3,372.8z"/>
	<path id="bwRightEyelash" d="M504.7,282.8c12.3,0.2,35.1-4.5,42.7-9.7c-3.5,5.5-7.1,9.8-11,13.2c9.5,3.1,17.8-2.5,17.8-2.5
		c-4.8,6.7-12.7,8.8-19.7,9.2c7.4,4.2,15.6,3.1,15.6,3.1c-7.1,4.2-15.8,2.2-22-0.3c-2.1,9.4-11.8,20.4-22.1,25.3
		c-19.3,9.1-43.5,1.1-52.7-4.4C455.6,293.9,478.2,282.4,504.7,282.8z"/>
	<path id="bwRightEyebrow" d="M480.2,269.2c12.3-9.9,28.2-18.4,73-1.6c-13.7,0-32.9-9.1-53.4,1c-20.5,10.1-44.4,35.6-57,28.7
		C457.2,295,467.9,279.1,480.2,269.2z"/>
	<path id="bwRightEye" class="st0" d="M497.4,292.1c7.2,0,16.2,0,22.6,0c1.2,1.4,1.5,3.7,0,7.1c-3.9,7.8-9.2,15.1-21.6,19
		c-12.5,3.9-28.1,1.8-39.6-4.5C466.1,292.5,490.2,292.1,497.4,292.1z"/>
	<path id="bwRightPupil" d="M472.7,297.5c1.1-7.5,8.2-12.7,15.7-11.6c7.5,1.1,12.7,8.2,11.6,15.7c-1.1,7.5-8.2,12.7-15.7,11.6
		C476.7,312,471.5,305,472.7,297.5z"/>
	<path id="bwLeftEyelash" d="M410.9,316.6c-9.2,5.5-33.4,13.5-52.7,4.4c-10.3-4.9-20-15.9-22.1-25.3c-6.2,2.5-14.9,4.5-22,0.3
		c0,0,8.3,1.1,15.6-3.1c-7-0.4-14.9-2.5-19.7-9.2c0,0,8.3,5.6,17.8,2.5c-3.9-3.4-7.6-7.7-11-13.2c7.6,5.2,30.4,9.9,42.7,9.7
		C385.8,282.4,408.4,293.9,410.9,316.6z"/>
	<path id="bwLeftEyebrow" d="M421.3,297.2c-12.6,6.9-36.5-18.6-57-28.7c-20.5-10.1-39.7-1-53.4-1c44.7-16.8,60.7-8.2,73,1.6
		C396.1,279.1,406.8,295,421.3,297.2z"/>
	<path id="bwLeftEye" class="st0" d="M405.2,313.7c-11.5,6.3-27.1,8.4-39.6,4.5c-12.5-3.9-17.7-11.2-21.6-19c-1.5-3.5-1.2-5.7,0-7.1
		c6.4,0,15.4,0,22.6,0S397.9,292.5,405.2,313.7z"/>
	<path id="bwLeftPupil" d="M379.8,313.2c-7.5,1.1-14.6-4-15.7-11.6c-1.1-7.5,4-14.6,11.6-15.7c7.5-1.1,14.6,4,15.7,11.6
		C392.5,305,387.3,312,379.8,313.2z"/>
</g>
<g id="thor">
	<path id="thorSpike" class="st12" d="M443.3,101.3h-22.6L432,77.5L443.3,101.3z"/>
	<path id="thorMask" class="st12" d="M603.2,287.9c0,94.5-76.6,171.2-171.2,171.2s-171.2-76.6-171.2-171.2
		c0-22.9,4.5-45.9,12.6-67.7c2-5.3,4.2-10.6,6.6-15.8c2.9-6.3,6.2-12.4,9.7-18.4c2.7-4.6,5.7-9.2,8.7-13.6
		c7.4-10.6,15.7-20.4,24.9-29.3c3.8-3.7,7.8-7.3,11.9-10.7c8.5-7,17.5-13.1,27-18.3c4.3-2.3,8.7-4.5,13.1-6.4
		c17.7-7.6,36.7-11.9,56.5-11.9c4.7,0,9.4,0.2,14,0.7c16.5,1.7,32.3,6.3,47.2,13.3c5.6,2.6,11,5.6,16.3,8.8
		c6.4,4,12.6,8.4,18.4,13.2c3.1,2.5,6.1,5.1,9,7.8c11.3,10.4,21.4,22.3,30.2,35.2c4.3,6.4,8.3,13,11.9,19.8c2.9,5.5,5.6,11.1,8,16.9
		C597.4,235.8,603.2,262,603.2,287.9z"/>
	<path id="thorFace" class="st13" d="M594,342.8l0.1,0.2c-11.9,34.9-34.7,64.8-64.5,85.5c-7,4.9-14.4,9.2-22,13
		c-5.7,2.8-11.6,5.3-17.6,7.5c-6.4,2.3-13,4.2-19.7,5.8c-3.9,0.9-7.8,1.6-11.8,2.3c-8.6,1.3-17.5,2-26.5,2c-9.4,0-18.6-0.8-27.6-2.2
		c-3.9-0.6-7.8-1.4-11.7-2.3c-6.3-1.5-12.4-3.3-18.4-5.4c-6.1-2.2-12.1-4.7-17.9-7.6c-7.7-3.8-15.1-8.1-22-13
		c-29.7-20.7-52.6-50.5-64.5-85.5l0.1-0.2c-6-17.1-9.2-35.6-9.2-55c0-13.8,1.6-27.1,4.7-39.9h68.4h24.6h28.4h23.4h28.6H463h27.5H515
		h27h25h31.5c3.1,12.8,4.7,26.2,4.7,39.9C603.2,307.3,599.9,325.8,594,342.8z"/>
	<path id="thorHelmetLine" class="st14" d="M590.2,219.2H273.8c1.2-3.3,2.6-6.5,4-9.8h308.5C587.6,212.7,588.9,216,590.2,219.2z"/>
	<path id="thorRightEar" class="st13" d="M624.9,283.5c0,0-12.5,60.5-29,74.5l-8.8,1.1c9.9-21.7,15.5-45.8,15.5-71.2
		c0-3.8-0.1-7.6-0.4-11.4c1.7-0.7,3.5-1.4,5.2-1.8L624.9,283.5z"/>
	<path id="thorLeftEar" class="st13" d="M276.3,359.1l-8.8-1.1c-16.5-14-29-74.5-29-74.5l17.5-8.8c1.7,0.4,3.5,1.1,5.2,1.8
		c-0.2,3.8-0.4,7.5-0.4,11.4C260.8,313.3,266.4,337.4,276.3,359.1z"/>
	<path id="thorRightWing" class="st15" d="M563.4,170.1l4.2-30.6l57.7-47.8c5.1-4.2,12.7-3.5,16.9,1.6l2.1,2.6
		c4.2,5.1,3.5,12.7-1.6,16.9l-16.9,14c4.6-1.5,9.8-0.2,13,3.7l2.1,2.6c4.2,5.1,3.5,12.7-1.6,16.9l-16.9,14c4.6-1.5,9.8-0.2,13,3.7
		l2.1,2.6c4.2,5.1,3.5,12.7-1.6,16.9l-23.3,19.3l7.8,51.7l-17.9,5.1v19c0,5-3.4,9.1-7.6,9.1s-7.6,0-7.6,0v-74
		C585.8,204.4,571.6,181.8,563.4,170.1z"/>
	<path id="thorLeftWing" class="st15" d="M276.1,217.3v74c0,0-3.4,0-7.6,0s-7.6-4.1-7.6-9.1v-19l-17.9-5.1l7.8-51.7L227.5,187
		c-5.1-4.2-5.8-11.8-1.6-16.9l2.1-2.6c3.2-3.9,8.5-5.2,13-3.7l-16.9-14c-5.1-4.2-5.8-11.8-1.6-16.9l2.1-2.6c3.2-3.9,8.5-5.2,13-3.7
		l-16.9-14c-5.1-4.2-5.8-11.8-1.6-16.9l2.1-2.6c4.2-5.1,11.8-5.8,16.9-1.6l57.7,47.8l4.2,30.6C292,181.8,277.8,204.4,276.1,217.3z"
		/>
	<g id="thorBeardMask">
		<defs>
			<rect id="thorMidMask" x="269" y="241.3" width="325.3" height="232.7"/>
		</defs>
		<clipPath id="thorMidMask_1_">
			<use xlink:href="#thorMidMask"  style="overflow:visible;"/>
		</clipPath>
		<path id="thorBeard" class="st16" d="M570.5,247.9l-6.3,111.4l-43.9,42.5l-29.4-55.5l-59-3.9l-59.2,3.9l-29.4,55.5l-43.9-42.5
			l-6.3-111.4h-18l4.3,126.7c10.1,23.2,57.8,66.8,84.1,84.3c12,8,28.1,9,68.4,9s56.4-1,68.4-9c26.3-17.5,74-61.2,84.1-84.3
			l4.3-126.7H570.5z M451.1,406l-7.2-11.5h-12.2h-12.2l-7.2,11.5l-45.8,12l23-55.4l38.5-5.4l3.8-5.9l3.6,5.9l38.5,5.4l23,55.4
			L451.1,406z"/>
	</g>
	<path id="thorMouth" d="M473.5,381.7l-10-0.9l-16-0.9l-15.8-0.4l-15.8,0.4l-16,0.9l-10,0.9l9.2-8.2l11.1-0.9l12.2-0.4h9.2h9.2
		l12.2,0.4l11.1,0.9L473.5,381.7z"/>
	<path id="thorNose" class="st17" d="M424.7,269.9v63.8h-14.3l7.2-50.9L424.7,269.9z"/>
	<path id="thorRightEye" class="st0" d="M529.6,265.1c0.5,8-0.7,14.6-3.2,19.9c-3.3,6.8-8.7,11.4-15.2,14.1
		c-13.4,5.6-31.4,3.2-45.3-4.7c-5.9-3.4-10.9-7.7-14.6-12.9L529.6,265.1z"/>
	<path id="thorRightEyebrow" d="M446.2,275l88-23l10.9,21.4l-14-8.6l-85.4,17.9l-6.8-12.9L446.2,275z"/>
	<path id="thorRightPupil" d="M485.5,268c6,0,10.9,4.9,10.9,10.9c0,6-4.9,10.9-10.9,10.9s-10.9-4.9-10.9-10.9
		C474.6,272.8,479.5,268,485.5,268z"/>
	<path id="thorLeftEye" class="st0" d="M412.4,281.6c-3.7,5.2-8.8,9.5-14.6,12.9c-13.9,7.9-31.9,10.3-45.3,4.7
		c-6.5-2.7-11.9-7.4-15.2-14.1c-2.5-5.3-3.8-11.9-3.2-19.9L412.4,281.6z"/>
	<path id="thorLeftPupil" d="M388.8,278.8c0,6-4.9,10.9-10.9,10.9s-10.9-4.9-10.9-10.9c0-6,4.9-10.9,10.9-10.9
		S388.8,272.8,388.8,278.8z"/>
	<path id="thorLeftEyebrow" d="M424.7,269.9l-6.8,12.9l-85.4-17.9l-14,8.6l10.9-21.4l88,23L424.7,269.9z"/>
</g>
<g id="hulk">
	<path id="hulkMask" d="M581.7,134l18-25.3l-51.3,8l6.8-18.3l-58.8,14.3l18-25.4L432,112.7L451,82l-88,34.7l17.9-25.4l-51.7,21.3
		L326.5,95l-41.6,48.3l-12.6-10.6V166l-11.5-10.7v132.5c0,94.5,76.6,171.2,171.2,171.2s171.2-76.6,171.2-171.2V154.7l26.3-28.7
		L581.7,134z"/>
	<path id="hulkFace" class="st18" d="M578,319.1V221l-35.1,6.5v-19.6l-52.2,16.9v-31l-52.2,36v-35l-52.2,30v-31l-52.2,33.6v-19.6
		L286,229.9v89.3L269.9,343c11.9,34.9,34.7,64.8,64.5,85.5c7,4.9,14.4,9.2,22,13c5.8,2.8,11.7,5.4,17.9,7.6c6,2.1,12.1,4,18.4,5.4
		c3.9,0.9,7.8,1.7,11.7,2.3c9,1.5,18.2,2.2,27.6,2.2c9,0,17.9-0.7,26.5-2c4-0.6,7.9-1.4,11.8-2.3c6.7-1.5,13.3-3.5,19.7-5.8
		c6-2.2,11.9-4.7,17.6-7.5c7.7-3.8,15.1-8.1,22-13c29.7-20.7,52.6-50.5,64.5-85.5L578,319.1z"/>
	<path id="hulkRightEar" class="st18" d="M603.2,287.9c0-1.5,0-3.1-0.1-4.6c2.9-1.5,6-2.8,8.9-3.5l17.5,8.8c0,0-12.5,60.5-29,74.5
		l-15.6,1.9C596.6,341.7,603.2,315.6,603.2,287.9z"/>
	<path id="hulkLeftEar" class="st18" d="M260.8,287.9c0-1.5,0-3.1,0.1-4.6c-2.9-1.5-6-2.8-8.9-3.5l-17.5,8.8c0,0,12.5,60.5,29,74.5
		l15.6,1.9C267.4,341.7,260.8,315.6,260.8,287.9z"/>
	<path id="hulkMouth" class="st0" d="M526,402.4l-23.5-1l-23.5-1l-47-2.1l-47,2.1l-23.5,1l-23.5,1l25.5-37.5l17.1,1.9l17.1,1.9
		l34.3,3.8l34.3-3.8l17.1-1.9l17.1-1.9L526,402.4z"/>
	<path id="hulkNose" class="st19" d="M422.7,295.5v39.6h-18.4l-4.9-24.5L422.7,295.5z"/>
	<path id="hulkRightEye" class="st0" d="M527.1,265.4c1.2,5,1.7,12.7-0.5,20.1c-2.2,7.5-7,14.7-16.5,18.7
		c-9.1,3.9-18.8,4.5-27.6,3.1c-12.1-1.9-22.6-7.6-27.8-13.6L527.1,265.4z"/>
	<path id="hulkRightPupil" d="M490.3,279.8c0.7,1.3,1.1,2.7,1.1,4.2c0,5-4,9-9,9c-4.2,0-7.7-2.9-8.7-6.7L490.3,279.8z"/>
	<path id="hulkRightEyebrow" d="M446.8,283.6l83-37.2l14.3,19.3l-12.7-1.9l-81.3,31.8l-11.4-15.9L446.8,283.6z"/>
	<path id="hulkLeftEye" class="st0" d="M336.3,265.4c-1.2,5-1.7,12.7,0.5,20.1c2.2,7.5,7,14.7,16.5,18.7c9.1,3.9,18.8,4.5,27.6,3.1
		c12.1-1.9,22.6-7.6,27.8-13.6L336.3,265.4z"/>
	<path id="hulkLeftPupil" d="M373.1,279.8c-0.7,1.3-1.1,2.7-1.1,4.2c0,5,4,9,9,9c4.2,0,7.7-2.9,8.7-6.7L373.1,279.8z"/>
	<path id="hulkLeftEyebrow" d="M424.7,279.7l-11.4,15.9L332,263.8l-12.7,1.9l14.3-19.3l83,37.2L424.7,279.7z"/>
</g>
<g id="ironman">
	<path id="ironmanMask" class="st20" d="M603.2,287.9c0,94.5-76.6,171.2-171.2,171.2s-171.2-76.6-171.2-171.2
		c0-23.6,4.8-46.1,13.5-66.6c2.1-5,4.5-9.9,7-14.6c3.4-6.3,7.2-12.4,11.4-18.2c2.9-4.1,6.1-8.1,9.4-12c7.8-9.2,16.6-17.5,26.2-24.8
		c3.6-2.7,7.3-5.4,11.1-7.8c8.3-5.3,17-10,26.2-13.8c5-2.1,10.1-4,15.4-5.6c16.1-5,33.3-7.8,51.1-7.8c3.5,0,7,0.1,10.5,0.3
		c16.8,1,33,4.5,48.1,10c4.1,1.5,8.1,3.1,12.1,4.9c7.4,3.4,14.5,7.2,21.3,11.6c3,1.9,5.9,3.9,8.8,6c7.5,5.5,14.5,11.5,21,18.1
		c3.3,3.4,6.6,6.9,9.6,10.6c5.9,7.1,11.3,14.7,16.1,22.7c2.8,4.8,5.4,9.8,7.8,14.9C597.5,237.8,603.2,262.2,603.2,287.9z"/>
	<path id="ironmanFace" class="st21" d="M573.7,334.4l15.9-10.1c3.1-11.9,4.7-24.4,4.7-37.3c0-64.8-41.6-120.3-100.7-143.5
		l-20.9,2.9c-2.9,10.8-7.3,27.6-7.3,27.6H432h-33.6c0,0-4.4-16.8-7.3-27.6l-20.9-2.9c-59.1,23.2-100.7,78.7-100.7,143.5
		c0,12.9,1.6,25.3,4.7,37.3l15.9,10.1l11.1,44.7c7.3,9.4,15.6,18,24.9,25.6c0-0.1-0.1-0.2-0.1-0.2c15.2,12.5,32.8,22.4,52.1,28.9
		l8.9-14h22.3l3.8-9.9H432h18.8l3.8,9.9h22.3l8.9,14.1c19.4-6.5,37.1-16.4,52.3-28.9c9.1-7.5,17.4-16.1,24.6-25.4L573.7,334.4z"/>
	<path id="ironmanRightEar" class="st20" d="M603.2,287.9c0-14-1.7-27.7-4.9-40.7l16.1,3.5l-2,77.1l-15.6,6.7
		C600.9,319.6,603.2,304,603.2,287.9z"/>
	<path id="ironmanLeftEar" class="st20" d="M260.8,287.9c0-14,1.7-27.7,4.9-40.7l-16.1,3.5l2,77.1l15.6,6.7
		C263.1,319.6,260.8,304,260.8,287.9z"/>
	<path id="ironmanMouth" class="st22" d="M567.8,358.5c-15.4,12.2-30.4,19.1-36.8,21.8L514.5,355c0,0-22.3,13.6-82.5,13.6
		S349.5,355,349.5,355L333,380.2c-6.4-2.6-21.4-9.5-36.8-21.8l1.5,6.2c17.9,15.8,39.6,23.9,39.6,23.9l15.4-21
		c22.2,8.8,56.8,11.3,79.3,11.3s57.1-2.4,79.3-11.3l15.4,21c0,0,21.8-8.1,39.6-23.9L567.8,358.5z"/>
	<path id="ironmanNose" class="st21" d="M431.7,301.6v28.1h-14.2v-23.8L431.7,301.6z"/>
	<path id="ironmanRightEyeHole" class="st22" d="M447.2,261.4L554,237.3l19.7,30.4l-31.5,30.4l-85.8-0.2l-11.7-27.6H432v-9H447.2z"
		/>
	<path id="ironmanRightEye" class="st0" d="M563.4,266.5L539,290.1l-74.4-0.2l-10-18.7l95-21.4L563.4,266.5z"/>
	<path id="ironmanRightPupil" class="st0" d="M503.4,260.3c0.8,1.5,1.3,3.2,1.5,5c0.6,7.2-4.8,13.6-12,14.2
		c-7.2,0.6-13.6-4.8-14.2-12c0-0.5,0-1,0-1.5L503.4,260.3z"/>
	<path id="ironmanLeftEyeHole" class="st22" d="M432,261.4v9h-12.7L407.5,298l-85.8,0.2l-31.5-30.4l19.7-30.4l106.8,24.1H432z"/>
	<path id="ironmanLeftEye" class="st0" d="M409.3,271.3l-10,18.7l-74.4,0.2l-24.4-23.6l13.7-16.7L409.3,271.3z"/>
	<path id="ironmanLeftPupil" class="st0" d="M360.6,260.3c-0.8,1.5-1.3,3.2-1.5,5c-0.6,7.2,4.8,13.6,12,14.2
		c7.2,0.6,13.6-4.8,14.2-12c0-0.5,0-1,0-1.5L360.6,260.3z"/>
	<g id="ironmanEyeGlow">
		<path class="st23" d="M313.3,246.8l98.1,21.4l-10,21.7l-76.4,0.2l-24.4-23.6L313.3,246.8z M550.7,246.8l-98.1,21.4l10,21.7
			l76.4,0.2l24.4-23.6L550.7,246.8z"/>
		<path class="st24" d="M325,295.1c-1.3,0-2.5-0.5-3.5-1.4l-24.4-23.6c-1.7-1.7-2-4.3-0.7-6.3l12.7-19.7c1.1-1.8,3.2-2.6,5.3-2.2
			l98.1,21.4c1.5,0.3,2.7,1.3,3.4,2.7c0.7,1.4,0.7,2.9,0.1,4.3l-10,21.7c-0.8,1.8-2.6,2.9-4.5,2.9L325,295.1
			C325,295.1,325,295.1,325,295.1z M307,265.8l20,19.3l71.2-0.1l6.1-13.1l-88.6-19.4L307,265.8z"/>
		<path class="st25" d="M325,293.1c-0.8,0-1.5-0.3-2.1-0.8l-24.4-23.6c-1-1-1.2-2.6-0.4-3.8l12.7-19.7c0.7-1,1.9-1.6,3.2-1.3
			l98.1,21.4c0.9,0.2,1.6,0.8,2,1.6s0.4,1.8,0,2.6l-10,21.7c-0.5,1.1-1.5,1.7-2.7,1.7L325,293.1C325,293.1,325,293.1,325,293.1z
			 M304.4,266.1l21.8,21l73.2-0.1l7.6-16.6l-92.4-20.2L304.4,266.1z"/>
		<path class="st26" d="M325,291.6c-0.4,0-0.8-0.2-1-0.4l-24.4-23.6c-0.5-0.5-0.6-1.3-0.2-1.9L312,246c0.3-0.5,1-0.8,1.6-0.7
			l98.1,21.4c0.4,0.1,0.8,0.4,1,0.8c0.2,0.4,0.2,0.9,0,1.3l-10,21.7c-0.2,0.5-0.8,0.9-1.4,0.9L325,291.6
			C325,291.6,325,291.6,325,291.6z M302.5,266.3l23.1,22.3l74.8-0.2l8.8-19.1L314,248.5L302.5,266.3z"/>
		<path class="st24" d="M539,295.1C539,295.1,539,295.1,539,295.1l-76.4-0.2c-1.9,0-3.7-1.1-4.5-2.9l-10-21.7
			c-0.6-1.4-0.6-3,0.1-4.3c0.7-1.4,1.9-2.3,3.4-2.7l98.1-21.4c2-0.4,4.1,0.4,5.3,2.2l12.7,19.7c1.3,2,1,4.6-0.7,6.3l-24.4,23.6
			C541.6,294.6,540.3,295.1,539,295.1z M465.9,285l71.2,0.1l20-19.3l-8.6-13.3l-88.6,19.4L465.9,285z"/>
		<path class="st25" d="M539,293.1C539,293.1,539,293.1,539,293.1l-76.4-0.2c-1.2,0-2.2-0.7-2.7-1.7l-10-21.7
			c-0.4-0.8-0.4-1.8,0-2.6c0.4-0.8,1.2-1.4,2-1.6l98.1-21.4c1.2-0.3,2.5,0.3,3.2,1.3l12.7,19.7c0.8,1.2,0.6,2.8-0.4,3.8l-24.4,23.6
			C540.6,292.8,539.8,293.1,539,293.1z M464.6,287l73.2,0.1l21.8-21l-10.3-15.9l-92.4,20.2L464.6,287z"/>
		<path class="st26" d="M539,291.6C539,291.6,539,291.6,539,291.6l-76.4-0.2c-0.6,0-1.1-0.3-1.4-0.9l-10-21.7
			c-0.2-0.4-0.2-0.9,0-1.3c0.2-0.4,0.6-0.7,1-0.8l98.1-21.4c0.6-0.1,1.2,0.1,1.6,0.7l12.7,19.7c0.4,0.6,0.3,1.4-0.2,1.9l-24.4,23.6
			C539.8,291.5,539.4,291.6,539,291.6z M463.6,288.5l74.8,0.2l23.1-22.3L550,248.5l-95.2,20.8L463.6,288.5z"/>
	</g>
</g>
<g id="cap">
	<path id="capMask" class="st27" d="M603.2,287.9c0,94.5-76.6,171.2-171.2,171.2s-171.2-76.6-171.2-171.2c0-23.6,4.8-46.1,13.5-66.6
		c2.1-5,4.5-9.9,7-14.6c3.4-6.3,7.2-12.4,11.4-18.2c2.9-4.1,6.1-8.1,9.4-12c7.8-9.2,16.6-17.5,26.2-24.8c3.6-2.7,7.3-5.4,11.1-7.8
		c8.3-5.3,17-10,26.2-13.8c5-2.1,10.1-4,15.4-5.6c16.1-5,33.3-7.8,51.1-7.8c3.5,0,7,0.1,10.5,0.3c16.8,1,33,4.5,48.1,10
		c4.1,1.5,8.1,3.1,12.1,4.9c7.4,3.4,14.5,7.2,21.3,11.6c3,1.9,5.9,3.9,8.8,6c7.5,5.5,14.5,11.5,21,18.1c3.3,3.4,6.6,6.9,9.6,10.6
		c5.9,7.1,11.3,14.7,16.1,22.7c2.8,4.8,5.4,9.8,7.8,14.9C597.5,237.8,603.2,262.2,603.2,287.9z"/>
	<path id="capFace" class="st28" d="M515,326.5l-83-25l-83,25c0,0-25.5-11.5-47-25c0,53,15.5,107,32.1,126.8c0,0,0.1,0.1,0.1,0.1
		c0,0,0,0,0,0.1c6.9,4.8,14.2,9.2,21.9,12.9c5.4,2.7,10.9,5.1,16.6,7.2c6.4,2.4,12.9,4.3,19.7,5.9c3.8,0.9,7.7,1.7,11.6,2.3
		c9.1,1.5,18.5,2.3,28,2.3s18.9-0.8,28-2.3c3.9-0.6,7.7-1.4,11.6-2.3c6.7-1.6,13.3-3.6,19.7-5.9c5.7-2.1,11.3-4.5,16.6-7.2
		c7.6-3.8,14.9-8.1,21.9-12.9c0,0,0,0,0-0.1c0,0,0.1-0.1,0.1-0.1c16.6-19.8,32.1-73.8,32.1-126.8C540.5,315,515,326.5,515,326.5z"/>
	<path id="capRightEar" class="st27" d="M603.2,287.9c0-13.8-1.6-27.1-4.7-39.9l18.1,4.7c0,0,1.1,61.7-11.9,79l-8,2.9
		C600.9,319.7,603.2,304.1,603.2,287.9z"/>
	<path id="capLeftEar" class="st27" d="M260.8,287.9c0-13.8,1.6-27.1,4.7-39.9l-18.1,4.7c0,0-1.1,61.7,11.9,79l8,2.9
		C263.1,319.7,260.8,304.1,260.8,287.9z"/>
	<g id="capRightWingMask">
		<defs>
			
				<rect id="capRightMask" x="551" y="115" transform="matrix(-1 4.490263e-11 -4.490263e-11 -1 1155.9303 312.5112)" width="53.9" height="82.5"/>
		</defs>
		<clipPath id="capRightMask_1_">
			<use xlink:href="#capRightMask"  style="overflow:visible;"/>
		</clipPath>
		<path id="capRightWing" class="st29" d="M559.8,136.1l42.7-19.4l-12,69.2l-16,8.2c-6-9.1-12.8-17.6-20.4-25.4v-0.1L559.8,136.1z"
			/>
	</g>
	<g id="capLeftWingMask">
		<defs>
			<rect id="capLeftMask" x="258.5" y="115" width="53.9" height="82.5"/>
		</defs>
		<clipPath id="capLeftMask_1_">
			<use xlink:href="#capLeftMask"  style="overflow:visible;"/>
		</clipPath>
		<path id="capLeftWing" class="st30" d="M303.5,136.1l-42.7-19.4l12,69.2l16,8.2c6-9.1,12.8-17.6,20.4-25.4v-0.1L303.5,136.1z"/>
	</g>
	<g id="capAMask">
		<defs>
			<rect id="capMidMask" x="377.4" y="133" width="109.2" height="108.9"/>
		</defs>
		<clipPath id="capMidMask_1_">
			<use xlink:href="#capMidMask"  style="overflow:visible;"/>
		</clipPath>
		<path id="capA" class="st31" d="M407.5,237l5.7-15.2h36.8l5.7,15.3l26.9-3.3l-38-95.1h-25.4l-37.9,95.1L407.5,237z M431.7,171.7
			l10.6,28.4H421L431.7,171.7z"/>
	</g>
	<path id="capMouth" class="st0" d="M488.4,385.5h-16.5h-20.2h-19.9h-19.9h-20.2H375l15.5-22.2h14H420h11.7h11.7h15.5h14
		L488.4,385.5z"/>
	<path id="capNose" class="st17" d="M431.7,301.6v28.1h-14.2v-23.8L431.7,301.6z"/>
	<path id="capRightEyeHole" class="st28" d="M551.6,251.2l-6.7,38.3L515,301.6L456.6,289l-3.6-7.9l-3.2-7l-3.5-7.6l15-2.2
		L551.6,251.2z"/>
	<path id="capRightEye" class="st0" d="M534.9,253.6c0.2,8.2-1.4,14.9-4.2,20.1c-3.6,6.6-9.2,11-15.8,13.4c-13.6,5-31.6,1.7-45-6.8
		c-6.2-4-11.5-9.1-14.9-15.1L534.9,253.6z"/>
	<path id="capRightPupil" d="M479,261.7l25.1-3.7c0.7,1.6,1.1,3.3,1.1,5.2c0,7.3-5.9,13.1-13.1,13.1s-13.1-5.9-13.1-13.1
		C478.9,262.7,478.9,262.2,479,261.7z"/>
	<path id="capLeftEyeHole" class="st28" d="M417.7,266.5l-3.5,7.6l-3.2,7l-3.6,7.9L349,301.6l-29.9-12.1l-6.7-38.3l90.3,13.1
		L417.7,266.5z"/>
	<path id="capLeftEye" class="st0" d="M329.1,253.6c-0.2,8.2,1.4,14.9,4.2,20.1c3.6,6.6,9.2,11,15.8,13.4c13.6,5,31.6,1.7,45-6.8
		c6.2-4,11.5-9.1,14.9-15.1L329.1,253.6z"/>
	<path id="capLeftPupil" d="M385,261.7l-25.1-3.7c-0.7,1.6-1.1,3.3-1.1,5.2c0,7.3,5.9,13.1,13.1,13.1s13.1-5.9,13.1-13.1
		C385.1,262.7,385.1,262.2,385,261.7z"/>
</g>
<g id="morphClipping">
	<defs>
		<rect id="maskMorph" x="152" y="378.5" width="665" height="63.9"/>
	</defs>
	<clipPath id="maskMorph_1_">
		<use xlink:href="#maskMorph"  style="overflow:visible;"/>
	</clipPath>
	<g id="morphGroup" class="st32">
		<path id="bottomLine" class="st0" d="M809.5,438.1h-650v-2h650V438.1z"/>
		<path id="topLine" class="st0" d="M809.5,384H547.7v-2h261.8V384z M494,381H159.5v2H494V381z"/>
		<path id="morph" class="st0" d="M165.6,405.6c0-6.7,0-8-0.1-9.4c-0.1-1.5-0.7-2.3-2-2.5c-0.6-0.1-1.4-0.2-2.1-0.2
			c-0.6,0-0.9-0.1-0.9-0.4c0-0.3,0.5-0.4,1.4-0.4c2.2,0,5.9,0.1,7.6,0.1c1.5,0,4.9-0.1,7.1-0.1c0.8,0,1.2,0.1,1.2,0.4
			c0,0.4-0.3,0.4-0.9,0.4c-0.6,0-1,0-1.7,0.1c-1.6,0.2-2,1-2.2,2.5c-0.1,1.4-0.1,2.7-0.1,9.4v7.8c0,4.3,0,7.8,0.2,9.7
			c0.2,1.2,0.6,2,2.3,2.2c0.8,0.1,2.1,0.2,3,0.2c0.6,0,0.9,0.1,0.9,0.4c0,0.3-0.5,0.4-1.1,0.4c-3.8,0-7.5-0.1-9.1-0.1
			c-1.3,0-5,0.1-7.3,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4c0.9,0,1.6-0.1,2.1-0.2c1.2-0.2,1.5-0.9,1.7-2.2
			c0.3-1.9,0.3-5.4,0.3-9.7V405.6z M201,420.3c0.1,3.5,0.9,4.6,2,4.9c1,0.3,2.1,0.3,3,0.3c0.6,0,1,0.1,1,0.4c0,0.4-0.5,0.4-1.3,0.4
			c-3.8,0-6.1-0.1-7.2-0.1c-0.5,0-3.3,0.1-6.3,0.1c-0.8,0-1.3,0-1.3-0.4c0-0.3,0.3-0.4,0.9-0.4c0.8,0,1.8,0,2.6-0.2
			c1.5-0.4,1.7-1.6,1.8-5.5l0.5-26.1c0-0.9,0.2-1.5,0.8-1.5c0.6,0,1.2,0.6,2.2,1.4c0.7,0.6,9.6,7.7,18.1,14.1
			c4,3,11.8,9.4,12.8,10.1h0.3l-0.6-19.9c-0.1-2.7-0.6-3.5-2-4c-0.9-0.3-2.3-0.3-3.1-0.3c-0.7,0-0.9-0.1-0.9-0.4
			c0-0.4,0.6-0.4,1.5-0.4c3,0,5.8,0.1,7.1,0.1c0.6,0,2.9-0.1,5.7-0.1c0.8,0,1.3,0,1.3,0.4c0,0.3-0.3,0.4-1,0.4c-0.6,0-1,0-1.7,0.1
			c-1.6,0.4-2.1,1.3-2.2,3.8l-0.6,28c0,1-0.2,1.4-0.8,1.4c-0.6,0-1.3-0.5-2-1c-3.7-2.7-11.1-8.5-17.2-13c-6.4-4.8-12.8-10.2-13.9-11
			h-0.2L201,420.3z M264.9,413.5c0,4.3,0,7.6,0.3,9.4c0.2,1.3,0.5,2.3,2.3,2.4c0.8,0.1,2.1,0.2,2.9,0.2c0.8,0,1,0.1,1,0.4
			c0,0.3-0.4,0.4-1.3,0.4c-3.7,0-7.3-0.1-8.9-0.1s-5.2,0.1-7.4,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4
			c0.9,0,1.6-0.1,2.1-0.2c1.2-0.2,1.5-1.2,1.7-2.4c0.3-1.9,0.3-5.2,0.3-9.4v-7.8c0-6.7,0-8-0.1-9.4c-0.1-1.5-0.6-2.2-2.5-2.5
			c-0.5-0.1-1.5-0.1-2.3-0.1c-0.6,0-1-0.1-1-0.4c0-0.4,0.5-0.4,1.3-0.4c1.5,0,3.2,0,4.7,0c1.5,0,2.9,0.1,3.7,0.1c2.2,0,14,0,15.4,0
			c1.1,0,1.8,0,2.4-0.2c0.3-0.1,0.6-0.3,0.9-0.3c0.2,0,0.4,0.2,0.4,0.4c0,0.3-0.3,0.8-0.5,2c-0.1,0.4-0.2,3.1-0.3,3.6
			c-0.1,0.4-0.2,0.6-0.6,0.6c-0.4,0-0.5-0.2-0.6-0.7c0-0.4,0-1.1-0.3-1.7c-0.4-0.6-1.6-1.3-3.8-1.3l-9-0.1c-0.3,0-0.5,0.1-0.5,0.6
			v11.1c0,0.3,0.1,0.4,0.4,0.4l7.5,0c1,0,1.8,0,2.6,0c1.1,0,1.9-0.2,2.5-0.8c0.3-0.3,0.4-0.4,0.8-0.4c0.2,0,0.3,0.1,0.3,0.4
			c0,0.3-0.3,1.4-0.5,2.8c-0.1,0.9-0.2,2.9-0.2,3.2c0,0.4,0,0.8-0.6,0.8c-0.3,0-0.5-0.3-0.5-0.6c0-0.3-0.1-0.8-0.3-1.4
			c-0.3-0.6-1.2-1.4-3-1.6c-1.5-0.1-7.6-0.1-8.6-0.1c-0.3,0-0.4,0.1-0.4,0.4V413.5z M298.5,405.6c0-6.7,0-8-0.1-9.4
			c-0.1-1.5-0.7-2.3-2-2.5c-0.6-0.1-1.4-0.2-2.1-0.2c-0.6,0-0.9-0.1-0.9-0.4c0-0.3,0.5-0.4,1.4-0.4c2.2,0,5.9,0.1,7.6,0.1
			c1.5,0,4.9-0.1,7.1-0.1c0.8,0,1.2,0.1,1.2,0.4c0,0.4-0.3,0.4-0.9,0.4c-0.6,0-1,0-1.7,0.1c-1.6,0.2-2,1-2.2,2.5
			c-0.1,1.4-0.1,2.7-0.1,9.4v7.8c0,4.3,0,7.8,0.2,9.7c0.2,1.2,0.6,2,2.3,2.2c0.8,0.1,2.1,0.2,3,0.2c0.6,0,0.9,0.1,0.9,0.4
			c0,0.3-0.5,0.4-1.1,0.4c-3.8,0-7.5-0.1-9.1-0.1c-1.3,0-5,0.1-7.3,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4
			c0.9,0,1.6-0.1,2.1-0.2c1.2-0.2,1.5-0.9,1.7-2.2c0.3-1.9,0.3-5.4,0.3-9.7V405.6z M333.9,420.3c0.1,3.5,0.9,4.6,2,4.9
			c1,0.3,2.1,0.3,3,0.3c0.6,0,1,0.1,1,0.4c0,0.4-0.5,0.4-1.3,0.4c-3.8,0-6.1-0.1-7.2-0.1c-0.5,0-3.3,0.1-6.3,0.1
			c-0.8,0-1.3,0-1.3-0.4c0-0.3,0.3-0.4,0.9-0.4c0.8,0,1.8,0,2.6-0.2c1.5-0.4,1.7-1.6,1.8-5.5l0.5-26.1c0-0.9,0.2-1.5,0.8-1.5
			c0.6,0,1.2,0.6,2.2,1.4c0.7,0.6,9.6,7.7,18.1,14.1c4,3,11.8,9.4,12.8,10.1h0.3l-0.6-19.9c-0.1-2.7-0.6-3.5-2-4
			c-0.9-0.3-2.3-0.3-3.1-0.3c-0.7,0-0.9-0.1-0.9-0.4c0-0.4,0.6-0.4,1.5-0.4c3,0,5.8,0.1,7.1,0.1c0.6,0,2.9-0.1,5.7-0.1
			c0.8,0,1.3,0,1.3,0.4c0,0.3-0.3,0.4-1,0.4c-0.6,0-1,0-1.7,0.1c-1.6,0.4-2.1,1.3-2.2,3.8l-0.6,28c0,1-0.2,1.4-0.8,1.4
			c-0.6,0-1.3-0.5-2-1c-3.7-2.7-11.1-8.5-17.2-13c-6.4-4.8-12.8-10.2-13.9-11h-0.2L333.9,420.3z M390.5,405.6c0-6.7,0-8-0.1-9.4
			c-0.1-1.5-0.7-2.3-2-2.5c-0.6-0.1-1.4-0.2-2.1-0.2c-0.6,0-0.9-0.1-0.9-0.4c0-0.3,0.5-0.4,1.4-0.4c2.2,0,5.9,0.1,7.6,0.1
			c1.5,0,4.9-0.1,7.1-0.1c0.8,0,1.2,0.1,1.2,0.4c0,0.4-0.3,0.4-0.9,0.4c-0.6,0-1,0-1.7,0.1c-1.6,0.2-2,1-2.2,2.5
			c-0.1,1.4-0.1,2.7-0.1,9.4v7.8c0,4.3,0,7.8,0.2,9.7c0.2,1.2,0.6,2,2.3,2.2c0.8,0.1,2.1,0.2,3,0.2c0.6,0,0.9,0.1,0.9,0.4
			c0,0.3-0.5,0.4-1.1,0.4c-3.8,0-7.5-0.1-9.1-0.1c-1.3,0-5,0.1-7.3,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4
			c0.9,0,1.6-0.1,2.1-0.2c1.2-0.2,1.5-0.9,1.7-2.2c0.3-1.9,0.3-5.4,0.3-9.7V405.6z M429.3,395.3l-8.7,0.2c-3.4,0.1-4.8,0.3-5.7,1.3
			c-0.6,0.7-0.9,1.2-1,1.6c-0.1,0.4-0.3,0.5-0.6,0.5c-0.4,0-0.5-0.2-0.5-0.7c0-0.7,1.1-4.7,1.2-5.1c0.2-0.6,0.3-0.8,0.7-0.8
			c0.5,0,1,0.4,2.5,0.5c1.7,0.1,3.9,0.2,5.8,0.2h23.1c1.9,0,3.1-0.1,4-0.2c0.9-0.1,1.3-0.2,1.6-0.2c0.4,0,0.5,0.3,0.5,0.9
			c0,0.9-0.2,4-0.2,5.1c-0.1,0.4-0.2,0.7-0.5,0.7c-0.5,0-0.6-0.2-0.6-0.9l-0.1-0.5c-0.1-1.2-1.7-2.4-6.9-2.5l-7.3-0.1v18.2
			c0,4.1,0,7.6,0.3,9.5c0.2,1.2,0.5,2.2,2.3,2.4c0.8,0.1,2.1,0.2,3,0.2c0.6,0,0.9,0.1,0.9,0.4c0,0.3-0.5,0.4-1.1,0.4
			c-3.8,0-7.5-0.1-9.1-0.1c-1.3,0-5,0.1-7.3,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4c0.9,0,1.6-0.1,2.1-0.2
			c1.2-0.2,1.5-1.2,1.7-2.4c0.3-1.9,0.3-5.4,0.3-9.4V395.3z M479,414.8c0-2.4-0.6-3.4-1.3-4.7c-0.4-0.7-8.2-10.5-10.3-12.8
			c-1.5-1.6-2.9-2.8-4-3.2c-0.8-0.3-1.7-0.6-2.4-0.6c-0.5,0-0.9-0.1-0.9-0.4c0-0.3,0.4-0.4,1.1-0.4c1,0,5.4,0.1,7.3,0.1
			c1.2,0,3.6-0.1,6.2-0.1c0.6,0,0.9,0.1,0.9,0.4c0,0.3-0.4,0.3-1.3,0.5c-0.5,0.1-0.8,0.4-0.8,0.8c0,0.4,0.3,0.9,0.7,1.5
			c0.8,1.3,9,12,9.9,13.3c0.6-1.1,7.9-10.8,8.7-12.2c0.6-1,0.8-1.7,0.8-2.3c0-0.4-0.2-0.9-1.2-1.1c-0.5-0.1-1-0.2-1-0.4
			c0-0.3,0.3-0.4,1-0.4c1.9,0,3.8,0.1,5.5,0.1c1.3,0,5.1-0.1,6.2-0.1c0.6,0,1,0.1,1,0.4c0,0.3-0.5,0.4-1.1,0.4
			c-0.6,0-1.7,0.2-2.6,0.5c-1.2,0.4-1.9,1-3.1,2.2c-1.9,1.8-10.1,12.2-11.1,14.1c-0.9,1.6-0.9,3-0.9,4.4v3.6c0,0.7,0,2.6,0.2,4.4
			c0.1,1.3,0.6,2.3,2.4,2.4c0.8,0.1,2.1,0.2,2.9,0.2c0.6,0,0.9,0.1,0.9,0.4c0,0.3-0.5,0.4-1.2,0.4c-3.7,0-7.3-0.1-8.9-0.1
			c-1.5,0-5.1,0.1-7.3,0.1c-0.8,0-1.3-0.1-1.3-0.4c0-0.2,0.3-0.4,0.9-0.4c0.8,0,1.5-0.1,2-0.2c1.2-0.2,1.7-1.2,1.8-2.4
			c0.2-1.9,0.2-3.7,0.2-4.4V414.8z M547.5,393.3c0.2-0.8,0.5-1.2,1-1.2c0.5,0,0.8,0.2,1.6,1.4l15.9,24.7l15.9-25
			c0.5-0.7,0.8-1.1,1.3-1.1s0.9,0.4,1,1.4l5.3,27.1c0.5,2.8,1.1,4.1,2.9,4.5c1.7,0.4,2.9,0.4,3.6,0.4c0.5,0,0.9,0,0.9,0.3
			c0,0.4-0.7,0.5-1.5,0.5c-1.5,0-9.5-0.1-11.8-0.2c-1.3-0.1-1.7-0.2-1.7-0.5c0-0.2,0.2-0.4,0.6-0.5c0.3-0.1,0.5-0.7,0.3-1.9
			l-3.5-19.3H579l-12.7,19.8c-1.3,2.1-1.6,2.5-2.2,2.5s-1.1-0.9-2-2.2c-1.4-2-6-8.8-6.7-10.1c-0.5-0.9-4-6.2-6.1-9.5h-0.2l-3,17.3
			c-0.1,0.8-0.2,1.4-0.2,2.1c0,0.8,0.8,1.2,1.7,1.4c1,0.2,1.9,0.2,2.4,0.2c0.5,0,0.9,0.1,0.9,0.3c0,0.4-0.5,0.5-1.4,0.5
			c-2.4,0-5.1-0.1-6.1-0.1c-1.1,0-3.9,0.1-5.8,0.1c-0.6,0-1-0.1-1-0.5c0-0.2,0.3-0.3,0.9-0.3c0.5,0,0.9,0,1.7-0.1
			c1.6-0.3,2.1-2,2.4-3.5L547.5,393.3z M604.2,409.6c0-7.6,6.6-17.4,24.1-17.4c14.5,0,23.5,6.4,23.5,16.6c0,10.2-9.3,18.2-24.1,18.2
			C610.9,426.9,604.2,417.4,604.2,409.6z M643.6,410.4c0-9.9-7.5-16.1-17.1-16.1c-6.7,0-14.3,2.8-14.3,13.9
			c0,9.2,6.7,16.5,17.9,16.5C634.2,424.7,643.6,423.2,643.6,410.4z M668.6,405.6c0-6.7,0-8-0.1-9.4c-0.1-1.5-0.6-2.2-2.5-2.5
			c-0.5-0.1-1.5-0.1-2.3-0.1c-0.6,0-1-0.1-1-0.4s0.4-0.4,1.3-0.4c3.1,0,6.8,0.1,8,0.1c2,0,6.4-0.1,8.2-0.1c3.7,0,7.6,0.3,10.7,1.9
			c1.6,0.8,4,3.1,4,6.1c0,3.3-1.8,6.3-7.7,9.9c5.2,5,9.2,8.9,12.6,11.7c3.3,2.6,5.7,2.9,6.5,3c0.6,0.1,1.2,0.1,1.6,0.1
			c0.5,0,0.7,0.1,0.7,0.4c0,0.4-0.4,0.4-1.1,0.4h-5.5c-3.3,0-4.7-0.2-6.2-0.8c-2.5-1-4.7-3.1-8-6.5c-2.3-2.4-5-5.5-5.8-6.1
			c-0.3-0.3-0.6-0.3-1-0.3l-5.1-0.1c-0.3,0-0.5,0.1-0.5,0.4v0.6c0,4.1,0,7.6,0.3,9.5c0.2,1.3,0.5,2.3,2.3,2.4
			c0.9,0.1,2.2,0.2,2.9,0.2c0.5,0,0.7,0.1,0.7,0.4c0,0.3-0.4,0.4-1.2,0.4c-3.4,0-7.7-0.1-8.6-0.1c-1.1,0-4.8,0.1-7.1,0.1
			c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4c0.9,0,1.6-0.1,2.1-0.2c1.2-0.2,1.5-1.2,1.7-2.4c0.3-1.9,0.3-5.4,0.3-9.4V405.6z
			 M675.5,409.2c0,0.5,0.1,0.7,0.5,0.8c1.2,0.3,3,0.4,4.4,0.4c2.3,0,3.1-0.2,4.1-0.8c1.7-1,3.4-3,3.4-6.7c0-6.3-5.5-8.1-8.9-8.1
			c-1.5,0-2.5,0-3.1,0.2c-0.4,0.1-0.5,0.3-0.5,0.6V409.2z M721.9,405.6c0-6.7,0-8-0.1-9.4c-0.1-1.5-0.6-2.2-2.5-2.5
			c-0.5-0.1-1.5-0.1-2.3-0.1c-0.6,0-1-0.1-1-0.4s0.4-0.4,1.3-0.4c3.1,0,6.8,0.1,8.4,0.1c2.4,0,5.8-0.1,8.4-0.1
			c7.3,0,9.9,1.9,10.8,2.5c1.3,0.9,2.9,2.9,2.9,5.3c0,6.3-6.1,10.7-14.3,10.7c-0.3,0-0.9,0-1.2,0c-0.3,0-0.7-0.1-0.7-0.4
			c0-0.4,0.4-0.5,1.6-0.5c3.3,0,7.8-2.8,7.8-7.3c0-1.5-0.2-4.4-3.4-6.7c-2.1-1.5-4.5-1.7-5.8-1.7c-0.9,0-1.7,0-2.3,0.2
			c-0.3,0.1-0.5,0.4-0.5,0.8v17.7c0,4.1,0,7.6,0.3,9.5c0.2,1.2,0.5,2.2,2.3,2.4c0.8,0.1,2.1,0.2,3,0.2c0.6,0,0.9,0.1,0.9,0.4
			c0,0.3-0.5,0.4-1.1,0.4c-3.8,0-7.5-0.1-9-0.1c-1.3,0-5,0.1-7.3,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4
			c0.9,0,1.6-0.1,2.1-0.2c1.2-0.2,1.5-1.2,1.7-2.4c0.3-1.9,0.3-5.4,0.3-9.4V405.6z M794.7,406.9c0.2,0,0.3-0.1,0.3-0.3v-0.9
			c0-6.7,0-8-0.1-9.4c-0.1-1.5-0.6-2.2-2.5-2.5c-0.5-0.1-1.5-0.1-2.3-0.1c-0.6,0-1-0.1-1-0.4s0.4-0.4,1.2-0.4c3.1,0,6.8,0.1,8.4,0.1
			c1.4,0,5.1-0.1,7.3-0.1c0.8,0,1.2,0.1,1.2,0.4s-0.3,0.4-1,0.4c-0.5,0-1,0-1.7,0.1c-1.6,0.2-2,1-2.2,2.5c-0.1,1.4-0.1,2.7-0.1,9.4
			v7.8c0,4.1,0,7.6,0.3,9.5c0.2,1.2,0.5,2.2,2.3,2.4c0.8,0.1,2.1,0.2,3,0.2c0.6,0,0.9,0.1,0.9,0.4c0,0.3-0.5,0.4-1.2,0.4
			c-3.8,0-7.5-0.1-9.1-0.1c-1.3,0-5,0.1-7.3,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4c0.9,0,1.6-0.1,2.1-0.2
			c1.2-0.2,1.5-1.2,1.7-2.4c0.3-1.9,0.3-5.4,0.3-9.4v-3.9c0-0.2-0.2-0.3-0.3-0.3h-22.3c-0.2,0-0.3,0-0.3,0.3v3.9
			c0,4.1,0,7.6,0.3,9.5c0.2,1.2,0.5,2.2,2.3,2.4c0.8,0.1,2.1,0.2,3,0.2c0.6,0,0.9,0.1,0.9,0.4c0,0.3-0.5,0.4-1.2,0.4
			c-3.8,0-7.5-0.1-9.1-0.1c-1.3,0-5,0.1-7.3,0.1c-0.8,0-1.2-0.1-1.2-0.4c0-0.2,0.2-0.4,0.9-0.4c0.9,0,1.6-0.1,2.1-0.2
			c1.2-0.2,1.5-1.2,1.7-2.4c0.3-1.9,0.3-5.4,0.3-9.4v-7.8c0-6.7,0-8-0.1-9.4c-0.1-1.5-0.6-2.2-2.5-2.5c-0.5-0.1-1.5-0.1-2.3-0.1
			c-0.6,0-1-0.1-1-0.4s0.4-0.4,1.2-0.4c3.1,0,6.8,0.1,8.4,0.1c1.4,0,5.1-0.1,7.3-0.1c0.8,0,1.2,0.1,1.2,0.4s-0.3,0.4-1,0.4
			c-0.5,0-1,0-1.7,0.1c-1.6,0.2-2,1-2.2,2.5c-0.1,1.4-0.1,2.7-0.1,9.4v0.9c0,0.2,0.2,0.3,0.3,0.3H794.7z"/>
	</g>
</g>
<g id="avengers">
	<path id="S" class="st0" d="M810.8,233.4l-10.2,35h19.2c12.8,0,20.8,7.1,15.9,23.9L816,359.1c-1.9,6.9-9.7,10.4-17,10.4h-58.5
		l9.7-32.7H780c6.6,0,7.6-1.7,9-5.9l8.3-29.1c0.5-1.4,0.5-2.4-1.7-2.4h-18.9c-14.9,0-18.5-8.3-14.9-20.8l19.6-66.8
		c4-12.1,12.5-14.4,21.1-14.4h55.2l-9.2,31h-31.2C814.6,228.4,812,229.6,810.8,233.4z"/>
	<path id="R" class="st0" d="M735.3,287.8c8.8,0,13.7-5.2,15.1-10.2l17.3-58.5c3.3-11.4-1.7-21.8-17-21.8h-65.1l-50.7,172.1h35.7
		l21.5-73.4h11.8c4.3,0,4.7,3.1,3.8,5.9L688,369.5h35.7l18.5-62.7C746,294.5,740.7,288.8,735.3,287.8z M729.6,232.2l-9.5,32
		c-1.7,5.2-4.7,6.6-8.3,6.6h-12.3l13.5-45.7h11.1C729.6,225.1,731,227.7,729.6,232.2L729.6,232.2z"/>
	<path id="E2" class="st0" d="M613.4,296.8h31l9-30.5h-31l11.1-37.9h31.7l9.2-31h-67.7l-50.7,172.1h66.5l11.8-32.7h-32.9
		L613.4,296.8L613.4,296.8z"/>
	<path id="G" class="st0" d="M533.9,266.3l-9,30.5h7.3l-13,44h-12.1c-4.7,0-6.9-1.9-5.4-6.9l29.6-100.4c1.2-4.3,3.1-5.2,6.9-5.2
		h34.8l9.2-31h-57c-11.4,0-19.2,3.3-23,16.1l-36.5,124c-6.6,22.7,6.9,32,23,32h22l-3.8,13.5l39.8-20.1l28.4-96.6L533.9,266.3
		L533.9,266.3z"/>
	<path id="N" class="st0" d="M460.5,197.4l-19.6,66.5l-1.2-66.5h-30.5l-50.7,172.1h33.6l20.6-68.6l3.1,68.6h28.6L495,197.4
		L460.5,197.4L460.5,197.4z"/>
	<path id="E1" class="st0" d="M336.9,296.8h31l9-30.5h-31l11.1-37.9h31.7l9.2-31h-67.7l-50.7,172.1h66.5l11.8-32.7h-32.9
		L336.9,296.8L336.9,296.8z"/>
	<path id="V" class="st0" d="M321.5,197.4L246,369.5h-38.6l22.7-172.1h35.7l-13.7,81l32.7-81H321.5z"/>
	<path id="A" class="st0" d="M157.7,339.5H98.2l-43.3,97.5l-48.5-1l150.3-310.8h40l-0.9,182.2l-36.6-34.6v-79L114,301.1h45.2v-17.2
		l42.3,39.8l-43.7,33.6V339.5z M195.7,369.5V337l-37.9,32.5H195.7z"/>
</g>
</svg>

              
            
!

CSS

              
                * {
  box-sizing: border-box;
}

body {
  background-color: #190a05;
  height: 100vh;
  width: 100%;
  padding: 7%;
  margin: 0;
  overflow: hidden;
  display: flex;
  align-content: center;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#avengers, #morphGroup, #cap, #ironman, #hulk, #thor, #blackwidow, #hawkeye, #blackCircle, #circle, #logoA, #logoRing {
  overflow: visible;
  opacity: 0;
  visibility: hidden;
}
              
            
!

JS

              
                var master = new TimelineMax({delay:0.5, repeat:-1, repeatDelay:0.5}),
  mt = 0.85,
  es = Power2.easeOut,
  el = Back.easeOut.config(1.7);

function intro() {
  var tl = new TimelineMax({id:"intro"});
  tl.set("#avengers", {autoAlpha:1})
    .set("#maskMorph", {x:"-=660"})
    .set("#morphGroup", {autoAlpha:1})
    .staggerFrom("#avengers path", 0.6, {
              scale:6, 
              cycle:{
                y:["-=300", "+300"]
              }, 
              autoAlpha:0, 
              ease:es, 
              transformOrigin: "center center"}, -0.10, 0.15)
  .to("#maskMorph", 1.4, {x:0, easing:es}, 0.5);
  return tl;
}

function avengersToCap() {
  var tl = new TimelineMax({id:"avengersToCap"});
  tl.set("#cap", {autoAlpha:1})
    .to("#maskMorph", 0.85, {y:"+=100", ease:Power1.easeIn}, .15)
    .staggerTo("#V, #E1, #N, #G, #E2, #R, #S", 0.25, {x:"+=260", y:"-=400", rotation:45, ease:Power1.easeIn}, .15, .30)
    .add("lettersout")
    .to("#A", 0.35, {x:"+=320", y:"-=86", rotation:10, scale:0.15, ease:Power1.easeIn}, "lettersout-=0.15")
    .add("captime")
    .from("#capA", 0.35, {scale:0, transformOrigin: "center center", ease:el}, "captime-=0.02")
    .set("#avengers, #morphGroup", {autoAlpha:0, visibility:"hidden"}, "captime")
    .from("#capMask", 0.35, {scale:0, transformOrigin: "center center", ease:el}, "captime+=0.15")
    .from("#capFace", 0.35, {scale:0, transformOrigin: "center center", ease:el}, "captime+=.8")
    .set("#circle", {visibility:"visible"}, "captime+=1")
    .to("#circle", 2, {autoAlpha:1}, "captime+=1")
    .staggerFrom("#capLeftPupil, #capLeftEye, #capLeftEyeHole, #capRightPupil, #capRightEye, #capRightEyeHole, #capNose, #capMouth, #capLeftWing, #capRightWing, #capLeftEar, #capRightEar", 0.35, {scale:0, transformOrigin: "center center", ease:el}, -0.1, "captime+=1.5");
  return tl;
}

function capToIronman() {
  var tl = new TimelineMax({id:"capToIronman"});
  tl.set("#ironmanEyeGlow", {autoAlpha:0})
    .to("#capMask", mt, {morphSVG:"#ironmanMask", fill:"#9D0812"}, 0)
    .to("#capFace", mt, {morphSVG:"#ironmanFace", fill:"#D6BA7D"}, 0)
    .to("#capLeftPupil", mt, {morphSVG:"#ironmanLeftPupil", fill:"#FFFFFF"}, 0)
    .to("#capLeftEye", mt, {morphSVG:"#ironmanLeftEye", fill:"#FFFFFF"}, 0)
    .to("#capLeftEyeHole", mt, {morphSVG:"#ironmanLeftEyeHole", fill:"#7E6A47"}, 0)
    .to("#capRightPupil", mt, {morphSVG:"#ironmanRightPupil", fill:"#FFFFFF"}, 0)
    .to("#capRightEye", mt, {morphSVG:"#ironmanRightEye", fill:"#FFFFFF"}, 0)
    .to("#capRightEyeHole", mt, {morphSVG:"#ironmanRightEyeHole", fill:"#7E6A47"}, 0)
    .to("#capNose", mt, {morphSVG:"#ironmanNose", fill:"#D6BA7D"}, 0)
    .to("#capMouth", mt, {morphSVG:"#ironmanMouth", fill:"#7E6A47"}, 0)
    .to("#capLeftEar", mt, {morphSVG:"#ironmanLeftEar", fill:"#9D0812"}, 0)
    .to("#capRightEar", mt, {morphSVG:"#ironmanRightEar", fill:"#9D0812"}, 0)
    .to("#capMidMask", mt, {y:'-=105'}, 0)
    .to("#capLeftMask, #capRightMask", mt, {y:'+=80'}, 0)
    .set("#ironman", {autoAlpha:1})
    .set("#cap", {autoAlpha:0})
    .add("expression")
    .to("#ironmanEyeGlow", 0.07, {autoAlpha:1, repeat:2, yoyo:true}, "expression+=0.25")
    .add("reset")
    .to("#ironmanEyeGlow", 0.75, {scale:1.02, transformOrigin: '50% 50%'}, "reset")
    .to("#ironmanEyeGlow", 0.5, {autoAlpha:0}, "reset+=0.75");
  return tl;
}

function ironmanToHulk() {
  var tl = new TimelineMax({id:"ironmanToHulk"});
  tl.to("#ironmanMask", mt, {morphSVG:"#hulkMask", fill:"#000000"}, 0)
    .to("#ironmanFace", mt, {morphSVG:"#hulkFace", fill:"#8DBE3C"}, 0)
    .to("#ironmanLeftPupil", mt, {morphSVG:"#hulkLeftPupil", fill:"#000000"}, 0)
    .to("#ironmanLeftEye", mt, {morphSVG:"#hulkLeftEye", fill:"#FFFFFF"}, 0)
    .to("#ironmanLeftEyeHole", mt, {morphSVG:"#hulkLeftEyebrow", fill:"#000000"}, 0)
    .to("#ironmanRightPupil", mt, {morphSVG:"#hulkRightPupil", fill:"#000000"}, 0)
    .to("#ironmanRightEye", mt, {morphSVG:"#hulkRightEye", fill:"#FFFFFF"}, 0)
    .to("#ironmanRightEyeHole", mt, {morphSVG:"#hulkRightEyebrow", fill:"#000000"}, 0)
    .to("#ironmanNose", mt, {morphSVG:"#hulkNose", fill:"#709F23"}, 0)
    .to("#ironmanMouth", mt, {morphSVG:"#hulkMouth", fill:"#FFFFFF"}, 0)
    .to("#ironmanLeftEar", mt, {morphSVG:"#hulkLeftEar", fill:"#8DBE3C"}, 0)
    .to("#ironmanRightEar", mt, {morphSVG:"#hulkRightEar", fill:"#8DBE3C"}, 0)
    .set("#hulk", {autoAlpha:1})
    .set("#ironman", {autoAlpha:0})
    .add("expression")
    .to("#hulkLeftEyebrow", 0.15, {rotation:"+=5", transformOrigin: '10% 100%', ease:es}, "expression+=0.5")
    .to("#hulkLeftPupil", 0.25, {y:"+=3", rotation:"+=5", ease:es}, "expression+=0.5")
    .to("#hulkRightEyebrow", 0.15, {rotation:"-=5", transformOrigin: '90% 100%', ease:es}, "expression+=0.5")
    .to("#hulkRightPupil", 0.25, {y:"+=4", rotation:"-=5", ease:es}, "expression+=0.5")
    .to("#hulkNose", 0.25, {y:"-=2"}, "expression+=0.5")
    .to("#hulkMouth", 0.09, {y:"-=8", scaleY:"0.8", transformOrigin: '50% 0'}, "expression+=0.5")
    .add("reset")
    .to("#hulkLeftEyebrow", 0.25, {rotation:"-=5", ease:es}, "reset+=0.35")
    .to("#hulkLeftPupil", 0.25, {y:"-=3", rotation:"-=5", ease:es}, "reset+=0.35")
    .to("#hulkRightEyebrow", 0.25, {rotation:"+=5", ease:es}, "reset+=0.35")
    .to("#hulkRightPupil", 0.25, {y:"-=4", rotation:"+=5", ease:es}, "reset+=0.35")
    .to("#hulkNose", 0.25, {y:"+=2"}, "reset+=0.35")
    .to("#hulkMouth", 0.25, {y:"+=8", scaleY:"1"}, "reset+=0.35")
    .set("#hulkLeftEyebrow, #hulkRightEyebrow, #hulkMouth", {transformOrigin: '0 0'});
  return tl;
}

function hulkToThor() {
  var tl = new TimelineMax({id:"hulkToThor"});
  tl.to("#hulkMask", mt, {morphSVG:"#thorMask", fill:"#818C94"}, 0)
    .to("#hulkFace", mt, {morphSVG:"#thorFace", fill:"#EDA787"}, 0)
    .to("#hulkLeftPupil", mt, {morphSVG:"#thorLeftPupil"}, 0)
    .to("#hulkLeftEye", mt, {morphSVG:"#thorLeftEye"}, 0)
    .to("#hulkLeftEyebrow", mt, {morphSVG:"#thorLeftEyebrow"}, 0)
    .to("#hulkRightPupil", mt, {morphSVG:"#thorRightPupil"}, 0)
    .to("#hulkRightEye", mt, {morphSVG:"#thorRightEye"}, 0)
    .to("#hulkRightEyebrow", mt, {morphSVG:"#thorRightEyebrow"}, 0)
    .to("#hulkNose", mt, {morphSVG:"#thorNose", fill:"#DB8864"}, 0)
    .to("#hulkMouth", mt, {morphSVG:"#thorMouth", fill:"#000000"}, 0)
    .to("#hulkLeftEar", mt, {morphSVG:"#thorLeftEar", fill:"#EDA787"}, 0)
    .to("#hulkRightEar", mt, {morphSVG:"#thorRightEar", fill:"#EDA787"}, 0)
    .set("#thor", {autoAlpha:1})
    .set("#hulk", {autoAlpha:0})
    .add("hilites")
    .from("#thorSpike", mt, {y:"+=20", ease:el}, "hilites")
    .from("#thorHelmetLine", mt, {scaleX:0, transformOrigin: '50% 50%', ease:es}, "hilites")
    .from("#thorMidMask", mt, {y:"-=230"}, "hilites")
    .to("#thorLeftPupil", 0.15, {y:"+=13", ease:es}, "hilites+=0.25")
    .to("#thorRightPupil", 0.15, {y:"+=13", ease:es}, "hilites+=0.3")
    .from("#thorLeftWing", 0.35, {scale:0, transformOrigin: "70% 100%", ease:es}, "hilites+=0.65")
    .to("#thorLeftEyebrow", 0.35, {rotation:"+=5", y:"+=3", transformOrigin: "50% 50%", ease:es}, "hilites+=0.75")
    .to("#thorLeftPupil", 0.15, {x:"-=15", y:"-=17", ease:es}, "hilites+=0.85")
    .to("#thorRightPupil", 0.15, {x:"-=15", y:"-=12", ease:es}, "hilites+=0.9")
    .from("#thorRightWing", 0.35, {scale:0, transformOrigin: "30% 100%", ease:es}, "hilites+=1")
    .to("#thorLeftEyebrow", 0.35, {rotation:"-=5", y:"-=3", ease:es}, "hilites+=1.15")
    .to("#thorRightEyebrow", 0.35, {rotation:"-=5", y:"+=3", transformOrigin: "50% 50%", ease:es}, "hilites+=1.15")
    .to("#thorLeftPupil", 0.15, {x:"+=30", y:"+=6", ease:es}, "hilites+=1.2")
    .to("#thorRightPupil", 0.15, {x:"+=30", y:"-=4", ease:es}, "hilites+=1.15")
    .add("reset")
    .to("#thorRightEyebrow", 0.35, {rotation:"+=5", y:"-=3", ease:es}, "reset+=0.25")
    .to("#thorLeftPupil", 0.25, {x:0, y:0, ease:es}, "reset+=0.30")
    .to("#thorRightPupil", 0.25, {x:0, y:0, ease:es}, "reset+=0.35")
    .set("#thorLeftEyebrow, #thorRightEyebrow", {transformOrigin: '0 0'});
  return tl;
}

function thorToBlackWidow() {
  var tl = new TimelineMax({id:"thorToBlackWidow"});
  tl.to("#thorMask", mt, {morphSVG:"#bwHair", fill:"#F03A24"}, 0)
    .to("#thorFace", mt, {morphSVG:"#bwFace", fill:"#FECBA0"}, 0)
    .to("#thorLeftPupil", mt, {morphSVG:"#bwLeftPupil"}, 0)
    .to("#thorLeftEye", mt, {morphSVG:"#bwLeftEye"}, 0)
    .to("#thorLeftEyebrow", mt, {morphSVG:"#bwLeftEyebrow"}, 0)
    .to("#thorLeftWing", mt, {morphSVG:"#bwLeftEyelash", fill:"#000000"}, 0)
    .to("#thorRightPupil", mt, {morphSVG:"#bwRightPupil"}, 0)
    .to("#thorRightEye", mt, {morphSVG:"#bwRightEye"}, 0)
    .to("#thorRightEyebrow", mt, {morphSVG:"#bwRightEyebrow"}, 0)
    .to("#thorRightWing", mt, {morphSVG:"#bwRightEyelash", fill:"#000000"}, 0)
    .to("#thorNose", mt, {morphSVG:"#bwNose", fill:"#F2A96D"}, 0)
    .to("#thorMouth", mt, {morphSVG:"#bwTopLip", fill:"#B81500"}, 0)
    .to("#thorBeard", mt, {morphSVG:"#bwMouth", fill:"#EB2913"}, 0)
    .to("#thorLeftEar", mt, {morphSVG:"#bwLeftEar", fill:"#FECBA0"}, 0)
    .to("#thorRightEar", mt, {morphSVG:"#bwRightEar", fill:"#FECBA0"}, 0)
    .to("#thorSpike", mt, {y:"+=20", ease:el}, 0)
    .to("#thorHelmetLine", 0.3, {scaleX:0, autoAlpha:0, ease:es}, 0)
    .set("#blackwidow", {autoAlpha:1})
    .set("#thor", {autoAlpha:0})
    .set("#bwMouth", {autoAlpha:0})
    .add("expression")
    .to("#bwTopLip", 0.15, {scaleX:0.7, scaleY:1.2, transformOrigin: '50% 100%', ease:es}, "expression+=0.5")
    .to("#bwBottomLip", 0.15, {scaleX:0.7, scaleY:1.2, y:"-=1", transformOrigin: '50% 0%', ease:es}, "expression+=0.5")
    .to("#bwLeftEyebrow", 0.15, {y:"-=6", rotation:"-7", ease:es, transformOrigin: '30% 100%'}, "expression+=0.5")
    .to("#bwRightEyebrow", 0.15, {y:"-=6", rotation:"7", ease:es, transformOrigin: '70% 100%'}, "expression+=0.5")
    .to("#bwLeftEyelash, #bwRightEyelash, #bwLeftEye, #bwRightEy, #bwLeftPupil, #bwRightPupil", 0.15, {scaleY:"0.95", ease:es, transformOrigin: '50% 0%'}, "expression+=0.5")
    .add("kiss")
    .to("#bwTopLip", 0.05, {scaleX:0.8, scaleY:1.5, ease:es}, "kiss")
    .to("#bwBottomLip", 0.05, {scaleX:0.8, scaleY:1.5, ease:es}, "kiss")
    .to("#bwTopLip", 0.15, {scaleX:0.7, scaleY:1.2, ease:es}, "kiss+=0.15")
    .to("#bwBottomLip", 0.15, {scaleX:0.7, scaleY:1.2, ease:es}, "kiss+=0.15")
    .add("reset")
    .to("#bwLeftEyebrow, #bwRightEyebrow", 0.2, {y:0, rotation:0, ease:es}, "reset")
    .to("#bwLeftEyelash, #bwRightEyelash, #bwLeftEye, #bwRightEye, #bwLeftPupil, #bwRightPupil", 0.15, {scaleY:"1", ease:es}, "reset")
    .to("#bwTopLip", 0.25, {scaleX:1, scaleY:1, ease:es}, "reset")
    .to("#bwBottomLip", 0.25, {scaleX:1, scaleY:1, y:0, ease:es}, "reset");
  return tl;
}

function blackWidowToHawkeye() {
  var tl = new TimelineMax({id:"blackWidowToHawkeye"});
  tl.to("#bwHair", mt, {morphSVG:"#hawkMask", fill:"#580D6C"}, 0)
    .to("#bwFace", mt, {morphSVG:"#hawkFace", fill:"#EDB69A"}, 0)
    .to("#bwLeftPupil", mt, {morphSVG:"#hawkLeftPupil"}, 0)
    .to("#bwLeftEye", mt, {morphSVG:"#hawkLeftEye"}, 0)
    .to("#bwLeftEyebrow", mt, {morphSVG:"#hawkLeftEyeHole", fill:"#EDB69A"}, 0)
    .to("#bwLeftEyelash", mt, {morphSVG:"#hawkLeftWing", fill:"#7D448A"}, 0)
    .to("#bwRightPupil", mt, {morphSVG:"#hawkRightPupil"}, 0)
    .to("#bwRightEye", mt, {morphSVG:"#hawkRightEye"}, 0)
    .to("#bwRightEyebrow", mt, {morphSVG:"#hawkRightEyeHole", fill:"#EDB69A"}, 0)
    .to("#bwRightEyelash", mt, {morphSVG:"#hawkRightWing", fill:"#7D448A"}, 0)
    .to("#bwNose", mt, {morphSVG:"#hawkNose", fill:"#DE9571"}, 0)
    .to("#bwTopLip", mt, {morphSVG:"#hawkMouth", fill:"#FFFFFF"}, 0)
    .to("#bwBottomLip", mt, {morphSVG:"#hawkCleft", fill:"#DE9571"}, 0)
    .to("#bwLeftEar", mt, {morphSVG:"#hawkLeftEar", fill:"#EDB69A"}, 0)
    .to("#bwRightEar", mt, {morphSVG:"#hawkRightEar", fill:"#EDB69A"}, 0)
    .set("#hawkeye", {autoAlpha:1})
    .set("#blackwidow", {autoAlpha:0})
    .add("expression")
    .from("#mask", 0.5, {y:"+=110", ease:es}, "expression")
    .to("#hawkCleft", 0.15, {y:"-=4", ease:es, fill:"#cf794f"}, "expression+=0.5")
    .to("#hawkMouth", 0.15, {y:"-=4", scaleY:0.6, ease:es}, "expression+=0.5")
    .to("#hawkNose", 0.15, {scaleY:"0.85", ease:es, transformOrigin: '50% 0%'}, "expression+=0.5")
    .to("#hawkCleft", 0.15, {x:"-5", rotation:"5", ease:es, transformOrigin: '50% 50%'}, "expression+=0.75")
    .to("#hawkCleft", 0.15, {x:"5", rotation:"-5", ease:es})
    .to("#hawkCleft", 0.15, {x:"-4", rotation:"4", ease:es})
    .to("#hawkCleft", 0.15, {x:"4", rotation:"-4", ease:es})
    .to("#hawkCleft", 0.15, {x:"-3", rotation:"3", ease:es})
    .to("#hawkCleft", 0.15, {x:"3", rotation:"-3", ease:es})
    .to("#hawkCleft", 0.15, {x:"-2", rotation:"2", ease:es})
    .to("#hawkCleft", 0.15, {x:"2", rotation:"-2", ease:es})
    .to("#hawkCleft", 0.15, {x:"0", rotation:"0", ease:es})
    .add("reset")
    .to("#hawkCleft", 0.5, {y:"0", fill:"#DE9571", ease:el}, "reset+=0.1")
    .to("#hawkMouth", 0.5, {y:"0", scaleY:1, ease:el}, "reset+=0.1")
    .to("#hawkNose", 0.5, {scaleY:"1", ease:el}, "reset+=0.1");
  return tl;
}

function outro() {
  var tl = new TimelineMax({id:"outro"});
  tl.set("#logoRing", {visibility:"visible"})
    .set("#logoA, #blackCircle", {autoAlpha:1})
    .from("#blackCircle", 0.5, {scale:0, transformOrigin: '50% 50%', ease:es}, 0)
    .to("#circle", 0.5, {scale:0.56, transformOrigin: '50% 50%', ease:es}, 0)
    .to("#hawkeye", 0.25, {autoAlpha:0}, 0)
    .add("logoTime")
    .set("#logoRing", {autoAlpha:1}, "logoTime")
    .to("#circle", 0.35, {autoAlpha:0}, "logoTime")
    .set("#blackCircle", {autoAlpha:0}, "logoTime+=0.35")
    .from("#logoA", 1, {autoAlpha:0, scale:8, transformOrigin: '50% 50%', ease:Power4.easeOut}, 0);
  
  return tl;
}

master.add( intro() )
  .add( avengersToCap(), "+=0.5")
  .add( capToIronman(), "+=0.7" )
  .add( ironmanToHulk() )
  .add( hulkToThor(), "+=0.5" )
  .add( thorToBlackWidow(), "+=0.5" )
  .add( blackWidowToHawkeye(), "+=0.5" )
  .add( outro(), "+=0.5" );

GSDevTools.create();
              
            
!
999px

Console