cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

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.

            
              <div class="container">

<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In  -->
<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<defs>
</defs>
<path id="exclamationM" fill="#88ce02" d="M283.9,348.3l-5.9-117c10.5-7.6,25.2-11.4,44.2-11.4l2.4,3.2
	l-9.3,125.3c-2.1,0.7-4.6,1.2-7.3,1.5c-2.8,0.3-5.6,0.4-8.6,0.4c-2.8,0-5.6-0.1-8.4-0.4C288.2,349.5,285.9,349,283.9,348.3z "/>  
<path id="capeBlack" fill="none"  fill-rule="evenodd" clip-rule="evenodd" d="M345,219.7c-34.1,11.9-68,14.8-107.7,39.3
	c-9.5,5.9-29.3,19-33.2,44.2c7.3-8.1,19.3-17.1,34.7-25.8c7,4.4,10.2,15,11.3,25.7c1.7,17.3,10.4,26.4,32.6,25.9
	c23-0.6,29.8,12.8,36.2,28.4c12.2-59.9,32-71.5,44.6-81.8C390.5,253.9,357.4,215.3,345,219.7z"/>
<path id="heroBlack" fill="none" fill-rule="evenodd" clip-rule="evenodd" d="M391.4,400.7c-4-2.1-10.1-3.2-17.9-8.8
	c-2.1-1.5-4.7-2.6-5.2-3.8s-0.5-7.9-0.3-13.7c0.1-4.2,1.1-9.2,1.9-13.1c0.1-0.2,0.3-0.7,0.2-1.1c0.2-1.2,0.4-2.2,0.6-3.1
	c0.6-3.8-0.7-3.7-2.5-3.4c0.3-1.4,0.7-2.8,1-4.3c3.3-6,1.8-11.5,1.8-11.5c7.8-9.9,3.8-30.9,2.1-38.2c6,2.8,9,1.7,9,1.8
	c0,0,0.1,0,0.1-0.1c0,0,0,0,0,0c4.8-2.7,7.3-10.6,7.3-10.6c0,0,0,0,0,0c7.4-7.3,11-18.3,2.5-25.4c2-5.7-0.6-10.3-2-12
	c1.7-4.2,2-11-3.5-16.3c-1.4-1.3-2.9-2.2-4.5-2.8c-1.9-2.9-2.3-4.1-5.4-3.4c-1.3-1.6-1.6-2.8-4.6-1.7c0,0-1-2.1-2.6-2.7
	c-0.6-0.2-1.2-0.2-1.7-0.1c-2.1-1.3-4-1.4-5.5-1.1c-1.4-0.6-1.3-0.7-1.4-4c-0.1-1.8-0.1-4.2-0.3-6.5c0.3-2.9,1-9.6,1.3-12.7
	c0.3-3.4,0.4-8.9-1.1-11.2c-3.6-5.3-20.7-4.7-23.9-0.3c-1.1,1.5-1.9,11.2-1.1,16.2c0,0,0.3,3.3,0.9,5.9c0,0.2,0,0.4-0.1,0.6
	c0,0.1,0,0.1,0,0.2c0,0.3-0.1,0.5-0.1,0.8c-0.2,1.9-0.5,4.1-0.9,5.8c-0.1,0.5-1.8,0.8-3.9,1.4c-0.5-0.2-1-0.3-1.5-0.4
	c-2.2-0.6-3.6,1.2-5.8,2.4c-0.6-0.4-3.5-1.7-5-0.8c-1.5,0.9-2.5,1.8-4.2,2.5c-0.8-0.3-2-0.9-3.7-0.2c-1.6,0.6-5.1,2.1-7.5,5.4
	c-2.4,2.1-4.1,5.1-4.3,8.9c-1.9,0.3-6.4,0.5-8.6,8.5c-1.7,6.2-2.6,7.4-5.5,10.5c-1.9,2.2,0.2,6.7,1.5,9.9
	c4.7,11.1,19.5,12.2,29.4,20.6c-0.1,1.2,0,2.6,0.6,3.7c0.7,1.6,3.5,3.9,3.5,3.9c-0.5,0.5-0.3,1.6-0.3,1.6c2,2.2,5.2,2.3,5.2,2.3
	c-4.1,11.7-7.6,24.7-4.3,38.5c-3.2,4.4-6.8,7.3-8.3,13.1c-0.7,1.7-1.2,3.8-1.5,6.1c0,0,0,0.1,0,0.1c-0.1,0.6-0.1,1.4-0.2,2.3
	c-0.1,0.9-0.1,1.7-0.1,2.6c-0.2,5.7-0.2,13.6-0.3,18.4c-0.2,6.3-0.3,7.2-0.8,8.2s-1.1,1.6-1.7,4.4c-0.6,2.8-1.8,3.6-3,5.9
	c-1.9,3.6-1.5,7.6,0.4,9.5s7.3,4.5,14.5,3.6c7.2-0.9,8.3-1.3,7.1-8.3c-0.2-1-1.9-5.6-1.1-7.5s-1-5.2-0.6-5.4s0.9-2.8,0.9-4.1
	s-0.1-7.5,1.3-10.8c0.6-1.4,1.9-4.5,3.2-7.7c3-4.9,3.8-8.4,4.1-10.9c0.5-2.1,0.8-5.3,0.6-8.9c0.5-0.7,2.7-2.6,2.9-6.1
	c0,0,5.9-3.1,10.2-10.6c1.5,5,2.8,8.3,2.6,11.6c-4.7,3.7-6.5,6.5-7.1,9.2c-0.8-0.4-0.9-0.5-2.2-0.1c-1.9,0.6-0.5,12.6,1.5,17.3
	s2.9,7.5,3.8,12.7c0.8,5.2-1.8,11.5-2.8,14.4c0,0-1.5,4.4,1.5,7.2l0,0.5c0,0,0.3,0,0.7,0.1c3.5,2.3,16.1,1.6,21.6,1.6
	c5.6,0,14.2,2,19.6,1c0.4-0.1,0.8-0.2,1.2-0.3l0.3,0l0.2-0.2C394.4,406,395,402.6,391.4,400.7z M380,283.4c-1.3,0.8-3.4,0.4-5.7,0.3
	c-1.1-0.1-2.2,0.6-3,1.4c0.1-1.3,0.2-2.6,0.3-3.5c0-4,0.8-7.5,1.8-10.5c0.7,0.7,1.7,1.2,3.1,1.5C373.7,278.7,379.3,281,380,283.4z
	 M314.4,262.5c0.9-0.3,2.2-0.9,3.5-1.8c3.6,4.2,7.5,6.9,11.3,9.3c0.8,3.2,1,5.4,1.8,9.6l-0.4,0c-0.2,1.2-0.3,2-0.3,3
	c-2.3-0.8-4.9-1.1-6-1.1c0,0,0,0,0,0C316,271.4,317.7,267.6,314.4,262.5z"/>
