Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ 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

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.

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

              
                <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="stage0" fill="#262626" d="M370,308.9c0.6-1.8,0.9-3.7-1.8-6.7c-2.8-3.1-2.1-5.2-0.9-7c1.2-1.8,0.9-2.1-0.6-3.4
	c-1.5-1.2-2.8-4.3-6.1-7.6c-3.4-3.4-4.9-2.4-10.4-4c-5.5-1.5-7.6,2.1-11.9,6.1c-4.3,4-7.7,6.1-13.8,8.3c-6.1,2.1-5.5,0.9-21.7,4.6
	c-16.2,3.7-30.6,21.4-40.7,32.4c-10.1,11-11,18.1-11,27.2c0,9.2,2.8,7.6,5.5,10.1c2.8,2.4,4,8,5.2,11.9c1.2,4,2.1,7.3,2.1,9.8
	c0,2.4-1.5,2.8-4,6.1c-2.4,3.4-9.2,12.8-12.2,15.6c-3.1,2.8-5.2,6.4-6.1,11.3c-0.9,4.9,7.6,9.5,10.1,11.6c2.4,2.1,10.7,7,11.3,8
	c0.6,0.9,4,0,4,0c1.2,0.6,2.4-0.9,2.4-0.9c1.5-0.3,1.5-2.4,1.5-2.4c-0.6-3.1-4.3-7-7-9.2c-2.8-2.1-2.1-3.4-2.4-7
	c-0.3-3.7,3.7-3.4,7.3-5.5c3.7-2.1,11.6-7.3,16.8-11c5.2-3.7,5.8-9.8,5.8-9.8c2.8-0.9,7,4,7,4c6.7,7,4.9,18,3.7,22.3
	c-1.2,4.3-0.3,7,2.1,9.2c2.4,2.1,6.1,0.9,9.5,0.9c3.4,0,4.9,0,7,0.9c2.1,0.9,15.9-0.3,15.9-0.3c2.8-1.2,0-3.1-1.8-4.3
	c-1.8-1.2-7.3-2.1-9.8-5.2c-2.4-3.1-2.1-9.5-1.2-19c0.2-2,0.2-3.9,0.1-5.8c5.3-8.3,8.9-20,10.3-23.6c1.8-4.9,3.7-16.8,3.7-21.1
	s1.8-29.4,3.4-32.1c1.5-2.8,1.5-1.8,4-2.1c2.4-0.3,4.6,0.6,7.3,1.5c2.8,0.9,10.7,0.3,13.5,0c2.8-0.3,5.5-4,6.1-6.7
	C372.8,313.2,370,308.9,370,308.9z M294.1,360.3c16.2,3.1,22.9-4.9,22.9-4.9c-1.9,3.6-2.5,13.7-2.7,18
	C306.6,366.9,294.1,360.3,294.1,360.3z"/>
<path id="stage1" fill="none" d="M262.1,421.1c0,0-3.5,1.1-0.5,3.8c3.1,2.7,11.9,8.3,12.3,10.3c0,0,8,0.5,5,4.6
	c0,0-2.7,1.8-5.4,1.4c0,0-2.1,1.5-4.1,0.7c0,0-7.8,3.7-11.3,0.2c0,0-15.6-10.6-16.7-14.8c-1.1-4.2-3.5-7.5,1.4-11.8
	c4.9-4.3,10.3-7.9,13.5-11.6c3.2-3.7,19.7-21.7,28.2-23.1c0,0-3.7-27.3-2.7-35.2c0,0-8.1-10.3-7.5-18.4c0.7-8.1-1.4-27-1.1-30.6
	c0.2-3.6,0.1-13.6,0.9-16.5c0.8-2.9,4.5-27,17.5-38.7c13-11.6,13.9-14.2,20.4-19.1c6.4-4.9,8.5-10.2,15-11.5
	c6.6-1.4,11.1-4.4,15.7-1.1c4.6,3.3,7,6.4,7.8,9.4c0.8,2.9,1.9,2.6,2.9,3.3c1,0.7,1.1,1.7,0.3,2.9c-0.8,1.2-1.8,3.1-1,4.2
	c0.8,1.1,6,4.5,5.4,6.7c-0.6,2.1-1,2.8-0.7,3.1c0.3,0.2,2.1,1.7,0.9,5.9c-1.2,4.2-5.7,6.8-8.5,8.3c-2.8,1.5-11.1,1.7-14.9-1
	c-3.8-2.7-5.1-3.5-7.3-3.7c-2.3-0.2-4.3,0.7-4.6,3.1c-0.3,2.4,1.6,3.3,3.1,10c1.5,6.7,1.8,11.3,1.5,15.6c-0.3,4.3-0.7,10.6-1.7,14.1
	c-1,3.5-1.7,2.5-0.6,5.5c1.1,3.1,14.8,23.2,18.1,28.7c3.3,5.5,6.4,9.7,7,14.7c0.6,5-0.7,13.8-2.1,16.4c0,0,3.5,3.1,4.2,9.8
	c0.7,6.8-0.3,27.4-0.8,33.7c-0.5,6.3,0.6,18.7,2.5,22.8c1.9,4.2,5.7,6.7,9.4,8.7c3.7,2,9,0.6,10.1,3.7c0,0,1.8,1.7-3.2,2
	c-5,0.3-6.2,1.5-12.8,0.7c-6.6-0.8-8.7,0.1-13.5,0c-4.7-0.1-8.7,1.8-10.3-0.7c-1.6-2.5-3.1-3.6-2.3-7c0.8-3.4,1.9-2.7,2.1-7.9
	c0.2-5.2-0.2-7.9-1-11.8c-0.8-3.8-5.2-20.4-3.6-26.2c0,0-13.6-19.8-14.1-25.3c0,0,0.5,26.7-7,33.5c0,0-6.4,4.2-10,7.2
	c-3.5,3.1-8.9,7-15.3,10C276.4,412.9,264.5,419.1,262.1,421.1z"/>
