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 is required to process package imports. If you need a different preprocessor remove all packages first.

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

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="outer">
        <div class="container">
            <div class="heading fade-in">
                <svg id="headingSVG" version="1.0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 693.000000 325.000000" preserveAspectRatio="xMidYMid meet">
                    <g class="heading-text">
                        <defs>
                            <linearGradient id="MyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
                                <stop class="stop-one" offset="5%" stop-color="#F60" />
                                <stop class="stop-two" offset="95%" stop-color="#FF6" />
                            </linearGradient>
                        </defs>

                        <path d="M248.6 4.2c-.3.7-.7 3.1-1.1 5.3-.8 4.7-4.1 17.3-6.2 23.2-1.3 3.8-1.3 4.4.3 6.7 1.6 2.6 1.6 2.6-.9 2.6-2.1 0-2.6.6-3.2 3.7-.4 2.1-1.3 5-2.1 6.5s-1.4 3.4-1.4 4.3c0 .9-1.4 4.6-3 8.2-1.9 4.1-2.8 7.3-2.4 8.8.3 1.3.1 3.2-.4 4.1-.6 1.1-.7 2.7-.1 4 .7 1.9.4 2.3-1.4 2.6-1.3.2-2.4 1.3-2.9 2.8-.4 1.4-1.4 4.7-2.3 7.5-2.6 7.7-2.9 11.3-1.3 13.8 1.3 2 2.5 7.6 4.5 21.2l.7 5 .6-5.5.6-5.5.7 5c2 12.7 2.6 14 2 4.4-.3-6.5-.2-9.9.6-10.3.6-.4 1.1-2.9 1.1-5.7 0-2.7.4-4.9.8-4.9.5 0 1.7 3.5 2.6 7.7 1 4.2 2.5 9.1 3.3 10.8l1.4 3-.8-4c-1.1-5.7-.3-27.1 1.1-31.4 1.5-4.2 4.3-5.3 5-1.9.3 1.3.8 5 1.2 8.3.4 3.3.9 5.1 1.1 4 1.2-6.7 4.1-14.5 5.3-14.5 1.1 0 2.8 7.5 3.7 15.5l.7 7 .9-7.5c1.5-12.6 1.8-12.7 4.7-1.9l1.9 7.4-.1-6.5c-.1-4.4.4-7.5 1.5-9.8 2.8-5.2 4.1-4.4 5.8 4 2.6 12.7 2.7 12.7 2.8 4.1.2-12.6 1.8-14.8 4.4-6.1.9 2.9 2.1 8.7 2.7 12.8.7 4.1 1.6 9.3 2 11.5l.8 4 .1-3.5c.2-4.5 1.1-8 2.2-8 .4 0 1.1 2.1 1.5 4.7.4 2.7 1.3 6.4 2 8.3 1.3 3.3 1.4 3.1.8-3.8-.3-3.9-.4-7.2-.1-7.2.2 0 1.2 4.4 2.1 9.7.9 5.4 2.1 11.6 2.6 13.8.5 2.2 1.2 5.5 1.6 7.3 1.1 5.9 1.3 2.8.3-4.3-2-14.3-2.9-25.8-2.3-29.6 1-5.7 2.1-3.7 3.4 6.1.6 4.7 1.4 8.7 1.7 9 1.1 1.1-.8-33.8-2.1-39-.7-3-3.9-10.8-7-17.2-4.4-9.2-6.1-11.7-7.9-12-1.8-.2-2.2-.9-2-3.4.2-2.1-.4-3.7-1.7-4.9-1.1-1-2.5-3.7-3.1-5.9-.6-2.3-2.4-6.2-4-8.7-1.6-2.5-2.9-4.9-2.9-5.4 0-.4-1.8-3.2-4.1-6.1-2.6-3.5-4.6-5.1-5.5-4.7-1.2.4-1.4 0-.9-2 .4-1.6 0-3.9-1.3-6.4-1.1-2.1-2.8-5.6-3.8-7.7-2-4.2-4.1-5.7-4.8-3.4zm13.6 61.6c1.5 2.2 3.3 4.2 4 4.5 2.1.9-1 2.5-5.9 3.3-3.9.6-4.2.8-4.6 4.3l-.3 3.6-.8-3.3c-.5-1.7-1.4-3.2-2-3.2-3.2-.1-3.6-1.6-1.8-6.7 1-2.8 2.3-5.8 3-6.6.6-.7.9-1.7.5-2.1-.4-.4-.1-1.1.7-1.6 1-.6 1.9-.2 3 1.4.8 1.3 2.7 4.1 4.2 6.4z" class="test" />
                        <path d="M169.5 5.9c-4.7.6-5 .8-5.1 3.6-.2 8.6-.4 10-1.3 8.5-.6-.8-1.3-3.5-1.6-6.1l-.7-4.7h-5c-2.9 0-5.1.5-5.4 1.2-1.1 3 2.5 31.8 4.6 37.1 1.2 2.9 3 18.3 3.1 25.4 0 1.9.9 4.5 2 5.9 2.3 3 2.4 4.6.3 6.7-1.3 1.3-1.4 2.1-.6 3.8.6 1.2 1.3 5.1 1.5 8.7.3 3.6.8 7.6 1.2 9 .3 1.4 1.1 11.9 1.6 23.5.6 11.5 1.3 21.6 1.5 22.4 1.1 3.4 1.6-.9 2-17.6.4-19.6 1.1-26.1 2.4-22.8.4 1.1 1.1 5.6 1.6 10l.8 8 .6-5c.4-2.8.5-7.7.2-10.9-.3-3.6-.1-5.7.4-5.3.6.3 1.5.2 2.2-.2 1-.6 1-1.9.1-6.2-1.5-6.8-.5-22.7 1.5-24.8 1.3-1.2 1.6-1.1 2 1 .3 1.3.7 3.5.8 4.9.4 3.2 2.2 2.7 2.5-.7.3-3.8 1-5.3 2.6-5.3 2 0 2.7 4.4 2.7 15.8 0 5.2.2 9.3.5 9 .3-.3.8-5.4 1.2-11.4.5-10.6 1.4-14.4 3.3-14.4.5 0 1.3 2.4 1.8 5.2.6 2.9 1.6 8.2 2.2 11.8.7 3.6 1.6 10.2 1.9 14.7.7 8.9 2.1 12.4 2.1 5 0-2.5.4-4.8.9-5.1 1-.7 1.9 5.2 2.1 13.9.1 3.3.5 9.8.9 14.5l.8 8.5.3-8.5c.2-4.7.4-12.2.4-16.7.1-7.4.8-10.4 2.1-9.1.3.3 1.4 5.3 2.5 11.3 1.1 6 2.2 11.1 2.6 11.4.6.7-.4-19.8-1.1-21-.3-.4-.2-1 .2-1.2.5-.3.5-6.5.1-13.8-1.6-31-1.4-82.5.4-83.1.8-.3.8-1-.1-2.7-1-1.7-2-2.1-4.4-1.9l-3.2.3.4 6.9c.2 4.8 0 6.7-.8 6.2-.6-.4-1.1-2.8-1.1-5.4-.1-5.2-2.1-8.8-4.5-7.9-.8.4-1.5 1.2-1.5 1.8 0 .8-.4.8-1.2.2-1.6-1.3-9.3-2.5-10.1-1.7-.3.4 0 1.8.7 3.3.8 1.4 1.7 6.2 2.1 10.6.4 4.4.9 9.1 1 10.5.2 1.3 1.4 3.3 2.9 4.5 3.2 2.5 3.3 3.3.4 3.7-2 .3-2.3.9-2.2 4.8 0 2.5.4 6 .9 7.7.7 3.1.6 3.3-1.8 3.3-1.5 0-3.2.6-3.9 1.4-1.1 1.2-1.6 1.2-3.1-.2-1-.9-3.3-1.6-5.2-1.5l-3.3.1-.4-13.7c-.3-10.1.1-15.9 1.4-22.6.9-5 1.7-10.5 1.8-12.3 0-3.5.5-3.4-8.5-2.3z" />
                        <path d="M464.5 6.8c-1.1.2-2.4.8-2.9 1.3-.6.5-2.5.9-4.4.9-3.4 0-3.5 0-2.9 3.7l.5 3.8-1.6-3.3c-1.4-3-1.9-3.2-5.1-2.6-4.8.9-5.8 2-3.8 4.2.9 1 1.7 2.4 1.7 3.2 0 .7.8 2.7 1.9 4.4 2 3.3 3.6 9.7 4.7 18.6.3 3 1.1 6.2 1.6 7 .8 1.3.9 1.3.5-.1-.6-1.9 1.2-10.9 2.1-10.9.3 0 1.6 1.1 2.8 2.5 2.1 2.4 3.5 9.9 4.9 25.4.7 8.6 1.7 7.4 1.5-1.9-.1-4.7.1-9.5.5-10.8l.8-2.3 1.3 2.7c.8 1.4 1.6 5.6 1.9 9.3.3 3.6 1.1 8.1 1.6 9.9.6 1.8.9 5.2.8 7.5-.2 2.3.1 6.7.6 9.7.5 3 .8 5.8.7 6.2-.1.3.9 6.9 2.3 14.5 1.3 7.6 2.6 15.1 2.9 16.8.2 1.6.3-.2 0-4.2-.2-3.9 0-7.4.5-7.7 1.2-.7 2.2 5.2 2.2 12.3 0 3.1.9 8.1 2 11.3 1 3.1 2.2 8.2 2.5 11.2.4 3.1 1.1 5.9 1.5 6.2.5.3.9 1.4.9 2.5 0 1.7-.8 1.9-9.7 1.9-8.5 0-9.9.3-11.9 2.1-1.8 1.7-2.9 2-5.1 1.3-1.5-.4-3.2-.8-3.8-.8-.5-.1-1.7 3.9-2.6 8.9l-1.7 9 .2-9 .1-9-5.5.3c-3 .2-5.9.7-6.3 1.1-.5.5-1.1 2.6-1.4 4.8-.4 2.8-.1 4.2 1.1 5.2 2 1.7 2 3.8.2 5.6-1 1-1.6 5.6-2.2 15.2-.4 7.6-.7 14.1-.6 14.6.6 2.1-1.7.2-3.8-3.3-2.7-4.2-3.8-4.8-5.9-2.8-1.1 1.1-1.2.7-.6-2 .5-2.4.1-4.5-1.4-7.7-1.2-2.5-2.1-5.5-2.1-6.7 0-2.3-2.2-9.3-3.2-10.3-.3-.3-1.5 3.4-2.7 8.2-1.9 7.8-3.5 12.1-6.1 17.4-.5.9-1.4 3.6-2 6-1.6 5.7-2.5 3.6-3.5-8.4-.6-8.1-.9-8.8-2.6-8.4-2.3.6-2.3.9-.4-4.4.9-2.4 1.3-5 .9-5.9-.4-.8-.9-5.8-1.3-11l-.6-9.5h-12l.2 4.5c0 2.5.4 7 .7 10l.7 5.5-1.5-3.5c-.8-1.9-1.8-6.2-2.2-9.5l-.9-6-4.7-.1c-6.3-.2-7.6 1.4-5.5 6.4.9 2 2.3 8.5 3.2 14.5 2.3 14.3 2.4 15.4 2.9 28.7.5 13.5 1.7 28.3 2.2 28.9.2.2.4-2.7.5-6.5 0-3.8.4-9.2.8-11.9l.6-5 1.4 6.5c.8 3.6 1.9 7.4 2.5 8.5.6 1.1 1.1 4.9 1.2 8.5.1 3.6.6 9.2 1.3 12.5.6 3.3 1.2 10.9 1.2 17l.2 11 1.2-10c1.4-12 1.2-11.2 2.7-9.7.7.7 1.5 3.6 1.9 6.4.3 2.9 1.7 10.7 2.9 17.3 1.2 6.6 2.8 16 3.4 21l1.2 9 .8-8.8c.5-4.8.5-14 0-20.5-.5-6.4-.8-12.4-.7-13.2.4-5.3 1.5-11 2.2-11 .5 0 1.1 4.2 1.5 9.4 1.4 18.3 2.4 15.2 2.1-6.3-.2-11.7-.1-22 .2-22.8 1.1-2.9 2.3 1 2.4 8.2.2 6 .3 5.4 1-4.5.5-6.3 1.3-13.3 1.8-15.5l.8-4 1.7 3.7c2.6 6 4 21.9 2.9 31.8-.6 4.7-.7 9.2-.2 10 .5.9.9-.5.9-4.1 0-3 .7-7.7 1.6-10.4l1.7-4.8 1.4 2.7c.8 1.5 1.6 5 1.8 7.9.3 2.9.9 7.6 1.5 10.6.5 2.9 1.1 9 1.1 13.5.2 13.8 1.6 15.4 1.9 2.1l.2-12 1.3 6c.7 3.2 1.6 11.2 2 17.7.4 6.5 1 12 1.4 12.2.3.2.8-10 .9-22.7.4-23.5 1.3-33.7 2.5-28.7.3 1.4 1 7 1.5 12.5l.9 10 .2-8.5c.8-26.7 1.1-32 2.4-36.5.9-3 1.7-4.4 2-3.5 1 2.6 2.7 15.7 2.8 21.2 0 2.9.4 7.1.8 9.3.4 2.2.7-10.5.7-28.2-.1-17.6.2-32.5.7-32.9 1.9-1.9 2.3.8 2.7 16.1.1 4.4.3 7.5.6 7 .8-2.1 2.4-19.2 2.4-25-.1-3.4.8-11.2 2-17.5 2.7-15.4 3.1-16.9 4.1-17.6 1.2-.7 4.9 5.6 4.9 8.4 0 1.4 1.3 3.4 3 4.8 2.7 2.3 2.8 2.8 1.7 4.7-1 1.6-1.2 5-.8 12.9.6 9.7.9 10.9 2.9 12.3 2.5 1.8 2.9 3.5.7 3.5-2.7 0-3.3 3.5-2.9 18 .4 14 1.9 34.9 2.3 30.2 0-1.3 1.2-3.9 2.5-5.8 3.8-5.6 5.3-2.1 6.2 14.8 1 17.1 1.9 19 2.7 5.2.3-6.6 1-13.1 1.6-14.5.5-1.3 1.2-3.6 1.5-5.2.4-1.5 1-2.7 1.5-2.7 1.1 0 3.1 10.1 3.1 15.7 0 2.5.5 4.3 1.1 4.3.8 0 .9-2.1.4-6.9-.7-7.5-.1-11.1 2-11.1 1.2 0 3.4 7.1 3.4 11-.1 9.1 1.2 25 2 27 .9 2.1 1.1 1.6.8-3.5-.4-11.5 1.4-37.4 2.8-38.5 1.7-1.4 1.9-.9 3.5 6.8.7 3.4 1.6 6.2 2.1 6.2.7 0 .1-10-.7-10.9-.6-.6 1.6-4.1 2.6-4.1.5 0 1.2 2 1.6 4.5 1.1 7.5 2.7 6.6 1.9-1.1-.3-3.8-.7-10.5-.8-14.9l-.2-8-3.6.3-3.6.3-.6-5.3c-.4-2.9-.7-9.2-.7-14.1V203l-6.7.1c-3.8.1-7.3.5-7.8 1-2.1 1.6-3.3-.7-3.6-6.6-.4-5.6-.2-6 1.9-6.3 1.8-.3 2.6.4 3.8 3.4 1.2 2.9 1.8 3.4 2.5 2.3.5-.8.9-2.4.9-3.6 0-1.6.8-2.5 2.7-2.9 3.2-.8 5 1.2 5.8 6.5.3 2 1 5.2 1.5 7.2.6 2 1 5.2 1.1 7 0 3.3.1 3.3 1 .9.6-1.3.7-5.4.4-9-.3-3.6-.1-7.2.4-8 1.2-1.8 1.3-1.8 4.3 6 2.3 5.9 3.1 9.8 4.3 21.5 1.3 13.2 1.7 15.5 2.6 16 1.3.9 1.2-47.6-.2-51.2-.7-1.9-.7-2.9 0-3.1.7-.2 1.1-3.8 1.1-9 0-10.9.9-12.6 4.5-9.2 3.2 3 5.5 7.1 5.5 10 0 1.2 1.3 3.3 3 4.6 2.7 2.3 2.8 2.8 1.7 4.7-1 1.6-1.2 5-.8 12.9.6 9.7.9 10.9 2.9 12.3 2.5 1.8 2.9 3.5.7 3.5-2.7 0-3.3 3.5-2.9 18 .4 14 1.9 34.9 2.3 30.2 0-1.3 1.2-3.9 2.5-5.8 3.8-5.6 5.3-2.1 6.2 14.8 1 17.1 1.9 19 2.7 5.2.3-6.6 1-13.1 1.6-14.5.5-1.3 1.2-3.6 1.5-5.2.4-1.5 1-2.7 1.5-2.7 1.1 0 3.1 10.1 3.1 15.7 0 2.5.5 4.3 1.1 4.3.8 0 .9-2.1.4-6.9-.7-7.5-.1-11.1 2-11.1 1.2 0 3.4 7.1 3.4 11-.1 9.1 1.2 25 2 27 .9 2.1 1.1 1.6.8-3.5-.4-11.5 1.4-37.4 2.8-38.5 1.7-1.4 1.9-.9 3.5 6.7.7 3.5 1.6 6.3 2.1 6.3.7 0 .1-10-.7-10.9-.6-.6 1.6-4.1 2.6-4.1.5 0 1.2 2 1.6 4.5 1.1 7.5 2.7 6.6 1.9-1.1-.3-3.8-.7-10.5-.8-14.9l-.2-8-3.6.3-3.6.3-.6-5.3c-.4-2.9-.7-9.2-.7-14.1V203l-6.7.1c-3.8.1-7.3.5-7.8 1-2.1 1.6-3.3-.7-3.6-6.6-.4-5.6-.2-6 1.9-6.3 1.8-.3 2.6.4 3.8 3.4 1.2 2.9 1.8 3.4 2.5 2.3.5-.8.9-2.4.9-3.6 0-1.6.8-2.5 2.7-2.9 3.2-.8 5 1.2 5.8 6.5.3 2 1 5.2 1.5 7.2.6 2 1 5.2 1.1 7 0 3.3.1 3.3 1 .9.6-1.3.7-5.4.4-9-.3-3.6-.1-7.2.4-8 1.2-1.8 1.3-1.8 4.3 6 2.3 5.9 3.1 9.8 4.3 21.5 1.3 13.2 1.7 15.5 2.6 16 1.3.9 1.2-47.6-.1-51.1-.7-1.7-.7-3-.1-3.3.5-.4 1.2-4.7 1.5-9.6.2-5 .6-10.6.8-12.5l.3-3.5H587c-12.2 0-12.5 0-12.8 2.3l-.3 2.2-2.7-2c-2.4-2-3.4-2-18.6-1.5-8.9.4-16.6.8-17.3 1-.6.2-1.4-.2-1.6-1-.4-1-3.4-1.3-12.9-1.1-11.9.1-12.3.2-12.6 2.3l-.3 2.3-2.8-2.1c-2.3-1.7-4-2-8.5-1.7l-5.6.3v-4c0-2.2-.6-7.4-1.4-11.5-.8-4.1-1.7-11.9-2.1-17.3-.6-8.2-.5-9.7.8-9.7 1 0 1.6 1.5 2 4.6.2 2.5.9 5 1.5 5.6.7.7.9-.3.5-3.3-.7-5.7-.6-48.8.1-55.7.3-2.9.9-6.5 1.3-8l.7-2.7.7 3c.4 1.6.7 5.4.8 8.4.2 10.2 1.4 4.2 1.5-7.7.1-8.8.5-12.4 1.6-13.7 1.3-1.6 1.4-1.6 2.1.2.4 1 .8 6.3.8 11.7.1 5.5.3 9.7.6 9.4.3-.3.6-4.1.7-8.4 0-4.4.5-8.8 1.1-9.9.5-1 .9-4.3.8-7.1-.1-4.5.4-6.1 3.6-11.3 2.1-3.3 4.1-6 4.6-6.1.4 0 .7 2.4.8 5.2 0 2.9.4 7.3.8 9.8.6 3.7.8 2.2 1.4-8.3.6-10.2 1.2-13.5 2.9-16.3 1.3-2.3 1.7-3.9 1.1-4.5-.5-.5-5-.9-9.8-.7l-8.9.3-.8 3.2c-.8 3.1-2.4 5-3.4 4-.3-.3.2-1.9 1.1-3.7.9-1.8 1.4-3.4 1.2-3.6-.3-.3-2.7-.7-5.5-.9l-5-.4-.7 5.2c-1.2 9.7-4.9 22.7-6.4 22.7-.3 0-1.4-1.9-2.5-4.3-1-2.3-2.2-4.9-2.6-5.8-.5-1-.4-2.1.3-2.8.8-.8.6-1.8-.9-3.8-2.1-3-3.9-7.1-4.8-11.4-.6-2.7-3.2-3.9-7.1-3.1zm37.8 219.1c.3 1.6.9 4 1.3 5.5.6 2.4.4 2.6-2.5 2.6H498v-5.8c0-3.2.3-6.2.7-6.5 1-1.1 3 1.2 3.6 4.2zm5.9-2.2c.2 1.4.9 2.9 1.7 3.1 1 .3 1.2-.3.9-2.7-1-6.6 2.7-1.6 4.6 6.2.7 2.8.6 2.9-3.6 2.5-3.8-.2-4.3 0-4.6 2-.6 4.1-2.2 1.1-2.2-4.1 0-5.9.8-9.7 2.1-9.7.4 0 .9 1.2 1.1 2.7zm60.1 2.2c.3 1.6.9 4 1.3 5.5.6 2.4.4 2.6-2.5 2.6H564v-5.8c0-3.2.3-6.2.7-6.5 1-1.1 3 1.2 3.6 4.2zm5.9-2.2c.2 1.4.9 2.9 1.7 3.1 1 .3 1.2-.3.9-2.7-1-6.6 2.7-1.6 4.6 6.2.7 2.8.6 2.9-3.6 2.5-3.8-.2-4.3 0-4.6 2-.6 4.1-2.2 1.1-2.2-4.1 0-5.9.8-9.7 2.1-9.7.4 0 .9 1.2 1.1 2.7z" />
                        <path d="M301.8 8.4c-1.3.6-2.5 1.1-2.7 1.2-.2.2.6 1.5 1.8 3 1.1 1.5 2.1 3 2.1 3.5 0 .4.5 2 1.2 3.6 1.1 2.7 1.3 3.6 1.6 5.9.1.7 1.9 1.9 4 2.7l3.7 1.6-3.3.7-3.4.7.6 5.1c.3 2.8.8 10 1.2 16.1.5 9 1 11.4 2.6 13.2 1.6 1.7 1.9 2.9 1.3 5-.7 2.7-.7 16 0 23.3.2 2 1.5 7.6 2.9 12.5s2.6 9.8 2.6 11c0 1.1.5 2.7 1 3.5.8 1.1.9-.4.5-5-.3-4.2-.2-5.8.3-4.5.5 1.1 1.3 5.6 1.7 10 .4 4.3 1.3 10.6 2.1 14l1.4 6-.8-8c-.9-10.2-.9-18.4.2-25.9 1-7.3 2.6-5.7 2.6 2.6 0 3.1.4 5.9.9 6.2 1.1.7 2.1-33.5 1-34.9-.4-.6-.2-3.5.4-6.5 1-4.4 1.6-5.5 3.2-5.5 1.7 0 2.3 1.3 3.7 8 1.5 7.5 1.6 7.7 1.7 3.3.2-9.3 6.2-13.9 6.6-5.1.3 4.5 3.1 17.2 4 18.1.4.4.4-2.4 0-6.1-1-9.2.8-17.7 4.5-21.2 3.6-3.4 4.1-2.6 5.6 8.5l1.1 8.5.2-10.2c.1-10.9 1.6-17.5 3.1-13.8.5 1.1 1.1 2.9 1.4 3.9.5 1.3 1 1.6 1.6 1 .7-.7.6-2.1-.1-4.2-.9-2.6-.7-5.1.6-12 2.7-13.4 2.6-19.2-.6-19.2-1.8 0-2-.4-1.4-3 .6-2.5.2-3.4-2.4-5.6-1.7-1.4-3.1-3.2-3.1-3.9 0-2.2-5.6-6.2-10.5-7.4-5.3-1.3-6.5-.9-6.5 2.3 0 3.9-1.4 3.9-2.5-.1l-1.1-3.8h-17.2c-9.4 0-18.2.4-19.4.9zm37.1 33.2c3.7.8 3.9 2.5 1.1 7.1-1.5 2.5-2.7 3.3-4.8 3.3-2.7 0-3-.3-3.6-4.6-.9-6.6-.1-7.2 7.3-5.8z" />
                        <path d="M372.8 8.4c-1.3.6-2.5 1.1-2.7 1.2-.2.2.6 1.5 1.8 3 1.1 1.5 2.1 3 2.1 3.5 0 .4.5 2 1.2 3.6 1.1 2.7 1.3 3.6 1.6 5.9.1.7 1.9 1.9 4 2.7l3.7 1.6-3.3.7-3.4.7.6 5.1c.3 2.8.8 10 1.2 16.1.5 9 1 11.4 2.6 13.2 1.6 1.7 1.9 2.9 1.3 5-.7 2.7-.7 16 0 23.3.2 2 1.5 7.6 2.9 12.5s2.6 9.8 2.6 11c0 1.1.5 2.7 1 3.5.8 1.1.9-.4.5-5-.3-4.2-.2-5.8.3-4.5.5 1.1 1.3 5.6 1.7 10 .4 4.3 1.3 10.6 2.1 14l1.4 6-.8-8c-.9-10.2-.9-18.4.2-25.9 1-7.3 2.6-5.7 2.6 2.6 0 3.1.4 5.9.9 6.2 1.1.7 2.1-33.5 1-34.9-.4-.6-.2-3.5.4-6.5 1-4.4 1.6-5.5 3.2-5.5 1.7 0 2.3 1.3 3.7 8 1.5 7.5 1.6 7.7 1.7 3.3.2-9.3 6.2-13.9 6.6-5.1.3 4.5 3.1 17.2 4 18.1.4.4.4-2.4 0-6.1-1-9.2.8-17.7 4.5-21.2 3.6-3.4 4.1-2.6 5.6 8.5l1.1 8.5.2-10.2c.1-10.9 1.6-17.5 3.1-13.8.5 1.1 1.1 2.9 1.4 3.9.5 1.3 1 1.6 1.6 1 .7-.7.6-2.1-.1-4.2-.9-2.6-.7-5.1.6-12 2.7-13.4 2.6-19.2-.6-19.2-1.8 0-2-.4-1.4-3 .6-2.5.2-3.4-2.4-5.6-1.7-1.4-3.1-3.2-3.1-3.9 0-2.2-5.6-6.2-10.5-7.4-5.3-1.3-6.5-.9-6.5 2.3 0 3.9-1.4 3.9-2.5-.1l-1.1-3.8h-17.2c-9.4 0-18.2.4-19.4.9zm37.1 33.2c3.7.8 3.9 2.5 1.1 7.1-1.5 2.5-2.7 3.3-4.8 3.3-2.7 0-3-.3-3.6-4.6-.9-6.6-.1-7.2 7.3-5.8z" />
                        <path d="M200.1 119.4c-.1 1.1.2 1.7.5 1.3.3-.3.4-1.2.1-1.9-.3-.8-.6-.5-.6.6z" />
                        <path d="M112.6 155.2c-.3.7-.7 3.1-1.1 5.3-.8 4.7-4.1 17.3-6.2 23.2-1.3 3.8-1.3 4.4.3 6.7 1.6 2.6 1.6 2.6-.9 2.6-2.1 0-2.6.6-3.2 3.7-.4 2.1-1.3 5-2.1 6.5s-1.4 3.4-1.4 4.3c0 .9-1.4 4.6-3 8.2-1.9 4.1-2.8 7.3-2.4 8.8.3 1.3.1 3.2-.4 4.1-.6 1.1-.7 2.7-.1 4 .7 1.9.4 2.3-1.4 2.6-1.3.2-2.4 1.3-2.9 2.8-.4 1.4-1.4 4.7-2.3 7.5-2.6 7.7-2.9 11.3-1.3 13.8 1.3 2 2.5 7.6 4.5 21.2l.7 5 .6-5.5.6-5.5.7 5c2 12.7 2.6 14 2 4.4-.3-6.5-.2-9.9.6-10.3.6-.4 1.1-2.9 1.1-5.7 0-2.7.4-4.9.8-4.9.5 0 1.7 3.5 2.6 7.7 1 4.2 2.5 9.1 3.3 10.8l1.4 3-.8-4c-1.1-5.7-.3-27.1 1.1-31.4 1.5-4.2 4.3-5.3 5-1.9.3 1.3.8 5 1.2 8.3.4 3.3.9 5.1 1.1 4 1.2-6.7 4.1-14.5 5.3-14.5 1.1 0 2.8 7.5 3.7 15.5l.7 7 .9-7.5c1.5-12.6 1.8-12.7 4.7-1.9l1.9 7.4-.1-6.5c-.1-4.4.4-7.5 1.5-9.8 2.8-5.2 4.1-4.4 5.8 4 2.6 12.7 2.7 12.7 2.8 4.1.2-12.6 1.8-14.8 4.4-6.1.9 2.9 2.1 8.7 2.7 12.8.7 4.1 1.6 9.3 2 11.5l.8 4 .1-3.5c.2-4.5 1.1-8 2.2-8 .4 0 1.1 2.1 1.5 4.7.4 2.7 1.3 6.4 2 8.3 1.3 3.3 1.4 3.1.8-3.8-.3-3.9-.4-7.2-.1-7.2.2 0 1.2 4.4 2.1 9.8.9 5.3 2.1 11.5 2.6 13.7.5 2.2 1.2 5.5 1.6 7.3 1.1 5.9 1.3 2.8.3-4.3-2-14.3-2.9-25.8-2.3-29.6 1-5.7 2.1-3.7 3.4 6.1.6 4.7 1.4 8.7 1.7 9 1.1 1.1-.8-33.8-2.1-39-.7-3-3.9-10.8-7-17.2-4.4-9.2-6.1-11.7-7.9-12-1.8-.2-2.2-.9-2-3.4.2-2.1-.4-3.7-1.7-4.9-1.1-1-2.5-3.7-3.1-5.9-.6-2.3-2.4-6.2-4-8.7-1.6-2.5-2.9-4.9-2.9-5.4 0-.4-1.8-3.2-4.1-6.1-2.6-3.5-4.6-5.1-5.5-4.7-1.2.4-1.4 0-.9-2 .4-1.6 0-3.9-1.3-6.4-1.1-2.1-2.8-5.6-3.8-7.7-2-4.2-4.1-5.7-4.8-3.4zm13.6 61.6c1.5 2.2 3.3 4.2 4 4.5 2.1.9-1 2.5-5.9 3.3-3.9.6-4.2.8-4.6 4.3l-.3 3.6-.8-3.3c-.5-1.7-1.4-3.2-2-3.2-3.2-.1-3.6-1.6-1.8-6.7 1-2.8 2.3-5.8 3-6.6.6-.7.9-1.7.5-2.1-.4-.4-.1-1.1.7-1.6 1-.6 1.9-.2 3 1.4.8 1.3 2.7 4.1 4.2 6.4z" />
                        <path d="M33.5 156.9c-4.7.6-5 .8-5.1 3.6-.2 8.6-.4 10-1.3 8.5-.6-.8-1.3-3.5-1.6-6.1l-.7-4.7h-5c-2.9 0-5.1.5-5.4 1.2-1.1 3 2.5 31.8 4.6 37.1 1.2 2.9 3 18.3 3.1 25.4 0 1.9.9 4.5 2 5.9 2.3 3 2.4 4.6.3 6.7-1.3 1.3-1.4 2.1-.6 3.8.6 1.2 1.3 5.1 1.5 8.7.3 3.6.8 7.6 1.2 9 .3 1.4 1.1 11.9 1.6 23.5.6 11.6 1.3 21.6 1.5 22.4 1.1 3.4 1.6-.9 2-17.6.4-19.6 1.1-26.1 2.4-22.8.4 1.1 1.1 5.6 1.6 10l.8 8 .6-5c.4-2.8.5-7.7.2-10.9-.3-3.6-.1-5.7.4-5.3.6.3 1.5.2 2.2-.2 1-.6 1-1.9.1-6.2-1.5-6.8-.5-22.7 1.5-24.8 1.3-1.2 1.6-1.1 2 1 .3 1.3.7 3.5.8 4.9.4 3.2 2.2 2.7 2.5-.7.3-3.8 1-5.3 2.6-5.3 2 0 2.7 4.4 2.7 15.8 0 5.2.2 9.3.5 9 .3-.3.8-5.4 1.2-11.4.5-10.6 1.4-14.4 3.3-14.4.5 0 1.3 2.4 1.8 5.2.6 2.9 1.6 8.2 2.2 11.8.7 3.6 1.6 10.2 1.9 14.7.7 8.9 2.1 12.4 2.1 5 0-2.5.4-4.8.9-5.1 1-.7 1.9 5.2 2.1 13.9.1 3.3.5 9.8.9 14.5l.8 8.5.3-8.5c.2-4.7.4-12.2.4-16.7.1-7.4.8-10.4 2.1-9.1.3.3 1.4 5.3 2.5 11.3 1.1 6 2.2 11.1 2.6 11.4.6.7-.4-19.8-1.1-21-.3-.4-.2-1 .2-1.2.5-.3.5-6.5.1-13.8-1.6-31-1.4-82.5.4-83.1.8-.3.8-1-.1-2.7-1-1.7-2-2.1-4.4-1.9l-3.2.3.4 6.9c.2 4.8 0 6.7-.8 6.2-.6-.4-1.1-2.8-1.1-5.4-.1-5.2-2.1-8.8-4.5-7.9-.8.4-1.5 1.2-1.5 1.8 0 .8-.4.8-1.2.2-1.6-1.3-9.3-2.5-10.1-1.7-.3.4 0 1.8.7 3.3.8 1.4 1.7 6.2 2.1 10.6.4 4.4.9 9.1 1 10.5.2 1.3 1.4 3.3 2.9 4.5 3.2 2.5 3.3 3.3.4 3.7-2 .3-2.3.9-2.2 4.8 0 2.5.4 6 .9 7.7.7 3.1.6 3.3-1.8 3.3-1.5 0-3.2.6-3.9 1.4-1.1 1.2-1.6 1.2-3.1-.2-1-.9-3.3-1.6-5.2-1.5l-3.3.1-.4-13.7c-.3-10.1.1-15.9 1.4-22.6.9-5 1.7-10.5 1.8-12.3 0-3.5.5-3.4-8.5-2.3z" />
                        <path d="M604.5 157.1c-.8 1.2.4 25 1.4 28.8.5 1.6 1.6 2.7 2.9 2.9 2.9.4 2.8 1.6-.2 3-2.3 1-2.3 1.2-1.9 12.9.2 6.5.7 11.9 1.1 12.1.4.1 1.4.7 2.2 1.2 1.3.9 1.3 1.2-.1 2.3-1.4 1.1-1.5 3.2-.8 18.2.5 9.4 1.3 19.2 1.8 22 .6 2.7 1 8.2 1 12.2.1 3.9.5 7.4.9 7.7.5.3.9-2.6.9-6.5 0-7.7 1.8-11.5 2.7-5.8.3 1.9.7 5.2.9 7.4.8 7.6 3.8 27 4.4 27.5.3.3.2-2.2-.1-5.5-1.2-11.5-1.6-36.5-.6-36.5.6 0 1 1 1 2.3 0 1.3.3 2.7.7 3.1.4.3.8 1.4.9 2.4 2.5 17.5 3.9 25.1 4.6 24.4.5-.5.5-3.4 0-6.7-.8-4.7-1.6-42.7-1.1-50.3v-6.9c-.1-2.8.4-5.5 1-5.8 3.1-2 7.8 9.5 7.9 19.2 0 5.6 1.6 5.5 2.4-.2.4-2.4 1.1-4.7 1.7-5 1.9-1.2 4.9.7 5.4 3.3.3 1.5 1.4 6.5 2.5 11.2 1.1 4.7 2.3 11 2.6 14 1.1 10 2.2 8.5 2.2-3.2 0-6.3.3-12.5.7-13.7l.7-2.3 1.2 2.4c1.8 3.5 3.3 9.6 4.3 16.8l.8 6.5.5-9.9c.5-10.3 2-13.3 4-8.2 1.4 3.8 6 35.8 6.7 46.8.6 10.1 2.2 13.4 2.4 5 .4-16.8-.6-56.6-1.5-58-.3-.5-.6-5.1-.7-10.1-.2-6.4-.7-9.7-1.6-10.7-1.2-1.2-1.2-1.4.1-1.4.9 0 1.6-.1 1.6-.3.1-.1.3-5.3.6-11.5.5-10 .4-11.6-1.2-13.4-1.8-1.9-1.8-2-.1-2.9 1.5-.9 1.7-2.6 1.6-12.7 0-6.4.3-14.5.7-17.9.4-4.2.3-6.7-.5-7.7-1.7-2-5.9-1.7-7.5.6-1.2 1.7-1.4 1.7-2 .3-1-2.6-4-1.3-4.7 2l-.6 3-1.4-3.3c-1.3-3.1-1.6-3.2-7-3.2-7.7 0-8.3 1-5.8 9 1 3.4 1.7 7.2 1.3 8.2-.4 1.4.3 2.9 2.1 4.8l2.7 2.8-2.2 2.2c-1.3 1.3-1.9 2.8-1.5 3.8.4.9.9 4.1 1.2 7.1l.6 5.4-3.3-1.9c-1.8-1-4-3.1-4.9-4.6-2.1-3.6-5.1-4.3-7.3-1.8-1.6 1.9-1.6 1.8-1.6-2.5 0-3.6-.7-5.5-3.2-8.8-1.7-2.3-4-5.7-5.1-7.5-1.1-1.8-3.3-4.1-4.9-5-1.6-.9-3.5-2.9-4.1-4.4-.6-1.5-1.7-2.9-2.5-3.2-.8-.3-2-1.9-2.5-3.6-1.1-3-3.2-3.9-4.4-1.9z" />
                        <path d="M334.5 158.9c-1.1.5-4.7 1.7-8 2.7-7.6 2.3-8.8 3.2-8.2 6.3.5 2.4.3 2.6-3.1 2.6-3.3 0-3.8.4-5.9 4.5-2.6 5.5-5.2 13.5-5.5 17.5-.3 2.7.2 3.2 4.2 5.2 4.4 2.1 4.5 2.1 1.8 2.8-1.5.4-3.1.4-3.7.1-3-1.9-4.3 11.7-1.6 18.1.8 1.9 1.5 5.3 1.5 7.4 0 2.1.4 6 .9 8.6.6 2.6 1.3 7 1.7 9.8l.8 5 .7-5.4c.9-6.5 2.3-8.3 4.3-5.5.8 1 1.5 2.8 1.5 3.9.1 4.5 2.4 18.1 3.2 18.9.5.6.9-1 1-4 .1-6.5 1.2-9.9 2.9-9.9.9 0 1.6 1.1 1.8 2.5.1 1.4 1 5.9 1.9 10 2 8.8 2 8.9 2.3 9.5.1.3.3.8.4 1.2.1.5.6 2.3 1 4.1.4 1.7 1.2 3.2 1.7 3.2 1.1 0 1.1-1.2 0-4.2-.5-1.4-.5-4.7.1-8.3 1.1-6.5 2.7-9.5 2.9-5.4.5 7.4.7 10.4 1.8 20.4.6 6 1.8 13.9 2.5 17.5l1.4 6.5-.6-10c-.3-5.5-.5-10.7-.5-11.5.1-.8.3-6 .6-11.5.5-13.1 2.1-18.4 6.1-20 5.2-2.2 6-1 7.2 12.2l1.1 11.8.2-8.5c.1-9.5 2.4-18 5.9-22.4 1.2-1.6 2.2-3.3 2.2-3.9 0-.7.3-.8 1-.1.6.6 1.6 5.3 2.4 10.5l1.4 9.4V247c0-7.4.5-14.6 1-16 1-2.5 1-2.4 1.6 1 .4 1.9 1.8 9.1 3.1 16l2.5 12.5-.8-13c-.4-7.2-.6-21.8-.4-32.5.3-19.1.2-19.7-2.7-29.9-3.2-11.1-5.1-14.1-8.6-14.1-1.6 0-2.5-.8-2.9-2.5-.4-1.4-1.2-2.5-2-2.5-.7 0-3.3-1.4-5.7-3.2-2.4-1.8-5.7-3.3-7.4-3.4-1.6 0-4.3-.4-6-.7-1.6-.3-3.9-.2-5 .2zM338 189c.4.9 1.8 1.4 3.4 1.2 1.9-.3 4 .7 7.1 3.2 3.7 3.1 4.5 4.3 5.2 8.8.6 4.1 1.3 5.5 3.2 6.5l2.5 1.2-2.6 1.2c-2.1.9-2.7 2-3.1 5.8-1.2 11.3-3.7 16.2-10.3 19.3l-4.6 2.1-3.6-2.1c-2.4-1.3-4.1-3.2-4.8-5.4-1-2.8-1.7-3.4-5-3.8l-3.9-.5 2.5-1.7c2.2-1.6 2.3-2.1 1.3-5-1.1-3.3-1-19 .1-22.6.4-1.1 2.4-3.2 4.6-4.6 2.3-1.5 4-3.4 4-4.5s.3-2.7.7-3.7c.6-1.5.8-1.5 1.6.7.5 1.3 1.2 3.1 1.7 3.9z" />
                        <path d="M180.8 169.6c.6 11-1.1 12.6-2.2 2.2-.9-7.8-2.7-10.8-6.4-10.8-4.2 0-5.1 1.5-4 6.3.6 2.3 1.1 9.3 1.1 15.6.2 11.8.2 11.6 4.5 13.8.2.1-.4 1.3-1.3 2.7-1.6 2.4-1.6 2.8 0 7.1 1.4 3.5 1.6 6 1.1 11-.6 6.3-.6 6.6 1.9 7.5 2.9 1.1 3.1 1.7.9 4.1-1.4 1.5-1.4 2.3-.4 5.1.7 1.8 1.5 10 1.8 18.3l.5 15 1.3-6.4c.8-3.6 2.1-7.2 2.9-8 1.5-1.5 1.8-1.4 3.1.3.8 1.2 1.4 4.3 1.4 7.7 0 7.1 1 14.9 2 14.9.4 0 1-4 1.3-9 .5-8.5 1.8-13.3 3-11.4.7 1.3 3.8 18 4.3 23.4.2 2.5.4 8.3.5 13 .2 12.9 1.5 6.6 2.3-11 .6-14.2 1.9-22.2 4.5-26.7.8-1.5 1.2-.9 2.1 3 1.2 4.6 3.5 7.8 2.9 4.1-.5-3.2.9-6.8 3.2-8.2 3.8-2.4 3.7-2.8 6.5 31.1.4 4.2 1.1 7.7 1.6 7.7s.8-3.7.7-8.3c-.2-10.1 1.1-26.7 2.2-28.7 1.4-2.7 2.8 3.3 2.2 9.9-.4 3.9-.2 6.1.5 6.1 1 0 1.6-7.8 2.8-34.9l.6-13.4-3.4.8c-3 .7-6.5 1.2-9.5 1.4-.6.1-1.5 1-1.8 2.1-.5 1.4-1.1 1.8-2.3 1.2-.9-.4-5.6-.7-10.5-.6-11 .3-11.7-.5-11.7-11.9 0-7-.3-8.1-2.2-9.7l-2.3-1.8 2.5-1.2c2.5-1.1 2.5-1.3 2.6-13.3.1-6.7.7-15.5 1.4-19.6 1.1-6.9 1.1-7.6-.6-8.8-1-.7-4.1-1.3-7-1.3h-5.1l.5 9.6z" />
                        <path d="M248.8 169.6c.6 11-1.1 12.6-2.2 2.2-.9-7.8-2.7-10.8-6.4-10.8-4.2 0-5.1 1.5-4 6.3.6 2.3 1.1 9.3 1.1 15.6.2 11.8.2 11.6 4.5 13.8.2.1-.4 1.3-1.3 2.7-1.6 2.4-1.6 2.8 0 7.1 1.4 3.5 1.6 6 1.1 11-.6 6.3-.6 6.6 1.9 7.5 2.9 1.1 3.1 1.7.9 4.1-1.4 1.5-1.4 2.3-.4 5.1.7 1.8 1.5 10 1.8 18.3l.5 15 1.3-6.4c.8-3.6 2.1-7.2 2.9-8 1.5-1.5 1.8-1.4 3.1.3.8 1.2 1.4 4.3 1.4 7.7 0 7.1 1 14.9 2 14.9.4 0 1-4 1.3-9 .5-8.5 1.8-13.3 3-11.4.7 1.3 3.8 18 4.3 23.4.2 2.5.4 8.3.5 13 .2 12.9 1.5 6.6 2.3-11 .6-14.2 1.9-22.2 4.5-26.7.8-1.5 1.2-.9 2.1 3 1.2 4.6 3.5 7.8 2.9 4.1-.5-3.2.9-6.8 3.2-8.2 3.8-2.4 3.7-2.8 6.5 31.1.4 4.2 1.1 7.7 1.6 7.7s.8-3.7.7-8.3c-.2-10.1 1.1-26.7 2.2-28.7 1.4-2.7 2.8 3.3 2.2 9.9-.4 3.9-.2 6.1.5 6.1 1 0 1.6-7.8 2.8-34.9l.6-13.4-3.4.8c-3 .7-6.5 1.2-9.5 1.4-.6.1-1.5 1-1.8 2.1-.5 1.4-1.1 1.8-2.3 1.2-.9-.4-5.6-.7-10.5-.6-11 .3-11.7-.5-11.7-11.9 0-7-.3-8.1-2.2-9.7l-2.3-1.8 2.5-1.2c2.5-1.1 2.5-1.3 2.6-13.3.1-6.7.7-15.5 1.4-19.6 1.1-6.9 1.1-7.6-.6-8.8-1-.7-4.1-1.3-7-1.3h-5.1l.5 9.6z" />
                        <path d="M64.1 270.4c-.1 1.1.2 1.7.5 1.3.3-.3.4-1.2.1-1.9-.3-.8-.6-.5-.6.6z" />
                        <path d="M332.1 280.4c-.1 1.1.2 1.7.5 1.3.3-.3.4-1.2.1-1.9-.3-.8-.6-.5-.6.6z" />
                        <path d="M622.1 306.4c-.1 1.1.2 1.7.5 1.3.3-.3.4-1.2.1-1.9-.3-.8-.6-.5-.6.6z" />
                    </g>
                </svg>
            </div>
        </div>

        <div id="witch" class="witchy-poo"></div>

        <!-- Boris flying accross the screen -->
        <div class="sprite-container bat-one boris" data-name="Boris">
            <div class="direction">
                <img id="batOne" src="http://creativecollective.studio/code-examples/Halloween/Images/bat.png" alt="" />
            </div>
        </div>

        <!-- All other bats -->
        <div class="sprite-container dark-bat kevin" data-name="Kevin">
            <div class="direction">
                <div class="eyes">
                    <img class="bat-eyes" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-eyes-sprite.png" alt="" />
                </div>
                <div class="body">
                    <img class="bat-body" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-sprite.png" alt="" />
                </div>                
            </div>
        </div>

        <div class="sprite-container dark-bat edgar" data-name="Edgar">
            <div class="direction">
                <div class="eyes">
                    <img class="bat-eyes" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-eyes-sprite.png" alt="" />
                </div>
                <div class="body">
                    <img class="bat-body" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-sprite.png" alt="" />
                </div>
            </div>
        </div>

        <div class="sprite-container dark-bat alan" data-name="Alan">
            <div class="direction">
                <div class="eyes">
                    <img class="bat-eyes" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-eyes-sprite.png" alt="" />
                </div>
                <div class="body">
                    <img class="bat-body" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-sprite.png" alt="" />
                </div>
            </div>
        </div>

        <div class="sprite-container dark-bat poe" data-name="Poe">
            <div class="direction">
                <div class="eyes">
                    <img class="bat-eyes" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-eyes-sprite.png" alt="" />
                </div>
                <div class="body">
                    <img class="bat-body" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-sprite.png" alt="" />
                </div>
            </div>
        </div>

        <div class="sprite-container dark-bat tennyson" data-name="Tennyson">
            <div class="direction">
                <div class="eyes">
                    <img class="bat-eyes" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-eyes-sprite.png" alt="" />
                </div>
                <div class="body">
                    <img class="bat-body" src="http://creativecollective.studio/code-examples/Halloween/Images/bat-sprite.png" alt="" />
                </div>
            </div>
        </div>


        <div class="tiny-bat fade-in-delayed"></div>
        <div class="sml-bats fade-in-delayed"></div>
        <!-- All other bats -->


        <!-- Scene -->
        <div class="scene-container">
            <div class="sprite-container pumpkin pumpkin-one opacity-zero">
                <img id="pumpkinOne" src="http://creativecollective.studio/code-examples/Halloween/Images/pumpkin-sprite.png" alt="" />
            </div>
            <div class="sprite-container pumpkin-two opacity-zero">
                <div class="direction reverse">
                    <img id="pumpkinTwo" src="hhttp://creativecollective.studio/code-examples/Halloween/Images/ghost-pumpkin.png" alt="" />
                </div>
            </div>
            <div class="sprite-container pumpkin-three opacity-zero">
                <div class="direction">
                    <img id="pumpkinThree" src="http://creativecollective.studio/code-examples/Halloween/Images/ghost-pumpkin.png" alt="" />
                </div>
            </div>
            <div class="cross cross-one opacity-zero"></div>
            <div class="cross cross-two opacity-zero"></div>
            <div class="cross cross-three opacity-zero"></div>
            <div class="scene"></div>
            <div class="castle-windows opacity-zero" id="windows"></div>
            <div class="grass opacity-zero"></div>
        </div>
        <!-- Scene -->
    </div>
              
            
