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">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="1200px" height="460px" viewBox="0 0 1200 460" style="enable-background:new 0 0 1200 460;" xml:space="preserve"><style type="text/css"> .st0{opacity:0.2;fill:#FFFFFF;enable-background:new;}.st1{fill:#59482D;}.st2{clip-path:url(#SVGID_2_);}.st3{fill:#E1EFF5;}.st4{fill:#FFEC57;}.st5{fill:#CADFEB;}.st6{clip-path:url(#SVGID_4_);}.st7{fill:#877D36;}.st8{clip-path:url(#SVGID_6_);}.st9{fill:#F7D09E;}.st10{fill:#F0B890;}.st11{fill:#D6E7F0;}.st12{clip-path:url(#SVGID_8_);}.st13{fill:#6B6260;stroke:#000000;stroke-miterlimit:10;}.st14{opacity:0.2;fill:#0F2229;enable-background:new;}.st15{clip-path:url(#SVGID_10_);}.st16{fill:#E8F3F7;}.st17{fill:#FFFFFF;}.st18{clip-path:url(#SVGID_12_);}.st19{fill:#6E662C;}.st20{clip-path:url(#SVGID_14_);}.st21{fill:#E13168;}.st22{fill:#876C44;}.st23{clip-path:url(#SVGID_16_);}.st24{fill:#D9DDE0;}.st25{fill:#C3C7C9;}.st26{fill:#FFE100;}.st27{fill:#006E37;}.st28{clip-path:url(#SVGID_18_);}.st29{fill:#D5E000;}.st30{fill:#B3C700;}.st31{fill:#EBDACA;}.st32{clip-path:url(#SVGID_20_);}.st33{fill:#00B35C;}.st34{fill:#008F48;}.st35{fill:#D8E300;}.st36{fill:#C7D100;}.st37{fill:#00B35A;}.st38{clip-path:url(#SVGID_22_);}.st39{fill:#FFFF7A;}.st40{fill:#FFFFC9;}.st41{fill:#FFB700;}.st42{clip-path:url(#SVGID_24_);}.st43{clip-path:url(#SVGID_26_);}.st44{fill:#6D7375;}.st45{clip-path:url(#SVGID_28_);}.st46{fill:#FFC800;}.st47{fill:#383835;}.st48{opacity:0.29;fill:none;stroke:#000000;stroke-width:3;stroke-miterlimit:10;enable-background:new;}.st49{clip-path:url(#SVGID_30_);}.st50{opacity:0.44;}.st51{fill:#BDC8CC;}.st52{clip-path:url(#SVGID_32_);}.st53{fill:#2A4C63;}.st54{fill:#0E1921;}.st55{fill:#223B4F;}.st56{opacity:0.6;} </style><g id="Smoke"><path class="st0" d="M802.1,122c0-32.1-27.9-58.1-62.2-58.1s-62.2,26-62.2,58.1c0,1.3,0.1,2.6,0.2,3.9l-6.7-0.2 c-47.8,0-86.6,36.2-86.6,80.9s38.8,80.9,86.6,80.9s86.6-36.2,86.6-80.9c0-9.4-1.8-18.8-5.2-27.6C780.9,173.4,802.1,150,802.1,122z" /><path class="st0" d="M604.4,229.4c0-44.7,38.8-80.9,86.6-80.9l6.7,0.2c-0.1-1.3-0.2-2.6-0.2-3.9c0-32.1,27.9-58.1,62.2-58.1 c12.8-0.1,25.3,3.7,36,10.7c-9.9-19.9-31.4-33.7-56.4-33.7c-34.4,0-62.2,26-62.2,58.1c0,1.3,0.1,2.6,0.2,3.9l-6.7-0.2 c-47.8,0-86.6,36.2-86.6,80.9c0,25.1,12.2,47.5,31.4,62.3C608.2,256.8,604.4,243.3,604.4,229.4z"/><path class="st0" d="M749.9,197.7c0-12.2-10.6-22.2-23.7-22.2s-23.7,9.9-23.7,22.2c0,0.5,0,1,0.1,1.5H700c-18.2,0-33,13.8-33,30.8 s14.8,30.8,33,30.8s33-13.8,33-30.8c0-3.6-0.7-7.2-2-10.5C741.8,217.3,749.9,208.4,749.9,197.7z"/><path class="st0" d="M674.6,238.7c0-17,14.8-30.8,33-30.8h2.5c0-0.5-0.1-1-0.1-1.5c0-12.2,10.6-22.2,23.7-22.2 c4.9,0,9.6,1.4,13.7,4.1c-4.2-8-12.5-12.9-21.5-12.8c-13.1,0-23.7,9.9-23.7,22.2c0,0.5,0,1,0.1,1.5h-2.5c-18.2,0-33,13.8-33,30.8 c0.1,9.4,4.5,18.2,12,23.8C676,249.2,674.6,244,674.6,238.7z"/></g><g id="Scientist"><polygon class="st1" points="287.3,30.2 304.1,46.3 302.3,31.6 298.5,27.4 "/><g><g><defs><path id="SVGID_1_" d="M272.6,229.6c0,0,31.3,180.9,52.5,231.4l-34.1,1.5c0,0-37.3-163.8-38.3-169.4 C245.6,251.3,272.6,229.6,272.6,229.6z"/></defs><clipPath id="SVGID_2_"><use xlink:href="#SVGID_1_" style="overflow:visible;"/></clipPath><g class="st2"><rect x="227.7" y="211.9" class="st3" width="111.7" height="257.7"/><path class="st4" d="M273.6,234.6c0,0,9.7,108.3,39.2,223.1l14.4-15L273.6,234.6z"/><path class="st5" d="M260.3,241.5c0,0,32.1,205.3,38.8,214.8l-17.9,3.9l-39.5-186.3C241.7,273.9,261.7,240.7,260.3,241.5z"/></g></g></g><g><g><defs><path id="SVGID_3_" d="M261,131.9c0,0,18.3,3,23.1,14.2c7.7,18.2-4.5,40.5-1.5,53s18.3,26.3,27,31.3c0,0-15.8,17.3-36.5-8.5 c-24.3-30.3-38.2-49-38.2-49L261,131.9z"/></defs><clipPath id="SVGID_4_"><use xlink:href="#SVGID_3_" style="overflow:visible;"/></clipPath><g class="st6"><rect x="229.6" y="114.2" class="st1" width="99.4" height="147.9"/><path class="st7" d="M252.9,136.6c0,0,19.3,6,19.3,33.9s0,58.4,29.6,61.7c7.2,0.8,14.4-4.8,14.4-4.8s-22.4-94.2-24.7-95.5 s-38.6-7-38.6-7L252.9,136.6z"/></g></g></g><polygon class="st1" points="219.3,53.6 183.7,114.2 179,183 241.7,151.7 "/><g><g><defs><path id="SVGID_5_" d="M216,169.4l8-32c0,0-6.6-19.1-4-53.3c2.1-26.6,12.7-74.7,54-64s33.3,46.5,29.3,73.9 c-2.5,17.1-4.7,24.6-6.1,27.8c-0.6,1.3-2.1,2.1-3.5,1.7l-9.1-2.4c0,0-6.6,17-23.3,20.3l-6.9,27.8l6.9,22.9l-30.7,16L216,169.4z" /></defs><clipPath id="SVGID_6_"><use xlink:href="#SVGID_5_" style="overflow:visible;"/></clipPath><g class="st8"><rect x="188.5" y="-21.5" class="st9" width="134.7" height="252.5"/><path class="st4" d="M310.4,48.4c21.3,17.6-8.6,82.3-8.6,82.3l-13.4-3c0,0-2.7,10.8-12.7,13.8s-24.5,1.1-28.9,0.6 c-0.1,0-0.2-0.1-0.2-0.2c0-0.1,0.1-0.2,0.2-0.2c3-0.5,8.7-0.9,10.4-1.7c19.3-8.6,25-24.9,25-24.9l11.4,3.2 c10.1-26.4,14-73,14-73L310.4,48.4z"/><path class="st10" d="M316.2,60.6c0,0-64.1-27-74.5,27c-8.2,42.2-0.1,54.1-0.1,54.1l-20.2,74.6c0,0-43.4-72.3-43.4-71.2 S207.5,37,207.5,37l12-14.6l64.6-16.8L316.2,60.6z"/><polygon class="st4" points="249.5,179.7 257.1,178 265.4,141.5 258,141.5 "/></g></g></g><path class="st11" d="M125.6,396.6c3.7,0,91.2,17.7,91.2,17.7l50-209.4L255.9,164l-3,4.2L240,186.6l-22.9-34.8L125.6,396.6z"/><g><g><defs><path id="SVGID_7_" d="M172.9,379c15.2,4.9,30.7,8.5,46.5,11l-17.5,121.8l-77.5,9.5L172.9,379z"/></defs><clipPath id="SVGID_8_"><use xlink:href="#SVGID_7_" style="overflow:visible;"/></clipPath><g class="st12"><rect x="116.9" y="351.4" class="st13" width="121.6" height="187.7"/><path d="M165.9,374.5l-5,15c11,3.4,22.2,6.2,33.5,8.5c10.6,1.8,21.4,2.7,32.2,2.5l1.6-15C228.2,385.5,174,379.1,165.9,374.5z"/><polygon points="175.2,443.8 153.4,512.3 160.8,514.8 "/></g></g></g><path class="st14" d="M255.8,164.1c0,0-85.4,322.4-84.7,322.4s36-15.1,36-15.1l54.9-299L255.8,164.1z"/><g><g><defs><path id="SVGID_9_" d="M181.3,484.2c0,0,59-232.7,73.4-278.2c5.3-16.9,1.6-37.3,1.6-37.3l0.5-8.7c8.4,9.1,24.7,44.9,20.6,65.4 c-5.3,26.7-24.5,77.2-31.7,126.7c-4.7,32.2-12.9,97.1-8.9,121.7L181.3,484.2z"/></defs><clipPath id="SVGID_10_"><use xlink:href="#SVGID_9_" style="overflow:visible;"/></clipPath><g class="st15"><rect x="170.3" y="129.7" class="st16" width="125.4" height="371.6"/><path class="st4" d="M276.6,203.5c0,0-32.9,91.6-43.2,148.6s-6.9,139.7-6.9,139.7l23.5-5.1l43.5-257.1L276.6,203.5z"/><path class="st5" d="M248.5,169.3c0,0,19.8,8.4,28.1,34.2c0,0-0.4-40.4-19.8-51.6L248.5,169.3z"/></g></g></g><path class="st17" d="M226.1,310c0,0,29.1-85.5,42.3-110.3l-10.7-12.1l9.3-2.1L256.7,160L226.1,310z"/><g><g><defs><path id="SVGID_11_" d="M299.1,28.2c0,0-5.9,14.3-19.4,22.2s-53.6,19.9-59,19.9c0,0-7.5,42.8-27,50.8c0,0,6.4,30.6-14.5,51.5 L168.7,183c0,0-10.5-27.5,0-62s23.5-32,23.5-32s7.3-42.2,20.5-55.5s26-19.5,39-19.5C264.7,14,287.1,16.2,299.1,28.2z"/></defs><clipPath id="SVGID_12_"><use xlink:href="#SVGID_11_" style="overflow:visible;"/></clipPath><g class="st18"><rect x="130.5" y="-5.6" class="st7" width="179.1" height="204.1"/><path class="st19" d="M295.7,22.9c0,0-47.7-7.3-66,20.6S219,79.8,219,79.8s-16.3,35.7-38.8,46.7c7.3,20.8,1.7,56.5,1.7,56.5 l-30.3,22.1L144,75.6l64.8-77.8l82.6,14.3L295.7,22.9z"/></g></g></g><g><g><defs><path id="SVGID_13_" d="M222.7,141.5c0,0-6.1,1-12,8.7c-19.2,3.7-47.2,22-63,64.5c-21.3,57.3-97,288.7-97,288.7l98-14 c0,0,65.7-234.7,80.4-264s-2.5-50.9-5.2-63.1S222.7,141.5,222.7,141.5z"/></defs><clipPath id="SVGID_14_"><use xlink:href="#SVGID_13_" style="overflow:visible;"/></clipPath><g class="st20"><rect x="39.4" y="115.1" class="st16" width="209.6" height="395.4"/><path class="st5" d="M210.3,145.3c0,0-11,28.9-12.3,39.3c-0.1,1,0.6,1.9,1.6,2c0.1,0,0.2,0,0.3,0c3.8-0.2,11.6-0.5,13.7,0 L199,198.3c0,0,19.6,29,7.1,88.7s9.5-10.7,9.5-10.7l22.1-72.9l-20.1-63.7L210.3,145.3z"/><path class="st17" d="M212.2,141c0,0-10.3,35.8-10.3,43.1c0,0,15.9-1.1,17.7,0.7l-15,12.5c0,0,15.9,26,3.4,85.7 s11.6-9.5,11.6-9.5l22.1-72.9L221.6,137L212.2,141z"/><path class="st5" d="M234.9,130.8c-1.2,1.2-4.8,9.7-12.7,17.6c-7.9,0.6-11.9,5.5-14.7,9.8c-9.3,5.6-21.3,18.8-26.2,29.1 C125.6,304.5,92.1,512.2,103.7,510l-90.5-1.6l120.4-334.8L234.9,130.8z"/><path class="st5" d="M96.7,398.4c4.1,5.1,16.8,16.6,46.8,13.7c0.2,0,0.3,0.1,0.3,0.2c0,0.2-0.1,0.3-0.2,0.3 c-9.1,2.8-37.3,9.2-47.4-14c0-0.2,0-0.3,0.2-0.4C96.5,398.3,96.6,398.3,96.7,398.4z"/></g></g></g><path class="st9" d="M231.6,70c0,0-4.7-10.4-10.8-6.9s-4.6,12.3-4.6,14s1.5,8.2,4.1,11.2c0.5,0.6,1.4,0.7,2,0.3 c0.3-0.2,0.5-0.6,0.5-1C224.3,79.6,226.9,73.3,231.6,70z"/><ellipse transform="matrix(0.2487 -0.9686 0.9686 0.2487 -178.0757 425.5991)" class="st5" cx="185.3" cy="327.6" rx="6.1" ry="4.2"/><path class="st21" d="M253.5,107.4l0.4,0.7l0.9,1.7l1.4,2.3l0.9,1.2l0.9,1.2l1,1.2l1,1.1l1,1l1,0.8l0.8,0.7l0.7,0.5l0.6,0.5h0.1 c0.3,0.3,0.3,0.7,0,1c-0.2,0.2-0.4,0.3-0.6,0.2l-0.8-0.2c-0.7-0.2-1.4-0.5-2-0.8l-1.3-0.7l-1.3-0.9l-1.3-1.2l-1.2-1.3l-1.1-1.4 c-0.3-0.5-0.6-1-0.9-1.5c-0.2-0.5-0.4-1-0.6-1.5c-0.2-0.5-0.3-0.9-0.4-1.4c-0.2-0.7-0.3-1.4-0.4-2.1c0-0.3,0-0.5,0-0.8 c-0.2-0.3-0.1-0.8,0.2-1s0.8-0.1,1,0.2c0.1,0.1,0.1,0.3,0.1,0.4L253.5,107.4z"/><path d="M275.5,58.3c0.5-0.5,1.2-0.9,1.8-1.2c1.4-0.7,3-1.1,4.6-1.2h2.6l1.2,0.2l1,0.3l1.4,0.7l0.5,0.3c0.2,0.1,0.2,0.2,0.2,0.4 c0,0,0,0.1-0.1,0.1l-0.4,0.2h-0.6l-0.6-0.2l-0.8-0.2h-5.5l-1.1,0.2l-2,0.5l-1.9,0.6c-0.2,0.1-0.3,0-0.4-0.2l0,0 C275.3,58.7,275.3,58.5,275.5,58.3C275.4,58.3,275.5,58.3,275.5,58.3z"/><ellipse transform="matrix(0.2487 -0.9686 0.9686 0.2487 -252.7826 460.0859)" class="st5" cx="170.2" cy="393" rx="6.1" ry="4.2"/><path d="M276.2,79.8c0.2-0.6,0.4-1.1,0.6-1.7c1-3.3,0.7-6.4-0.7-6.8s-3.5,1.9-4.5,5.2c-0.3,0.8-0.5,1.7-0.6,2.6 C272.8,79.1,274.5,79.3,276.2,79.8z"/><path d="M298.6,63l1.3,0.2c1,0.3,1.9,0.7,2.7,1.3l1.2,1l0.9,1.1l0.5,0.9v0.3c0.1,0.2,0,0.3-0.2,0.4l0,0h-0.3l-0.3-0.2l-0.7-0.6 l-2.1-1.7l-2.3-1.5l-1.1-0.6c-0.1-0.1-0.2-0.3-0.1-0.4L298.6,63z"/><path d="M299.4,88.2c0.3-0.6,0.6-1.2,0.8-1.9c0.9-2.9,0.8-5.5-0.1-5.8s-2.5,1.8-3.4,4.7l-0.3,1C297.5,86.7,298.5,87.4,299.4,88.2z" /><path class="st22" d="M299.4,28.2c0-0.1,2.9,26.9,8.6,34.3C308,62.4,313,41.8,299.4,28.2z"/><ellipse class="st10" cx="226.7" cy="76.3" rx="4" ry="5.1"/><g><g><defs><path id="SVGID_15_" d="M165.3,203.7c11.3-12.7,24.3-10.5,35.2-4.1s53.5,46.2,187,46.3l-5,36.5c0,0-57.3-4-107.2-10.2 S181,242.4,170,232.7S157.3,212.6,165.3,203.7z"/></defs><clipPath id="SVGID_16_"><use xlink:href="#SVGID_15_" style="overflow:visible;"/></clipPath><g class="st23"><polygon class="st16" points="349.6,364.1 130.9,237 202.3,115.1 421,242.1 "/><path class="st4" d="M384.2,270.8c2.9-5.3-65.3,18-180.5-19.1l115.4,33.2l67.5-3.3L384.2,270.8z"/><path class="st5" d="M163.5,229.6c0,0,5.8-15.2,12.1-19.8c6.1-4.5,12.6-6,22.2-1.7s42.3,33.7,131.7,41.2 c89.4,7.5,25.8-13.6,25.8-13.6l-186.7-61.6c0,0-35,49.7-33.8,50.7S163.5,229.6,163.5,229.6z"/></g></g></g><path class="st5" d="M202.9,157.2c0,0-19.2,27.1-6.8,40.2c0,0-25.7-2.5-30.9,6.6C165.3,204,181.4,167.2,202.9,157.2z"/></g><g id="Table"><polygon class="st24" points="-42.3,481.7 899.4,336.4 1250.8,481.7 "/><path class="st25" d="M870.1,402.8c0,0,26.1,8.8,63.4-0.3s0-17.7,0-17.7l-56.3,2.7L870.1,402.8z"/><path class="st25" d="M903.3,399.1c-0.1,2.9-1.3,5.7-3.4,7.8c-10.4,11.5-43,19.9-81.6,19.9c-47,0-85.1-12.4-85.1-27.8 s38.1-27.8,85.1-27.8S903.3,383.8,903.3,399.1z"/><path class="st25" d="M342.6,459.3c3.3-3.7,5.1-7.6,5.1-11.7c0-8.4-7.6-16.1-20.7-22.7L99.7,460c8.6,8.9,26.1,16.5,49.1,21.7h144 C316.5,476.4,334.3,468.5,342.6,459.3z"/></g><g id="Creature"><path class="st26 flame2" d="M604.5,181.4c0,0,6.5,7.7,1.5,19s-14.5,21.9-8.2,31.3s-16.7-7.6-1.7-32.1 C603.4,187.5,603.6,186.8,604.5,181.4z"/><path class="st27" d="M876.9,400.3c0,0-14.1,0.5-19.4,10.4s3.9,6.2,5.8,4.1c0,0-6.3,12.6,0,10.7s13.7-10.7,13.5-11.2 s-4.4,11.2,0.7,8.6s9.3-13.5,9.3-13.5s-1.8,8.1,2.1,6.9s7.6-11.3,2.9-15.3S880.8,398.3,876.9,400.3z"/><g><g><defs><path id="SVGID_17_" d="M715.4,242.7c0,0,40.6,26.3,34.6,63s-15,45.5-24.9,55.4c0,0,51.3,61.6,106.2,30s36.7-98.8,36.7-98.8 s-28.7-44-47.3-49.7S742.7,221.7,715.4,242.7z"/></defs><clipPath id="SVGID_18_"><use xlink:href="#SVGID_17_" style="overflow:visible;"/></clipPath><g class="st28"><rect x="688.7" y="191.5" class="st29" width="202.2" height="233.2"/><path class="st30" d="M731.6,285.1c0,0,1.4-22,49.6-19.1s90.7,55.6,90.7,55.6l14.9-145.9c0,0-196.1,13.8-193.5,16.4 S731.6,285.1,731.6,285.1z"/><path class="st30" d="M733.1,331c0,0,18.6,29.6,58,26.5s70.1-26,70.1-26s-17.1,126.2-17.1,122.2S696.5,415.2,699.7,412 S733.1,331,733.1,331z"/></g></g></g><path class="st27" d="M896,369.7c0,0,26.9,12.4,42.9,3.2s10.5-31.9-4.9-47.2c0,0,23.4,12.4,23.4,34.4s-20,42.2-65.4,30.9L896,369.7 z"/><circle class="st17" cx="729.5" cy="218.6" r="15.6"/><circle class="st31" cx="735.5" cy="220.3" r="12.5"/><path class="st26 fire" d="M719.3,218.6c0-7.6,5.4-14.1,12.9-15.4l-2.7-0.2c-8.6,0-15.6,7-15.6,15.6s7,15.6,15.6,15.6l2.7-0.2 C724.7,232.7,719.3,226.2,719.3,218.6z"/><path class="st17" d="M705,254.3c0,0,2.4,18.3,10.3,25.4c0,0-0.6-24.1,7.1-31.7c0,0,0.5,16.8,3.9,23.6c0,0,2.9-22.3,8.3-27.8 c0,0,2.3,21.8,5.8,25.8c0,0,0.6-24.3,8-28.6c0,0-0.9,15.3,1.6,22.4c0,0,5.3-19.4,12.6-23.6c0,0,0,15,1.4,20c0,0,1.3-14,11.2-19.7 c0,0-1.4,14.7,0,19.7c0,0,4.6-13,13.3-18c-0.8,6-1.3,12-1.4,18c0,0,6.2-11.6,12.7-15.4c0,0-3.5,10.8-3.5,19c0,0,5.2-10.4,16.4-13.9 c0,0-5.8,12.5-4.5,18.6c0,0,6.7-10.6,13.7-12.9c0.4-0.1,1.5,1.6,2,1.5c7.4-1.5,0-8.8,0-8.8l-60.6-16l-57.4,15.3L705,254.3z"/><ellipse transform="matrix(0.3567 -0.9342 0.9342 0.3567 264.7781 808.8681)" cx="719.7" cy="212.2" rx="4.8" ry="3.4"/><path class="st17" d="M731.6,356.6c0,0,4.3-7.9,18.3-12.3c0,0-9.9,14.6-6.6,23.7c2.3-4.8,5.4-9.2,9.2-13c0,0-2,13.8,0,19.9 c0,0,3.1-10.8,8.8-16.5c0,0-2.3,15.1,2.4,21.2c0,0,0.5-7.1,6.4-16c-1,6.5,1.2,12.9,3.9,19.4c0,0-1.5-9.6,4.2-15.3 c0,0,0.9,11.6,4.6,15.3c0,0,0.7-12.2,4.8-16.3c-1.3,6,3.3,16.6,5.6,16.3c-0.3-6.4-0.6-10.5,1.3-17.6c0,0,3.6,13.7,8.7,16.7 c0,0-4.5-9.7-1.5-17.1c3.5,7.3,6.9,12.1,11.4,14.9l-34.7,16.9l-45.7-31L731.6,356.6z"/><g><g><defs><path id="SVGID_19_" d="M694.6,264.3c0,0-4.8-32.2,37.3-44.7c0,0,8.7-11.8,17.3-11.8c5-0.1,9.8,2.3,12.7,6.4c0,0,5.3-6.4,16-6.4 s13.3,10.5,13.3,10.5s61.3,0.7,95.3,52.7s30,70.7,24,92.7s-23.1,56.8-82.3,51.7c-46.3-4-87.8-19-109.7-62.3 c-2.7-5.3-0.7-11.7,3.3-9.3s24.9,44.2,70,41.4c32.4-2,46.7-30.7,51.4-58.1c2.2-13.1,10.2-79-66.2-86.5 C726.4,235.5,698.9,260,694.6,264.3z"/></defs><clipPath id="SVGID_20_"><use xlink:href="#SVGID_19_" style="overflow:visible;"/></clipPath><g class="st32"><rect x="664.2" y="180.7" class="st33" width="275.8" height="254.7"/><path class="st34" d="M791.2,218.3c0,0,95.6,22.1,95.6,96c0,68.3-37.3,91.8-70.1,90.5c-59.5-2.3-102.8-49.7-102.8-49.7 l55.3,60.6l104.1,19.5l55.2-70.1l-3.8-169.9L791.2,218.3z"/><path class="st35" d="M729.5,217.3c0,0-30.4,16.6-23.4,44.2l-19,9.4C687.1,270.9,682,230.2,729.5,217.3z"/><path class="st36" d="M714.6,346.3c0,0,73.1,87.3,117.1,13.6c0,0-105-23.3-107-23.3S714.6,346.3,714.6,346.3z"/><path class="st36" d="M733,221.8c0,0,10-22.9,29-8.6l-0.9,4.5c4.3-5,10-8.4,16.4-9.9l24.9-5.9l-33.9-12.6l-16.3,5.3 c0,0-27.5,20.9-26.1,21.7S733,221.8,733,221.8z"/> <ellipse transform="matrix(0.3567 -0.9342 0.9342 0.3567 329.8794 950.2162)" class="st34" cx="854.9" cy="235.6" rx="20.7" ry="19.3"/><path class="st35" d="M709.5,236.7c0.6-0.6,9.9-13,23.4-14.9c0,0-3.8-4.2-4.4-4.2s-20.6,7.8-20.6,9.6S709.5,236.7,709.5,236.7z" /><path class="st34" d="M773.2,206.6c0.3,0,13.5,1.8,12.4,10.7l5.6,1.1l2.3-11.3L773.2,206.6z"/><path class="st34" d="M743.5,206.4c0.3,0,14,2.5,14.6,11l3,0.4l2.4-11L743.5,206.4z"/><path class="st36" d="M688,263.3c0,0,28.5-23.9,59.6-26.8s59.7,1.7,78,24.3c0,0-137.3,18.2-137.3,16.5S688,263.3,688,263.3z"/></g></g></g><ellipse transform="matrix(0.3567 -0.9342 0.9342 0.3567 327.1674 938.2892)" class="st31" cx="844.9" cy="231.6" rx="20.7" ry="19.3"/><ellipse transform="matrix(0.3567 -0.9342 0.9342 0.3567 324.8054 933.7851)" class="st17" cx="840.4" cy="231" rx="16.1" ry="15"/><ellipse transform="matrix(0.1908 -0.9816 0.9816 0.1908 463.1082 1020.0533)" cx="850.3" cy="229.1" rx="5.8" ry="4.2"/><path class="st37" d="M871.9,270.4c0,0,22.6-12.4,28.4,4.5s-6.6,20.2-19.7,18.2C880.6,293.1,882.5,286.3,871.9,270.4z"/><path class="st34" d="M900.3,274.9c-3.7-10.8-14.2-9.6-21.3-7.4c6.8-1.6,15.8-1.6,19,7.9s-0.1,15.7-6,17.8 C899.6,291.7,904.3,286.5,900.3,274.9z"/><path class="st34" d="M876.1,275.5c0,0,12.1-6.6,15.2,2.4s-2.2,9.7-9.6,9.7C880.2,283.4,878.4,279.3,876.1,275.5z"/><g><g><defs><path id="SVGID_21_" d="M843.6,324.4c0,0-96.8-2.7-137.6,24c-57.4,37.6-119.6,7.1-114.8-43.4s26.6-67.9,18.6-88.7 c-10.9-28.3,15-51.9,30.2-61.2c0,0-11.4,29.9-5.5,47.7c13.3,39.9,5.6,22.7,5.6,41.8s5.3,43.4,10.7,2.8s12-49.3,16.7-55.3 c7.9-10.1,17.7-23.4,5.1-41.1c0,0,33.5,11.7,8.6,58.8c-18.1,34.2,3.2,56.1,15.4,63.1s39.1-8.6,51.8-1.3s36.6,29.5,49.6,31.9 c15.1,2.8,38.8,5.6,46.3,1.3C845.1,311.3,844.9,317.9,843.6,324.4z"/></defs><clipPath id="SVGID_22_"><use xlink:href="#SVGID_21_" style="overflow:visible;"/></clipPath><g class="st38"><rect x="530.7" y="110.3" class="st26" width="320.3" height="288.8"/><path class="st39" d="M790.8,306.2c-15.2-2.2-20.8-9.3-41.9-17.6s-39,1.6-48.3,0.7c-22.1-2.2-31.3-24.8-36.7-37.4 c0,0-13.4,33.2,12.4,57.1c-12.9-22.2-23.9-45.4-32.8-69.5c0,0-51.3,92.5,14.7,98.3c31.5,2.8,58.3-8.3,81.7-13.5 c51.8-11.5,111.7-0.5,112.6-1.4c11.3-11.3,0.3-14.3-1.6-14.3S806.1,308.5,790.8,306.2z"/><path class="st40" d="M851.3,308c0,0-115.9,3.7-157.1-6.2c5.1,5,179.9,32.1,157.3,16C851.6,317.8,859.3,329.4,851.3,308z"/><path class="st40" d="M822.1,309.9c-1-2.8-47.6,0.7-146.7,8.2c1.8-1.6,57.1,2.1,155.5,1C830.9,319.1,823.9,312.8,822.1,309.9z" /><path class="st41" d="M701.6,140.3c0,0-12.6,86.2-22.7,113.9c0,0-18.7-12.1,3.5-74.5c0,0-28.5,27.3-27.5,81.4 c0,0-29.4-2.3-33.5-41.8c0,0-15.8,41-15.8,61.1s8.1,84.7,88.8,74.6c-15.4,23.8-140.8,18.5-140.8,18.5l18.3-247L701.6,140.3z"/></g></g></g><g><g><defs><path id="SVGID_23_" d="M743.6,399.8c1.1-10.6,6.6-16.3,10-18.9c-2.4-2.4-6.2-2.9-8.3-5.6c-4.9,3.9-10.4,10.1-11.7,22.6 c-4.2-0.5-10-0.2-15.1,3.3c-10.4,7.1,2.7,6.2,5.4,5.3c0,0-11.4,8.3-4.9,9.5s13.9-3.9,14-4.4s-5.6,10.5,0.1,10.5s11-10.4,11-10.4 s0.3,5.1,3.2,5.6s6.1-4.8,4.5-10.1S747,400.8,743.6,399.8z"/></defs><clipPath id="SVGID_24_"><use xlink:href="#SVGID_23_" style="overflow:visible;"/></clipPath><g class="st42"><rect x="706" y="362.1" class="st33" width="55.1" height="67.4"/><path class="st34" d="M754.7,380.3c0,0-12.7,5.9-14,14.9s3,6.2,5.7,8.8s4.5,7,2.7,10.2s-3.4,2.2-3.4,2.2s-1.1,4.3,4.4,3.5 s11.7-18.4,11.7-18.4L754.7,380.3z"/><path class="st34" d="M742.7,408.3c0,0-2.8,10.5-9.4,12.7c-1.5,0.5-3.3-1.9-3.3-1.9s-0.2,3.8,1,4.3c3.4,1.3,9.4-0.4,9.4-0.4 S747,415.5,742.7,408.3z"/><path class="st34" d="M734.8,408.7c0,0-7.3,5.5-13.3,5.7c-4.5,0.1-3.7-2.4-3.7-2.4s-4.5,4.8,1.2,5.2S731.7,415.4,734.8,408.7z" /><path class="st34" d="M717.2,401.7c0,0-2.5,3.2,1.3,3.9c2.1,0.4,4.2,0.5,6.3,0.4c-2.2,1.3-4.5,2.2-7,2.8 c-4.5,1.2-4.9-5.5-4.9-5.5L717.2,401.7z"/></g></g></g><g><g><defs><path id="SVGID_25_" d="M842.5,428.6c-2.4-3.7-6.4-5-10.1-5.1c1-15.9,6.4-22.7,6.6-23c1.7-2.2,1.4-5.3-0.8-7 c-2-1.6-4.9-1.4-6.7,0.4c-0.9,1-8,9.5-9.1,29.2c-4.7-0.1-11.1,0.7-15.6,5.3c-8.8,9,5.3,7,7.7,5.6c0,0-9.6,10.3-3,10.2 s12.9-6.5,12.9-7s-3.4,11.4,2.1,10.3s8.8-12.3,8.8-12.3s0.1,4.9,4.2,4.9S845.9,433.8,842.5,428.6z"/></defs><clipPath id="SVGID_26_"><use xlink:href="#SVGID_25_" style="overflow:visible;"/></clipPath><g class="st43"><rect x="797.5" y="379.6" class="st33" width="63.3" height="75.8"/><path class="st34" d="M841.7,395c0,0-11,6.9-12.7,27.1c-0.2,2.4,0.7,2.9,2.6,3.6c4.6,1.5,9.1,4.2,9.1,9.6s-3.1,7.2-3.1,7.2 s6.5,4.2,8.4-1.5s0.8-17.6-8.2-18.9c0-1.1,6.5-23,5.7-23S841.7,395,841.7,395z"/><path class="st34" d="M832.5,430.5c0,0,1.3,5.5-6.8,16.8c-3.2,4.5,8.2-2.1,8.2-2.1S838.4,436.4,832.5,430.5z"/><path class="st34" d="M825.5,433.7c0,0-5.6,6.8-11.3,8.6c-2.4,0.9-5,0.7-7.3-0.3c0,0,0.3,5.5,5.9,4.3S824.4,441,825.5,433.7z"/><path class="st34" d="M805.5,428.5c0,0-1.7,5.7,3.9,4.5s7.9-2.5,7.9-2.5s-1.6,3.1-7.1,7.3s-9.7-4.8-9.7-4.8L805.5,428.5z"/></g></g></g><path class="st41" d="M653.1,162.7c0,0-24.5,10.6-20.5,44.8c3.8,32.1-10.7,30-10.7,30s19.6,8,31.7-8 C669.6,208.2,638.5,185,653.1,162.7z"/><path class="st26 fire" d="M842.8,250.5c-10-3.8-14.7-15.5-10.7-26.2c2.6-7.1,8.8-12.2,16.3-13.4c-8.9-1.4-18.1,4.1-21.7,13.4 s0.7,22.4,10.7,26.2c2.9,1.1,6,1.4,9.1,1C845.2,251.3,844,251,842.8,250.5z"/><ellipse class="st34" cx="747.3" cy="217" rx="4.3" ry="2.3"/><ellipse transform="matrix(0.1874 -0.9823 0.9823 0.1874 417.6949 937.3082)" class="st34" cx="775.4" cy="216.2" rx="2.3" ry="4.3"/><path d="M768.2,216.9c0.5-0.8,1.2-1.5,2-2l1.2-0.7l1.4-0.6l1.6-0.3h1.8c1.2,0.1,2.4,0.6,3.4,1.3c0.8,0.6,1.5,1.4,2,2.3 c0.3,0.6,0.6,1.2,0.7,1.9c0.1,0.3,0.1,0.5,0.1,0.8c0,0.2-0.2,0.4-0.4,0.4l0,0h-0.3l-0.5-0.5l-1.3-1.2c-1.1-1-2.5-1.8-4-2.1h-2.6 l-2.3,0.5l-1.7,0.6l-0.6,0.3c-0.2,0.1-0.4,0-0.5-0.2C768.1,217.3,768.1,217,768.2,216.9z"/><path d="M739.7,218l0.3-0.7c0.3-0.6,0.7-1.1,1.1-1.6l0.9-0.9l1.2-0.9c1-0.6,2.1-0.9,3.2-1h1.7l1.6,0.4c0.9,0.3,1.8,0.8,2.5,1.4 c0.5,0.5,1,1,1.3,1.6l0.2,0.5v0.2c0.1,0.2,0,0.4-0.2,0.5H753l-0.5-0.2l-1.6-0.6L749,216l-1.1-0.2h-1.2c-0.8,0-1.6,0.1-2.3,0.4l-2,1 l-1.4,1l-0.5,0.4l0,0c-0.2,0.1-0.4,0-0.5-0.1c0-0.1-0.1-0.2-0.1-0.3L739.7,218z"/></g><g id="Documents"><path class="st41" d="M634.2,222.6c0,0-19.4-5.5-17.3-32.1c1.7-21.6-8.4-21.8-8.4-21.8s12.8-3.5,21.5,8.8 C641.6,193.9,620.4,217.3,634.2,222.6z"/><path class="st44" d="M453.7,247.8c-0.5-3.7,99.8-26.8,169.5-37.7v13c0,0-134.7,26.1-170.1,33.6L453.7,247.8z"/><g><g><defs><path id="SVGID_27_" d="M578,214.3l-10.2,113.2c0,0,13.6,1.6,19.2-15.6c3.2-9.9,12.3-7,17.5-7.7s8-7.4,10.7-6.8 c5.7,1.4,7.7,13.8,10.7,15.5s7.5,1.8,10.4-1.1s3.1-8.8,6.8-9.6s8,0.9,8.4,3.7s1.2,6.8,4.3,7.2c10.4,1.1,20.3-3.8,20.3-3.8 l5.7-95L578,214.3z"/></defs><clipPath id="SVGID_28_"><use xlink:href="#SVGID_27_" style="overflow:visible;"/></clipPath><g class="st45"><rect x="532.3" y="183.3" class="st17" width="180.7" height="161"/><path class="st46" d="M572.4,309c10-3.1,5.5-18.5,12.7-18.5s6.5,5.4,15.8,0s16.9-11.5,21.9-6.4s2.5,19.5,6.9,16.9 s7.8-14,13.7-14s9.4,11.9,15.9,11.9s19.5-19.1,19.5-19.1L682,322l-133.6,11l3.5-36.5C551.9,296.5,568.6,310.1,572.4,309z"/><path class="st47" d="M572.4,315.6c10-3.1,5.5-18.5,12.7-18.5s6.5,5.4,15.8,0s16.9-11.5,21.9-6.4s2.5,19.5,6.9,16.9 s7.8-14,13.7-14s9.4,11.9,15.9,11.9s19.5-19.1,19.5-19.1l3.2,42.2l-133.7,11l3.5-36.5C551.8,303.1,568.6,316.7,572.4,315.6z"/></g></g></g><path class="st48" d="M635.7,235.2l37,0.5"/><path class="st48" d="M634.5,247.2l37,0.5"/><path class="st48" d="M633.3,259.3l37,0.5"/><path class="st48" d="M632.1,271.1l37,0.5"/><g><g><defs><polygon id="SVGID_29_" points="586.9,231.2 583.3,271.7 624.9,272.7 627.9,231.2 "/></defs><clipPath id="SVGID_30_"><use xlink:href="#SVGID_29_" style="overflow:visible;"/></clipPath><g class="st49"><rect x="574.9" y="219.8" class="st24" width="66" height="77.7"/><g class="st50"><ellipse cx="603.6" cy="271.8" rx="16.7" ry="14.6"/> 	<ellipse transform="matrix(7.846045e-02 -0.9969 0.9969 7.846045e-02 311.3266 830.9633)" cx="605.1" cy="247.1" rx="12.5" ry="8.7"/></g></g></g></g><path class="st51" d="M450.7,247.6l4.2,9.3c0,0,90.7-12,171.3-32.9l-1-11.6C576.6,224.1,516.2,235.9,450.7,247.6z"/><path class="st26 flame" d="M638.5,176.5c0,0-6.5,7.7-1.5,19s14.5,21.9,8.2,31.3s16.7-7.6,1.7-32.1C639.6,182.7,639.4,182,638.5,176.5z" /><g><g><defs><path id="SVGID_31_" d="M377.7,242.7c0,0-8.9,11-7.8,28.2s16.4,36.3,16.4,36.3l40.2-20.8c6.6-3.4,14.1-4.4,21.3-3l9.4,1.6 c7.8,1.3,16.6,0.5,19.9-1.2s7.7-3.2,11.4-6c4.2-3.2,7.3-7.7,8.7-12.8l5.2-18.3c0.5-1.6-0.4-3.3-2-3.8c-0.6-0.2-1.3-0.2-1.9,0.1 l-10,3.3c-5.1,2.4-16.3,1.6-18.8,0.8l-7.7-2.8l14.4-4l-16.6-2.6c-3.6-0.6-7.3-2.1-12.6,0s-13.4,4.2-13.4,4.2L377.7,242.7z"/></defs><clipPath id="SVGID_32_"><use xlink:href="#SVGID_31_" style="overflow:visible;"/></clipPath><g class="st52"> <rect x="337.6" y="198.4" transform="matrix(0.9965 -8.367725e-02 8.367725e-02 0.9965 -20.5282 37.0096)" class="st53" width="187.3" height="130"/><path class="st54" d="M480.8,240.9c0,0-32.4,5.3-43.4,2.5s-61.3,6.8-86.2,28.3l52.2-72L480.8,240.9z"/><path class="st4" d="M496,240c4.2,20.7-7.8,41.2-8.3,40.4s29.2-0.1,29-2.6s7-42,7-42L496,240z"/><path class="st4" d="M364.6,304.6c0,0,59-25.4,75.7-21.9s0.3,8.6,0.3,8.6l-58.4,30L364.6,304.6z"/><path class="st55" d="M476.7,246.7l-7.4,50.4c0,0-29-9.5-29-10.2s1.8-20.4,2.8-31.2c0.4-4.3,2.8-8.1,6.5-10.3h0.1 c2.6-1.2,5.5-1.8,8.4-1.8L476.7,246.7z"/><g class="st56"><path d="M466.9,256.9h6c2,0,4.1-0.1,6.1-0.3l1.7-0.2l1.7-0.3l1.7-0.4l1.7-0.5l3.4-1.2l3.2-1.4l2.9-1.4l2.5-1.5 	c1.5-0.9,2.7-1.8,3.6-2.5l0.9-0.7l0.3-0.3l0,0c0.5-0.3,1.1-0.2,1.4,0.3c0.3,0.4,0.2,0.9-0.1,1.2l-0.4,0.3l-1,0.8 	c-1.2,1-2.4,1.9-3.7,2.7l-2.6,1.6l-3,1.5l-3.3,1.4l-3.5,1.2l-1.8,0.5l-1.8,0.4l-1.8,0.3l-1.8,0.2l-3.4,0.2h-3 	c-1.5-0.1-3-0.4-4.5-0.8l-1.6-0.6c-0.2,0-0.3-0.2-0.3-0.3c0-0.1,0-0.1,0.1-0.2C466.6,256.8,466.8,256.8,466.9,256.9z"/></g><g class="st56"><path d="M460.9,265.8l1.9,0.2l2.1,0.2l2.7,0.2h6.9l3.8-0.3l3.9-0.7l3.8-1.1l3.6-1.4c2.1-0.9,4.1-1.9,6.1-3.1 	c1.4-0.8,2.7-1.7,4-2.7l1-0.8l0.3-0.3l0,0c0.5-0.3,1.1-0.2,1.4,0.3c0.3,0.4,0.2,0.9-0.1,1.2l-0.4,0.4l-1.1,0.9 	c-1.3,1-2.7,2-4.1,2.9c-2,1.3-4.1,2.4-6.3,3.3l-3.7,1.5l-4,1.2c-1.4,0.3-2.7,0.5-4.1,0.6l-4,0.2h-3.7l-3.3-0.4l-2.8-0.5 	l-2.1-0.5l-1.8-0.6c-0.2-0.1-0.3-0.3-0.2-0.5s0.3-0.3,0.5-0.2L460.9,265.8z"/></g><g class="st56"><path d="M465.1,275.5h6.7c2.3-0.1,4.6-0.3,6.8-0.7l3.7-0.9l1.9-0.6l1.8-0.7l1.8-0.8l1.8-0.9l3.4-1.9l3-2l2.6-2 	c1.3-1,2.5-2.1,3.6-3.2l0.9-1l0.3-0.3l0,0c0.4-0.4,1-0.3,1.4,0.1c0.3,0.3,0.3,0.8,0.1,1.2l-0.3,0.4l-1,1.1 	c-1.2,1.2-2.4,2.3-3.7,3.4l-2.7,2.1l-3.1,2.1l-3.5,2l-3.8,1.8l-2,0.8l-2,0.6l-4,0.9c-2.4,0.4-4.8,0.5-7.2,0.4l-2.8-0.3 	l-2.2-0.4l-1.8-0.6c-0.2,0-0.3-0.2-0.2-0.4l0,0c0-0.2,0.2-0.3,0.3-0.3C465,275.4,465.1,275.5,465.1,275.5z"/></g></g></g></g></g></svg>
</div>
              
            
!