<path id="stage2" fill="none" d="M272.1,419.8c0,0-4.2,2.6-0.9,8.5c0,0,4,5.9,6.6,7.9c2.6,2,3.2,2.3,0.8,4.2
	c-2.4,2-1.7,1.3-3.6,2c-2,0.6-1.4,1.9-3.8,1.1c-2.4-0.7-4.7,0-5.6-2c-0.9-2-6.2-5.4-7.6-9.7c-1.4-4.3-6.5-8.7-7.1-12.5
	c-0.6-3.8-2.3-8.7,7.3-10.6c9.6-2,9.7-3.8,12.3-6.8c2.6-3,11.8-13.5,17.2-16.1c5.4-2.6,12.4-7,14.9-7.9c0,0-6.8-15.7-9.2-21.6
	c-2.4-5.9-3.4-7.9-5.4-10.5c-2-2.7-7.4-14-5.9-21.1c1.6-7.1,1.6-8.7,1.2-13.7c-0.3-5.1-1.3-25.2-0.6-32.1c0.7-6.9,3.9-27.4,5.6-32.9
	c1.7-5.5,3.7-9.1,8.1-12.5c4.3-3.4,11.6-5.6,7-7.4c-4.5-1.9-9.8-10.4-0.1-19.7c0,0,10.9-13.6,27.4-7.6c0,0,7,6,10.1,7.2
	c0,0,5.6,2,3.4,7.9c0,0,0.6,2,1.8,4.8c1.1,2.8,0.8,3.7,0.3,4.8c-0.5,1,5.6,1.8,1.7,8.8c-3.9,7-9,9-12.6,9.1c-3.6,0.1-8,0.9-9.8,0.2
	c0,0-0.8,2.1-0.4,4.3c0.4,2.3,4.8,10.9,6.8,15.5c2.1,4.7,2.6,8.6,1.3,14.3c-1.2,5.7-2.7,8-3.8,11.6c-1.1,3.6-2.2,8.6-0.8,13.2
	c1.3,4.7,5.9,10.6,8.6,16.8c2.7,6.2,4.1,7.9,6.2,14.4c2.1,6.5,4.3,6.7,4.3,10.9c0,4.1,2.2,7.6,0.8,12.5c-1.3,4.9-4.1,6.9-4.9,7.6
	c0,0,2.7,4.5,3.5,8.5c0.8,3.9,1.5,10.8-1.8,19.3c-3.3,8.6-3.3,20.3-3.9,27c-0.6,6.7,0,8,2.1,11.4c2.1,3.4,2.4,3.4,6.8,5.9
	c4.4,2.5,2.4,0.9,7,2.6c4.7,1.7,8.4-0.2,4.5,4.5c0,0-0.5,1.4-3.5,0.9c-3-0.5-1.2-0.2-4.2-0.6c-3-0.4-1.3,0.2-5.3-0.8
	c-3.9-1-6.8-0.2-11.2,0.3c-4.3,0.5-8,2-11.1,0.9c-3.1-1-9-3.3-8.4-8.3c0.6-5,1.4-8.1,2.8-12.6c1.3-4.5,2.8-11.7,2.7-17.2
	c-0.1-5.5-1-10.3,0-11.9c0,0-10.4,4.8-17.7,8c-7.2,3.2-18.5,9.3-22.4,11.5C279.7,413.9,272.1,419.8,272.1,419.8z"/>
<path id="stage3" fill="none" d="M367.5,306.3c3.4,0,3.6-3.4,5.2-4.4c1.6-1.1,2.8-5.1,3-9.4c0.2-4.3-1.6-5.1-5.7-7.6c-4.1-2.5-5-2.3-9.9-1.8
	c-5,0.5-2.7,2.1-8.2,1.2c-5.5-0.9-2.5-0.7-3.4-0.9c-0.9-0.2-25.4-17.2-25.4-17.2c-0.7-3.4-1.1-6.7,0.7-10.1c1.8-3.4,5-7.3,5.3-16.3
	c0.4-9.1-3.2-11.2-3.7-14.9c-0.5-3.7,1.4-3.9,3.9-5.5c2.5-1.6,3.9-2.1,6.6-3.4c2.7-1.2,3.9,0.5,12.3-1.8c8.3-2.3,5.3-10.7,6-11.4
	c0.7-0.7,1.2-0.4,1.8-2.5c0.5-2.1-2.1-6-2-8c0.2-2,1.4-3,0.9-5.2c-0.5-2.1-2-3.7-2-3.7c0.5-7.6-1.2-16.5-25-14.9
	c-23.8,1.6-18.8,28.4-21.3,30.5c-2.5,2.1-3.7,2.1-10.3,6.9c-6.6,4.8-8.9,10.3-11.2,14.6c-2.3,4.3-6.9,5.7-10.1,10.8
	c-3.2,5.1-9.9,10.3-13.8,13.5c-3.9,3.2-2.8,7.3-2.3,10.5c0.5,3.2,1.6,3.9,4.1,17.2c1.7,9.1,7.3,16.3,10.7,19.8
	c-6.4,15.4,7.6,32.5,7.6,32.5c-0.2,6.6,4.4,25.7,6.7,29.3c2.3,3.6,0.9,4.4-1.8,7.3c-2.7,2.8-11.7,6.9-14.9,11.5
	c-3.2,4.6-7.8,18.8-10.7,23.1c-2.8,4.3-5.3,9.4-9.8,12.1c-4.4,2.7-5,5.3-6.2,10.1c-1.2,4.8,7.3,6.9,11.4,9.6
	c4.1,2.7,9.2,9.4,10.3,10.7c1.1,1.2,5.1,2,8.2,2.1c3,0.2,4.8,0.4,7.5-2.1c2.7-2.5,0-2.5-3.7-4.3c-3.7-1.8-6.9-8-9.9-11.9
	c-3-3.9,1.4-8,1.8-8.5c2-2.8,11-15.1,14.6-18.3c3.6-3.2,25.9-23.4,25.9-23.4c7.8-8,4.4-19.5,4.4-19.5c0.7,2,7.8,4.1,11.4,8
	c3.6,3.9-0.9,7.3-0.9,7.3c-12.6,12.1-2.3,31.1-2.1,34.3c0.2,3.2-0.4,16.2-0.5,21.8c-0.2,5.7-3.2,6.2-4.4,10.5
	c-1.2,4.3-0.7,4.8,0.9,7.5c1.6,2.7,7.6,0.9,11.2,1.1c3.6,0.2,13.1-0.2,18.5,0.4c5.3,0.5,11-0.9,13.1-0.7c2.1,0.2,8.2,3.7,10.8-0.7
	c2.7-4.4-1.6-4.8-3.9-5.2c-2.3-0.4-2.8,0.4-7.8-2.3c-5-2.7-10.1-3-13.1-6c-3-3-8.7-6.4-8-13.1c0.7-6.8,3.7-24,7.6-33.6
	c3.9-9.6,1.1-6.7,3.9-13.9c2.8-7.1-2-15.3-2-15.3c0.5-2-1.6-6.2-1.6-6.2c-1.8-11.7-29.1-42.4-29.1-42.4c0.9-2.8-0.2-14.9-0.2-14.9
	c4.8,3.9,28.8,7.5,30.2,8c1.4,0.5,4.8,0.5,4.4,2.1c-0.4,1.6,1.4,6,1.4,6l10.8,1.6C365.5,306.8,364.1,306.3,367.5,306.3z
	 M281.5,279.3c0,0-0.2-0.4-0.8,0c-2-10.5-4.9-24.2-4.9-24.2c2.7-0.7,4.3-2.3,4.3-2.3c-0.4,3.2,1.8,9.2,2.1,15.8
	C282.6,275.2,281.5,279.3,281.5,279.3z"/>
