123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <body>
<div class="canvas">
<svg height="51" viewBox="0 0 40 51" width="40" id="sculler_1_body"><path d="m26.1385934 48.9333354c3.8044955 2.1521888 7.6614504 5.0983262 11.5708644 8.8384122-5.3190869 5.4161571-6.3458411 12.167564-3.0802625 20.2542207 3.2655786 8.0866568 6.8266647 13.9593299 10.6832583 17.6180194-15.5924481 4.2414897-25.7386074 3.1360086-30.4384778-3.3164433-7.04980569-9.678678-9.87930146-28.3709863-6.9517043-34.5557968 2.9275972-6.1848106 12.5095785-12.0666955 18.2163219-8.8384122z" fill="#57352b" fill-rule="evenodd" transform="translate(-6 -48)"/></svg>
<svg height="51" viewBox="0 0 40 51" width="40" id="sculler_2_body"><path d="m26.1385934 48.9333354c3.8044955 2.1521888 7.6614504 5.0983262 11.5708644 8.8384122-5.3190869 5.4161571-6.3458411 12.167564-3.0802625 20.2542207 3.2655786 8.0866568 6.8266647 13.9593299 10.6832583 17.6180194-15.5924481 4.2414897-25.7386074 3.1360086-30.4384778-3.3164433-7.04980569-9.678678-9.87930146-28.3709863-6.9517043-34.5557968 2.9275972-6.1848106 12.5095785-12.0666955 18.2163219-8.8384122z" fill="#57352b" fill-rule="evenodd" transform="translate(-6 -48)"/></svg>
<svg height="51" viewBox="0 0 40 51" width="40" id="sculler_3_body"><path d="m26.1385934 48.9333354c3.8044955 2.1521888 7.6614504 5.0983262 11.5708644 8.8384122-5.3190869 5.4161571-6.3458411 12.167564-3.0802625 20.2542207 3.2655786 8.0866568 6.8266647 13.9593299 10.6832583 17.6180194-15.5924481 4.2414897-25.7386074 3.1360086-30.4384778-3.3164433-7.04980569-9.678678-9.87930146-28.3709863-6.9517043-34.5557968 2.9275972-6.1848106 12.5095785-12.0666955 18.2163219-8.8384122z" fill="#57352b" fill-rule="evenodd" transform="translate(-6 -48)"/></svg>
<svg width="511px" height="196px" viewBox="0 0 511 196" id="dragon_boat">
    <defs>
        <path d="M393.937325,91.6309378 C392.618784,91.8026574 392.201897,91.8731318 390.685195,91.8191492 C377.176472,91.3383455 373.476743,80.1669757 375.395422,79.0652987 C377.3141,77.9636218 380.715078,82.473357 391.541151,82.1141745 C394.241267,82.0245912 396.569054,81.6726322 398.562263,81.2391956 C399.221233,79.1438652 399.855135,77.0005591 400.46397,74.8092773 C397.697728,76.4292253 394.101381,77.4016373 389.919561,76.6920547 C379.317741,74.8931092 375.661073,64.3348004 377.428976,63.4045395 C379.196879,62.4742786 381.889699,66.512873 391.415459,67.0986117 C396.586164,67.4165582 403.056747,60.1426421 404.834387,56.077464 L416.753054,56.077464 C411.236744,53.4829298 405.801925,49.7637884 404.838879,45.9916012 C404.009536,42.7431223 407.265699,36.8169676 412.842044,39.335884 C417.060739,41.2415303 413.798961,45.0163933 421.629804,44.6763338 C429.460647,44.3362744 432.151635,41.0719593 437.267039,40.3634748 C446.163076,39.1313719 458.026579,48.1266357 447.017976,64.3720403 C474.179221,59.1600103 489.222732,48.1266357 496.054176,50.8922968 C502.342788,53.438196 507.242757,58.7108806 510.754086,66.7103506 C491.297674,80.5155588 469.501402,87.0677475 445.365271,86.3669168 C467.877767,101.322497 490.774381,102.268751 496.054176,107.24536 C501.333972,112.221969 489.356758,120.501048 483.790556,120.501048 C478.796109,120.501048 469.512522,106.825422 426.603337,109.116178 C420.239345,144.703059 410.165132,167.521458 396.380691,177.571375 C366.805819,199.133729 140.342528,202.088271 114.250732,183.578418 C88.1589355,165.068565 86.7308377,105.908775 89.9761981,80.0652987 C90.7175023,74.1621402 68.6321264,78.3207262 68.6321264,72.3480429 C68.6321264,66.3753595 100.899428,60.7609571 106.744011,73.9259468 C115.458931,93.556403 99.9805586,117.013486 117.099607,128.841992 C145.159052,148.22983 339.398248,156.506946 366.805819,133.739466 C374.277337,127.532873 380.813235,119.535638 386.413511,109.747763 C374.600829,107.352213 372.331318,97.1832912 374.243341,96.2972271 C376.250736,95.3669662 376.800024,98.1400172 387.616205,98.7257559 C389.07745,98.804888 390.573076,98.7284687 392.069671,98.5443973 C393.06358,96.3126836 393.019465,94.0081971 393.937325,91.6309378 Z" id="path-1"></path>
        <pattern id="pattern-2" width="13.4852941" height="13.4852941" x="55.1468323" y="25.2433746" patternUnits="userSpaceOnUse">
            <use xlink:href="#image-3" transform="scale(0.280943627,0.280943627)"></use>
        </pattern>
        <image id="image-3" width="48" height="48" xlink:href="data:image/png;base64,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"></image>
        <ellipse id="path-4" cx="9" cy="8" rx="9" ry="8"></ellipse>
    </defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="boat">
            <path d="M397.410032,37.9206845 C391.458071,36.0220386 385.250415,31.5260058 379.215318,25.1896883 C373.08845,18.7570186 367.583895,10.768943 364.920253,4.70854315 C364.253589,3.191729 364.942772,1.42167026 366.459586,0.755006277 C367.9764,0.0883422986 369.746459,0.777525177 370.413123,2.29433932 C375.030594,12.8001493 385.862214,25.312146 395.408283,30.4911437 C392.001439,23.8118898 390.037222,17.0833782 390.397249,13.6579485 C390.570438,12.0101706 392.046623,10.8147797 393.694401,10.9879682 C395.342178,11.1611566 396.537569,12.6373414 396.364381,14.2851192 C396.329203,14.6198123 396.437597,15.6073248 396.713632,16.8870387 C397.055745,18.4730929 397.607925,20.3387673 398.335408,22.2988911 C400.12076,27.1093271 402.725253,31.9251317 406.000975,36.0857927 C414.643686,47.0633379 426.548918,52.1368208 442.114813,48.9030454 C443.737031,48.5660339 445.3253,49.6078991 445.662311,51.2301164 C445.999323,52.8523338 444.957458,54.4406027 443.33524,54.7776142 C426.781089,58.216697 413.454021,53.3401447 403.650545,42.5890172 C397.110822,44.2956393 392.716631,45.0281203 390.145044,44.7578356 C388.497267,44.5846472 387.301876,43.1084624 387.475064,41.4606846 C387.648253,39.8129067 389.124437,38.6175158 390.772215,38.7907043 C391.915544,38.910873 394.164336,38.624074 397.410032,37.9206845 Z" id="horn_left" fill="#EFC85A" fill-rule="nonzero"></path>
            <path d="M76.438912,71.6796002 C84.6609486,72.1904164 89.9989371,73.6440503 90.4035501,76.5803135 C90.4418208,76.8580433 90.4327071,77.1310092 90.3780703,77.3990785 C90.7649747,77.5579471 91.0489787,77.78713 91.216898,78.0900645 C92.5556628,80.5052602 86.0087265,86.6937715 76.5939064,91.9124915 C67.1790864,97.1312114 58.4615834,99.403917 57.1228186,96.9887213 C55.954718,94.881412 60.7899481,89.901503 68.2954516,85.1995769 C64.4225265,85.6692399 60.1970818,86.0252674 55.7501077,86.2583235 C35.8523095,87.3011229 18.4159988,86.2137573 18.3472487,80.3566242 C18.2838907,74.9588667 31.7438097,73.2037746 49.4291556,72.1454943 C45.4209122,70.6429481 41.1521091,68.8845938 36.7372396,66.9189673 C15.5899587,57.5035912 -1.92946452,47.2795692 0.960693019,41.467644 C3.85085056,35.6557187 21.0734102,42.4308007 42.2206911,51.8461767 C45.6219538,53.3605164 48.8909733,54.8607973 51.9745588,56.3349611 C49.0134504,52.9728798 47.598938,50.017407 48.4574483,48.6435033 C50.0599483,46.0789672 59.0704143,48.818607 68.5828876,54.76266 C71.4095555,56.5289582 73.9624769,58.3794526 76.1126979,60.1754304 C74.4449591,55.7844372 74.6360719,51.7765133 76.7543236,50.6972102 C79.2147701,49.44355 83.3435701,52.6158884 85.9762564,57.7828262 C88.6089427,62.949764 88.7485706,68.154687 86.2881241,69.4083472 C85.4072898,69.8571546 84.3126355,69.7387157 83.1493526,69.1645874 C83.1617962,69.547685 83.0826238,69.8848234 82.9051611,70.1688232 C82.1056183,71.4483591 79.4382943,71.7006151 75.7845506,70.8938927 C76.0243116,71.159805 76.2426688,71.4217612 76.438912,71.6796002 Z" id="dragon-tail" fill="#73CF64"></path>
            <g id="dragon-body">
                <use fill="#FF5957" xlink:href="#path-1"></use>
                <use fill-opacity="0.2" fill="url(#pattern-2)" xlink:href="#path-1"></use>
            </g>
            <path d="M475.543609,56.9250416 C475.543609,56.9250416 504.682159,60.9454797 498.240486,49.5103147 C491.798814,38.0751498 484.607257,51.1962971 475.543609,56.9250416 Z" id="dragon-nose" fill="#F58584"></path>
            <path d="M390.510512,45.3967869 C384.392694,44.1306913 377.749081,40.308165 371.08472,34.6373979 C364.319018,28.8803991 358.009637,21.5114657 354.727102,15.7626917 C353.90554,14.3238722 354.405925,12.4914708 355.844745,11.6699086 C357.283564,10.8483465 359.115966,11.3487324 359.937528,12.7875519 C365.62786,22.7531529 377.708003,34.0643949 387.74313,38.2171856 C383.656777,31.9306336 381,25.444298 381,22 C381,20.3431458 382.343146,19 384,19 C385.656854,19 387,20.3431458 387,22 C387,22.3365367 387.211023,23.3073092 387.619312,24.5511592 C388.125339,26.0927643 388.869511,27.8904997 389.797897,29.7638431 C392.076296,34.3613069 395.16991,38.8784865 398.862595,42.6739487 C408.605426,52.6879484 420.975763,56.4892027 436.118366,51.6460632 C437.696469,51.1413299 439.384942,52.0114683 439.889675,53.5895717 C440.394408,55.1676751 439.52427,56.8561479 437.946166,57.3608811 C421.842183,62.5115042 408.078383,59.0547241 397.204813,49.3872346 C390.879306,51.768095 386.585752,52.9558813 384,52.9558813 C382.343146,52.9558813 381,51.6127356 381,49.9558813 C381,48.2990271 382.343146,46.9558813 384,46.9558813 C385.149627,46.9558813 387.356121,46.4355907 390.510512,45.3967869 Z" id="horn_right" fill="#EAB520" fill-rule="nonzero"></path>
            <g id="eye" transform="translate(429.000000, 49.000000)">
                <mask id="mask-5" fill="white">
                    <use xlink:href="#path-4"></use>
                </mask>
                <use id="Oval" fill="#EFEFEF" xlink:href="#path-4"></use>
                <ellipse id="Oval" fill="#5F5F5F" mask="url(#mask-5)" cx="18" cy="8" rx="6" ry="8"></ellipse>
            </g>
            <g id="fur" transform="translate(370.000000, 54.000000)" fill="#73CF64">
                <path d="M39.2485875,58.8016463 C43.1959443,52.4017074 42.5553975,44.693842 46.40584,46.1880181 C50.2562825,47.6821942 49.3776084,62.9900883 42.4070755,67.1131232 C35.4365427,71.2361581 32.5973208,68.6061979 33.0455767,67.1131232 C33.4938326,65.6200485 35.3012307,65.2015852 39.2485875,58.8016463 Z"></path>
                <path d="M20.4122474,3.8325846 C29.9380072,4.41832329 34.5361323,0.280494223 35.4465463,3.24684592 C36.3569602,6.21319761 29.5181685,15.224973 18.9163491,13.4260276 C8.31452982,11.6270821 4.65786142,1.06877331 6.42576428,0.138512387 C8.19366715,-0.791748532 10.8864875,3.24684592 20.4122474,3.8325846 Z"></path>
                <path d="M19.410623,18.5639481 C30.2268043,19.1496868 35.4478213,15.0118577 36.4815659,17.9782094 C37.5153105,20.9445611 31.1274946,29.8137279 17.7120807,28.157391 C4.29666673,26.5010541 1.584666,15.0497421 3.59206049,14.1194812 C5.59945499,13.1892203 8.59444173,17.9782094 19.410623,18.5639481 Z"></path>
                <path d="M13.9754895,35.0509534 C24.7916708,35.636692 37.4915441,27.6997553 38.5252887,30.666107 C39.5590333,33.6324587 28.0277506,48.027629 14.6123366,46.3712921 C1.19692267,44.7149552 -1.40476909,33.5526855 0.602625404,32.6224246 C2.6100199,31.6921637 3.15930822,34.4652147 13.9754895,35.0509534 Z"></path>
                <path d="M16.5138154,50.951521 C25.1321491,50.0212601 37.1318197,36.6219676 40.9822622,38.1161437 C44.8327046,39.6103198 33.4577843,62.8146639 18.0649081,62.1580955 C2.6720318,61.501527 1.77639115,51.881782 3.78378564,50.951521 C5.79118014,50.0212601 7.89548169,51.881782 16.5138154,50.951521 Z"></path>
            </g>
        </g>
    </g>