CSS

              
                /*
IE 9 - Literally nothing happens.
IE 10 - Perfect. https://cl.ly/iICS
IE 11 - Perfect. https://cl.ly/iI0g
Edge - Perfect. https://cl.ly/iHnG
Safari 8 - Perfect. https://cl.ly/iHzv
Safari 9 - Perfect. https://cl.ly/iHZm
Safari 10 - Perfect.
Chrome - Perfect.
Firefox- Yep.
*/

body, html {
  background: #58b792;
  height: 100%;
}

.container {
  display: flex;
  min-height: 100%;
  
  svg {
    width: 100%;
    height: 100%;
    margin-top: auto;
  }
}

.st4, .fire, .st32 .st35, .st32 .st36 {
  animation: flickr 2s infinite alternate ease-in-out;
}

#Smoke {
  transform-origin: 50% 50%;
  animation: drift 5s infinite alternate ease-in-out;
}

.st46 {
  animation: glow 2s infinite alternate ease-in-out;
}

.flame {
  transform-origin: 50% 50%;
  animation: fire 5s infinite alternate ease-in-out;
}

.flame2 {
  transform-origin: 50% 50%;
  animation: fire 3s infinite alternate ease-in-out;
}

@keyframes flickr {
  0%, 30%, 50% {
    opacity: 0;
  }
  20%, 40%, 100% {
    opacity: 1;
  }
}

@keyframes drift {
  0% {
    opacity: 0.2;
    transform: scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(-2em);
    transform: scale(1);
  }
}

@keyframes glow {
  0% {
    opacity: .4;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fire {
  0% {
    opacity: 0.5;
    transform: rotate(2deg) translateY(-.1em);
  }
  100% {
    opacity: 1;
  }
}

@keyframes move {
  0% {
    transform: rotate(1deg);
  }
  100% {
    transform: rotate(0deg);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console