<path id="stage4" fill="none" d="M267.8,321.6c0.2,1.9,2,24.4,1.1,31.4c-0.8,7-0.8,7.2-4.9,12.1c-4,4.9-8.5,22.7-9.1,28
	c-0.6,5.3,0.6,10.4-0.4,15.5c-1.1,5.1-3.6,14.9-6.2,18.3c-2.5,3.4-2.8,6.4-3,9.6c-0.2,3.2,2.1,4.2,6.4,5.7c4.2,1.5,6.6-0.6,11.5-1.1
	c4.9-0.4,10.6,0.2,14.9,1.3c4.2,1.1,8.5,1.5,12.7,1.3c4.2-0.2,4.7,0,5.3-3.2c0.6-3.2-1.1-2.1-4.5-2.5c-3.4-0.4-8.3-3.2-8.3-3.2
	c-8.7-4-11-15.9-11-15.9c-1.7-5.5,3.4-13,4.9-17.6c1.5-4.7,10.2-24.6,12.1-28.7c1.9-4,4.7-6.8,7.4-16.8c2.8-10,5.1-23.8,5.1-23.8
	c2.5,4.5,10.6,11,12.5,14.9c1.9,3.8,1.3,3.6,0.8,9.1c-0.4,5.5,1.9,3.8-2.5,13.4c-4.5,9.6,1.3,22.3,2.3,29.5c1.1,7.2,2.8,10.6,3,19.1
	c0.2,8.5,0.6,10.2,0.4,18.9c-0.2,8.7,5.5,6.6,10.6,5.3c5.1-1.3,4.9-1.9,10-2.1c5.1-0.2,6.8-0.4,10.4,0.6c3.6,1.1,5.7-0.8,5.7-0.8
	c1.9,0.4,0.8-1.7,3.8-1.1c0.3,0.1,0.6,0.1,0.8,0.1c2.6,0.2,4.5-1.4,4.5-1.4c3,0,3.6-1.9,3.6-1.9c1.5-1.5-0.2-2.3-1.7-2.8
	c-1.5-0.4-3,0.4-8.3-2.1c-5.3-2.6-14.2-4.2-19.1-11.3c-4.9-7-4.2-20.2-2.3-28.7c1.9-8.5,1.7-27.8,3.2-30.6c1.5-2.8,2.8-7.4,3-11.7
	c0.2-4.2-2.5-4.7-3-8.7c-0.4-4-0.6-10.2-3.2-18.7c-2.5-8.5-15.9-30.1-15.9-30.1c2.5-2.8,3.8-10.4,4.7-9.1c0.8,1.3,2.1,2.1,3.8,3.2
	c1.7,1.1,3.4,1.7,2.3,5.1c-1.1,3.4,3.8,9.1,3.4,10.4c-0.4,1.3-1.5,2.1-4.9,3.4c-3.4,1.3-9.1,4.5-1.5,3.6c0.3,0,0.6-0.1,0.9-0.1
	c7-1,9.7-3.7,9.7-3.7s0.4-2.3,0.8,0c0.4,2.3-1.7,5.1-1.7,5.1c-2.3,4,2.3,1.9,2.3,1.9c5.3-3.2,7-12.5,7-17.8c0-5.3-5.5-8.9-8.7-14.4
	c-3.2-5.5-4.9-5.9-7.4-13.4c-2.5-7.4-7.9-13.4-8.1-17.2c-0.2-3.8-4.7-16.8-0.4-23.8c4.2-7,1.9-12.5,0-19.1
	c-1.9-6.6-5.7-8.5-9.8-14.7c-4-6.2-4.2-7.9-4.2-7.9c0.8,0.6,3.2,0.6,9.8,0c6.6-0.6,7.2-8.1,8.5-9.1c1.3-1.1-1.3-3.6,1.5-6.4
	c2.8-2.8-1.9-6.8-2.5-8.7c-0.6-1.9,0.8-2.5,1.1-5.5c0.2-3-5.7-8.5-5.7-8.5c-1.1-4.9-8.1-6.8-23.1-3c-15.1,3.8-12.3,20.4-12.7,23.4
	c-0.4,3-1.1,2.3-2.5,4c-1.5,1.7-1.3,1.9-1.5,4.7c-0.2,2.8,1.5,1.9,2.1,4c0.6,2.1,1.5,0.6,3.6,0.4c2.1-0.2,1.5,0.8,0.2,1.9
	c-1.3,1.1-3.6,2.1-9.1,5.9c-5.5,3.8-6.8,6.6-8.3,15.1c-1.5,8.5-1.9,20-4.5,25.5c-2.6,5.5-2.1,10.4-2.6,18.7
	c-0.4,8.3,5.1,37.6,5.3,42.3c0.2,4.7,2.3,5.5-0.4,8.3c-2.8,2.8-1.6,13-0.8,17L267.8,321.6z"/>