<path id="qMark" fill="#88ce02" d="M330.3,232.7c17.2-10.3,35.1-15.4,53.5-15.4c18.6,0,32.7,4.5,42.2,13.4c9.5,9,14.2,20.7,14.2,35.3
	c0,11.7-2.9,21.9-8.8,30.5c-5.9,8.6-14.6,16-26.1,22.2l-16,8.5l-2.7,20.2c-2.1,0.9-4.5,1.5-7.2,1.7c-2.7,0.3-5.4,0.4-8.3,0.4
	c-3,0-5.9-0.1-8.5-0.4c-2.7-0.3-5.1-0.8-7.2-1.7l-2.4-39.7l3.2-4l14.9-6.7c9.1-4.4,15.6-8.9,19.6-13.3c4-4.4,6-9.2,6-14.4
	c0-4.4-1.8-8.3-5.5-11.6c-3.6-3.3-8.8-4.9-15.6-4.9c-4.1,0-8.7,0.7-13.7,2.1c-5.1,1.4-10.6,3.9-16.6,7.5c-2-1.4-3.8-3.3-5.6-5.6
	c-1.8-2.3-3.3-4.8-4.7-7.5c-1.3-2.7-2.4-5.5-3.3-8.4C331,238.2,330.4,235.4,330.3,232.7z "/>
  <path id="qDot" fill="#88ce02" d="M351.6,371.4c6-2.8,12.7-4.3,20-4.3
	c3.2,0,6.2,0.2,8.9,0.7c2.8,0.4,6.3,1.6,10.5,3.6c2.1,4.1,3.2,9.3,3.2,15.7c0,6.6-1.1,11.8-3.2,15.7c-3.6,2-6.7,3.1-9.6,3.6
	c-2.8,0.4-6.1,0.7-9.9,0.7c-8.3,0-15-1.4-20-4.3c-1.8-3.7-2.7-9-2.7-15.7C348.9,380.4,349.8,375.1,351.6,371.4z"/>  

  <path id="exclamationDot" fill="#88ce02" d="M279.7,371.4c5.7-3,12.3-4.5,20-4.5c3.4,0,6.3,0.2,8.9,0.7c2.6,0.4,6.1,1.7,10.5,3.9
	c2.5,5,3.5,10.2,3.2,15.7c0.5,4.8-0.5,9.9-3.2,15.4c-4.1,2.1-7.5,3.4-10.2,3.9c-2.8,0.4-5.8,0.7-9.2,0.7c-7.6,0-14.3-1.5-20-4.5
	c-1.8-3.4-2.7-8.5-2.7-15.4C277,380,277.9,374.8,279.7,371.4z"/>