!

CSS

              
                body {
    background:#000;
    -moz-user-select:none;
    -webkit-user-select:none;
    user-select:none;
}

.outer {
    z-index:1;
    overflow:hidden;
    position:relative;
    background: -moz-linear-gradient(top,  rgba(63,8,0,1) 0%, rgba(86,4,4,0.65) 20%, rgba(149,98,98,0) 55%, rgba(255,255,255,0) 100%);
    background: -webkit-linear-gradient(top,  rgba(63,8,0,1) 0%,rgba(86,4,4,0.65) 20%,rgba(149,98,98,0) 55%,rgba(255,255,255,0) 100%);
    background: linear-gradient(to bottom,  rgba(63,8,0,1) 0%,rgba(86,4,4,0.65) 20%,rgba(149,98,98,0) 55%,rgba(255,255,255,0) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3f0800', endColorstr='#00ffffff',GradientType=0 );
}

body,html, .outer {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    overflow:hidden;
}

.container {
    width:100%;
    max-width:980px;
    margin:0 auto;
}

.fade-in, .opacity-zero,
.fade-in-delayed {
    opacity:0;
}

.sprite-container {
    overflow:hidden;
}

.img-responsive {
    max-width:100%;
    width:100%;
    height:auto;
}

#headingSVG {
    width:90%;
    display:block;
    margin:0 auto;
}