<path id="stage5" fill="none" d="M246.2,413.4c0,0-0.6,13.4,2.8,17.6c0,0,2.6,2.3,6.6,4.5c4,2.1,4.9,3,4.5,5.1
	c-0.4,2.1-0.2,3.6-2.8,3c-2.6-0.6-7-1.5-7-1.5s-8.3-2.1-11.7-6.8c-3.4-4.7-8.1-3.2-11.5-4.5c-3.4-1.3-10.2-6.4-8.1-11.3
	c2.1-4.9,5.5-6.8,7.2-8.7c1.7-1.9,10-11.3,13.4-17.4c3.4-6.2,3.2-5.5,4.5-11.5c1.3-5.9,3.8-13,9.3-17.8c5.5-4.9,17-12.7,18.1-14.2
	c1.1-1.5,0.4-3.4,1.3-8.5c0.8-5.1,1.9-18.7,3.4-21c0,0-5.1-0.2-4.5-2.3c0,0-3.2,0.2-3.2-1.3c0,0-3.4,1.5-3.8-3.4
	c-0.4-4.9,0-15.7,2.1-21.7c2.1-5.9,2.3-4.2,2.8-11c0.4-6.8-1.1-21-0.2-27.8c0.8-6.8,1.7-8.5,3.2-14.9c1.5-6.4,0.8-13.4,1.3-21.2
	c0.4-7.9-4.2-24.8,4-33.1c8.3-8.3,10.4-7.4,11.5-9.8c1.1-2.3,1.7-4,1.7-4s-2.1,3-4.9-1.3c-2.8-4.2-5.9-6.6-3-9.8
	c3-3.2,4.2-5.3,4-11.3c-0.2-5.9-1.7-13,3.2-16.6c4.9-3.6,6.6-4.9,12.7-5.5c6.2-0.6,11.3-3.6,15.5-1.3c4.2,2.3,8.9,3.2,6.8,10.4
	c0,0,4.5,5.5,2.5,11.5c0,0-0.6,0.6,0,1.9c0,0,4.9,7.2,1.5,8.5c0,0,0.2,4.5-1.9,5.3c0,0,1.3,0.8-0.8,3c0,0-0.9,2.5-1.3,4.9
	c-0.4,2.3,0.4,3.8-2.3,4.5c-2.8,0.6-6.2,2.1-7.6,1.1c0,0-3.6,3.8-1.7,7.4c1.9,3.6,11.9,10.6,14.4,20.2c2.5,9.6,3.4,12.1,0.8,15.9
	c0,0-0.6,16.4-0.2,18.5c0.4,2.1,8.3,14.4,14.4,19.7c6.2,5.3,7.2,8.5,11.7,11.5c4.5,3,6.8,5.3,8.5,7.6c1.7,2.3,1.5,2.8,1.1,7.4
	c-0.4,4.7-1.5,5.9-3.6,8.5c-2.1,2.5-3.2,3.6-6.4,3.6c0,0-2.3-1.9,0-3.2c2.3-1.3-0.9,0-0.9,0s-7.4,1.7-3-2.5c0,0,1.5-0.4,0.8-3
	c-0.6-2.5-5.3-5.7-5.1-9.3c0.2-3.6-3-5.1-5.9-6.8c-3-1.7-10.8-7.9-12.3-9.6c0,0-2.1,11.3-3.8,15.7c0,0,7.4,10.8,10,17
	c2.5,6.2,8.7,31,10.6,36.7c1.9,5.7,2.3,6.8,5.3,12.3c3,5.5,3.2,10.6,2.5,16.1c-0.6,5.5,2.6,23.1,1.9,37.2c-0.6,14,3.2,20.4,8.9,24.8
	c5.7,4.5,11.7,6.4,18.5,6.4c6.8,0,6.8-0.4,8.9-0.6c2.1-0.2,4.2-1.7,3.6,1.5c0,0,1.3,2.5-0.6,3.8c0,0,0.2,2.1-2.5,2.3
	c0,0-1.3,2.3-3.6,2.1c0,0-0.8,1.7-4.5,1.9c-3.6,0.2-7.6,1.9-12.5,2.1c-4.9,0.2-7.2,0.4-13.2,1.3c-5.9,0.8-14,2.3-14.2-2.8
	c-0.2-5.1-1.3-16.1-3-22.7c-1.7-6.6-4.9-8.9-7.4-15.3c-2.5-6.4-10.4-20.4-7.4-31.6c3-11.3,3.8-11,1.9-14.9
	c-1.8-3.6-16.3-17.7-18.8-21.7c-0.2-0.3-0.3-0.5-0.3-0.6c-0.8-2.8-9.8,18.7-12.1,20.8c0,0,0.6,8.9-6.4,13.8
	c-7,4.9-12.5,11-15.7,15.1C271.1,386,248.8,411,246.2,413.4z"/>