</svg>
<svg width="999px" height="62px" viewBox="0 0 999 62" id="wave1">
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="83.5607744%" id="linearGradient-1">
            <stop stop-color="#2CBCDE" offset="0%"></stop>
            <stop stop-color="#1E82A1" offset="100%"></stop>
        </linearGradient>
    </defs>
            <polygon id="Combined-Shape" fill="url(#linearGradient-1)" points="999 62 0 62 0 20.2935592 26.8090546 -1.13686838e-13 82.6726625 -1.13686838e-13 111 19.2854291 111 20.2935592 137.809055 -1.13686838e-13 193.672662 -1.13686838e-13 222 19.2854291 222 20.2935592 248.809055 -1.13686838e-13 304.672662 -1.13686838e-13 333 19.2854291 333 20.2935592 359.809055 -1.13686838e-13 415.672662 -1.13686838e-13 444 19.2854291 444 20.2935592 470.809055 -1.13686838e-13 526.672662 -1.13686838e-13 555 19.2854291 555 20.2935592 581.809055 -1.13686838e-13 637.672662 -1.13686838e-13 666 19.2854291 666 20.2935592 692.809055 -1.13686838e-13 748.672662 -1.13686838e-13 777 19.2854291 777 20.2935592 803.809055 -1.13686838e-13 859.672662 -1.13686838e-13 888 19.2854291 888 20.2935592 914.809055 -1.13686838e-13 970.672662 -1.13686838e-13 999 19.2854291"></polygon>
            <polygon id="Combined-Shape" fill="#52D7F4" points="888 28.7317073 855.396588 6.17097049 804.815405 9.49678089 777 28.7317073 744.396588 6.17097049 693.815405 9.49678089 666 28.7317073 633.396588 6.17097049 582.815405 9.49678089 555 28.7317073 522.396588 6.17097049 471.815405 9.49678089 444 28.7317073 411.396588 6.17097049 360.815405 9.49678089 333 28.7317073 300.396588 6.17097049 249.815405 9.49678089 222 28.7317073 189.396588 6.17097049 138.815405 9.49678089 111 28.7317073 78.3965879 6.17097049 27.8154052 9.49678089 0 28.7317073 0 18.6504065 25.0311728 -1.13686838e-13 82.7038352 -1.13686838e-13 111 18.6504065 136.031173 -1.13686838e-13 193.703835 -1.13686838e-13 222 18.6504065 247.031173 -1.13686838e-13 304.703835 -1.13686838e-13 333 18.6504065 358.031173 -1.13686838e-13 415.703835 -1.13686838e-13 444 18.6504065 469.031173 -1.13686838e-13 526.703835 -1.13686838e-13 555 18.6504065 580.031173 -1.13686838e-13 637.703835 -1.13686838e-13 666 18.6504065 691.031173 -1.13686838e-13 748.703835 -1.13686838e-13 777 18.6504065 802.031173 -1.13686838e-13 859.703835 -1.13686838e-13 888 18.6504065 913.031173 -1.13686838e-13 970.703835 -1.13686838e-13 999 18.6504065 999 28.7317073 966.396588 6.17097049 915.815405 9.49678089"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="237.102041 32.701136 242.361957 38.0153625 262.985548 24.5433732 295.218442 21.944196 312.901756 34.8302841 325.992074 31.4793405 299.28429 14.7377049 258.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="126.102041 32.701136 131.361957 38.0153625 151.985548 24.5433732 184.218442 21.944196 201.901756 34.8302841 214.992074 31.4793405 188.28429 14.7377049 147.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="15.1020408 32.701136 20.3619567 38.0153625 40.9855478 24.5433732 73.218442 21.944196 90.9017563 34.8302841 103.992074 31.4793405 77.2842899 14.7377049 36.4550316 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="348.102041 32.701136 353.361957 38.0153625 373.985548 24.5433732 406.218442 21.944196 423.901756 34.8302841 436.992074 31.4793405 410.28429 14.7377049 369.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="459.102041 32.701136 464.361957 38.0153625 484.985548 24.5433732 517.218442 21.944196 534.901756 34.8302841 547.992074 31.4793405 521.28429 14.7377049 480.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="570.102041 32.701136 575.361957 38.0153625 595.985548 24.5433732 628.218442 21.944196 645.901756 34.8302841 658.992074 31.4793405 632.28429 14.7377049 591.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="681.102041 32.701136 686.361957 38.0153625 706.985548 24.5433732 739.218442 21.944196 756.901756 34.8302841 769.992074 31.4793405 743.28429 14.7377049 702.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="792.102041 32.701136 797.361957 38.0153625 817.985548 24.5433732 850.218442 21.944196 867.901756 34.8302841 880.992074 31.4793405 854.28429 14.7377049 813.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="903.102041 32.701136 908.361957 38.0153625 928.985548 24.5433732 961.218442 21.944196 978.901756 34.8302841 991.992074 31.4793405 965.28429 14.7377049 924.455032 16.5098925"></polygon>