<g id="heroFullGroup">
	<path d="M233.1,285.8c-6.6,3.1-24,17.1-27.5,21.3c-3.4,4.1-4.6-2.3-1-13.1c2.9-8.7,10.1-20.5,22.2-30.5
		c7.1-5.9,22.8-14.3,32.3-19.1c1.9-1,27-11.7,49.5-16.9c2-0.5-2.3,3.2-3,5.3c-3.4,9.8-70.6,51.9-70.6,51.9L233.1,285.8z"/>
	<path d="M327.7,404.4c1.2,7,0.2,7.5-7.1,8.3c-7.2,0.9-12.6-1.8-14.5-3.6c-2-1.8-2.3-5.9-0.4-9.5c1.2-2.3,2.4-3.2,3-5.9
		c0.6-2.8,1.2-3.4,1.7-4.4s0.6-1.8,0.8-8.2c0.2-6.3,0.1-18.3,0.7-23.2c0.6-5.1,23,2.3,23,2.3s-5.3,13.2-6.7,16.4s-1.3,9.5-1.3,10.8
		c0,1.3-0.5,3.9-0.9,4.1s1.4,3.5,0.6,5.4C325.8,398.8,327.5,403.4,327.7,404.4z"/>
	<path d="M336.2,206.7c-0.8-5,0-14.6,1.1-16.2c3.3-4.4,20.4-5,23.9,0.3c1.5,2.3,1.4,7.8,1.1,11.2c-0.3,3.4-1.1,11-1.3,13.4
		c-0.2,1.8-18.8,4.6-23-0.3C336.8,213.9,336.2,206.7,336.2,206.7z"/>
	<path d="M374.2,391.9c7.8,5.6,13.9,6.8,17.9,8.8c4,2.1,2.9,6-3.7,7.2c-5.4,1-14-1.1-19.6-1s-18.4,0.7-21.7-1.7
		c-3.9-2.7-2.2-7.7-2.2-7.7c1-2.9,3.7-9.2,2.8-14.4c-0.8-5.2-1.8-8.1-3.8-12.7c-2-4.7-3.4-16.6-1.5-17.3c1.9-0.6,1.4-0.1,3.6,0.6
		c2.3,0.6,5,1.3,10,1.3s10.6-0.8,12.6-1.2c1.9-0.4,3.5-0.7,2.8,3.3c-0.7,4-2.6,11.5-2.7,17.3c-0.1,5.8-0.1,12.5,0.3,13.7
		C369.5,389.3,372.1,390.4,374.2,391.9z"/>
	<g>
		<g>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#88CE02" d="M346.5,219.6c-14.3,12.3-41.8,15.7-82.6,31.4
				c-10.4,4-38.4,16.1-45.2,28.6c22.6-13.1,31.1,4.9,32.8,23.5c1.7,17.3,10.4,26.4,32.6,25.9c23-0.6,29.8,12.8,36.2,28.4
				c12.2-59.9,32-71.5,44.6-81.8C392,253.7,358.9,215.1,346.5,219.6z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#88CE02" d="M346.5,219.6c-34.1,11.9-68,14.8-107.7,39.3
				c-9.5,5.9-29.3,19-33.2,44.2c14.5-16.1,48-36.2,89-49c20.7-6.5,35.8-10.7,54.2-17.8C347.6,228,347.6,224.8,346.5,219.6z"/>
		</g>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M390.1,290.4c0,0-2.5,8.4-7.4,11.1c0.1,0-3.7,1.3-10.9-2.8
			c-2.1-1.2-3.6-5.2-3.5-6.4c0.1-3.1,2-4.5,2-4.5s2.1-3.5,4.5-3.3c2.5,0.1,6.6,0.5,7.9-0.7C384,282.6,390.4,286.3,390.1,290.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M337.4,209.1c0,0-0.5,6.6-1.4,10.8c-0.2,0.7-4,1.2-6.9,2.4
			c5.4,15.5,38.2,15.3,42.4,7.7c-2-1.4-6.2-3.6-8.2-4.4c-2-0.8-1.9-0.6-2-4.3c-0.1-3.7-0.4-10.3-0.6-12.1
			C360.5,207.3,340.5,207.3,337.4,209.1z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M338.6,209.1c0,0-0.1,3.8-0.3,7.4c-0.1,1.7-0.3,2.7-0.6,4
			c-0.1,0.8,4.4,3.8,5.7,10.8c6.3,13.9,20.6,7,26.5,0.4c-2.1-1.5-5.4-3.3-9.3-5c-2-0.8-1.1-2.5-1.2-6.1c-0.1-3.7-0.6-9-0.8-10.8
			C358.3,207.9,341.8,207.3,338.6,209.1z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M337.4,209.1c0,0-0.2,2.3-0.5,5.1c1.7,1.7,3.9,4,5.6,5.4c1.2,1,4.1,0.9,6.6,0.9
			c2.4,0,4.4,0.2,5.4-0.2c2.1-1.1,5.1-3.7,6.7-5.6c-0.1-2.4-0.2-4.6-0.4-5.5C360.5,207.3,340.5,207.3,337.4,209.1z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M349.1,219c-1.5,0-3.4-0.1-4.8-0.4c-0.7-0.2-1.2-0.5-1.8-0.8
			c-0.9-0.6-1.8-1.4-2.9-2.2c-2-1.5-2.2-2.4-2.1-2.9c0.9-8.2-0.3-15.1-0.3-15.1s-0.9-3.5,4-4.4c4.9-0.9,7.9-1,7.9-1s3,0,7.9,1
			c4.9,0.9,4,4.4,4,4.4s-1.2,6.9-0.3,15.1c0,0.4-0.1,1.4-2.2,2.9c-1.8,1.4-3.2,2.7-4.7,3C352.5,218.9,350.7,219,349.1,219z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M349.1,189c-8.6,0-10.3,2.4-12.7,5c-0.6,0.6-0.1,4.5,0.7,12.8h1.2
			c0,0-0.8-2.4-0.7-5.1c0.1-2.7,0.7-2.5,0.2-3.3c-0.5-0.7-1.5-2,0.8-3.3c2.3-1.3,6,1,10.3,1.2c4.3-0.1,8.2-2.5,10.4-1.2
			c2.3,1.3,1.2,2.6,0.8,3.3c-0.5,0.7,0.1,0.6,0.2,3.3c0.1,2.7-0.7,5.1-0.7,5.1h1.2c0.8-8.3,1.3-11.9,0.9-12.5
			C359.8,191.3,357.7,189,349.1,189z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M390.1,290.9c0,0-2.4,7.9-7.3,10.6c-1.1-0.5-0.9-1.3-1.8-2.5
			c-0.3-0.4-1.1-0.6-1.5-1c-0.3-0.4-0.3-1.1-0.9-1.5c-0.6-0.5-1-0.2-1.4-0.6c-0.5-0.5-0.6-1.1-1-1.6c-0.3-0.2-1.3-0.4-1.5-0.6
			c-0.6-0.6-6.4-1.9-6.1-3.1c0.5-2,1.6-3.4,1.6-3.4s2.4-3.6,4.9-3.5c2.5,0.1,4.8,0.6,6.1-0.5C382.5,282,390.5,286.7,390.1,290.9z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M373.3,233.8c0,0,8.2-2,13.7,3.4c5.5,5.4,5.2,12.2,3.5,16.3c1.4,1.6,4,6.3,2,12
			c8.6,7.2,4.8,18.4-2.8,25.7c0,0-1.8-6.7-9-7.1c0.2-2.6-6.7-4.7-3.5-11.4c-5-1.2-4.8-4.5-5.6-8.7
			C370.9,259.8,373.3,233.8,373.3,233.8z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M370.4,237.3c0,0,9.5-4.7,15,0.6c5.5,5.4,4,11.4,2.3,15.6
			c1.4,1.6,4.8,6.5,2.7,12.1c-0.5,1.3-3.2,1.3-5.3,4.7c5.2-3,8.4-2.3,9.6,1.6c1.8,5.9-2.2,12.9-5.7,16.7c-0.1-0.1-0.1-0.3-0.2-0.4
			c-0.5,1.9-1.2,5.7-5,9.9c-1.9,2.1-3.5,1.9-5.7,1.3c-2.6-0.7-3.5-1.8-7.2-3.8c-2.1-1.1-1-2.5-0.9-3.8c0-0.2,0.3-0.7,0.6-1.1
			c0.2-0.7,1-1.7,2.2-2.8c0,0,1.7-2.3,4.2-2.2c2.4,0.1,5-0.4,5.7-1.1v0c0-4.5-5.2-4.6-3.4-12.4c0.1-0.4,0.7-1.1,2.8-1.2
			c-3.1-0.6-4.5-0.8-6.8-2.9c-1.5-1.4-2.7-3.2-3.1-5.5C371.6,258.4,370.4,237.3,370.4,237.3z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M343,229.2c-0.7-1.1-4.7-6.2-12.4-8.3c-2.2-0.6-3.6,1.2-5.8,2.4
			c-0.6-0.4-3.5-1.7-5-0.8c-1.5,0.9-2.5,1.8-4.2,2.5c-0.8-0.3-2-0.9-3.7-0.2c-1.6,0.6-5.2,2.2-7.6,5.6c-1.6,5.6,27.4,1.4,27.4,1.4
			L343,229.2z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#88CE02" d="M343.3,229.2c-4.2-1.4-3.4-6.2-12.7-7c-1.8-0.2-2.9,1.3-4.3,2.3
			c0.7,0.7,1.3,1.7,1.6,2.7c-1.1-1.4-3.2-3-5.3-3.4c-1.9-0.4-3.2,1.1-5.3,2.1c0.4,0.4,0.8,1,1.3,1.8c-1.9-1.2-3.1-1.5-5.5-0.6
			c-1.6,0.6-4.9,2-7.4,5.4c-1.6,5.6,26.1-0.7,26.1-0.7L343.3,229.2z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M367.6,231.3c0,0,0-1.5-0.1-2.7c0-0.3-1-1-1-1.2l-0.2-0.3c0,0,2-1.1,3.7-0.5
			c1.6,0.6,2.6,2.7,2.6,2.7c3-1,3.3,0.1,4.6,1.7c3.1-0.7,3.5,0.5,5.4,3.4c0,0-2.3-0.3-6.8,0.3C371.2,235.3,367.6,231.1,367.6,231.3z
			"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#88CE02" d="M367.1,230.6c0,0,0.8-0.7,0.5-0.8c1.4-0.7,3.3-1.6,4.3,0.7
			c3-1,3.4,0.4,4.8,2c3.6-1.7,3.8,0.3,4.2,1.3c-1.1,0-2.9,0.1-5.1,0.4C371.2,234.8,367,230.4,367.1,230.6z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M323.1,227.4c0,0,7.4,2.6,13.6,2.2c6.2-0.5,16.8-1,22.6,2.4c0,0,5.9-2,11.3-0.6
			c5.4,1.4,15.4,10.8,12.4,20.6c-0.2,0.7-2,1.6-3.8,2.3c0,0,1,4.4-0.8,8c-1.8,3.4-5.9,10.2-5.9,19.5l0,0c-0.2,1.5-0.4,4.8-0.6,6.3
			c-10.1-0.4-25.7-4.1-40.9-3.8c0.1-1.7,0.2-2.7,0.5-4.4l0.4,0c-0.8-4.2-1.1-6.5-1.8-9.6c-5-3.2-10.1-6.7-14.5-13.6
			C311,249.6,323.1,227.4,323.1,227.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M373.1,297.2c0,0,8,28.7-1.5,40.7c0,0,1.5,5.5-1.8,11.5
			c-0.5,2.6-1.2,4.9-1.6,7.5c-1.7,10.8-4.5,15.2-5.3,32.4l-7.8-0.2c0,0-0.9-12.4-3.6-19c-1.5-3.7-7.7-8.8-7.4-13.9
			c0.2-3.9,1.1-7.2,7.6-12.3c0.5-7.5-7-14.6-5.9-42.5L373.1,297.2z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M370.7,296.1c2.1,13.2,6.9,32.7-1.8,42.3
			c0.4,1.9,0.6,4.4,0.1,7.3c-0.3,1.6-0.7,3.2-1.5,5c-1.2,3-1.7,7.7-2.2,10.3c-1.7,10.8-1.7,11.2-2.5,28.4l-7.8-0.2
			c0,0-0.9-12.4-3.6-19c-1.5-3.7-4.7-7-5-12.1c-0.2-3.9,2.4-11.6,8.9-11.4c-0.4-15.7-7.6-12.5-9.5-45.2L370.7,296.1z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M323.1,227.4c0,0,2.8,0.9,6,1.2c3.1,0.3,6.5,0,9.5-0.2
			c6.2-0.5,15-1.2,20.8,2.2c0,0,3.3-1,6.7-0.8c1.6,0.1,3.1,1.4,4.9,1.9c5.7,1.5,11.2,10.9,8.6,19.4c-0.2,0.7-2.1,0.1-4.1,0.6
			c0.3,1.8,0.7,6-1.5,10.4c-2.2,4.4-5,10-4.5,21c-13.5-0.6-19.6-1.5-33.1-2.1c-1.2-4.7-1.9-9.6-2.1-12c1.9-1,2.9-1.7,4.3-3.2
			c-3.9,0.6-5.4,0.4-7.8-0.9c-2.4-1.3-6.5-5.4-8.5-8.2c-0.2-0.3-1.7,4-4.9,4.1c-1.1-1.7,3.7-6.5,2.9-8.2
			C317,245.9,323.1,227.4,323.1,227.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M371.8,285.3c0,0,0.3,4.6,0.3,5.9c0,1.3,1,5.1,1.2,7c-1.5,2.4-7.6,8-18.8,10
			c-11.1,2.3-25.9-15.2-25.9-15.2c0.5-1.7,1.6-6.7,2.6-9.2c0.1-0.3,0.4-0.9,0.5-1.1C332.5,281,371.8,285.3,371.8,285.3z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M369,285.7c0.1,3.2,0.6,5.6,0.9,7.7c0.6,3.8,1.7,6.2,1.7,8.6
			c0,7.5-9.9,6.2-18.1,6.5c-11.1,2.3-20.5-15.2-20.5-15.2c0.8-3,1.3-6.3,2.5-9.2l0,0c0.1-1.5,0.4-3.5,0.6-4.4
			c15.8,0,26.9,0.9,33.4,1.6C369.4,282.7,369.2,285.2,369,285.7L369,285.7z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M356.6,302.4c0,0-6.9-15.2-27.5-10.7c-5,13.8-11.5,29.7-7.3,46.9
			c-4.3,5.8-9.2,9.1-9.2,19.8c0,10.8,0.6,12.6,0.6,12.6l15.1,0.8c0,0,5-6.3,6.9-13.2c0.6-2,1-5.5,0.7-9.5c0.5-0.7,2.7-2.6,2.9-6.1
			c0,0,7.3-3.9,11.7-13.4C354.5,321.1,353.5,313.8,356.6,302.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M356.6,302.4c-0.3-1.4-5.6-15.5-24.7-11.2
			c-11.3,30-7.1,42.4-5.4,47.9c-7.6,9.7-11.1,11.7-9.6,31.4l10.1,0c4.6-7.4,5.7-10,5.9-19.7c0-0.4-1.5,0.7-2.4,2.1
			c0.8-4,3-4.8,4.7-7.2c0.8-1.1,1.4-2.6,1.5-4.6c9-6.1,12.4-13.7,14.3-21.6C352.3,313.7,354.2,304.8,356.6,302.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M324.5,281.5c0,0,3.5,0.1,6.5,1.2c3,1.1,3,1.7,4.2,3c1.2,1.4,4,3.3,3.5,5.2
			c-0.3,1-0.9,1.3-1.9,2.2c-0.4,0.4-3.2,3.5-3.9,3.9c-0.4,0.3-0.9,0.6-1.3,0.9c-0.4,0.2-1.5,1.1-1.9,1.3c-1.3,0.7-2.2,1-3.6,0.9
			c0,0-3.2-0.1-5.2-2.3c0,0-0.2-1.1,0.3-1.6c0,0-2.8-2.3-3.5-3.9s-0.7-3.7-0.3-4.9C317.7,286.2,322.7,282.9,324.5,281.5z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M327.8,407.4l-0.4,3.2c0,0-1.1,1.5-9.9,1.3c-8.8-0.2-11.1-2.8-11.9-4.3l-0.5-3.4
			c0,0,1.7-2.4,2.1-2.4c2.8,0.3,12.6,4.1,19.3,5.1C327.1,407.1,327.3,407.3,327.8,407.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M346.6,400.8c0,1.5-0.1,1.4-0.1,2.9c1.6,1.2,5.4,1.8,12.8,1.6
			c10.8-0.3,20.7,3.3,32.8,1.2l0.1-2.3l-1.1-0.2l-43-3.5L346.6,400.8z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M356,405.3c1,0,2.1,0,3.3,0c7-0.2,13.6,1.2,20.7,1.7c3.8-0.2,8.5-1,8-3.7
			l-36.7-3.1C349,402.6,350.7,404.7,356,405.3z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M313.8,350.9c1.2,0.7,9,5.4,21.8,4.8c-0.3,2.4-0.1,7.3-5.8,15.7
			c-2.8,4.1-5.3,11.4-5.8,20.5c0.1,2.1,1.3,3.8-0.3,6.5c0.5,1.6,2.5,5.1,3.6,7.1c1,2,1.6,4.4-5.4,4.5c-6.9,0.1-18.2-0.7-16.7-6
			c0.8-2.9,2.9-5.8,3.2-7c0.3-1.2,0.2-4.6,2.5-7c1.9-6.4,1.3-12.7,0.8-18.5C311.3,365.6,311.2,355.8,313.8,350.9z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M325.8,245.4c9.2-12.3,1.5-22.1-13.3-19.1c-5.9,1.2-11.9,5.3-12.3,12.8
			c-1.9,0.3-6.4,0.5-8.6,8.5c-1.7,6.2-2.6,7.4-5.5,10.5c-1.9,2.2,0.2,6.7,1.5,9.9c4.7,11.1,19.6,12.2,29.5,20.6
			c3.4-0.9,6.8-4.6,7.9-7.1c-8.4-10-6.6-13.9-9.9-19C318.7,261.2,327,256.2,325.8,245.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M324,244.7c0.5-0.7,1.4-2.4,1.9-3.1c0.1-0.2,1.6,2.4,1.7,2.2
			c3.6-5.7,4.4-14,0.4-14.8c-0.9-0.2-2.6-0.5-4-1c-2.5-0.9-5-0.9-9.1-0.1c-5.7,1.1-11.3,5.2-11.4,11.1c0,0.4,4,1.6,5.2,6.3
			c-1.9-2.7-5.3-5.7-9.4-3.1c-4.2,2.7-2,8.9-7.8,15.4c-1.9,2.2-1.6,4.8,0.4,9.9c3.3,8.2,19.3,12.6,28,20.3c2.1-0.8,3.5-2.9,4.5-4.5
			c-5.8-6.1-8.1-11.8-9.9-15.9c-2-4.8-4.3-7.5-8.9-11.2c2.4,0.9,4.1,1.7,5.2,2.5c1.2,0.8,2.8,0.8,4.4,0.4
			C320.7,257.4,323.7,249.6,324,244.7z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M380.3,246.8c-0.3,4.9-4,2.4-6,1.5c-3.8-1.6-7.8-2.8-12.3-2.9
			c-4.5,0-10.4,0.3-15.4,1.7c-6.9,1.9-9,1.8-12.1,0.2c-3.1-1.6-8.6-5.8-8.6-5.8s-0.2,1.3,1.2,3c1.7,2.1,5.4,4.6,10.5,6.4
			c2.4,0.8,4.4,0.3,6.6-0.2c11.4-2.9,23.7-3.4,33.9,2.9c0.5,0.3,2.3-0.5,3.1-1.7C382.2,250.2,380.3,246.8,380.3,246.8z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#001423" d="M321.5,296.1c1.1,0.6,2.3,1,3.7,2.2c0,0-1.1,0-1.7-0.5
			c-0.6-0.4-1.9-1.5-2.1-1.6C321.4,296.1,321.4,296.1,321.5,296.1z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M358.8,193.4c-0.3-1.2-3.2-3.3-9.9-3.3c-7.1,0-9.2,2.2-9.3,3.3
			c-0.1,0.4-0.5,4.5-0.6,6.2c0,0,0,2.1,0.1,5.2c0.1,2.1,0.6,3.3,0.9,5.9c0.3,2.8,1.1,4.7,2.5,6.9c0.6,0.4,1.2,0.7,1.8,0.9
			c2.5,0.6,7.1,0.6,9.6,0c1.5-0.3,3.2-2.9,3.7-5c0.5-2.7,1-4.7,1.1-6.4c0.2-1.7,0.4-5.5,0.5-6.5
			C359.6,198.2,358.9,193.8,358.8,193.4z"/>
		<path d="M345.2,353.4c0,0,6.9,3,23.8,0.4c0,0-4.8,24.1-2.6,36c0,0,2.1,3.1,18.5,9.1c0,0,7.3,1.9,6.9,5.4c0,0,0.2,0.8-8.5,0.6
			c-8.8-0.2-17.1-1.8-22.9-1.8c-5.8,0-12,0.2-13.1-1.4c-1.1-1.6,0.2-5.6,1.9-7.9c1.8-2.4,1.3-4.2,1.2-8.7
			C350.2,373.6,341.4,361.6,345.2,353.4z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#88CE02" d="M343.8,355.6c-0.9,1.2,0.1,6.1,1.4,10.9
			c1.3,4.8,4.2,7.7,4.9,15.5s0.8,8.8-1.4,13.4c-2.2,4.6-2.9,8.7,4.9,8.8c7.7,0.1,11.8-0.1,19.5,1c7.7,1.1,10.5,1.5,14.8,0.9
			c4.3-0.6,5.2-2.1,3.3-3.3c-1.9-1.3-9.3-2.7-12.6-5.2c-3.1-2.4-11.9-6.2-12-7.2c-0.4-3.5-0.6-16.2,0.1-20.3s1.5-10,1.9-11.7
			c0.3-1.6,1.5-3.2-0.7-2.6c-2.2,0.5-10.5,1.7-16.6,1.3C345.1,356.4,344.2,355.1,343.8,355.6z"/>
		<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M348.3,395.6c2.2,1,5.4,1.8,7.9,1.8c0,0-0.9,4.3,0.6,6.9
			c1.4,2.6-10.4,1-10.4,1l-0.6-9.1L348.3,395.6z"/>
		<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M382.5,406.6c2.1-0.6,3.5-3,1.8-5.2c-1.8-2.2-3.3-2.6-1-2.7
			c2.3-0.1,10.9,5.1,10.9,5.1l-4.4,4L382.5,406.6z"/>
		<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M343.4,360.6c3,1,7.5,1.4,11.4,1.2c3.9-0.1,9.8-0.7,13.5-1.9
			c3.7-1.2,2.2,1.4,2.2,1.4l-2.1,1.9c0,0-5,1.9-12.9,1.8c-9.4-0.2-12.2-1.2-12.2-1.2L343.4,360.6z"/>
		<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M343.7,367.1c3,1,7.5,1.4,11.4,1.2c3.9-0.1,9.1-0.2,12.8-1.5
			c1.5-0.5,0.7,1.6,0.7,1.6l-0.6,1.1c0,0-5,1.8-13,1.7c-9.4-0.2-11.1-0.9-11.1-0.9L343.7,367.1z"/>
		<path opacity="0" fill-rule="evenodd" clip-rule="evenodd" d="M345.2,353.4c0,0,11.3,4,23.9,1.3c0,0-4.9,23.1-2.7,35.1
			c0,0,2.1,3.1,18.5,9.1c0,0,7.3,1.9,6.9,5.4c0,0,0.2,0.8-8.5,0.6c-8.8-0.2-17.1-1.8-22.9-1.8c-5.8,0-12,0.2-13.1-1.4
			c-1.1-1.6,0.2-5.6,1.9-7.9c1.8-2.4,1.3-4.2,1.2-8.7C350.2,373.6,341.4,361.6,345.2,353.4z"/>
		<path opacity="0" fill-rule="evenodd" clip-rule="evenodd" d="M345.2,353.4c0,0,11.3,3.9,23.9,1.2c0,0-4.9,23.3-2.7,35.2
			c0,0,2.1,3.1,18.5,9.1c0,0,7.3,1.9,6.9,5.4c0,0,0.2,0.8-8.5,0.6c-8.8-0.2-17.2-2.7-22.9-1.8c-6,1-12.1,0.7-13.1-1.4
			c-0.9-1.7,0.2-5.6,1.9-7.9c1.8-2.4,1.3-4.2,1.2-8.7C350.2,373.6,341.4,361.6,345.2,353.4z"/>
		<path d="M335.1,276.3c0,1,10.1,6,15.7,7c5.5,1.1,17.2,0,19.1-0.4l-0.3,1.8c0,0-13.8,2-24.4-0.8c-10.6-2.8-9.5-3.6-9.5-3.6
			L335.1,276.3z"/>
		<g>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M313.5,386.7c1.5,0.8,7.1,2.1,10.7,1.4c0.5-0.1,0-9,1.5-12.9
				c2-5.5,5.4-10,7-20c-5.4-0.6-11.7-1.9-14.9-3C313.6,365,315.1,375.9,313.5,386.7z"/>
			<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M322.3,394.9c0.9,0.2,1.5,1.3,1.7,0.7c0.5-1.2-1-3.3-1.1-5
				c0-0.2,0,0,0-0.2c-1.1-1-9-1.2-8.5-0.6c-0.9,1.7-2.4,1.4-2.9,4.7c-0.3,1.7,1.9,0.2,3.8,0.2c-3.5,2.3-7.5,5.3-8.1,7.9
				c-0.8,3.6,0.5,4.6,4.3,6.6c3.3,0.7,7.3,0.9,10.5,0.7c3.4-0.6,4.2-2.3,3.1-4.7C323.6,401.9,322.6,397.3,322.3,394.9z"/>
		</g>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M323.7,226.8c4.2,2.4,10.2,1.8,12.4,1.6c0.5,0,5.7-0.9,6-0.8
			c0.5,0.1,0.5,0.5,0.5,0.5s-1.9,1-6.4,1.3c-4.1,0.3-9-0.1-11.8-1.3C321.2,226.9,323.7,226.8,323.7,226.8z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" d="M367.6,229.3c0.8,0.6,5.9,2.4,8.1,4.7c2,2.1,1,2,0.5,1.4c-0.5-0.6-4.6-3.4-6.1-4
			c-1.5-0.6-3.4-1.8-3.5-2C366.6,229.1,367.6,229.3,367.6,229.3z"/>
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#EFEFEF" d="M323,283.1c3.8-0.2,7.6,0.6,10.1,3.2c1.3,1.3,3.4,2.7,3.1,4
			c-0.1,0.4-0.8,1.5-1.5,2.2c-0.4,0.5-1.5,1.7-2,2.1c-0.5,0.4-2.3,1.8-2.7,2.1c-0.4,0.2-0.9,0.9-1.3,1.1c-1.3,0.7-2.7,0.2-4.1-0.5
			c-1.2-0.6,0.3-0.7-1.2-1.8c-3.5-2.4-5.4-4.2-4-8.9C319.7,285.4,321.2,284.5,323,283.1z"/>
	</g>
	<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M290,253.4c-11.6,4.7-41.3,19.5-49.7,24c0,0,0,0,0,0
		c6.9,4.5,10.2,15,11.2,25.7c0.1,1,0.2,2,0.4,2.9c0.2,0.9,0.3,1.6,0.4,2c0,0.2,0.1,0.3,0.1,0.5c7.6-20.8,34.9-42.8,36-44.5
		c0.5-0.7-0.7-4.1,1.2-7.3C291.9,252.5,296.5,250.7,290,253.4z"/>
	<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M317.6,351c6-11.9,6-23.3,5.9-36.7c0-5.6,4-13.5,2-11.2
		c-7.8,8.7-27.4,24.9-41.4,25.8C303.9,328.5,311.8,338.3,317.6,351z"/>
	<path d="M228.9,288.3c7.3-5.2,45.5-25.6,54.8-28.5s6.3-6.4,6.3-6.4s-37.3,16-59.5,29.9"/>
	<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M337.6,250.9c-3-1.2-5.3,2.3-4.5,5.7c0.7,3.3,7.8,7.1,7.4,19.4
		c-0.3,10.1-2.5,14.3-2.5,14.3l-5-6.2c0,0-0.7-14-2.4-16.1c-1.7-2.1-6.9-5.8-9-7.8c-2.1-2,2.3-4.6,2-8.1c-0.3-3.5,2.3-10.5,2.3-10.5
		L337.6,250.9z"/>
	<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M355.7,306.1c-0.3,9.7,1.9,24.1,2.8,30.9c0.9,6.8,2.1,7.4,0,10.5
		c-2,3-4.8,7.9-4.8,7.9l-8.9-0.8c0,0,7.1-9,7.6-10.7c0.4-1.7-3.7-14.5-3.7-14.5L355.7,306.1z"/>
	<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M338.4,215.4c1.8,4,4,5.8,7.4,7c2.1,0.8,10.3,1.8,13.5-1.8
		c1.5-1.7,0.5-6.2,0.5-6.2l-7.4,5.9l-10-1.8l-1.1-3L338.4,215.4z"/>
	
		<path fill-rule="evenodd" clip-rule="evenodd" fill="#88CE02" stroke="#000000" stroke-width="0.8779" stroke-linejoin="round" stroke-miterlimit="10" d="
		M339.2,224.4c3.4,2.2,11.7,4.2,14.1,4.7c2.4,0.5,6-2.5,7.9-3.3c2-0.8,5.3-1.4,9.2,2.1c0.4,0.4-0.9,2.1-0.9,2.1
		c-0.2-0.1-0.9-0.2-2-0.6c-1.1-0.5-2-1-3.4-0.8c-6.5,0.8-7.6,3-13.2,1.7c-5.6-1.3-7.1-2.3-12.6-2.1"/>
	<path fill-rule="evenodd" clip-rule="evenodd" fill="#88CE02" d="M338.1,224.8c4.3,1.9,12.5,3.8,14.9,4.3c2.4,0.5,6.1-1.8,7.9-2.9
		c3.2-2,7.4-0.3,9.3,1.8c1.3,1.4,1.8,2.4,1.8,2.7c0,0.5-1.5,0-1.5,0c-0.9-0.4-1.9-0.6-2.8-1c-1-0.5-2.1-1.3-3.6-1.1
		c-6.5,0.8-7.8,2.9-13.4,1.7c-5.6-1.3-7-2.5-13-2.1"/>
	<path fill-rule="evenodd" clip-rule="evenodd" d="M317.9,345.5c-0.2-0.3,0.2-0.5,0-0.5c-1.7,0-4-1.3-5.3-3.1
		c-5.6-8-13.7-13.4-28.4-13c-22.2,0.6-30.9-8.6-32.6-25.9c-0.9-9.4-3.5-18.7-8.8-23.8l-3.2,1.9c5.9,5.2,7.9,13.6,9.2,25
		c2.1,17.3,16,25.4,32.3,25.6c16.9,0.3,23,3.7,29.4,12.3c2.1,2.8,4.5,3.6,6.2,4L317.9,345.5z"/>
	<path opacity="0.4" fill-rule="evenodd" clip-rule="evenodd" d="M377.9,262.4c0.3,2,1.5,5.7,3.4,7.5c0.9,0.9,1.1,1.2,0.3,1.2
		c-0.8,0-6.4-0.3-6.4-0.3l-1.5-2.7L377.9,262.4z"/>