<path id="stage6" fill="none" d="M412.2,306.3c-5.7-4.4-10.1-9.5-10.1-9.5s-0.6-7-3.8-8.9c-3.2-1.9-12-3.8-17.1-3.8
	c-5.1,0-11.4-2.5-15.8,1.3c-4.4,3.8-7,7.6-11.4,10.8c-4.4,3.2-4.4,5.7-9.5,5.1c-5.1-0.6-10.8,0-9.5-8.9c1.3-8.9,3.8-23.4,0-27.2
	c0,0,13.3,0.6,18.4,1.9c5.1,1.3,7.6,1.9,8.9,0c1.3-1.9,3.2-7.6,5.1-8.2c1.9-0.6,3.8-1.9,3.2-7c-0.6-5.1,3.8-12.7,3.2-15.8
	c-0.6-3.2-0.6-3.2-0.6-3.2s10.1,3.2,5.1-3.8c-5.1-7-19-13.9-28.5-13.3c-9.5,0.6-12.7,0-18.4,7c-5.7,7-3.8,14.6-6.3,17.1
	c-2.5,2.5-4.4,0-4.4,0s-57.6-3.2-67.7,44.9l-2.6,13.6c-3.4-4.4-8.4-10.2-12.6-11.7c0,0-7,9.5-8.9,17.1l-5.7,1.9l-1.9,12l1.9,3.2
	c0,0,0.6,32.3,10.1,39.3c0,0,0.6,6.3,26,4.4c0,0-4.4,5.1,5.1,6.3l-15.2,11.4c0,0-1.9,3.8,4.4,1.3l12.7-8.9c0,0,3.2-1.9,4.4,0.6
	c1.3,2.5-1.9,32.9-1.9,32.9s-20.9,2.5-26,0.6c0,0-7.6,0.6-5.1,6.3c0,0-12.7,0-15.2,2.5c0,0-6.3,5.1-1.3,6.3c0,0,4.4,0.6,3.8,3.2
	c0,0-8.9,8.9-0.6,10.8c0,0,8.9,2.5,10.1-3.2l-3.2-7c0,0,23.4-5.7,38-1.3l8.2,1.9v4.4c0,0-7.6,6.3,0.6,8.2c0,0,10.8,5.1,9.5-7
	l-3.2-2.5v-6.3c0,0,5.1-0.6,11.4,1.3c0,0,9.5,14.6,13.9,15.8c4.4,1.3,10.1,1.3,13.3,0.6c3.2-0.6,12.7-3.8,7.6-5.7c-5.1-1.9-7-7-7-7
	s10.8,5.1,12,0c0,0-1.3-7.6-5.1-8.2c-3.8-0.6,8.2-10.1,1.9-10.1c-6.3,0-10.1-0.6-10.1-0.6s-6.3-2.5-1.3-10.8
	c5.1-8.2,11.4-20.9,19.6-29.1c8.2-8.2,20.3-16.5,26-24.1c5.7-7.6,10.8-19.6-5.7-26.6c0,0,6.3-10.8,12-12.7c5.7-1.9,8.2-1.3,10.1,1.9
	c1.9,3.2,6.3,13.3,7,3.2c0,0,0.6-6.3,7.6-3.2c7,3.2,8.2,3.2,11.4,2.5C412.2,312,417.9,310.8,412.2,306.3z M231.1,351.9
	c0,0-10.1-28.5-2.5-38l1.3,20.9c0,0,10.4-0.4,17.9-6c-0.3,10.4,0.1,20.2,2.4,22.4C250.1,351.3,235.5,346.2,231.1,351.9z M302,295.6
	c1.9,1.3,8.2-1.3,8.2-1.3c-1.3,3.8,3.8,21.5,3.8,21.5c-5.1-2.5-20.9-0.6-20.9-0.6C296.9,309.5,302,295.6,302,295.6z M314,378.5
	c-4.4,7-13.3,8.2-13.3,8.2c-11.4,5.1-4.4,15.2-4.4,15.2s-3.2,5.7-6.3,6.3c-3.2,0.6-10.8-0.6-10.8-0.6l-0.6-34.8
	c1.9-1.9,3.2-8.2,3.2-8.2l23.4,0.6c7,0,7-10.8,7-10.8c2.5,0,11.4-1.3,11.4-1.3C319.1,357,318.5,371.6,314,378.5z"/>
 <!-- <text x="50%" y="525">The Evolution of SVG</text>-->
  