</svg>
<svg width="999px" height="62px" viewBox="0 0 999 62" id="wave2">
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="83.5607744%" id="linearGradient-1">
            <stop stop-color="#2CBCDE" offset="0%"></stop>
            <stop stop-color="#1E82A1" offset="100%"></stop>
        </linearGradient>
    </defs>
            <polygon id="Combined-Shape" fill="url(#linearGradient-1)" points="999 62 0 62 0 20.2935592 26.8090546 -1.13686838e-13 82.6726625 -1.13686838e-13 111 19.2854291 111 20.2935592 137.809055 -1.13686838e-13 193.672662 -1.13686838e-13 222 19.2854291 222 20.2935592 248.809055 -1.13686838e-13 304.672662 -1.13686838e-13 333 19.2854291 333 20.2935592 359.809055 -1.13686838e-13 415.672662 -1.13686838e-13 444 19.2854291 444 20.2935592 470.809055 -1.13686838e-13 526.672662 -1.13686838e-13 555 19.2854291 555 20.2935592 581.809055 -1.13686838e-13 637.672662 -1.13686838e-13 666 19.2854291 666 20.2935592 692.809055 -1.13686838e-13 748.672662 -1.13686838e-13 777 19.2854291 777 20.2935592 803.809055 -1.13686838e-13 859.672662 -1.13686838e-13 888 19.2854291 888 20.2935592 914.809055 -1.13686838e-13 970.672662 -1.13686838e-13 999 19.2854291"></polygon>
            <polygon id="Combined-Shape" fill="#52D7F4" points="888 28.7317073 855.396588 6.17097049 804.815405 9.49678089 777 28.7317073 744.396588 6.17097049 693.815405 9.49678089 666 28.7317073 633.396588 6.17097049 582.815405 9.49678089 555 28.7317073 522.396588 6.17097049 471.815405 9.49678089 444 28.7317073 411.396588 6.17097049 360.815405 9.49678089 333 28.7317073 300.396588 6.17097049 249.815405 9.49678089 222 28.7317073 189.396588 6.17097049 138.815405 9.49678089 111 28.7317073 78.3965879 6.17097049 27.8154052 9.49678089 0 28.7317073 0 18.6504065 25.0311728 -1.13686838e-13 82.7038352 -1.13686838e-13 111 18.6504065 136.031173 -1.13686838e-13 193.703835 -1.13686838e-13 222 18.6504065 247.031173 -1.13686838e-13 304.703835 -1.13686838e-13 333 18.6504065 358.031173 -1.13686838e-13 415.703835 -1.13686838e-13 444 18.6504065 469.031173 -1.13686838e-13 526.703835 -1.13686838e-13 555 18.6504065 580.031173 -1.13686838e-13 637.703835 -1.13686838e-13 666 18.6504065 691.031173 -1.13686838e-13 748.703835 -1.13686838e-13 777 18.6504065 802.031173 -1.13686838e-13 859.703835 -1.13686838e-13 888 18.6504065 913.031173 -1.13686838e-13 970.703835 -1.13686838e-13 999 18.6504065 999 28.7317073 966.396588 6.17097049 915.815405 9.49678089"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="237.102041 32.701136 242.361957 38.0153625 262.985548 24.5433732 295.218442 21.944196 312.901756 34.8302841 325.992074 31.4793405 299.28429 14.7377049 258.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="126.102041 32.701136 131.361957 38.0153625 151.985548 24.5433732 184.218442 21.944196 201.901756 34.8302841 214.992074 31.4793405 188.28429 14.7377049 147.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="15.1020408 32.701136 20.3619567 38.0153625 40.9855478 24.5433732 73.218442 21.944196 90.9017563 34.8302841 103.992074 31.4793405 77.2842899 14.7377049 36.4550316 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="348.102041 32.701136 353.361957 38.0153625 373.985548 24.5433732 406.218442 21.944196 423.901756 34.8302841 436.992074 31.4793405 410.28429 14.7377049 369.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="459.102041 32.701136 464.361957 38.0153625 484.985548 24.5433732 517.218442 21.944196 534.901756 34.8302841 547.992074 31.4793405 521.28429 14.7377049 480.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="570.102041 32.701136 575.361957 38.0153625 595.985548 24.5433732 628.218442 21.944196 645.901756 34.8302841 658.992074 31.4793405 632.28429 14.7377049 591.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="681.102041 32.701136 686.361957 38.0153625 706.985548 24.5433732 739.218442 21.944196 756.901756 34.8302841 769.992074 31.4793405 743.28429 14.7377049 702.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="792.102041 32.701136 797.361957 38.0153625 817.985548 24.5433732 850.218442 21.944196 867.901756 34.8302841 880.992074 31.4793405 854.28429 14.7377049 813.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="903.102041 32.701136 908.361957 38.0153625 928.985548 24.5433732 961.218442 21.944196 978.901756 34.8302841 991.992074 31.4793405 965.28429 14.7377049 924.455032 16.5098925"></polygon>