.heading {
    padding-top:30px;
}

.heading-text {
    fill:url(#MyGradient);
}


.scene-container, .scene {
    position:fixed;
    bottom:0;
    left:0;
    right:0;
    height:554px;
}

.scene {
    background:url(http://creativecollective.studio/code-examples/Halloween/Images/halloween.png) bottom right no-repeat;
    z-index:5000;
}

.castle-windows {
    background: url(http://creativecollective.studio/code-examples/Halloween/Images/castle_windows.png) top left no-repeat;
    width:398px;
    height:210px;
    position:absolute;
    right:28px;
    bottom:300px;
    z-index:5001;
}

.grass {
    position:fixed;
    right:0;
    bottom:-150px;
    background:url(http://creativecollective.studio/code-examples/Halloween/Images/grass.png) bottom right no-repeat;
    width:2274px;
    height:281px;
    z-index:6000;
}


.witchy-poo {
    background: url(http://creativecollective.studio/code-examples/Halloween/Images/witch.png) top left no-repeat;
    width:150px;
    height:124px;
    position:absolute;
    top:300px;
    left:-160px;
    z-index:-1;
}


.bat-one {
    z-index:100;
    width:160px;
    height:112px;
    position:absolute;
    right:-160px;
    top:25%;
}



.dark-bat {
    z-index:0;
    width:196px;
    height:89px;
    position:absolute;
    bottom:-100px;
}


.dark-bat .eyes {
    position:absolute;
    top:32px;
    left:82px;
    z-index:1;
    overflow:hidden;
    width:19px;
    height:12px;
}

.dark-bat .body {
    position:relative;
}


.dark-bat.kevin {    
    right:900px;
    -moz-transform: rotate3d(0, 0, 1, 25deg) scale(0.5,0.5);
    -webkit-transform: rotate3d(0, 0, 1, 25deg) scale(0.5,0.5);
    transform: rotate3d(0, 0, 1, 25deg) scale(0.5,0.5);
}

.dark-bat.edgar {
    right:400px;
    -moz-transform: rotate3d(0, 0, 1, -40deg) scale(0.4,0.4);
    -webkit-transform: rotate3d(0, 0, 1, -40deg) scale(0.4,0.4);
    transform: rotate3d(0, 0, 1, -40deg) scale(0.4,0.4);
}

.dark-bat.alan {
    right:600px;
    -moz-transform: rotate3d(0, 0, 1, 20deg) scale(0.1,0.1);
    -webkit-transform: rotate3d(0, 0, 1, 20deg) scale(0.1,0.1);
    transform: rotate3d(0, 0, 1, 20deg) scale(0.1,0.1);
}

.dark-bat.poe {
    right:950px;
    -moz-transform: rotate3d(0, 0, 1, -22deg) scale(0.4,0.4);
    -webkit-transform: rotate3d(0, 0, 1, -22deg) scale(0.4,0.4);
    transform: rotate3d(0, 0, 1, -22deg) scale(0.4,0.4);
}

.dark-bat.tennyson {
    right:1850px;
    -moz-transform: rotate3d(0, 0, 1, -3deg) scale(0.4,0.4);
    -webkit-transform: rotate3d(0, 0, 1, -3deg) scale(0.4,0.4);
    transform: rotate3d(0, 0, 1, -3deg) scale(0.4,0.4);
}


.sml-bats {
    background: url(http://creativecollective.studio/code-examples/Halloween/Images/bats_small.png) top left no-repeat;
    width:63px;
    height:227px;
    position:absolute;
    bottom:210px;
    right:890px;
}

.tiny-bat {
    background: url(http://creativecollective.studio/code-examples/Halloween/Images/bat_tiny.png) top left no-repeat;
    width:25px;
    height:12px;
    position:absolute;
    bottom:290px;
    right:1430px;
}

.direction.reverse {
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
}

.pumpkin .direction.reverse {
    -moz-transform: rotate3d(0, 1, 0, 180deg);
    -webkit-transform: rotate3d(0, 1, 0, 180deg);
    transform: rotate3d(0, 1, 0, 180deg);
}

.pumpkin-one {
    z-index:10;
    display:inline-block;
    position:absolute;
    bottom:32px;
    right:318px;
    width:88px;
    height:90px;
    -moz-transform: rotate3d(0, 0, 1, 8deg) scale(0.7,0.7);
    -webkit-transform: rotate3d(0, 0, 1, 8deg) scale(0.7,0.7);
    transform: rotate3d(0, 0, 1, 8deg) scale(0.7,0.7);
}

.pumpkin-two, .pumpkin-three {    
    display:inline-block;
    position:absolute;
    width:110px;
    height:152px;
}

.pumpkin-two {
    z-index:6000;
    bottom:107px;
    right:1310px;
}

.pumpkin-three {
    z-index:50;
    bottom:16px;
    right:620px;
    -moz-transform: rotate3d(0, 0, 1, 8deg) scale(0.7,0.7);
    -webkit-transform: rotate3d(0, 0, 1, 8deg) scale(0.7,0.7);
    transform: rotate3d(0, 0, 1, 8deg) scale(0.7,0.7);
}


.cross {
    position:absolute;
    background: url(http://creativecollective.studio/code-examples/Halloween/Images/cross.png) top left no-repeat;
    width:150px;
    height:180px;    
}

.cross-one {
    z-index:5050;
    right:1450px;
    bottom:-40px;
    -moz-transform: rotate3d(0, 0, 1, -4deg) scale(0.4,0.4);
    -webkit-transform: rotate3d(0, 0, 1, -4deg) scale(0.4,0.4);
    transform: rotate3d(0, 0, 1, -4deg) scale(0.4,0.4);  
}

.cross-two {
    z-index:5060;
    right:1190px;
    bottom:-25px;
    -moz-transform: rotate3d(0, 0, 1, 4deg) scale(0.6,0.6);
    -webkit-transform: rotate3d(0, 0, 1, 4deg) scale(0.6,0.6);
    transform: rotate3d(0, 0, 1, 4deg) scale(0.6,0.6);   
}

.cross-three {
    z-index:5040;
    right:500px;
    bottom:-40px;
    -moz-transform: rotate3d(0, 0, 1, 4deg) scale(0.4,0.4);
    -webkit-transform: rotate3d(0, 0, 1, 4deg) scale(0.4,0.4);
    transform: rotate3d(0, 0, 1, 4deg) scale(0.4,0.4);  
}
              
            
!

JS

              
                
// Returns a random integer between min (included) and max (included)
function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min;
}


(function ($) {
    $(window).load(function () {
        var pageWidth = window.innerWidth;
        var batOne = document.getElementById("batOne");

        var pumpkinOne = document.getElementById("pumpkinOne");
        var pumpkinTwo = document.getElementById("pumpkinTwo");
        var pumpkinThree = document.getElementById("pumpkinThree");
        var headingSVG = document.getElementById("headingSVG");
        var windows = document.getElementById("windows");
        var witch = document.getElementById("witch");

        TweenMax.to('.fade-in', 1.5, { opacity: 1, delay: 0.5 });
        TweenMax.to('.fade-in-delayed', 1.5, { opacity: 1, delay: 4 });

        TweenMax.to('body', 1, { backgroundColor: '#636363', delay:1.5 });
        TweenMax.to('.cross', 0.2, { autoAlpha: 1, delay:1.5 });
        TweenMax.to('.pumpkin', 1, { autoAlpha: 1, delay: 1.5 });
        TweenMax.to('.grass', 1, { opacity: 0.7, delay: 1.5 });


          //////////////////
         // Heading
        //////////////////
        var tl = new TimelineMax({
            yoyo: true,
            repeat: -1
        });


        tl.staggerTo(".heading-text stop", 1.1, {
                stopColor: '#cc0000',
                cycle: {
                    stopColor: ['#F60', '#F4B404', '#ff9999']
                }
            }, 0.2, 0);

        var headingTl2 = new TimelineMax({
            yoyo: true,
            repeat:-1
        });

        headingTl2.to(headingSVG, 0.75, { y: -3 });


        /////////////////////////
        // Castle Windows
        /////////////////////////

        var windowsTimeline = new TimelineMax({
            repeat: -1,
            yoyo:true
        });

        windowsTimeline.to(windows, 1, { opacity: 1 })
                       .to(windows, 1, { opacity: 0, delay: 1.5 });


          /////////////////////////
         // Bat animation (Boris)
        /////////////////////////

        var batTimeline = new TimelineMax({
            repeat: -1,
            delay: 1.5
        });

        var batDuration = pageWidth / 150;
        var d = pageWidth + batOne.width;
        var distance = -d;
        var reverseDistance = d;

        TweenMax.to(batOne, 0.5, { repeat: -1, x: -350, ease: SteppedEase.config(2) });
        batTimeline.to('.bat-one', batDuration, {
            x: distance, y: 0, z: 0,
            ease: Power0.easeNone, y: 0,            
            onComplete: batAltitude
        })
            .to('.bat-one', batDuration, {
                x: reverseDistance, y: 0, z: 0,
                ease: Power0.easeNone, y: 0,
                onComplete: batAltitude
            });

        function batAltitude(e) {
            $('.bat-one .direction').toggleClass('reverse');

            var altitude = getRandomIntInclusive(15,85) + '%';
            $('.bat-one').css('top', altitude);
        }



        /////////////////////////
        // Other Bats
        /////////////////////////

        // (Kevin)
        function stopKevinFlapping() {
            kevinFlappingTimeline.timeScale(1.5);
        }
        
        var kevinFlappingTimeline = new TimelineMax();
        var kevinFlyingTimeline = new TimelineMax({
            onComplete: stopKevinFlapping,
            delay:1.5
        });

        kevinFlyingTimeline.to('.kevin', 5, { x:380, y: -480, scale:1 });
        kevinFlappingTimeline.to('.kevin .bat-body', 0.4, { repeat: -1, x: -196, ease: SteppedEase.config(1) });


        // (Edgar)
        function speedUpEdgarFlapping() {
            edgarFlappingTimeline.timeScale(1.5);
        }

        var edgarFlappingTimeline = new TimelineMax();
        var edgarFlyingTimeline = new TimelineMax({
            onComplete: speedUpEdgarFlapping,
            delay: 2
        });

        edgarFlyingTimeline.to('.edgar', 5, { x: -220, y: -390, scale:0.5 });
        edgarFlappingTimeline.to('.edgar .bat-body', 0.3, { repeat: -1, x: -196, ease: SteppedEase.config(1) });


        // (Alan)
        function speedUpAlanFlapping() {
            alanFlappingTimeline.timeScale(1.5);
        }

        var alanFlappingTimeline = new TimelineMax();
        var alanFlyingTimeline = new TimelineMax({
            onComplete: speedUpAlanFlapping,
            delay: 3
        });

        alanFlyingTimeline.to('.alan', 5, { x: 150, y: -280, scale:0.3 });
        alanFlappingTimeline.to('.alan .bat-body', 0.3, { repeat: -1, x: -196, ease: SteppedEase.config(1) });


        // (Poe)
        function speedUpPoeFlapping() {
            poeFlappingTimeline.timeScale(1.5);
        }

        var poeFlappingTimeline = new TimelineMax();
        var poeFlyingTimeline = new TimelineMax({
            onComplete: speedUpPoeFlapping,
            delay: 2
        });

        poeFlyingTimeline.to('.poe', 5, { x: -210, y: -430, scale: 0.7 });
        poeFlappingTimeline.to('.poe .bat-body', 0.4, { repeat: -1, x: -196, ease: SteppedEase.config(1) });


        // (Tennyson)
        function speedUpTennysonFlapping() {
            tennysonFlappingTimeline.timeScale(1.5);
        }

        var tennysonFlappingTimeline = new TimelineMax();
        var tennysonFlyingTimeline = new TimelineMax({
            onComplete: speedUpTennysonFlapping,
            delay: 2
        });

        tennysonFlyingTimeline.to('.tennyson', 5, { x: -100, y: -345, scale: 0.9 });
        tennysonFlappingTimeline.to('.tennyson .bat-body', 0.4, { repeat: -1, x: -196, ease: SteppedEase.config(1) });




        // Bat eyes flashing
        TweenMax.to('.bat-eyes', 3, { repeat: -1, x: -19, ease: SteppedEase.config(1), delay:1 });



          /////////////////////////
         // Pumpkin One animation
        /////////////////////////

        var pumpkinOneTimeline = new TimelineMax({
            repeat: -1
        });

        pumpkinOneTimeline.to(pumpkinOne, 15, { x: -806, ease: SteppedEase.config(8) });


          /////////////////////////
         // Pumpkin Two animation
        /////////////////////////

        var pumpkinTwoTimeline = new TimelineMax({
            repeat:-1
        });

        pumpkinTwoTimeline.to('.pumpkin-two', 1, { opacity: 1, delay: 1.5 })
                            .to(pumpkinTwo, 1.5, { x: -1394, ease: SteppedEase.config(12), delay: 2 })
                            .to(pumpkinTwo, 0.5, { opacity: 0 })
                            .to(pumpkinTwo, 0.5, { opacity: 0, delay: 5 }); // pause the timeline before repeating



          ////////////////////////////
         // Pumpkin Three animation
        ////////////////////////////

        var pumpkinThreeTimeline = new TimelineMax({
            repeat: -1
        });

        pumpkinThreeTimeline.to('.pumpkin-three', 1, { opacity: 1, delay: 1.5 })
                            .to(pumpkinThree, 1.5, { x: -1394, ease: SteppedEase.config(12), delay: 5 })
                            .to(pumpkinThree, 0.5, { opacity: 0 })
                            .to(pumpkinThree, 0.5, { opacity: 0, delay: 10 }); // pause the timeline before repeating



        ////////////////////////////
        // Witchy Poo animation
        ////////////////////////////

        var witchTimeline = new TimelineMax({
            repeat: -1,
            delay: 10
        });

        witchTimeline.to(witch, 3, { x: 1000, y: -450, ease: Power0.easeNone })
                     .to(witch, 0.5, { opacity:1, delay:40 });



    
    });
})(jQuery);



              
            
!
999px

Console