<g id="wholeTextGroup">
	<g id="theGroup" fill="#262626">
		<path d="M120.4,511.9h-6.5v23.3c0,0.4-0.4,0.8-0.8,0.8h-5.2c-0.4,0-0.8-0.4-0.8-0.8v-23.3h-6.5c-0.4,0-0.8-0.3-0.8-0.8V507
			c0-0.4,0.4-0.8,0.8-0.8h19.8c0.4,0,0.8,0.3,0.8,0.8v4.1C121.3,511.6,120.9,511.9,120.4,511.9z"/>
		<path d="M143.5,536h-4.8c-0.4,0-0.8-0.4-0.8-0.8v-13.3c0-2.8-0.5-3.7-3-3.7c-1.2,0-2.4,0.6-3.8,1.3v15.8c0,0.4-0.4,0.8-0.8,0.8
			h-4.8c-0.4,0-0.8-0.4-0.8-0.8v-29c0-0.4,0.4-0.8,0.8-0.8h4.9c0.4,0,0.8,0.4,0.8,0.8v8.4c2-1.3,3.7-1.8,6.1-1.8
			c5.8,0,7.1,4,7.1,9.1v13.3C144.3,535.6,143.9,536,143.5,536z"/>
		<path d="M167.7,526.6h-12.8v0.1c0,2.3,1,4.4,4.1,4.4c2.5,0,6.1-0.2,7.7-0.4c0,0,0.1,0,0.1,0c0.4,0,0.8,0.2,0.8,0.6v3
			c0,0.6-0.2,0.9-0.8,1.1c-2.6,0.6-4.7,1-8.2,1c-4.8,0-10-2.6-10-10.3v-2.8c0-6.4,3.8-10.5,10.1-10.5c6.6,0,9.9,4.5,9.9,10.5v2.3
			C168.5,526.2,168.2,526.6,167.7,526.6z M162.2,522.4c0-3-1.4-4.4-3.6-4.4c-2.2,0-3.7,1.5-3.7,4.4v0.2h7.3V522.4z"/>
	</g>
	<g id="evolutionGroup" fill="#262626">
		<path d="M201.7,526.6h-12.8v0.1c0,2.3,1,4.4,4.1,4.4c2.5,0,6.1-0.2,7.7-0.4c0,0,0.1,0,0.1,0c0.4,0,0.8,0.2,0.8,0.6v3
			c0,0.6-0.2,0.9-0.8,1.1c-2.6,0.6-4.7,1-8.2,1c-4.8,0-10-2.6-10-10.3v-2.8c0-6.4,3.8-10.5,10.1-10.5c6.6,0,9.9,4.5,9.9,10.5v2.3
			C202.5,526.2,202.2,526.6,201.7,526.6z M196.2,522.4c0-3-1.4-4.4-3.6-4.4c-2.2,0-3.7,1.5-3.7,4.4v0.2h7.3V522.4z"/>
		<path d="M226.9,514l-5,18.2c-1,3.6-3.4,4.2-5.8,4.2c-2.4,0-4.8-0.6-5.8-4.2l-5-18.2c0-0.1,0-0.2,0-0.2c0-0.4,0.3-0.7,0.6-0.7h5.3
			c0.4,0,0.7,0.4,0.8,0.8l3.4,15.7c0.1,0.6,0.3,0.8,0.6,0.8c0.3,0,0.5-0.2,0.6-0.8l3.4-15.7c0.1-0.5,0.4-0.8,0.8-0.8h5.3
			c0.4,0,0.7,0.3,0.7,0.7C226.9,513.8,226.9,513.9,226.9,514z"/>
		<path d="M239.5,536.4c-6.5,0-10-4-10-10.4v-2.8c0-6.4,3.6-10.4,10-10.4c6.5,0,10,4,10,10.4v2.8C249.5,532.3,246,536.4,239.5,536.4
			z M243.1,523.2c0-3.2-1.2-4.9-3.6-4.9c-2.3,0-3.6,1.6-3.6,4.9v2.8c0,3.2,1.3,4.9,3.6,4.9c2.3,0,3.6-1.7,3.6-4.9V523.2z"/>
		<path d="M259.4,536h-4.9c-0.4,0-0.8-0.4-0.8-0.8v-29c0-0.4,0.4-0.8,0.8-0.8h4.9c0.4,0,0.8,0.4,0.8,0.8v29
			C260.2,535.6,259.9,536,259.4,536z"/>
		<path d="M283.9,536h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-1c-2.2,1.6-4,2.1-6.5,2.1c-5.8,0-7.1-4-7.1-9.1v-13.3c0-0.4,0.4-0.8,0.8-0.8h4.8
			c0.4,0,0.8,0.4,0.8,0.8v13.3c0,2.8,0.5,3.7,3,3.7c1.2,0,2.4-0.6,3.8-1.3v-15.8c0-0.4,0.4-0.8,0.8-0.8h4.8c0.4,0,0.8,0.4,0.8,0.8
			v21.3C284.7,535.6,284.3,536,283.9,536z"/>
		<path d="M301.9,536c-1.2,0.2-2,0.3-3.2,0.3c-4.4,0-6.7-1.2-6.7-6.8v-11.6l-3.2-0.5c-0.4-0.1-0.8-0.4-0.8-0.8v-2.6
			c0-0.4,0.4-0.8,0.8-0.8h3.2v-3.3c0-0.4,0.4-0.7,0.8-0.8l4.9-0.8c0,0,0.1,0,0.1,0c0.4,0,0.7,0.3,0.7,0.7v4.2h3.3
			c0.4,0,0.8,0.4,0.8,0.8v3.2c0,0.4-0.4,0.8-0.8,0.8h-3.3v11.6c0,1.6,0.1,1.9,1.3,1.9h2c0.5,0,0.8,0.2,0.8,0.7v3.1
			C302.7,535.6,302.4,536,301.9,536z"/>
		<path d="M312.3,510.5h-5.2c-0.4,0-0.8-0.4-0.8-0.8V506c0-0.4,0.4-0.8,0.8-0.8h5.2c0.4,0,0.8,0.4,0.8,0.8v3.7
			C313.1,510.1,312.7,510.5,312.3,510.5z M312.1,536h-4.9c-0.4,0-0.8-0.4-0.8-0.8v-21.3c0-0.4,0.4-0.8,0.8-0.8h4.9
			c0.4,0,0.8,0.4,0.8,0.8v21.3C312.9,535.6,312.6,536,312.1,536z"/>
		<path d="M327.3,536.4c-6.5,0-10-4-10-10.4v-2.8c0-6.4,3.6-10.4,10-10.4c6.5,0,10,4,10,10.4v2.8
			C337.3,532.3,333.8,536.4,327.3,536.4z M330.9,523.2c0-3.2-1.2-4.9-3.6-4.9s-3.6,1.6-3.6,4.9v2.8c0,3.2,1.3,4.9,3.6,4.9
			s3.6-1.7,3.6-4.9V523.2z"/>
		<path d="M360.3,536h-4.8c-0.4,0-0.8-0.4-0.8-0.8v-13.3c0-2.8-0.5-3.7-3-3.7c-1.2,0-2.4,0.6-3.8,1.3v15.8c0,0.4-0.4,0.8-0.8,0.8
			h-4.8c-0.4,0-0.8-0.4-0.8-0.8v-21.3c0-0.4,0.4-0.8,0.8-0.8h4.5c0.4,0,0.8,0.4,0.8,0.8v1c2.2-1.6,4-2.1,6.5-2.1
			c5.8,0,7.1,4,7.1,9.1v13.3C361.1,535.6,360.7,536,360.3,536z"/>
		<path d="M385.7,536.4c-6.5,0-10-4-10-10.4v-2.8c0-6.4,3.6-10.4,10-10.4c6.5,0,10,4,10,10.4v2.8
			C395.7,532.3,392.2,536.4,385.7,536.4z M389.3,523.2c0-3.2-1.2-4.9-3.6-4.9s-3.6,1.6-3.6,4.9v2.8c0,3.2,1.3,4.9,3.6,4.9
			s3.6-1.7,3.6-4.9V523.2z"/>
		<path d="M412.4,509.9h-2c-1.2,0-1.3,0.3-1.3,1.9v1.3h3.3c0.4,0,0.8,0.4,0.8,0.8v3.2c0,0.4-0.4,0.8-0.8,0.8h-3.3v17.3
			c0,0.4-0.4,0.8-0.8,0.8h-4.9c-0.4,0-0.8-0.4-0.8-0.8v-17.3l-3.2-0.5c-0.4-0.1-0.8-0.4-0.8-0.8v-2.6c0-0.4,0.4-0.8,0.8-0.8h3.2
			v-1.3c0-5.7,2.3-6.8,6.7-6.8c1.2,0,2,0.1,3.2,0.3c0.5,0.1,0.8,0.4,0.8,0.8v3.1C413.3,509.6,412.9,509.9,412.4,509.9z"/>
		<path d="M454,536h-5.3c-0.4,0-0.6-0.4-0.6-0.8v-16.7c0-0.3-0.1-0.3-0.2-0.3c-0.1,0-0.2,0.1-0.3,0.3l-3.6,6.6
			c-0.3,0.5-0.7,0.7-1.2,0.7h-3.2c-0.5,0-0.9-0.2-1.2-0.7l-3.6-6.6c-0.1-0.2-0.2-0.3-0.3-0.3c-0.1,0-0.2,0-0.2,0.3v16.7
			c0,0.4-0.3,0.8-0.6,0.8h-5.3c-0.3,0-0.7-0.1-0.7-0.6v-27.8c0-0.8,0.6-1.4,1.4-1.4h3.8c0.8,0,1.4,0.4,1.8,1.1l6.1,11.4
			c0.2,0.3,0.3,0.5,0.4,0.5s0.3-0.2,0.4-0.5l6.1-11.4c0.4-0.7,0.9-1.1,1.8-1.1h3.8c0.8,0,1.4,0.6,1.4,1.4v27.8
			C454.7,535.9,454.3,536,454,536z"/>
		<path d="M476.8,536h-4.5c-0.4,0-0.8-0.4-0.8-0.8v-0.6c-1.6,1.1-3.2,1.8-5.6,1.8c-3.5,0-6.8-1.7-6.8-6.9v-0.4c0-4.7,3-6.8,9.8-6.8
			h2.2v-1.4c0-2.3-1.1-2.8-3-2.8c-2.6,0-5.4,0.2-6.6,0.3h-0.2c-0.4,0-0.7-0.2-0.7-0.7v-3.2c0-0.4,0.3-0.8,0.8-0.9
			c1.5-0.4,4.3-0.8,6.9-0.8c5.8,0,9.4,2.3,9.4,8.2v14.3C477.6,535.6,477.2,536,476.8,536z M471.2,526.2h-2.3c-2.8,0-3.5,1-3.5,2.9
			v0.4c0,1.7,0.8,2,2.5,2c1.2,0,2.3-0.4,3.3-0.9V526.2z"/>
		<path d="M501.2,536h-4.8c-0.4,0-0.8-0.4-0.8-0.8v-13.3c0-2.8-0.5-3.7-3-3.7c-1.2,0-2.4,0.6-3.8,1.3v15.8c0,0.4-0.4,0.8-0.8,0.8
			h-4.8c-0.4,0-0.8-0.4-0.8-0.8v-21.3c0-0.4,0.4-0.8,0.8-0.8h4.5c0.4,0,0.8,0.4,0.8,0.8v1c2.2-1.6,4-2.1,6.5-2.1
			c5.8,0,7.1,4,7.1,9.1v13.3C502.1,535.6,501.7,536,501.2,536z"/>
	</g>