</svg>
<svg width="999px" height="62px" viewBox="0 0 999 62" id="wave3">
    <defs>
        <linearGradient x1="50%" y1="0%" x2="50%" y2="83.5607744%" id="linearGradient-1">
            <stop stop-color="#2CBCDE" offset="0%"></stop>
            <stop stop-color="#1E82A1" offset="100%"></stop>
        </linearGradient>
    </defs>
            <polygon id="Combined-Shape" fill="url(#linearGradient-1)" points="999 62 0 62 0 20.2935592 26.8090546 -1.13686838e-13 82.6726625 -1.13686838e-13 111 19.2854291 111 20.2935592 137.809055 -1.13686838e-13 193.672662 -1.13686838e-13 222 19.2854291 222 20.2935592 248.809055 -1.13686838e-13 304.672662 -1.13686838e-13 333 19.2854291 333 20.2935592 359.809055 -1.13686838e-13 415.672662 -1.13686838e-13 444 19.2854291 444 20.2935592 470.809055 -1.13686838e-13 526.672662 -1.13686838e-13 555 19.2854291 555 20.2935592 581.809055 -1.13686838e-13 637.672662 -1.13686838e-13 666 19.2854291 666 20.2935592 692.809055 -1.13686838e-13 748.672662 -1.13686838e-13 777 19.2854291 777 20.2935592 803.809055 -1.13686838e-13 859.672662 -1.13686838e-13 888 19.2854291 888 20.2935592 914.809055 -1.13686838e-13 970.672662 -1.13686838e-13 999 19.2854291"></polygon>
            <polygon id="Combined-Shape" fill="#52D7F4" points="888 28.7317073 855.396588 6.17097049 804.815405 9.49678089 777 28.7317073 744.396588 6.17097049 693.815405 9.49678089 666 28.7317073 633.396588 6.17097049 582.815405 9.49678089 555 28.7317073 522.396588 6.17097049 471.815405 9.49678089 444 28.7317073 411.396588 6.17097049 360.815405 9.49678089 333 28.7317073 300.396588 6.17097049 249.815405 9.49678089 222 28.7317073 189.396588 6.17097049 138.815405 9.49678089 111 28.7317073 78.3965879 6.17097049 27.8154052 9.49678089 0 28.7317073 0 18.6504065 25.0311728 -1.13686838e-13 82.7038352 -1.13686838e-13 111 18.6504065 136.031173 -1.13686838e-13 193.703835 -1.13686838e-13 222 18.6504065 247.031173 -1.13686838e-13 304.703835 -1.13686838e-13 333 18.6504065 358.031173 -1.13686838e-13 415.703835 -1.13686838e-13 444 18.6504065 469.031173 -1.13686838e-13 526.703835 -1.13686838e-13 555 18.6504065 580.031173 -1.13686838e-13 637.703835 -1.13686838e-13 666 18.6504065 691.031173 -1.13686838e-13 748.703835 -1.13686838e-13 777 18.6504065 802.031173 -1.13686838e-13 859.703835 -1.13686838e-13 888 18.6504065 913.031173 -1.13686838e-13 970.703835 -1.13686838e-13 999 18.6504065 999 28.7317073 966.396588 6.17097049 915.815405 9.49678089"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="237.102041 32.701136 242.361957 38.0153625 262.985548 24.5433732 295.218442 21.944196 312.901756 34.8302841 325.992074 31.4793405 299.28429 14.7377049 258.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="126.102041 32.701136 131.361957 38.0153625 151.985548 24.5433732 184.218442 21.944196 201.901756 34.8302841 214.992074 31.4793405 188.28429 14.7377049 147.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="15.1020408 32.701136 20.3619567 38.0153625 40.9855478 24.5433732 73.218442 21.944196 90.9017563 34.8302841 103.992074 31.4793405 77.2842899 14.7377049 36.4550316 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="348.102041 32.701136 353.361957 38.0153625 373.985548 24.5433732 406.218442 21.944196 423.901756 34.8302841 436.992074 31.4793405 410.28429 14.7377049 369.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="459.102041 32.701136 464.361957 38.0153625 484.985548 24.5433732 517.218442 21.944196 534.901756 34.8302841 547.992074 31.4793405 521.28429 14.7377049 480.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="570.102041 32.701136 575.361957 38.0153625 595.985548 24.5433732 628.218442 21.944196 645.901756 34.8302841 658.992074 31.4793405 632.28429 14.7377049 591.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="681.102041 32.701136 686.361957 38.0153625 706.985548 24.5433732 739.218442 21.944196 756.901756 34.8302841 769.992074 31.4793405 743.28429 14.7377049 702.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="792.102041 32.701136 797.361957 38.0153625 817.985548 24.5433732 850.218442 21.944196 867.901756 34.8302841 880.992074 31.4793405 854.28429 14.7377049 813.455032 16.5098925"></polygon>
            <polygon id="Path-9" fill="#35CEF0" points="903.102041 32.701136 908.361957 38.0153625 928.985548 24.5433732 961.218442 21.944196 978.901756 34.8302841 991.992074 31.4793405 965.28429 14.7377049 924.455032 16.5098925"></polygon>
