Pen Settings

HTML

About HTML Preprocessors

HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.

Learn more · Versions

Adding Classes

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html> tag. If you want to add classes there that can affect the whole document, this is the place to do it.

About the <head>

In CodePen, whatever you write in the HTML editor is what goes within the <body> tags in a basic HTML5 template. If you need things in the <head> of the document, put that code here.

!
Insecure Resource

The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.

CSS

About CSS Preprocessors

CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.

Learn more · Versions

CSS Base

About CSS Base

It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.

Vendor Prefixing

About Vendor Prefixing

To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit- or -moz-.

We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

Powered by Algolia
About External Resources

You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.

You can also link to another Pen here (use the .css URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ add another resource

JavaScript

About JavaScript Preprocessors

JavaScript preprocessors can help make authoring JavaScript easier and more convenient.

Learn more · Versions

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.

Powered by Algolia
About External Resources

You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.

If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.

You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.

Learn more

+ 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.

Powered by Algolia
About Packages

Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.

All packages are different, so refer to their docs for how they work.

If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.

Behavior

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML 

              
                <div id="container">
        <div id="content">
            <div id="background"></div>
            <h1>Happy New Year !</h1>
            <canvas id="myCanvas" width="800" height="500"></canvas>
        </div>
    </div>
!

CSS 

              
                  /* FONT */
        @import url(https://fonts.googleapis.com/css?family=Titan+One);
        html,
        body,
        div,
        span,
        applet,
        object,
        iframe,
        h1,
        h2,
        h3,
        h4,
        h5,
        h6,
        p,
        blockquote,
        pre,
        a,
        abbr,
        acronym,
        address,
        big,
        cite,
        code,
        del,
        dfn,
        em,
        img,
        ins,
        kbd,
        q,
        s,
        samp,
        small,
        strike,
        strong,
        sub,
        sup,
        tt,
        var,
        b,
        u,
        i,
        center,
        dl,
        dt,
        dd,
        ol,
        ul,
        li,
        fieldset,
        form,
        label,
        legend,
        table,
        caption,
        tbody,
        tfoot,
        thead,
        tr,
        th,
        td,
        article,
        aside,
        canvas,
        details,
        embed,
        figure,
        figcaption,
        footer,
        header,
        hgroup,
        menu,
        nav,
        output,
        ruby,
        section,
        summary,
        time,
        mark,
        audio,
        video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }
        article,
        aside,
        details,
        figcaption,
        figure,
        footer,
        header,
        hgroup,
        menu,
        nav,
        section {
            display: block;
        }
        body {
            line-height: 1;
        }
        ol,
        ul {
            list-style: none;
        }
        blockquote,
        q {
            quotes: none;
        }
        blockquote: before, blockquote: after, q: before, q: after {
            content: '';
            content: none;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        html {
            height: 100%;
            min-height: 100%;
        }
        body {
            height: 100%;
            min-height: 100%;
            margin: 0;
            background: #a3c7e5;
            background: -moz-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: -webkit-gradient(left top, left bottom, color-stop(0%, #a3c7e5), color-stop(58%, #ffffff), color-stop(100%, #ffffff));
            background: -webkit-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: -o-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: -ms-linear-gradient(top, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            background: linear-gradient(to bottom, #a3c7e5 0%, #ffffff 58%, #ffffff 100%);
            filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a3c7e5', endColorstr='#ffffff', GradientType=0);
        }
        /* JUMP */
        h1 {
            cursor: default;
            position: absolute;
            top: -100px;
            left: 140px;
            right: 0;
            bottom: 0;
            height: 0px;
            margin: 0 auto;
            display: block;
            width: 800px;
            /* -webkit-animation: bounce .3s ease infinite alternate;*/
            font-family: 'Titan One', cursive;
            font-size: 70px;
            color: #FFF;
            text-align: left;
            line-height: 100px;
            text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .6);
        }
        /* ANIMATION */
        @-webkit-keyframes bounce {
            100% {
                top: -10px;
                text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 30px 30px rgba(0, 0, 0, .3);
            }
        }
        /* CONTAINER */
        #container {
            width: 100%;
            height: 100%;
        }
        /* BACKGROUND */
        #background {
            border: 2px solid #595570;
            z-index: 300;
            width: 798px;
            height: 498px;
            border-radius: 6px;
            -moz-border-radius: 6px;
            -webkit-border-radius: 6px;
            position: absolute;
            
        }
        #background span {
        position: absolute;
        right: 5px;
        bottom: 5px;
        color:#595570;
        font-family: 'Titan One', cursive;
            font-size: 12px;
        }
        /* CONTENT */
        #content {
            width: 800px;
            height: 500px;
            margin: auto;
        }
!

JS 

              
                var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var points = [];
var lgt;
var yeti = [];
var shape = [];
var width = 800;
var height = 500;
var COUNT = 300;
var snowflakes = [];
var snowflake;
var scene= {
  "g": {
    "-id": "decors",
    "polyline": [
      {
        "-fill": "#D1D1D1",
        "-points": "-0.75,600 0,321 118,600  "
      },
      {
        "-fill": "#E5E5E5",
        "-points": "118.009,599.662 0,288 0,321  "
      },
      {
        "-fill": "#E4E4E4",
        "-points": "118.009,599.662 23,263 0,288  "
      },
      {
        "-fill": "#E4E4E4",
        "-points": "118.009,599.662 112,407.5 23,263  "
      },
      {
        "-fill": "#9B9B9C",
        "-points": "166.125,600 203,448.5 124.5,362  "
      },
      {
        "-fill": "#A5A5A5",
        "-points": "166.125,600 124.5,362 118,600  "
      },
      {
        "-fill": "#CFCFCF",
        "-points": "207.917,429.331 137.5,266.5 136.569,375.299  "
      },
      {
        "-fill": "#E9E9E9",
        "-points": "207.917,429.331 221.772,375.312 137.5,266.5  "
      },
      {
        "-fill": "#E8E9EA",
        "-points": "136.569,375.299 137.5,266.5 124.5,362  "
      },
      {
        "-fill": "#E8E9EA",
        "-points": "124.5,362 137.5,266.5 112,407.5  "
      },
      {
        "-fill": "#D0D0D0",
        "-points": "299.5,507 238.333,310.75 203,448.5  "
      },
      {
        "-fill": "#D3D3D3",
        "-points": "303.955,580.878 299.5,507 229.5,553.5  "
      },
      {
        "-fill": "#D3D3D3",
        "-points": "229.5,553.5 299.5,507 203,448.5  "
      },
      {
        "-fill": "#E1E1E1",
        "-points": "229.5,553.5 203,448.033 209.5,572  "
      },
      {
        "-fill": "#CECECE",
        "-points": "209.5,572 203,448.5 166.125,600  "
      },
      {
        "-fill": "#9C9C9C",
        "-points": "225.5,600 356.5,600.2 229.5,553.5  "
      },
      {
        "-fill": "#B5B5B5",
        "-points": "225.5,600 229.5,553.5 166.125,600  "
      },
      {
        "-fill": "#CCCCCC",
        "-points": "303.955,580.878 334.5,481 297.19,508.534  "
      },
      {
        "-fill": "#B2B2B2",
        "-points": "356.5,600.2 334.5,481 303.955,580.878  "
      },
      {
        "-fill": "#959595",
        "-points": "368.5,600.2 372.5,426.5 334.5,481  "
      },
      {
        "-fill": "#959595",
        "-points": "395,600.2 372.5,426.5 367,600  "
      },
      {
        "-fill": "#8D8D8D",
        "-points": "454.5,600.2 372.5,426.5 395,600.2  "
      },
      {
        "-fill": "#B2B2B2",
        "-points": "368.5,600.2 334.5,481 356.5,600.2  "
      },
      {
        "-fill": "#8D8D8D",
        "-points": "481,572 372.5,426.5 454.5,600.2  "
      },
      {
        "-fill": "#CDCDCD",
        "-points": "464.644,550.065 458,459.5 397.108,459.5  "
      },
      {
        "-fill": "#C7C7C7",
        "-points": "464.644,550.065 506,467.164 458,459.5  "
      },
      {
        "-fill": "#CDCDCD",
        "-points": "481,572 498.5,466 464.26,549.552  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "495.5,600.2 522.5,335.5 474.5,600.2  "
      },
      {
        "-fill": "#969795",
        "-points": "645,600 582.5,369 600,600  "
      },
      {
        "-fill": "#949492",
        "-points": "601.668,600 582.5,369 495.5,600.2  "
      },
      {
        "-fill": "#949492",
        "-points": "495.5,600.2 582.5,369 522.5,335.5  "
      },
      {
        "-fill": "#969795",
        "-points": "645,600 682.75,486.125 582.5,369  "
      },
      {
        "-fill": "#969795",
        "-points": "692.5,600 682.75,486.125 645,600  "
      },
      {
        "-fill": "#848484",
        "-points": "748.5,600.2 682.75,486.125 692.5,600  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "800,537.75 760.5,369 737.5,564.5  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "800,537.75 800,600 737.5,564.5  "
      },
      {
        "-fill": "#9E9E9E",
        "-points": "737.5,564.5 752.442,437.493 695,499.746  "
      },
      {
        "-fill": "#9E9E9E",
        "-points": "695,499.746 752.442,437.493 679.5,297.5  "
      },
      {
        "-fill": "#C0C0C0",
        "-points": "752.442,437.493 757.139,397.575 679.5,297.5  "
      },
      {
        "-fill": "#E6E6E6",
        "-points": "760.5,369 800,355.648 718.319,312.5  "
      },
      {
        "-fill": "#E9E9E9",
        "-points": "645.398,443.593 679.5,297.5 652.494,344.533  "
      },
      {
        "-fill": "#E9E9E9",
        "-points": "695,499.746 679.5,297.5 645.398,443.593  "
      },
      {
        "-fill": "#D2D2D2",
        "-points": "645.398,443.593 575,267.704 651.625,359.625  "
      },
      {
        "-fill": "#D2D2D2",
        "-points": "645.398,443.593 575,267.704 582.5,369  "
      },
      {
        "-fill": "#D2D2D2",
        "-points": "563.959,358.648 575,267.704 582.5,369  "
      },
      {
        "-fill": "#D5D5D5",
        "-points": "760.5,369 718.319,312.5 757.139,397.575  "
      },
      {
        "-fill": "#D5D5D5",
        "-points": "757.139,397.575 718.319,312.5 711.568,338.835  "
      },
      {
        "-fill": "#AEAEAE",
        "-points": "800,538.5 800,355.648 760.5,369  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "748.5,600.2 800,600 737.5,564.5  "
      },
      {
        "-fill": "#848484",
        "-points": "748.5,600.2 695,499.746 682.75,486.125  "
      },
      {
        "-fill": "#848484",
        "-points": "748.5,600.2 737.5,564.5 695,499.746  "
      },
      {
        "-fill": "#E8E9EA",
        "-points": "118.009,599.662 124.5,362 112,407.5  "
      },
      {
        "-fill": "#CFCFCF",
        "-points": "207.917,429.331 136.569,375.299 203,448.5  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "474.5,600.2 481,572 454.5,600.2  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "458,459.5 474.5,307.334 498.5,466  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "522.5,335.5 498.5,466 474.5,307.334  "
      },
      {
        "-fill": "#F2F2F2",
        "-points": "448.002,459.5 474.5,307.334 458,459.5  "
      },
      {
        "-fill": "#D5D5D5",
        "-points": "334.5,481 238.333,310.75 291,513.35  "
      },
      {
        "-fill": "#CECECE",
        "-points": "468,347.5 462.25,377.5 427.75,428.094  "
      },
      {
        "-fill": "#D8D8D8",
        "-points": "427.75,428.094 462.25,377.5 452.25,435  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "326.143,466 334.5,481 344.52,466.63  "
      },
      {
        "-fill": "#D4D4D8",
        "-points": "448.002,459.5 427.75,428.094 452.25,435  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "340.835,417.524 336.312,438.544 376.125,419.625  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "334.5,445.331 350.043,458.708 372.5,426.5  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "336.312,438.544 338.25,440.125 376.125,419.625  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "334.5,445.331 372.5,426.5 376.125,419.625  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "376.125,419.625 372.5,426.5 394.381,443  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "372.5,426.5 397.108,459.5 403,450.781  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "395,441.411 391.653,417.156 376.125,419.625  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "334.375,461.498 334.5,481 346.528,463.749  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "395,441.411 394.381,443 376.125,419.625  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "394.381,443 403,450.781 372.5,426.5  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "392.875,416.25 376.125,419.625 391.653,417.156  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "403,450.781 397.108,459.5 399.938,459.5  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "338.25,440.125 334.5,445.331 376.125,419.625  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "332.875,440.125 330.5,440.125 329.335,445.331  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "338.25,440.125 332.875,440.125 329.335,445.331  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "334.5,445.331 338.25,440.125 329.335,445.331  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "332.875,440.125 338.25,440.125 334.375,436.963  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "329.335,445.331 324.125,437.875 320.335,445.331  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "330.5,440.125 329.335,445.331 324.125,437.875  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "334.375,466 327.002,461.498 334.375,461.498  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "326.143,466 327.002,461.498 334.375,466  "
      },
      {
        "-fill": "#AAA9AE",
        "-points": "332.875,440.125 338.25,417.625 340.835,417.524  "
      },
      {
        "-fill": "#AAA9AE",
        "-points": "340.835,417.524 336.312,438.544 332.875,440.125  "
      },
      {
        "-fill": "#464359",
        "-points": "387.75,218 404.875,217.5 402.156,220.281  "
      },
      {
        "-fill": "#464359",
        "-points": "367.936,220.329 387.75,218 402.156,220.281  "
      },
      {
        "-fill": "#464359",
        "-points": "367.936,220.329 368.472,218 387.75,218.25  "
      },
      {
        "-fill": "#464359",
        "-points": "367.936,220.329 368.472,218 358.625,219.625  "
      },
      {
        "-fill": "#464359",
        "-points": "343.25,219.625 358.625,219.625 367.936,220.329  "
      },
      {
        "-fill": "#464359",
        "-points": "349.716,223.062 368.472,220.25 343.25,219.625  "
      },
      {
        "-fill": "#464359",
        "-points": "335.535,221.344 344.115,219.646 334.5,217.5  "
      },
      {
        "-fill": "#464359",
        "-points": "350.375,222.964 343.25,219.625 336.115,221.141  "
      },
      {
        "-fill": "#211F2D",
        "-points": "340.688,229.999 350.375,222.964 336.115,221.141  "
      },
      {
        "-fill": "#211F2D",
        "-points": "340.688,229.999 359.911,221.534 349.716,223.062  "
      },
      {
        "-fill": "#211F2D",
        "-points": "359.911,221.534 362.75,243.832 340.688,229.999  "
      },
      {
        "-fill": "#211F2D",
        "-points": "362.75,243.832 381.591,240.602 359.911,221.534  "
      },
      {
        "-fill": "#211F2D",
        "-points": "381.591,240.602 402.416,220.25 359.911,221.534  "
      },
      {
        "-fill": "#211F2D",
        "-points": "402.416,220.25 359.911,221.534 365.417,220.329  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "374.213,242.764 371.787,242.764 372.954,239.097  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "380.508,241.293 377.245,241.77 377.771,237.375  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "390.91,232.25 388.484,234.083 388.438,230.417  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "387.361,235.583 384.935,237.417 384.889,233.75  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "384.018,238.769 381.591,240.602 381.545,236.935  "
      },
      {
        "-fill": "#B4B4B4",
        "-points": "292,236.336 260.833,179.396 302.166,229.335  "
      },
      {
        "-fill": "#2988B2",
        "-points": "260.833,179.396 302.166,229.335 260.833,179.396  "
      },
      {
        "-fill": "#A3A3A3",
        "-points": "275.333,221.003 240.5,172.396 260.833,179.396  "
      },
      {
        "-fill": "#A1A1A1",
        "-points": "271.668,241.067 240.5,172.396 275.333,221.003  "
      },
      {
        "-fill": "#AFAFAF",
        "-points": "275.333,221.003 260.833,179.396 292,236.336  "
      },
      {
        "-fill": "#A1A1A1",
        "-points": "271.668,241.067 275.333,221.003 292,236.336  "
      },
      {
        "-fill": "#9B9B9B",
        "-points": "254.833,240.93 240.5,172.396 271.668,241.067  "
      },
      {
        "-fill": "#A0A0A0",
        "-points": "233.333,216.096 240.5,172.396 254.833,240.93  "
      },
      {
        "-fill": "#A9A9AB",
        "-points": "240.5,172.396 251.335,163.781 260.833,179.396  "
      },
      {
        "-fill": "#B6B6B6",
        "-points": "235.07,178.649 233.333,216.096 239.474,178.649  "
      },
      {
        "-fill": "#CBCCCC",
        "-points": "224.25,209.228 235.07,178.649 233.333,216.096  "
      },
      {
        "-fill": "#E1DBE0",
        "-points": "235.07,178.649 229.911,169.534 224.25,209.228  "
      },
      {
        "-fill": "#CAC4C1",
        "-points": "245,239.125 224.25,209.228 233.333,216.096  "
      },
      {
        "-fill": "#A1A1A1",
        "-points": "289.5,280.5 254.833,240.93 271.668,241.067  "
      },
      {
        "-fill": "#A1A1A1",
        "-points": "290.804,290.336 254.833,240.93 289.5,280.5  "
      },
      {
        "-fill": "#B2B2B0",
        "-points": "245,239.125 233.333,216.096 254.833,240.93  "
      },
      {
        "-fill": "#BCBCBB",
        "-points": "245,239.125 290.804,290.336 254.833,240.93  "
      },
      {
        "-fill": "#A0A0A0",
        "-points": "309.94,260.783 271.668,241.067 317.75,253.25  "
      },
      {
        "-fill": "#8D8D8E",
        "-points": "317.75,253.25 302.166,229.335 313.75,237.375  "
      },
      {
        "-fill": "#9C9C9C",
        "-points": "317.75,253.25 292,236.336 302.166,229.335  "
      },
      {
        "-fill": "#A0A0A0",
        "-points": "271.668,241.067 292,236.336 317.75,253.25  "
      },
      {
        "-fill": "#CCCBD1",
        "-points": "302.166,229.335 260.833,179.396 273.25,187.043  "
      },
      {
        "-fill": "#CCCBD1",
        "-points": "260.833,179.396 251.335,163.781 273.25,187.043  "
      },
      {
        "-fill": "#8B84A5",
        "-points": "258.918,133.085 262.335,130.169 267.418,140.669  "
      },
      {
        "-fill": "#8B84A5",
        "-points": "260.833,137.419 258.918,133.085 267.418,140.669  "
      },
      {
        "-fill": "#746C8A",
        "-points": "254.792,144.062 260.833,137.419 258.042,146.752  "
      },
      {
        "-fill": "#746C8A",
        "-points": "260.833,137.419 267.418,140.669 263.168,145.085  "
      },
      {
        "-fill": "#746C8A",
        "-points": "260.833,137.419 263.168,145.085 258.042,146.752  "
      },
      {
        "-fill": "#59556D",
        "-points": "254.792,144.062 258.918,133.085 262.292,138.419  "
      },
      {
        "-fill": "#59556D",
        "-points": "250.666,139.169 258.918,133.085 254.792,144.35  "
      },
      {
        "-fill": "#322F42",
        "-points": "249.542,147.502 248.418,141.752 250.666,139.169  "
      },
      {
        "-fill": "#322F42",
        "-points": "249.542,147.085 250.666,139.169 258.042,146.752  "
      },
      {
        "-fill": "#6C6887",
        "-points": "238.209,142.377 245.335,132.169 248.418,141.752  "
      },
      {
        "-fill": "#353244",
        "-points": "251.209,139.169 245.335,132.169 250.666,132.169  "
      },
      {
        "-fill": "#5E5C7F",
        "-points": "237.464,154.336 238.209,142.377 248.418,141.752  "
      },
      {
        "-fill": "#434055",
        "-points": "238.007,161.336 232.133,154.336 237.464,154.336  "
      },
      {
        "-fill": "#9791B0",
        "-points": "232.959,170.781 227.085,163.781 232.416,163.781  "
      },
      {
        "-fill": "#9791B0",
        "-points": "224.752,160.419 229.196,149.002 230.502,163.781  "
      },
      {
        "-fill": "#9791B0",
        "-points": "230.502,163.781 229.196,149.002 232.416,163.781  "
      },
      {
        "-fill": "#9791B0",
        "-points": "231.265,158.499 229.196,149.002 231.418,149.002  "
      },
      {
        "-fill": "#797192",
        "-points": "244.083,169.547 238.007,161.336 258.042,146.752  "
      },
      {
        "-fill": "#797192",
        "-points": "251.335,163.781 244.083,169.547 258.042,146.752  "
      },
      {
        "-fill": "#7C7596",
        "-points": "232.959,139.696 235.181,129.835 238.209,142.377  "
      },
      {
        "-fill": "#7C7596",
        "-points": "243.313,129.835 245.335,132.169 235.181,129.835  "
      },
      {
        "-fill": "#7C7596",
        "-points": "238.209,142.377 235.181,129.835 245.335,132.169  "
      },
      {
        "-fill": "#6C6887",
        "-points": "248.418,141.752 245.335,132.169 251.209,139.169  "
      },
      {
        "-fill": "#5F5D7A",
        "-points": "246.358,155.866 237.464,154.336 248.418,141.752  "
      },
      {
        "-fill": "#797192",
        "-points": "258.042,146.752 246.358,155.866 249.542,147.085  "
      },
      {
        "-fill": "#6C6787",
        "-points": "249.542,147.085 246.358,155.866 248.418,141.752  "
      },
      {
        "-fill": "#8680A1",
        "-points": "238.209,142.377 231.418,149.002 232.959,139.696  "
      },
      {
        "-fill": "#5F5A76",
        "-points": "237.464,154.336 232.133,154.336 238.209,142.377  "
      },
      {
        "-fill": "#5F5A76",
        "-points": "238.209,142.377 231.418,149.002 232.133,154.336  "
      },
      {
        "-fill": "#9791B0",
        "-points": "229.196,149.002 231.418,149.002 235.181,129.835  "
      },
      {
        "-fill": "#434055",
        "-points": "232.133,154.336 238.007,161.336 231.265,158.499  "
      },
      {
        "-fill": "#434055",
        "-points": "246.358,155.866 237.464,154.336 238.007,161.336  "
      },
      {
        "-fill": "#9791B0",
        "-points": "230.502,163.781 227.085,163.781 224.752,160.419  "
      },
      {
        "-fill": "#9791B0",
        "-points": "232.133,154.336 231.265,158.499 231.418,149.002  "
      },
      {
        "-fill": "#434055",
        "-points": "238.007,161.336 231.265,158.499 232.416,163.781  "
      },
      {
        "-fill": "#736E8D",
        "-points": "239.474,178.649 237.464,171.588 240.5,172.396  "
      },
      {
        "-fill": "#736E8D",
        "-points": "237.464,171.588 235.07,178.649 239.474,178.649  "
      },
      {
        "-fill": "#5F5B75",
        "-points": "238.007,161.336 240.5,172.396 232.133,163.781  "
      },
      {
        "-fill": "#5F5B75",
        "-points": "240.5,172.396 238.007,161.336 244.083,169.547  "
      },
      {
        "-fill": "#736E8D",
        "-points": "240.5,172.396 232.959,170.781 232.133,163.781  "
      },
      {
        "-fill": "#70758E",
        "-points": "232.959,170.781 235.07,178.649 224.752,160.419  "
      },
      {
        "-fill": "#736E8D",
        "-points": "232.959,170.781 237.464,171.588 235.07,178.649  "
      },
      {
        "-fill": "#47445C",
        "-points": "253.504,120.75 250.666,132.169 246.749,118.33  "
      },
      {
        "-fill": "#423653",
        "-points": "253.792,125.25 250.666,132.169 253.504,120.75  "
      },
      {
        "-fill": "#47445C",
        "-points": "246.749,118.33 243.313,129.835 239.504,129.835  "
      },
      {
        "-fill": "#47445C",
        "-points": "246.749,118.33 245.335,132.169 243.313,129.835  "
      },
      {
        "-fill": "#47445C",
        "-points": "246.749,118.33 250.666,132.169 245.335,132.169  "
      },
      {
        "-fill": "#353244",
        "-points": "251.209,139.169 250.666,132.169 253.792,136.864  "
      },
      {
        "-fill": "#CCCCCC",
        "-points": "289.5,280.5 333,284.5 299.5,317  "
      },
      {
        "-fill": "#BEBEBE",
        "-points": "299.5,317 333,284.5 336.5,312  "
      },
      {
        "-fill": "#D0D0D0",
        "-points": "289.5,280.5 317.75,253.25 333,284.5  "
      },
      {
        "-fill": "#A0A0A0",
        "-points": "333,284.5 365,278.25 336.5,312  "
      },
      {
        "-fill": "#B4B4B4",
        "-points": "333,284.5 361,259.25 365,278.25  "
      },
      {
        "-fill": "#D0D0D0",
        "-points": "299.5,317 336.5,312 303.5,353.25  "
      },
      {
        "-fill": "#DFDFDF",
        "-points": "336.5,312 330.5,347.5 303.5,353.25  "
      },
      {
        "-fill": "#BBBBBB",
        "-points": "336.5,312 367.5,312 330.5,347.5  "
      },
      {
        "-fill": "#C8C8C8",
        "-points": "303.5,353.25 330.5,347.5 330.5,397  "
      },
      {
        "-fill": "#CBCBCB",
        "-points": "330.5,347.5 367.5,311.75 378.25,347.5  "
      },
      {
        "-fill": "#B8B8B8",
        "-points": "367.5,312 414.25,311.75 378.25,347.5  "
      },
      {
        "-fill": "#C7C7C7",
        "-points": "378.25,347.5 414.25,311.75 423,347.5  "
      },
      {
        "-fill": "#C3C3C3",
        "-points": "400,407.5 378.125,347.5 423,347.5  "
      },
      {
        "-fill": "#D3D3D3",
        "-points": "400,407.5 423,347.5 445,357.75  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "373.5,416.25 330.5,347.5 378.25,347.5  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "338.25,417.625 330.5,347.5 373.5,416.25  "
      },
      {
        "-fill": "#BEBEBE",
        "-points": "373.5,416.25 378.25,347.5 400,407.5  "
      },
      {
        "-fill": "#E2E2E2",
        "-points": "423,347.5 445,312 445,357.75  "
      },
      {
        "-fill": "#DEDCDD",
        "-points": "414.25,311.75 445,274.5 445,312  "
      },
      {
        "-fill": "#A8A8A8",
        "-points": "367.5,312 414.25,285.75 414.25,311.75  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "414.25,285.75 398.75,253.25 421,253.25  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "414.25,285.75 421,253.25 425.229,263.116  "
      },
      {
        "-fill": "#DCDCDC",
        "-points": "414.25,285.75 424.357,261.083 435.17,267.667  "
      },
      {
        "-fill": "#DCDCDC",
        "-points": "414.25,311.75 414.25,285.75 435.17,267.667  "
      },
      {
        "-fill": "#DCDCDC",
        "-points": "414.25,311.75 435.17,267.667 445,274.5  "
      },
      {
        "-fill": "#B0B0B0",
        "-points": "367.5,312 373.5,278.25 414.25,285.75  "
      },
      {
        "-fill": "#B8B8B8",
        "-points": "373.5,278.25 378.125,251.5 398.75,253.25  "
      },
      {
        "-fill": "#BBBBBB",
        "-points": "373.56,277.902 367.5,254.281 378.125,251.5  "
      },
      {
        "-fill": "#858585",
        "-points": "367.5,312 367.5,254.281 373.56,277.902  "
      },
      {
        "-fill": "#C0C0C0",
        "-points": "333,284.5 345,258.25 361,259.25  "
      },
      {
        "-fill": "#C2C2C2",
        "-points": "317.75,253.5 345,258.25 333,284.5  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "313.75,210.875 338.709,177.062 341.429,178.649  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "313.75,210.75 341.429,178.649 330.875,208.75  "
      },
      {
        "-fill": "#9A9A9A",
        "-points": "313.75,237.375 313.75,210.875 330.875,208.75  "
      },
      {
        "-fill": "#BCBCB8",
        "-points": "334.5,217.5 330.875,208.75 346.875,212.875  "
      },
      {
        "-fill": "#9C9C9B",
        "-points": "346.875,212.875 358.625,219.625 343.25,219.625  "
      },
      {
        "-fill": "#9C9C9B",
        "-points": "334.5,217.5 346.875,212.875 343.25,219.625  "
      },
      {
        "-fill": "#A6A6A5",
        "-points": "358.625,219.625 368.125,208.125 368.125,218.25  "
      },
      {
        "-fill": "#929291",
        "-points": "368.125,218.25 368.125,208.125 388.792,208.125  "
      },
      {
        "-fill": "#929291",
        "-points": "387.75,218.25 367.957,218.25 388.792,208.125  "
      },
      {
        "-fill": "#9E9D9D",
        "-points": "387.75,218.25 388.792,208.125 404.875,208.75  "
      },
      {
        "-fill": "#9E9D9D",
        "-points": "404.875,217.5 387.75,218 404.875,208.75  "
      },
      {
        "-fill": "#C0C0C0",
        "-points": "327.25,255.125 338,230.5 340.835,232.25  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "327.25,255.125 340.835,232.25 345,258.25  "
      },
      {
        "-fill": "#A6A6A5",
        "-points": "358.625,219.625 347,212.938 353.875,207.969  "
      },
      {
        "-fill": "#B2B2B1",
        "-points": "358.625,219.625 353.875,207.969 368.125,208.125  "
      },
      {
        "-fill": "#9C9D9D",
        "-points": "317.75,253.25 318.375,229.5 330.875,208.75  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "319.25,247.875 330.875,208.75 334.5,217.5  "
      },
      {
        "-fill": "#C0C0C0",
        "-points": "317.438,253.5 319.25,247.875 327.25,255.125  "
      },
      {
        "-fill": "#C0C0C0",
        "-points": "327.25,255.375 319.25,247.875 338,230.5  "
      },
      {
        "-fill": "#C0C0C0",
        "-points": "338,230.5 333.438,219.625 319.25,247.875  "
      },
      {
        "-fill": "#B1B1B0",
        "-points": "330.875,208.75 341.429,178.649 348.625,184.875  "
      },
      {
        "-fill": "#B1B1B0",
        "-points": "348.625,184.875 341.429,178.649 369.875,175.5  "
      },
      {
        "-fill": "#7A7A79",
        "-points": "341.429,178.979 345.375,170.5 373,157.25  "
      },
      {
        "-fill": "#838382",
        "-points": "341.429,178.649 373,157.25 369.875,175.5  "
      },
      {
        "-fill": "#7A7A79",
        "-points": "369.875,175.5 373,157.25 372.5,175.5  "
      },
      {
        "-fill": "#848484",
        "-points": "380.75,180.75 383.75,172.188 403.375,172.188  "
      },
      {
        "-fill": "#828281",
        "-points": "387.75,188.125 380.75,180.75 403.375,172.188  "
      },
      {
        "-fill": "#BAB9B7",
        "-points": "372.5,175.5 373,157.25 380.75,163.5  "
      },
      {
        "-fill": "#727072",
        "-points": "375.375,177.062 372.5,175.5 380.75,163.5  "
      },
      {
        "-fill": "#8A8C8C",
        "-points": "380.75,180.75 375.375,177.062 383.75,172.188  "
      },
      {
        "-fill": "#BDBCBB",
        "-points": "383.75,172.188 387.75,167.25 400.75,172.188  "
      },
      {
        "-fill": "#E3E1E2",
        "-points": "383.75,172.188 380.75,163.5 387.75,167.25  "
      },
      {
        "-fill": "#8A8C8C",
        "-points": "383.75,172.188 375.375,177.062 380.75,163.5  "
      },
      {
        "-fill": "#B2B2B3",
        "-points": "401.5,204.824 387.75,188.125 393.5,181.75  "
      },
      {
        "-fill": "#CACACA",
        "-points": "404.875,208.75 393.5,181.75 420.875,210  "
      },
      {
        "-fill": "#CACACA",
        "-points": "393.5,181.75 397.625,178.125 420.875,210  "
      },
      {
        "-fill": "#CACACA",
        "-points": "404.875,208.375 401.5,204.824 393.5,181.75  "
      },
      {
        "-fill": "#8B8B8B",
        "-points": "404.875,217.5 404.875,208.75 420.875,210  "
      },
      {
        "-fill": "#818182",
        "-points": "407.188,220.25 404.875,217.5 420.875,210  "
      },
      {
        "-fill": "#8B8B8B",
        "-points": "420.25,248.625 407.188,220.25 420.875,210  "
      },
      {
        "-fill": "#AEAEAE",
        "-points": "388.938,249.125 384.125,242.812 407.188,220.25  "
      },
      {
        "-fill": "#AFAFAF",
        "-points": "399.188,253.688 388.938,249.125 407.188,220.25  "
      },
      {
        "-fill": "#AFAFAF",
        "-points": "404.875,229.312 407.188,220.25 419.904,247.875  "
      },
      {
        "-fill": "#ADADAD",
        "-points": "400,249.125 404.875,229.312 421,253.25  "
      },
      {
        "-fill": "#ADADAD",
        "-points": "399.188,253.688 400,249.125 421,253.25  "
      },
      {
        "-fill": "#AFAFAF",
        "-points": "421,253.25 404.875,229.312 419.739,242.125  "
      },
      {
        "-fill": "#D4D4D4",
        "-points": "314.875,438.875 300,393.75 311.375,393.75  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "311.375,393.75 313,368 324.125,437.875  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "324.125,437.875 313,368 337.026,406.221  "
      },
      {
        "-fill": "#A5A5A5",
        "-points": "330.5,395.839 330.5,347.5 337.026,406.221  "
      },
      {
        "-fill": "#AAA9AE",
        "-points": "324.125,437.875 337.026,406.221 338.25,417.625  "
      },
      {
        "-fill": "#AAA9AE",
        "-points": "332.875,440.125 330.5,440.125 338.25,417.625  "
      },
      {
        "-fill": "#AAA9AE",
        "-points": "324.125,437.875 338.25,417.625 330.5,440.125  "
      },
      {
        "-fill": "#B7B6BC",
        "-points": "314.875,438.875 311.375,393.75 324.125,437.875  "
      },
      {
        "-fill": "#A0A0A0",
        "-points": "376.125,419.625 373.5,416.25 400,407.5  "
      },
      {
        "-fill": "#919093",
        "-points": "376.125,419.625 400,407.5 392.875,416.25  "
      },
      {
        "-fill": "#919093",
        "-points": "392.875,416.25 400,407.5 402.25,409.625  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "403.125,440.625 402.25,409.5 413.625,392.25  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "411.5,442.062 413.625,392.25 405.875,442.062  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "413.625,392.25 403.125,440.625 405.875,442.062  "
      },
      {
        "-fill": "#D2D2D2",
        "-points": "412.688,442.062 413.625,392.25 427,377.5  "
      },
      {
        "-fill": "#CBCBCB",
        "-points": "412.688,442.062 427,377.5 427,404  "
      },
      {
        "-fill": "#BAB9C0",
        "-points": "418.75,446.844 414.75,442.062 427,404  "
      },
      {
        "-fill": "#BAB9C0",
        "-points": "414.75,442.062 412.688,442.062 427,404  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "412.688,442.062 411.5,442.062 413.625,392.25  "
      },
      {
        "-fill": "#D6D6D6",
        "-points": "418.75,446.844 426.78,404.585 423.875,440.625  "
      },
      {
        "-fill": "#B3B6B3",
        "-points": "433.625,392.875 432.125,376.812 445,357.75  "
      },
      {
        "-fill": "#D1D1D1",
        "-points": "432.125,377.562 427,377.562 445,357.75  "
      },
      {
        "-fill": "#DEDEDE",
        "-points": "427,377.5 432.125,377.562 433.625,392.875  "
      },
      {
        "-fill": "#DEDEDE",
        "-points": "427,404 433.625,392.875 427,377.5  "
      },
      {
        "-fill": "#939393",
        "-points": "402.25,409.625 399.938,407.5 413.625,392.25  "
      },
      {
        "-fill": "#DBDBDB",
        "-points": "414.25,311.75 445,312 423,347.5  "
      },
      {
        "-fill": "#AEAEAE",
        "-points": "430.75,229.122 465.5,195.875 448.125,238.25  "
      },
      {
        "-fill": "#999999",
        "-points": "448.125,238.25 465.5,195.875 473.25,206.5  "
      },
      {
        "-fill": "#8E8E8E",
        "-points": "430.75,228.912 448.125,238.25 443.5,248.625  "
      },
      {
        "-fill": "#888888",
        "-points": "424.357,261.083 443.5,248.625 430.75,265.5  "
      },
      {
        "-fill": "#B5B5B5",
        "-points": "430.75,265.5 452.614,255.634 445,274.5  "
      },
      {
        "-fill": "#A3A3A3",
        "-points": "443.5,248.625 448.125,238.25 452.614,255.634  "
      },
      {
        "-fill": "#A3A3A3",
        "-points": "452.614,255.634 472.715,205.767 448.125,238.25  "
      },
      {
        "-fill": "#BBBBBB",
        "-points": "468,249.047 486.25,172.188 486.25,191  "
      },
      {
        "-fill": "#C3C3C3",
        "-points": "445,274.5 468,250.25 450,279.5  "
      },
      {
        "-fill": "#C3C3C3",
        "-points": "450,278.25 468,250.25 448.125,288.667  "
      },
      {
        "-fill": "#E9E5E5",
        "-points": "478.75,240.875 486.25,191 495.25,177.062  "
      },
      {
        "-fill": "#C6C6C6",
        "-points": "468,249.047 486.25,191 468,261.75  "
      },
      {
        "-fill": "#C6C6C6",
        "-points": "468,261.75 486.25,191 478.75,240.875  "
      },
      {
        "-fill": "#E9E5E5",
        "-points": "478.75,240.875 495.25,177.062 491,213.875  "
      },
      {
        "-fill": "#C3C3C3",
        "-points": "448.125,288.667 468,250.25 468,261.75  "
      },
      {
        "-fill": "#B1B1B2",
        "-points": "442.375,214.75 455.5,181.75 465.5,195.875  "
      },
      {
        "-fill": "#949494",
        "-points": "465.5,195.875 477.125,170.188 486.25,172.188  "
      },
      {
        "-fill": "#A8A8A8",
        "-points": "455.5,181.75 477.125,170.188 465.5,195.875  "
      },
      {
        "-fill": "#C7C7C6",
        "-points": "486.25,191 486.25,172.188 495.25,177.062  "
      },
      {
        "-fill": "#979797",
        "-points": "465.5,195.875 486.25,172.188 472.715,205.767  "
      },
      {
        "-fill": "#C7C7C6",
        "-points": "495.25,177.062 495.25,169.719 486.25,172.188  "
      },
      {
        "-fill": "#A4A4A5",
        "-points": "421,253.25 430.75,229.122 424.357,261.083  "
      },
      {
        "-fill": "#888888",
        "-points": "424.357,261.083 430.75,228.912 443.5,248.625  "
      },
      {
        "-fill": "#9C9C9C",
        "-points": "430.75,265.5 443.5,248.625 452.614,255.634  "
      },
      {
        "-fill": "#A8A8A8",
        "-points": "345,258.25 340.835,232.25 362.75,246.562  "
      },
      {
        "-fill": "#AEAEAE",
        "-points": "362.75,246.562 384.125,242.812 367.5,254.281  "
      },
      {
        "-fill": "#A0A0A1",
        "-points": "352.812,252.688 362.75,246.562 367.5,254.281  "
      },
      {
        "-fill": "#A0A0A1",
        "-points": "361,259.456 360.156,253.5 367.5,254.281  "
      },
      {
        "-fill": "#C0C0C0",
        "-points": "345,258.25 353,252.688 361,259.25  "
      },
      {
        "-fill": "#AFAFAF",
        "-points": "361,259.25 367.5,254.281 365,278.25  "
      },
      {
        "-fill": "#A6A6A6",
        "-points": "336.5,312 367.5,275.08 367.5,312  "
      },
      {
        "-fill": "#A0A0A1",
        "-points": "353,252.688 360.156,253.5 361,259.25  "
      },
      {
        "-fill": "#AAAAAA",
        "-points": "365,278.25 367.5,254.281 367.5,276.168  "
      },
      {
        "-fill": "#949494",
        "-points": "420.29,239.287 447.465,201.954 419.904,246.75  "
      },
      {
        "-fill": "#949494",
        "-points": "419.904,246.594 430.75,229.122 421,253.25  "
      },
      {
        "-fill": "#A8A8A8",
        "-points": "373.5,250.142 384.125,242.812 388.938,249.125  "
      },
      {
        "-fill": "#8A8A8A",
        "-points": "378.125,251.5 388.938,249.125 398.75,253.25  "
      },
      {
        "-fill": "#8A8A8A",
        "-points": "373.5,250.142 388.938,249.125 367.5,254.281  "
      },
      {
        "-fill": "#CECCCD",
        "-points": "444.17,310.75 445,274.5 450,278.25  "
      },
      {
        "-fill": "#A8A8A8",
        "-points": "430.75,229.122 447.465,201.954 442.375,214.75  "
      },
      {
        "-fill": "#AEAEAE",
        "-points": "430.75,229.122 465.5,195.875 442.375,214.75  "
      },
      {
        "-fill": "#BDBDBE",
        "-points": "328.625,167.949 345.375,170.793 341.229,179.396  "
      },
      {
        "-fill": "#CBCFD1",
        "-points": "328.625,167.949 352.151,167.25 345.375,170.793  "
      },
      {
        "-fill": "#D6D6D8",
        "-points": "372.224,195.875 373.5,190.688 388.792,208.125  "
      },
      {
        "-fill": "#D6D6D8",
        "-points": "388.792,208.125 373.5,190.688 392.062,208.375  "
      },
      {
        "-fill": "#D6D6D8",
        "-points": "392.062,208.375 373.5,190.688 385.668,193.699  "
      },
      {
        "-fill": "#D6D6D8",
        "-points": "364.668,195.062 350.499,192.306 366.207,191.171  "
      },
      {
        "-fill": "#D6D6D8",
        "-points": "344.937,205.838 350.499,192.306 364.668,195.062  "
      },
      {
        "-fill": "#D6D6D8",
        "-points": "349.671,205.838 344.937,205.838 364.668,195.062  "
      },
      {
        "-fill": "#696583",
        "-points": "335.509,208.595 349.921,186.915 344.937,205.838  "
      },
      {
        "-fill": "#696583",
        "-points": "335.509,208.595 344.937,205.838 348.304,212.024  "
      },
      {
        "-fill": "#696583",
        "-points": "348.304,212.024 344.937,205.838 349.671,205.838  "
      },
      {
        "-fill": "#696583",
        "-points": "348.304,212.024 349.671,205.838 364.668,195.062  "
      },
      {
        "-fill": "#696583",
        "-points": "348.304,212.024 364.668,195.062 358.281,204.824  "
      },
      {
        "-fill": "#696583",
        "-points": "362.173,208.125 368.673,196.915 371.438,208.125  "
      },
      {
        "-fill": "#696583",
        "-points": "358.281,204.824 364.668,195.062 368.673,196.915  "
      },
      {
        "-fill": "#696583",
        "-points": "364.668,195.062 366.207,190.957 373.5,190.688  "
      },
      {
        "-fill": "#696583",
        "-points": "364.668,195.062 373.5,190.688 371.438,199.716  "
      },
      {
        "-fill": "#696583",
        "-points": "366.207,191.171 363.531,184.219 369.875,182.915  "
      },
      {
        "-fill": "#635F7C",
        "-points": "366.207,190.957 369.875,182.915 370.107,190.957  "
      },
      {
        "-fill": "#050503",
        "-points": "353.875,207.969 368.673,196.915 362.173,208.125  "
      },
      {
        "-fill": "#050503",
        "-points": "371.438,208.125 368.673,196.915 379.736,208.125  "
      },
      {
        "-fill": "#050503",
        "-points": "348.625,191.836 366.207,191.171 350.499,192.306  "
      },
      {
        "-fill": "#050503",
        "-points": "348.714,191.497 344.937,205.838 350.499,192.306  "
      },
      {
        "-fill": "#696583",
        "-points": "348.625,191.836 349.921,186.915 363.531,184.219  "
      },
      {
        "-fill": "#58546E",
        "-points": "348.625,191.836 366.207,191.171 363.531,184.219  "
      },
      {
        "-fill": "#49455C",
        "-points": "385.668,193.699 373.5,190.688 369.875,182.915  "
      },
      {
        "-fill": "#49455C",
        "-points": "373.5,190.688 370.107,190.957 369.875,182.915  "
      },
      {
        "-fill": "#696583",
        "-points": "379.736,208.125 371.438,199.716 388.792,208.125  "
      },
      {
        "-fill": "#696583",
        "-points": "372.224,195.875 388.792,208.125 371.438,199.716  "
      },
      {
        "-fill": "#49455C",
        "-points": "404.875,208.75 392.062,208.375 385.668,193.699  "
      },
      {
        "-fill": "#BBBBBB",
        "-points": "445,274.5 486.25,172.188 468,250.25  "
      },
      {
        "-fill": "#A4A4A4",
        "-points": "289.5,280.5 271.668,241.067 297.973,271.889  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "297.973,271.889 271.668,241.067 309.94,260.783  "
      },
      {
        "-fill": "#9C9D9D",
        "-points": "317.75,253.25 313.75,237.375 318.375,229.5  "
      },
      {
        "-fill": "#B4B4B4",
        "-points": "311.375,393.75 303.5,353.25 313,368  "
      },
      {
        "-fill": "#D9D9D9",
        "-points": "300,393.75 303.5,353.25 311.375,393.75  "
      },
      {
        "-fill": "#DFE1DD",
        "-points": "314.875,438.875 294.875,393.75 300,393.75  "
      },
      {
        "-fill": "#E5E3E4",
        "-points": "294.875,393.75 303.5,353.25 300,393.75  "
      },
      {
        "-fill": "#E5E3E4",
        "-points": "297.75,353.25 303.5,353.25 294.875,393.75  "
      },
      {
        "-fill": "#E5E3E4",
        "-points": "297.75,353.25 299.5,317 303.5,353.25  "
      },
      {
        "-fill": "#B8B8B6",
        "-points": "377.615,230.5 375.278,220.25 381.471,220.25  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "352.151,232.25 349.716,223.062 355.909,222.003  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "361.274,224.352 359.911,221.534 362.173,221.003  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "367.037,223.677 365.417,220.329 367.936,220.329  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "372.585,223.677 370.964,220.329 373.484,220.329  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "384.611,224.352 382.99,221.003 385.51,221.003  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "345.736,226.026 344.115,222.003 346.875,222.003  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "341.429,225.375 340.166,221.84 342.095,222.003  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "388.798,224.352 387.178,221.003 389.697,221.003  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "392.062,222.677 390.803,221.003 393.322,221.003  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "366.676,243.832 364.25,243.832 365.417,240.166  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "370.53,242.938 368.673,242.938 369.602,239.937  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "361.274,239.572 362.173,244.793 359.654,241.77  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "357.215,236.158 356.912,241.379 354.392,238.356  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "350.938,234.083 350.824,237.298 348.304,235.583  "
      },
      {
        "-fill": "#B0B0B3",
        "-points": "345.375,231.695 346.109,233.75 343.525,231.837  "
      },
      {
        "-fill": "#49465D",
        "-points": "330.875,208.75 348.625,184.875 335.509,208.595  "
      },
      {
        "-fill": "#49465D",
        "-points": "335.509,208.595 348.625,184.875 349.921,186.915  "
      },
      {
        "-fill": "#49465D",
        "-points": "348.625,184.875 369.875,181.25 349.921,186.915  "
      },
      {
        "-fill": "#49465D",
        "-points": "349.921,186.915 369.875,181.25 369.875,182.915  "
      },
      {
        "-fill": "#49465D",
        "-points": "369.875,181.25 379.08,183.333 369.875,182.915  "
      },
      {
        "-fill": "#3C3B4C",
        "-points": "392.062,198.667 369.875,182.915 379.08,183.333  "
      },
      {
        "-fill": "#69686F",
        "-points": "369.875,175.5 369.875,181.25 348.625,184.875  "
      },
      {
        "-fill": "#69686F",
        "-points": "369.875,175.5 372.5,175.5 379.08,183.333  "
      },
      {
        "-fill": "#69686F",
        "-points": "369.875,175.5 379.08,183.333 369.875,181.25  "
      },
      {
        "-fill": "#69686F",
        "-points": "372.5,175.5 375.375,177.062 379.08,183.333  "
      },
      {
        "-fill": "#69686F",
        "-points": "375.375,177.062 380.75,180.75 379.08,183.333  "
      },
      {
        "-fill": "#69686F",
        "-points": "380.75,180.75 401.5,204.824 379.08,183.333  "
      },
      {
        "-fill": "#69686F",
        "-points": "379.08,183.333 401.5,204.824 392.062,198.667  "
      },
      {
        "-fill": "#69686F",
        "-points": "401.5,204.824 404.875,208.75 392.062,198.667  "
      },
      {
        "-fill": "#69686F",
        "-points": "380.75,180.75 387.75,188.125 401.5,204.824  "
      },
      {
        "-fill": "#49465D",
        "-points": "330.875,208.75 335.509,208.595 346.875,212.875  "
      },
      {
        "-fill": "#49465D",
        "-points": "335.509,208.595 348.304,212.024 346.875,212.875  "
      },
      {
        "-fill": "#464359",
        "-points": "338,230.5 333.438,219.625 334.5,217.5  "
      },
      {
        "-fill": "#464359",
        "-points": "340.688,229.999 338,230.5 334.5,217.5  "
      },
      {
        "-fill": "#464359",
        "-points": "362.75,246.562 338,230.5 340.688,229.999  "
      },
      {
        "-fill": "#464359",
        "-points": "362.75,243.832 362.75,246.562 340.688,229.999  "
      },
      {
        "-fill": "#464359",
        "-points": "362.75,246.562 362.75,243.832 384.125,242.812  "
      },
      {
        "-fill": "#464359",
        "-points": "384.125,242.812 362.75,243.832 381.591,240.602  "
      },
      {
        "-fill": "#464359",
        "-points": "384.125,242.812 381.591,240.602 407.188,220.25  "
      },
      {
        "-fill": "#464359",
        "-points": "404.875,217.5 407.188,220.25 381.591,240.602  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "403.125,440.625 391.653,417.156 402.25,409.625  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "395,441.411 391.653,417.156 397.108,436  "
      },
      {
        "-fill": "#ABABAB",
        "-points": "397.108,436 391.653,417.156 403.125,440.625  "
      },
      {
        "-fill": "#6A6683",
        "-points": "422.5,459.5 438.062,459.5 414.75,442.062  "
      },
      {
        "-fill": "#676380",
        "-points": "422.5,459.5 406.781,459.5 411.931,446.844  "
      },
      {
        "-fill": "#6C6686",
        "-points": "422.5,459.5 407.938,442.062 414.75,442.062  "
      },
      {
        "-fill": "#595570",
        "-points": "410.328,450.781 403,450.781 407.938,442.062  "
      },
      {
        "-fill": "#676380",
        "-points": "406.781,459.5 403,450.781 410.328,450.781  "
      },
      {
        "-fill": "#545069",
        "-points": "399.938,459.5 403,450.781 406.781,459.5  "
      },
      {
        "-fill": "#545069",
        "-points": "403,450.781 394.381,443 397.108,436  "
      },
      {
        "-fill": "#545069",
        "-points": "403,450.781 397.108,436 407.938,442.062  "
      },
      {
        "-fill": "#DFE1DD",
        "-points": "308.25,434.359 294.875,393.75 314.875,438.875  "
      },
      {
        "-fill": "#777195",
        "-points": "327.002,461.498 320.335,453.172 320.335,445.331  "
      },
      {
        "-fill": "#777195",
        "-points": "327.002,461.498 320.335,445.331 328.502,445.331  "
      },
      {
        "-fill": "#777195",
        "-points": "332.002,454.164 327.002,461.498 328.502,445.331  "
      },
      {
        "-fill": "#686380",
        "-points": "346.528,463.749 332.002,454.164 328.502,445.331  "
      },
      {
        "-fill": "#686380",
        "-points": "346.528,463.749 328.502,445.331 334.5,445.331  "
      },
      {
        "-fill": "#686380",
        "-points": "346.528,463.749 334.5,445.331 350.043,458.708  "
      },
      {
        "-fill": "#777195",
        "-points": "326.143,466 308.25,434.359 314.875,438.875  "
      },
      {
        "-fill": "#777195",
        "-points": "320.335,453.172 314.875,438.875 324.125,437.875  "
      },
      {
        "-fill": "#777195",
        "-points": "326.143,466 320.335,453.172 327.002,461.498  "
      },
      {
        "-fill": "#4E4A66",
        "-points": "334.375,461.498 332.002,454.164 346.528,463.749  "
      },
      {
        "-fill": "#AAA9AE",
        "-points": "338.25,417.625 373.5,416.25 376.125,419.625  "
      },
      {
        "-fill": "#595570",
        "-points": "410.328,450.781 407.938,442.062 411.931,446.844  "
      },
      {
        "-fill": "#777195",
        "-points": "327.002,461.498 332.002,454.164 334.375,461.498  "
      },
      {
        "-fill": "#9B9B9B",
        "-points": "460.688,171.333 477.125,170.188 455.5,181.75  "
      },
      {
        "-fill": "#706E8B",
        "-points": "493.001,153.667 499.834,151.167 493.001,168.833  "
      },
      {
        "-fill": "#5A5672",
        "-points": "484.667,167.844 493.001,153.667 493.001,168.833  "
      },
      {
        "-fill": "#5A5672",
        "-points": "484.667,160.755 493.001,153.667 484.667,168.123  "
      },
      {
        "-fill": "#59556F",
        "-points": "493.001,153.667 488.834,148.333 499.834,151.167  "
      },
      {
        "-fill": "#59556F",
        "-points": "480.667,152.667 476.667,141.333 488.834,148.333  "
      },
      {
        "-fill": "#524E67",
        "-points": "484.667,160.755 493.001,153.667 488.834,148.333  "
      },
      {
        "-fill": "#524E67",
        "-points": "484.667,160.755 488.834,148.333 480.667,152.667  "
      },
      {
        "-fill": "#524E67",
        "-points": "466.312,154.544 480.667,152.667 476.667,141.333  "
      },
      {
        "-fill": "#444156",
        "-points": "452.834,157.833 464.001,159.168 476.667,141.333  "
      },
      {
        "-fill": "#444156",
        "-points": "464.001,159.168 480.667,152.667 466.312,154.544  "
      },
      {
        "-fill": "#4D4862",
        "-points": "452.834,157.833 462.001,167.844 484.667,167.844  "
      },
      {
        "-fill": "#4E4A63",
        "-points": "463.416,159.099 484.667,160.755 480.667,152.667  "
      },
      {
        "-fill": "#4E4A63",
        "-points": "452.834,157.833 484.667,168.123 484.667,160.755  "
      },
      {
        "-fill": "#9D94B3",
        "-points": "440.168,147.5 445.752,152.249 446.167,139.667  "
      },
      {
        "-fill": "#A296BC",
        "-points": "446.167,139.667 445.752,152.249 449.938,141.333  "
      },
      {
        "-fill": "#625D7B",
        "-points": "457.688,127.833 458.834,138 470,132.582  "
      },
      {
        "-fill": "#625D7B",
        "-points": "478.75,130.333 488.834,134.167 487,123.833  "
      },
      {
        "-fill": "#9D94B3",
        "-points": "507.168,132.333 513.167,141.333 510.168,131.5  "
      },
      {
        "-fill": "#444156",
        "-points": "464.502,149.875 470,132.582 458.834,138  "
      },
      {
        "-fill": "#444156",
        "-points": "470,132.582 464.502,149.875 474.916,142.667  "
      },
      {
        "-fill": "#444156",
        "-points": "478.75,130.333 476.667,141.333 488.834,134.167  "
      },
      {
        "-fill": "#444156",
        "-points": "476.667,141.333 488.834,148.333 488.834,134.167  "
      },
      {
        "-fill": "#444156",
        "-points": "495.25,137.333 504.334,147 499.834,151.167  "
      },
      {
        "-fill": "#444156",
        "-points": "488.834,148.333 499.834,151.167 495.25,137.333  "
      },
      {
        "-fill": "#55546D",
        "-points": "495.25,137.333 504.334,147 507.168,132.333  "
      },
      {
        "-fill": "#55546D",
        "-points": "507.168,132.333 504.334,147 513.167,141.333  "
      },
      {
        "-fill": "#444156",
        "-points": "449.938,154.544 452.834,157.833 456.5,144.25  "
      },
      {
        "-fill": "#444156",
        "-points": "456.5,144.25 452.834,157.833 462.667,151.167  "
      },
      {
        "-fill": "#504E64",
        "-points": "445.752,152.249 456.5,144.25 449.938,141.333  "
      },
      {
        "-fill": "#504E64",
        "-points": "445.752,152.249 449.938,154.544 456.5,144.25  "
      },
      {
        "-fill": "#252237",
        "-points": "456.5,144.25 457.75,142.212 446.167,139.667  "
      },
      {
        "-fill": "#252237",
        "-points": "464.502,149.875 457.75,142.212 456.5,144.25  "
      },
      {
        "-fill": "#252237",
        "-points": "464.502,149.875 456.5,144.25 462.667,151.167  "
      },
      {
        "-fill": "#252237",
        "-points": "488.834,148.333 488.834,140.252 495.25,137.333  "
      },
      {
        "-fill": "#252237",
        "-points": "488.834,140.252 495.25,134.585 507.584,132.333  "
      },
      {
        "-fill": "#9B9B9B",
        "-points": "462.001,167.844 477.125,170.188 460.688,171.333  "
      },
      {
        "-fill": "#9B9B9B",
        "-points": "493.001,168.833 495.25,169.719 486.25,172.188  "
      },
      {
        "-fill": "#898989",
        "-points": "462.001,167.844 493.001,168.833 486.25,172.188  "
      },
      {
        "-fill": "#767777",
        "-points": "462.001,167.844 486.25,167.844 493.001,168.833  "
      },
      {
        "-fill": "#000000",
        "-points": "380.115,202 374.048,197.224 378.125,194.081  "
      },
      {
        "-fill": "#000000",
        "-points": "381.89,200.45 380.115,202 378.125,194.081  "
      },
      {
        "-fill": "#000000",
        "-points": "359.898,193.287 355.861,201.391 361.559,197.265  "
      },
      {
        "-fill": "#000000",
        "-points": "355.861,201.391 353.875,199.531 359.898,193.287  "
      },
      {
        "-fill": "#B7B7B7",
        "-points": "373.5,278.25 398.75,253.25 414.25,285.75  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "419.12,445.331 438.062,459.5 423.875,440.625  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "423.875,440.625 438.062,459.5 448.002,459.5  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "423.875,440.625 427.75,428.094 448.002,459.5  "
      },
      {
        "-fill": "#FFFFFF",
        "-points": "444.17,398.623 426.78,404.585 423.875,440.625  "
      }
    ]
  }
} ;  
    
initStage();

  function initStage(){
 
 for(var t=0;t<scene['g']['polyline'].length;t++){
     
     yeti.push({
                            'x0': scene['g']['polyline'][t]['-points'].split(' ')[0].split(',')[0],
                            'y0': scene['g']['polyline'][t]['-points'].split(' ')[0].split(',')[1],
                            'x1':scene['g']['polyline'][t]['-points'].split(' ')[1].split(',')[0],
                            'y1': scene['g']['polyline'][t]['-points'].split(' ')[1].split(',')[1],
                            'x2': scene['g']['polyline'][t]['-points'].split(' ')[2].split(',')[0],
                            'y2': scene['g']['polyline'][t]['-points'].split(' ')[2].split(',')[1],
                            'color': hex2rgb(scene['g']['polyline'][t]['-fill'])
                        });
     
 }
   initSnowflake();
    lgt =scene["g"]["polyline"].length;
         
                
                for (var j = 0; j < lgt; j++) {
                    var _tri = new Triangle(j, yeti);
                    shape.push(_tri);
                }
                

                for (var k = 0; k < lgt; k++) {
                    shape[k].update();
                }
    
    TweenLite.ticker.addEventListener("tick", drawAll);
 
  } 



/*
class Snowflake
*/

 function Snowflake() {
        this.x = 0;
        this.y = 0;
        this.vy = 0;
        this.vx = 0;
        this.r = 0;
       
    
    this.reset = function () {
        this.x = Math.random() * width;
        this.y = Math.random() * -height;
        this.vy = 1 + Math.random() * 3;
        this.vx = 0.5 - Math.random();
        this.r = 1 + Math.random() * 2;
        this.o = 0.5 + Math.random() * 0.5;
    }
    
   
    this.update= function () {
    
            this.y += this.vy;
            this.x += this.vx;
            ctx.fillStyle = "rgba(255, 255, 255, " + snowflake.o + ")";
            ctx.beginPath();
            ctx.arc(this.x, this.y, this.r, 0, Math.PI * 2, false);
            ctx.closePath();
            ctx.fill();

            if (this.y > height) {
               this.reset();
            }
        }
    }
    /*
class Point
*/
    function Point(x, y) {
        this.x = x;
        this.y = y;
    };
  /*
Méthod calculGravityCenter
*/
    function calculGravityCenter(x1, x2, y1, y2) {
        var x = x1 + (2 * (x2 - x1)) / 3;
        var y = y1 + (2 * (y2 - y1)) / 3;
        return {
            'x': x,
            'y': y
        };
    };

/*
class Triangle
*/
    function Triangle(j, _array) {
        this.points = [];
        this.color = _array[j]['color'];
        this.n = j;
        for (var i = 0; i < 3; i++) {
        this.points.push(new Point(calculGravityCenter(Number(_array[j]['x0']), Number(_array[j]['x1']), Number(_array[j]['y0']), Number(_array[j]['y1'])).x, calculGravityCenter(Number(_array[j]['x0']), Number(_array[j]['x1']), Number(_array[j]['y0']), Number(_array[j]['y1'])).y));
          
        }


        this.update = function () {
            var _t = Math.floor(Math.random() * 10) / 10 + 1;
           for (var i = 0; i < 3; i++)

            {
                TweenLite.to(this.points[i], _t, {
                    x: Number(_array[j]['x' + i]),
                    y: Number(_array[j]['y' + i]),
                    delay: j / 80,
                    ease: Elastic.easeOut,
                    onComplete : countTweenShape
                });
            }

        }
       
        this.draw = function () {
            ctx.fillStyle = this.color;
            ctx.beginPath();
            ctx.moveTo(this.points[0].x, this.points[0].y);
            ctx.lineTo(this.points[1].x, this.points[1].y);
            ctx.lineTo(this.points[2].x, this.points[2].y);
            ctx.lineTo(this.points[0].x, this.points[0].y);
            ctx.closePath();
            ctx.fill();
        };
    }
    var countTween=0;
function countTweenShape() {
countTween+=1;

    if(countTween==1200){
    $("h1").animate({

top: "20",
}, 800, function () {
// Animation complete.
}); 
    
    }
}
/*
Method initSnowflake 
*/
function initSnowflake () {
    for (var i = 0; i < COUNT; i++) {
        snowflake = new Snowflake();
        snowflakes.push(snowflake);
        snowflakes[i].reset();  
    }
    
    
}
/*
Method drawAll
* draw all shape
*/ 
    function drawAll() {
        ctx.clearRect(0, 0, 800, 500);
        for (var j = 0; j < lgt; j++) {
            shape[j].draw();

        }
         for (var k = 0; k < COUNT; k++) {
            snowflakes[k].update();

        }
        
      
    }
/*
Method hex2rgb
*/    
    function hex2rgb(hex, opacity) {
        var rgb = hex.replace('#', '').match(/(.{2})/g);

        var i = 3;
        while (i--) {
            rgb[i] = parseInt(rgb[i], 16);
        }

        if (typeof opacity == 'undefined') {
            return 'rgb(' + rgb.join(', ') + ')';
        }
          return 'rgba(' + rgb.join(', ') + ', ' + opacity + ')';
    };
!
999px

Console