</g>
<polygon id="table" fill="#231F20" points="378.6,336.1 386.8,339.3 389.4,358.9 416.6,359.5 416.6,428.5 374.2,428.5 
	374.2,439.9 477.4,439.9 477.4,427.3 429.9,427.3 429.9,359.5 461.5,359.5 463.4,339.9 471,336.1 471,326.6 378,326 "/>
<g id="laptopGroup">
	<polygon id="laptopBase" fill="#231F20" points="388.3,327.5 388.3,321.8 453.5,320.5 453.5,328.1 	"/>
	<polygon id="laptopLid" opacity="0" fill="#231F20" points="461.5,250.2 455.8,250.9 447.4,321.7 453.3,322.6 457.3,284.6 	"/>
</g>  
<g id="popGroup" stroke="#262626"stroke-width="6" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10"  >
	
		<line fill="none" x1="260.8" y1="300.3" x2="235.2" y2="300.7"/>
	
		<line fill="none" x1="271.8" y1="323.6" x2="253.3" y2="342.7"/>
	
		<line fill="none" x1="296.1" y1="332.5" x2="296.2" y2="357.3"/>
	
		<line fill="none" x1="319.1" y1="322.2" x2="336.5" y2="339.5"/>
	
		<line fill="none" x1="328.7" y1="299.2" x2="354.7" y2="298.8"/>
	
		<line fill="none" x1="319.1" y1="274.8" x2="336.5" y2="256.8"/>
	
		<line fill="none" x1="295.9" y1="264.5" x2="295.9" y2="240"/>
	
		<line fill="none" x1="270.9" y1="274.3" x2="253.3" y2="256.8"/>