</svg>
<svg width="103px" height="131px" viewBox="0 0 103 131" class="sculler" id="sculler_1">
    <g id="head" transform="translate(0.773079, 0.169066)">
    <path d="M15.9791555,43.2674175 C15.9791555,48.8130754 20.0485634,48.5318674 28.1873793,42.4237935 C26.8826921,38.8742334 26.5565203,36.3826125 27.2088639,34.9489307 C28.1873793,32.7984081 31.2495245,30.3333232 31.2495245,28.7290002 C31.2495245,27.1246771 26.2104465,25.1637764 26.2104465,24.2278292 C26.2104465,23.291882 29.0166297,21.584179 29.0166297,20.6128505 C29.0166297,19.6415219 23.880253,23.3819938 14.6750211,13.7543971 C5.46978924,4.12680041 0.314063317,22.4521278 4.43820179,27.2595685 C8.56234026,32.0670093 15.9791555,34.9489307 15.9791555,43.2674175 Z" id="Path-2" fill="#C65F3E"></path>
    <path d="M6.21794498,30.0930547 C8.24744494,28.7777601 22.4515607,7.00247698 22.1637318,4.67965058 C21.875903,2.35682418 21.3373774,-1.51850336 20.0552917,0.66734969 C10.4608824,17.025046 8.26079203,6.04252187 2.77620969,14.9547633 C-2.70837265,23.8670047 4.18844502,31.4083493 6.21794498,30.0930547 Z" id="cap" fill="#F5A623" opacity="0.957756696"></path>
    <path d="M31.5295681,42.2518387 L31.5295681,55.8798658 L15.351749,57.9926834 L15.351749,41.2518387 L30.5295681,41.2518387 C31.0818529,41.2518387 31.5295681,41.699554 31.5295681,42.2518387 Z" id="neck" fill="#57352B"></path>
    </g>
    <g id="scull" transform="translate(8.352886, 5.513140)">
    <g id="left" transform="translate(7.000000, 1.000000)">
        <path d="M10.8390375,40.0596882 C16.5731385,32.5778801 20.8143254,28.3475983 23.5625982,27.3688428 C19.440189,23.6391267 14.8130946,14.4601272 14.0655026,5.51929216 C13.5671079,-0.441264522 15.3586701,-1.45124619 19.440189,2.48934714 C29.4586903,17.900184 34.467941,26.9648169 34.467941,29.6832459 C34.467941,32.4016749 29.4586903,37.4218159 19.440189,44.7436691 L10.8390375,40.0596882 Z" id="arm_left" fill="#C96543"></path>
        <path d="M0.519188387,47.4783725 C8.146566,36.4324129 12.4971571,30.8061216 13.5709615,30.5994986 C15.1816683,30.289564 24.9562284,43.3062719 25.9991043,44.5222258 C26.6943549,45.3328618 21.0367888,50.3139873 9.02640615,59.4656023 L0.519188387,47.4783725 Z" id="shoulder_left" fill="#57352B"></path>
    </g>
    <g id="right" transform="translate(0.000000, 41.000000)">
        <path d="M19.9342718,11.6655409 C22.7863719,17.185667 25.1293896,19.94573 26.963325,19.94573 C29.7142282,19.94573 41.0868875,8.86969258 41.4628262,8.02227583 C41.8387648,7.17485907 40.4742174,6.82591498 40.7457507,5.65615169 C40.9873165,4.61548794 42.5424753,3.43466004 45.834221,3.68859395 C46.2066574,3.71732467 50.1840467,-0.398828934 51.5651348,0.440118947 C52.946223,1.27906683 51.7130755,3.5184225 51.8856288,4.84671254 C52.0581821,6.17500258 53.7730549,5.65615169 54.7600177,10.265072 C55.2137852,12.3840759 51.2193085,14.8480647 50.7055441,14.9885867 C49.3167647,15.368438 46.3268157,12.5334416 46.3268157,12.6857787 C46.3268157,13.8784716 33.3875098,36.8961234 28.0836585,36.3710004 C24.5477575,36.0209184 19.2170393,31.8622646 12.0915038,23.8950392 L19.9342718,11.6655409 Z" id="arm_right" fill="#CB6443"></path>
        <path d="M7.19893683,1.7996718 C18.8479751,5.18703373 24.6724942,9.11566864 24.6724942,13.5855765 C24.6724942,20.2904383 14.1939012,29.6340169 11.8333655,28.9976331 C6.37206892,27.5253061 1.57018003,18.5373164 0.65074801,13.1414675 C0.0377933325,9.54423497 2.22052294,5.76363638 7.19893683,1.7996718 Z" id="shoulder_right" fill="#57352B"></path>
    </g>
    <g id="paddle" transform="translate(21.000000, 0.000000)">
        <g id="Group" transform="translate(46.000000, 79.000000)"></g>
        <path d="M49.1102954,78.2764268 C41.0067873,64.6025214 25.0600163,38.5103792 1.26998261,0 L0,2.58717572 L46.5586193,82.5268656 C57.7365434,95.6844567 58.5871021,94.2676438 49.1102954,78.2764268 Z" id="Path-3" fill="#1C3132"></path>
        <path d="M46.020581,81.6030707 C46.2501895,80.8303048 46.4964283,80.2301216 46.7592975,79.802521 C47.2629244,78.9832879 48.3208192,78.9319803 49.932982,79.6485982 C63.9381489,102.742283 79.3291788,114.909999 72.3615437,123.185909 C63.3255055,133.918596 47.3792948,99.7401652 46.5586193,96.9463979 C46.0115022,95.0838863 46.0115022,90.2773756 46.5586193,82.5268656 L46.020581,81.6030707 Z" id="Combined-Shape" fill="#EFD334"></path>
        <path d="M-5.18034864,-2.55115358 C-3.72063685,-4.95564114 2.32617719,-4.54800941 3.26825479,-4.19496381 C4.2103324,-3.8419182 6.00773096,-3.65180076 6.00773096,-1.82098636 C6.00773096,0.00982804011 6.00773096,2.42946689 5.33028189,4.13761817 C4.65283283,5.84576946 -0.30184366,8.42480808 -3.02741385,6.94434112 C-5.75298405,5.46387415 -9.88534032,6.09690713 -9.3755931,3.39748846 C-8.86584589,0.698069798 -5.7940793,3.08242484 -5.48378937,2.03594868 C-5.17349943,0.98947252 -6.64006043,-0.146666015 -5.18034864,-2.55115358 Z" id="hand_left" fill="#C96543"></path>
    </g>