</g>  
</svg>


</div>
            
          
!
            
              body {
  background-color:#000;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  max-width:100%;
  height:600px;
}

svg{
  max-width:100%;
  visibility:hidden;
 
}


            
          
!
            
              var xmlns = "http://www.w3.org/2000/svg",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  container = select('.container')

//center the container cos it's pretty an' that
TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})

TweenMax.set('svg', {
  visibility: 'visible'
})

var tl = new TimelineMax({paused:false, repeat:-1, yoyo:true,repeatDelay:1, delay:2 });
tl.to('#qMark', 2, {
  morphSVG:{shape:'#heroBlack' , shapeIndex:-52},
  ease:Power4.easeInOut
})
.to('#exclamationM', 2, {
  immediateRender:false,
  fill:'#000',
  ease:Power4.easeInOut
},'-=2')
.to('#qDot', 1, {
  transformOrigin:'50% 0%',
  scale:0,
  ease:Back.easeIn
},'-=2')
.to('#exclamationDot', 1, {
  transformOrigin:'50% 0%',
  scale:0,
  ease:Back.easeIn
},'-=2')
.to('#exclamationM', 3, {
  morphSVG:{shape:'#capeBlack' , shapeIndex:-5},
  //ease:Elastic.easeOut.config(1, 1.2)
  fill:'#88ce02',
  ease:Power4.easeInOut
})
.from('#heroFullGroup', 3, {
  alpha:0,
  ease:Power4.easeOut
})
.to(['#qMark','#exclamationM'], 2, {
  fill:'#000'
},'-=3')


            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console