</g> 
<g id="dGroup" opacity="0" fill="#262626">
	<path d="M191,536.4c-3.3,0-6.9-0.3-8.5-0.6c-0.8-0.1-1.2-0.5-1.2-1.4v-26.4c0-0.9,0.4-1.3,1.2-1.4c1.6-0.3,5.2-0.6,8.5-0.6
		c8,0,12.8,4.2,12.8,12.6v5.2C203.7,532.2,198.9,536.4,191,536.4z M196.9,518.6c0-5.4-2.3-6.8-5.9-6.8c-1,0-2.3,0-2.8,0.1v18.7
		c0.6,0,1.8,0.1,2.8,0.1c3.6,0,5.9-1.4,5.9-6.8V518.6z"/>
</g>  
</svg>

 
  
</div>
              
            
!

CSS

              
                body {
  background-color:#F2DCAD;
  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;
 
}

/* text{
  position:absolute;
  font-size:42px;
  text-anchor:middle;
  font-family: 'Signika', sans-serif;
  fill:#FFF;
  letter-spacing:0.5pt;
  font-weight:600; 
   text-rendering: optimizeLegibility;
}
*/
              
            
!

JS

              
                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'),
  popGroup = selectAll('#popGroup line'),
    stage0Path = select('#stage0').getAttribute('d')

//CubicBezier.create("evolEase",0.99, 0, 0.71, 1)
CubicBezier.create("evolEase",0.96, 0.03, 0.14, 0.74)
  
//center the container cos it's pretty an' that
TweenMax.set(container, {
  position: 'absolute',
  top: '50%',
  left: '50%',
  xPercent: -50,
  yPercent: -50
})

TweenMax.set(popGroup, {
 
  drawSVG:'0% 0%',
  alpha:0
})
TweenMax.set('#popGroup', {
 x:-105,
  y:230,
  transformOrigin:'50% 50%',
  scale:0.8
})

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


var tl = new TimelineMax({delay:2, repeat:-1, yoyo:false, repeatDelay:2});
tl.to('#stage0', 2, {
  morphSVG:{shape:'#stage1'},
  ease:CubicBezier.get("evolEase")
})
.to('#stage0', 2, {
  morphSVG:{shape:'#stage2'},
  ease:CubicBezier.get("evolEase")
})
.to('#stage0', 2, {
  morphSVG:{shape:'#stage3'},
  ease:CubicBezier.get("evolEase")
})
.to('#stage0', 2, {
  morphSVG:{shape:'#stage4', shapeIndex:'auto'},
  ease:CubicBezier.get("evolEase")
})
.to('#stage0', 2, {
  morphSVG:{shape:'#stage5'},
  ease:CubicBezier.get("evolEase")
})
/*  .to('#stage0', 2, {
  morphSVG:{shape:'#stage2'},
  ease:CubicBezier.get("evolEase"),
  delay:0
})*/
 .to('#stage0', 2, {
  morphSVG:{shape:'#stage6'},
  ease:CubicBezier.get("evolEase"),
  delay:0
})

.from('#table', 1, {
  scaleX:0,
  //y:10,
  transformOrigin:'50% 100%'
},'-=1')
.from('#laptopBase',1, {
  scaleX:0,
  transformOrigin:'100% 0%'
},'-=1')
.set('#laptopLid', {
  alpha:1
})
.from('#laptopLid', 1, {
  rotation:-90,
  transformOrigin:'16% 100%',
  ease:Elastic.easeOut.config(2, 0.8)
})

.addCallback(pop, '-=0.5')
.to('#theGroup', 1, {
  //morphSVG:{shape:'#capitalR'},
  x:-6,
  delay:0.5,
  ease:Anticipate.easeIn
},'-=1.5')

.to('#evolutionGroup', 1, {
  x:26,
  ease:Anticipate.easeInOut
},'-=1')

.to('#dGroup', 1, {
  alpha:1//,
  //fill:'#88CE02'
},'-=1')

.to('#laptopLid', 1, {
  rotation:-90,
  transformOrigin:'16% 100%',
  ease:Power2.easeIn,
  delay:4
})
.set('#laptopLid', {
  alpha:0
},'-=0')

.to('#laptopBase',0.5, {
  scaleX:0
})
.to('#table', 0.5, {
  scaleX:0,
  //y:10,
  transformOrigin:'50% 100%'
},'-=0')
.to('#stage0', 2, {
  morphSVG:{shape:stage0Path},
  ease:CubicBezier.get("evolEase"),
  delay:0
})

.to('#theGroup', 1, {
  //morphSVG:{shape:'#capitalR'},
  x:0,
  delay:0.5,
  ease:Anticipate.easeIn
})

.to('#evolutionGroup', 1, {
  x:0,
  ease:Anticipate.easeInOut
},'-=1')

.to('#dGroup', 1, {
  alpha:0//,
  //fill:'#88CE02'
},'-=1')




var popTl = new TimelineMax({paused:true});
  popTl.set(popGroup, {
    alpha:1
  })
    .staggerTo(popGroup, 0.1, {
  drawSVG:'30% 0%',
  ease:Expo.easeIn
}, 0)
.staggerTo(popGroup, 0.8, {
  drawSVG:'100% 100%',
  ease:Expo.easeOut
}, 0);
//popTl.timeScale(0.3)

function pop(){
  
  popTl.play(0)
 
}

//findShapeIndex('#stage3', '#stage4')
//ScrubGSAPTimeline(tl)
              
            
!
999px

Console