</svg>
<svg width="103px" height="131px" viewBox="0 0 103 131" class="sculler" id="sculler_2">
    <g id="head" transform="translate(0.773079, 0.169066)">
    <path d="M15.9791555,43.2674175 C15.9791555,48.8130754 20.0485634,48.5318674 28.1873793,42.4237935 C26.8826921,38.8742334 26.5565203,36.3826125 27.2088639,34.9489307 C28.1873793,32.7984081 31.2495245,30.3333232 31.2495245,28.7290002 C31.2495245,27.1246771 26.2104465,25.1637764 26.2104465,24.2278292 C26.2104465,23.291882 29.0166297,21.584179 29.0166297,20.6128505 C29.0166297,19.6415219 23.880253,23.3819938 14.6750211,13.7543971 C5.46978924,4.12680041 0.314063317,22.4521278 4.43820179,27.2595685 C8.56234026,32.0670093 15.9791555,34.9489307 15.9791555,43.2674175 Z" id="Path-2" fill="#C65F3E"></path>
    <path d="M6.21794498,30.0930547 C8.24744494,28.7777601 22.4515607,7.00247698 22.1637318,4.67965058 C21.875903,2.35682418 21.3373774,-1.51850336 20.0552917,0.66734969 C10.4608824,17.025046 8.26079203,6.04252187 2.77620969,14.9547633 C-2.70837265,23.8670047 4.18844502,31.4083493 6.21794498,30.0930547 Z" id="cap" fill="#F5A623" opacity="0.957756696"></path>
    <path d="M31.5295681,42.2518387 L31.5295681,55.8798658 L15.351749,57.9926834 L15.351749,41.2518387 L30.5295681,41.2518387 C31.0818529,41.2518387 31.5295681,41.699554 31.5295681,42.2518387 Z" id="neck" fill="#57352B"></path>
    </g>
    <g id="scull" transform="translate(8.352886, 5.513140)">
    <g id="left" transform="translate(7.000000, 1.000000)">
        <path d="M10.8390375,40.0596882 C16.5731385,32.5778801 20.8143254,28.3475983 23.5625982,27.3688428 C19.440189,23.6391267 14.8130946,14.4601272 14.0655026,5.51929216 C13.5671079,-0.441264522 15.3586701,-1.45124619 19.440189,2.48934714 C29.4586903,17.900184 34.467941,26.9648169 34.467941,29.6832459 C34.467941,32.4016749 29.4586903,37.4218159 19.440189,44.7436691 L10.8390375,40.0596882 Z" id="arm_left" fill="#C96543"></path>
        <path d="M0.519188387,47.4783725 C8.146566,36.4324129 12.4971571,30.8061216 13.5709615,30.5994986 C15.1816683,30.289564 24.9562284,43.3062719 25.9991043,44.5222258 C26.6943549,45.3328618 21.0367888,50.3139873 9.02640615,59.4656023 L0.519188387,47.4783725 Z" id="shoulder_left" fill="#57352B"></path>
    </g>
    <g id="right" transform="translate(0.000000, 41.000000)">
        <path d="M19.9342718,11.6655409 C22.7863719,17.185667 25.1293896,19.94573 26.963325,19.94573 C29.7142282,19.94573 41.0868875,8.86969258 41.4628262,8.02227583 C41.8387648,7.17485907 40.4742174,6.82591498 40.7457507,5.65615169 C40.9873165,4.61548794 42.5424753,3.43466004 45.834221,3.68859395 C46.2066574,3.71732467 50.1840467,-0.398828934 51.5651348,0.440118947 C52.946223,1.27906683 51.7130755,3.5184225 51.8856288,4.84671254 C52.0581821,6.17500258 53.7730549,5.65615169 54.7600177,10.265072 C55.2137852,12.3840759 51.2193085,14.8480647 50.7055441,14.9885867 C49.3167647,15.368438 46.3268157,12.5334416 46.3268157,12.6857787 C46.3268157,13.8784716 33.3875098,36.8961234 28.0836585,36.3710004 C24.5477575,36.0209184 19.2170393,31.8622646 12.0915038,23.8950392 L19.9342718,11.6655409 Z" id="arm_right" fill="#CB6443"></path>
        <path d="M7.19893683,1.7996718 C18.8479751,5.18703373 24.6724942,9.11566864 24.6724942,13.5855765 C24.6724942,20.2904383 14.1939012,29.6340169 11.8333655,28.9976331 C6.37206892,27.5253061 1.57018003,18.5373164 0.65074801,13.1414675 C0.0377933325,9.54423497 2.22052294,5.76363638 7.19893683,1.7996718 Z" id="shoulder_right" fill="#57352B"></path>
    </g>
    <g id="paddle" transform="translate(21.000000, 0.000000)">
        <g id="Group" transform="translate(46.000000, 79.000000)"></g>
        <path d="M49.1102954,78.2764268 C41.0067873,64.6025214 25.0600163,38.5103792 1.26998261,0 L0,2.58717572 L46.5586193,82.5268656 C57.7365434,95.6844567 58.5871021,94.2676438 49.1102954,78.2764268 Z" id="Path-3" fill="#1C3132"></path>
        <path d="M46.020581,81.6030707 C46.2501895,80.8303048 46.4964283,80.2301216 46.7592975,79.802521 C47.2629244,78.9832879 48.3208192,78.9319803 49.932982,79.6485982 C63.9381489,102.742283 79.3291788,114.909999 72.3615437,123.185909 C63.3255055,133.918596 47.3792948,99.7401652 46.5586193,96.9463979 C46.0115022,95.0838863 46.0115022,90.2773756 46.5586193,82.5268656 L46.020581,81.6030707 Z" id="Combined-Shape" fill="#EFD334"></path>
        <path d="M-5.18034864,-2.55115358 C-3.72063685,-4.95564114 2.32617719,-4.54800941 3.26825479,-4.19496381 C4.2103324,-3.8419182 6.00773096,-3.65180076 6.00773096,-1.82098636 C6.00773096,0.00982804011 6.00773096,2.42946689 5.33028189,4.13761817 C4.65283283,5.84576946 -0.30184366,8.42480808 -3.02741385,6.94434112 C-5.75298405,5.46387415 -9.88534032,6.09690713 -9.3755931,3.39748846 C-8.86584589,0.698069798 -5.7940793,3.08242484 -5.48378937,2.03594868 C-5.17349943,0.98947252 -6.64006043,-0.146666015 -5.18034864,-2.55115358 Z" id="hand_left" fill="#C96543"></path>
    </g>
</svg>
<svg width="103px" height="131px" viewBox="0 0 103 131" class="sculler" id="sculler_3">
    <g id="head" transform="translate(0.773079, 0.169066)">
    <path d="M15.9791555,43.2674175 C15.9791555,48.8130754 20.0485634,48.5318674 28.1873793,42.4237935 C26.8826921,38.8742334 26.5565203,36.3826125 27.2088639,34.9489307 C28.1873793,32.7984081 31.2495245,30.3333232 31.2495245,28.7290002 C31.2495245,27.1246771 26.2104465,25.1637764 26.2104465,24.2278292 C26.2104465,23.291882 29.0166297,21.584179 29.0166297,20.6128505 C29.0166297,19.6415219 23.880253,23.3819938 14.6750211,13.7543971 C5.46978924,4.12680041 0.314063317,22.4521278 4.43820179,27.2595685 C8.56234026,32.0670093 15.9791555,34.9489307 15.9791555,43.2674175 Z" id="Path-2" fill="#C65F3E"></path>
    <path d="M6.21794498,30.0930547 C8.24744494,28.7777601 22.4515607,7.00247698 22.1637318,4.67965058 C21.875903,2.35682418 21.3373774,-1.51850336 20.0552917,0.66734969 C10.4608824,17.025046 8.26079203,6.04252187 2.77620969,14.9547633 C-2.70837265,23.8670047 4.18844502,31.4083493 6.21794498,30.0930547 Z" id="cap" fill="#F5A623" opacity="0.957756696"></path>
    <path d="M31.5295681,42.2518387 L31.5295681,55.8798658 L15.351749,57.9926834 L15.351749,41.2518387 L30.5295681,41.2518387 C31.0818529,41.2518387 31.5295681,41.699554 31.5295681,42.2518387 Z" id="neck" fill="#57352B"></path>
    </g>
    <g id="scull" transform="translate(8.352886, 5.513140)">
    <g id="left" transform="translate(7.000000, 1.000000)">
        <path d="M10.8390375,40.0596882 C16.5731385,32.5778801 20.8143254,28.3475983 23.5625982,27.3688428 C19.440189,23.6391267 14.8130946,14.4601272 14.0655026,5.51929216 C13.5671079,-0.441264522 15.3586701,-1.45124619 19.440189,2.48934714 C29.4586903,17.900184 34.467941,26.9648169 34.467941,29.6832459 C34.467941,32.4016749 29.4586903,37.4218159 19.440189,44.7436691 L10.8390375,40.0596882 Z" id="arm_left" fill="#C96543"></path>
        <path d="M0.519188387,47.4783725 C8.146566,36.4324129 12.4971571,30.8061216 13.5709615,30.5994986 C15.1816683,30.289564 24.9562284,43.3062719 25.9991043,44.5222258 C26.6943549,45.3328618 21.0367888,50.3139873 9.02640615,59.4656023 L0.519188387,47.4783725 Z" id="shoulder_left" fill="#57352B"></path>
    </g>
    <g id="right" transform="translate(0.000000, 41.000000)">
        <path d="M19.9342718,11.6655409 C22.7863719,17.185667 25.1293896,19.94573 26.963325,19.94573 C29.7142282,19.94573 41.0868875,8.86969258 41.4628262,8.02227583 C41.8387648,7.17485907 40.4742174,6.82591498 40.7457507,5.65615169 C40.9873165,4.61548794 42.5424753,3.43466004 45.834221,3.68859395 C46.2066574,3.71732467 50.1840467,-0.398828934 51.5651348,0.440118947 C52.946223,1.27906683 51.7130755,3.5184225 51.8856288,4.84671254 C52.0581821,6.17500258 53.7730549,5.65615169 54.7600177,10.265072 C55.2137852,12.3840759 51.2193085,14.8480647 50.7055441,14.9885867 C49.3167647,15.368438 46.3268157,12.5334416 46.3268157,12.6857787 C46.3268157,13.8784716 33.3875098,36.8961234 28.0836585,36.3710004 C24.5477575,36.0209184 19.2170393,31.8622646 12.0915038,23.8950392 L19.9342718,11.6655409 Z" id="arm_right" fill="#CB6443"></path>
        <path d="M7.19893683,1.7996718 C18.8479751,5.18703373 24.6724942,9.11566864 24.6724942,13.5855765 C24.6724942,20.2904383 14.1939012,29.6340169 11.8333655,28.9976331 C6.37206892,27.5253061 1.57018003,18.5373164 0.65074801,13.1414675 C0.0377933325,9.54423497 2.22052294,5.76363638 7.19893683,1.7996718 Z" id="shoulder_right" fill="#57352B"></path>
    </g>
    <g id="paddle" transform="translate(21.000000, 0.000000)">
        <g id="Group" transform="translate(46.000000, 79.000000)"></g>
        <path d="M49.1102954,78.2764268 C41.0067873,64.6025214 25.0600163,38.5103792 1.26998261,0 L0,2.58717572 L46.5586193,82.5268656 C57.7365434,95.6844567 58.5871021,94.2676438 49.1102954,78.2764268 Z" id="Path-3" fill="#1C3132"></path>
        <path d="M46.020581,81.6030707 C46.2501895,80.8303048 46.4964283,80.2301216 46.7592975,79.802521 C47.2629244,78.9832879 48.3208192,78.9319803 49.932982,79.6485982 C63.9381489,102.742283 79.3291788,114.909999 72.3615437,123.185909 C63.3255055,133.918596 47.3792948,99.7401652 46.5586193,96.9463979 C46.0115022,95.0838863 46.0115022,90.2773756 46.5586193,82.5268656 L46.020581,81.6030707 Z" id="Combined-Shape" fill="#EFD334"></path>
        <path d="M-5.18034864,-2.55115358 C-3.72063685,-4.95564114 2.32617719,-4.54800941 3.26825479,-4.19496381 C4.2103324,-3.8419182 6.00773096,-3.65180076 6.00773096,-1.82098636 C6.00773096,0.00982804011 6.00773096,2.42946689 5.33028189,4.13761817 C4.65283283,5.84576946 -0.30184366,8.42480808 -3.02741385,6.94434112 C-5.75298405,5.46387415 -9.88534032,6.09690713 -9.3755931,3.39748846 C-8.86584589,0.698069798 -5.7940793,3.08242484 -5.48378937,2.03594868 C-5.17349943,0.98947252 -6.64006043,-0.146666015 -5.18034864,-2.55115358 Z" id="hand_left" fill="#C96543"></path>
    </g>
</svg>
</div>
</body>
            
          
!
            
              body{
  background:linear-gradient(#8AEDFA11,#52D7F4);
  background-repeat: no-repeat;
  width:99%;
  height:100vh;
  overflow:hidden;
}
.canvas{
  position:relative;
  margin:20px auto;
  width:768px;
  height:400px;
  overflow:hidden;
}
#dragon_boat {
  position:absolute;
  left:150px;
  top:25px;
  animation: dragon_boat_forwarding 1s ease-out 0s infinite normal forwards running;
}

@keyframes dragon_boat_forwarding {
  0%,95%,100%{
    transform:tranlatey(0);
  }
  50%,80%{
    transform:translatey(5px);
  }
}

#wave1 {
  position:absolute;
  top:195px;
  left:0px;
  animation: wave 2s linear 0s infinite normal forwards running;

}
#wave2 {
  position:absolute;
  top:-62px;
  top:238px;
  animation: wave 2.5s linear 0s infinite normal forwards running;

}
#wave3 {
  position:absolute;
  top:281px;
  left:-26px;
  animation: wave 3s linear 0s infinite normal forwards running;
}

@keyframes wave {
  0%{
    transform:translatex(0);
  }
  100% {
    transform:translate(-111px);
  }
}

.sculler{
  position:absolute;
  top:81px;
}

#sculler_1{
  left:280px;
}
#sculler_2{
  left:360px;
}
#sculler_3{
  left:440px;
}
#scull{
  transform-origin: 8px 60px;
  animation: sculling 1s ease-in-out 0s infinite normal forwards running;
}
#sculler_1_body {
  position:absolute;
  left:287px;
  top:129px;
}
#sculler_2_body {
  position:absolute;
  left:367px;
  top:129px;
}
#sculler_3_body {
  position:absolute;
  left:447px;
  top:129px;
}
#head {
  transform-origin: 16px 58px;
  animation: head_down 1s ease-in-out 0s infinite normal forwards running;
}
@keyframes sculling {
  0%,100% {
    transform:rotatez(0);
  }
  50%,90% {
    transform:rotatez(60deg);
  }
}
@keyframes head_down {
  0%,100%{
    transform:rotatez(0);
  }
  50%,90% {
    transform:rotatez(38deg);
  }
  
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console