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 

              
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20962 10601" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" image-rendering="optimizeQuality" fill-rule="evenodd" clip-rule="evenodd">
  <defs>
    <style>
<![CDATA[
    .str0 {stroke:black;stroke-linecap:round;stroke-linejoin:round;stroke-opacity:0.200000}
    .str1 {stroke:black;stroke-linecap:round;stroke-linejoin:round}
    .fil11 {fill:none}
    .fil10 {fill:#EBE663}
    .fil9 {fill:#E0DC5D}
    .fil1 {fill:#D6E9D8}
    .fil7 {fill:#66C3D0}
    .fil4 {fill:#57A7B3}
    .fil0 {fill:#56698F}
    .fil6 {fill:#3A3939}
    .fil3 {fill:#43818A}
    .fil8 {fill:#D4CE59}
    .fil12 {fill:#FEFEFE;fill-rule:nonzero}
    .fil2 {fill:#2B2A29;fill-opacity:0.200000}
    .fil5 {fill:#3A3939;fill-opacity:0.200000}
   ]]>
    </style>
    <clipPath id="id0">
      <path d="M0 0h20962v10601H0V0z"/>
    </clipPath>
    <clipPath id="id1">
      <path d="M16856 867h2959v3948h-2959V867z"/>
    </clipPath>
    <clipPath id="id2">
      <path d="M0 0h20962v10601H0V0z"/>
    </clipPath>
    <clipPath id="id3">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id4">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id5">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id6">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id7">
      <path d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
    </clipPath>
    <clipPath id="id8">
      <path d="M0 0h20962v10601H0V0z"/>
    </clipPath>
  </defs>
  <g id="Layer_x0020_1">
    <path class="fil0" d="M0 0h20962v10601H0z"/>
    <g clip-path="url(#id0)">
      <g id="_520340200">
        <g id="stars">
          <path id="1" class="fil1" d="M8570 2841c70,0 127,57 127,127 0,70 -57,127 -127,127 -71,0 -127,-57 -127,-127 0,-70 56,-127 127,-127z"/>
     <path class="fil1" d="M11604 1812c59,0 107,48 107,108 0,59 -48,107 -107,107 -60,0 -108,-48 -108,-107 0,-60 48,-108 108,-108z"/>
     <path class="fil1" d="M3497 3097c70,0 127,57 127,128 0,70 -57,127 -127,127 -70,0 -127,-57 -127,-127 0,-71 57,-128 127,-128z"/>
     <path class="fil1" d="M16480 4357c45,0 82,36 82,82 0,45 -37,82 -82,82 -46,0 -83,-37 -83,-82 0,-46 37,-82 83,-82z"/>
     <path class="fil1" d="M15297 1387c45,0 81,37 81,82 0,45 -36,81 -81,81 -45,0 -82,-36 -82,-81 0,-45 37,-82 82,-82z"/>
     <path class="fil1" d="M11261 4321c55,0 100,44 100,100 0,55 -45,100 -100,100 -55,0 -100,-45 -100,-100 0,-56 45,-100 100,-100z"/>
     <path class="fil1" d="M8259 2395c56,0 100,45 100,100 0,55 -44,100 -100,100 -55,0 -100,-45 -100,-100 0,-55 45,-100 100,-100z"/>
     <path class="fil1" d="M17014 2998c56,0 101,45 101,100 0,56 -45,100 -101,100 -55,0 -100,-44 -100,-100 0,-55 45,-100 100,-100z"/>
     <path class="fil1" d="M6183 4905c70,0 127,57 127,127 0,71 -57,128 -127,128 -71,0 -127,-57 -127,-128 0,-70 56,-127 127,-127z"/>
     <path class="fil1" d="M127 1325c70,0 127,57 127,127 0,70 -57,127 -127,127 -70,0 -127,-57 -127,-127 0,-70 57,-127 127,-127z"/>
     <path class="fil1" d="M4198 1266c71,0 128,57 128,127 0,71 -57,128 -128,128 -70,0 -127,-57 -127,-128 0,-70 57,-127 127,-127z"/>
     <path class="fil1" d="M19404 5488c58,0 105,46 105,104 0,58 -47,105 -105,105 -57,0 -104,-47 -104,-105 0,-58 47,-104 104,-104z"/>
        </g>
        <g id="wave3">
          <path id="wave3shadow" class="fil2" d="M26367 8825c504 1667 831 3819-28 5680-858 1862-2901 3434-6193 3904-3292 471-7833-161-12154-588s-8421-650-10977-1538c-2555-888-3565-2442-4070-4061s-505-3302 937-4835 4327-2915 6274-3122c1948-206 2958 764 3877 1522s1747 1305 2739 1383 2148-312 2975-731c828-418 1327-864 2137-1014 809-151 1929-6 2756 206 828 212 1364 491 1978 775 615 284 1309 574 1948 535s1223-407 1935-875 1552-1037 2239-1265c688-229 1224-117 1832 529 609 647 1290 1829 1795 3495z"/>
          <path id="wave3raw" class="fil3" d="M27489 8635c504 1667 831 3818-27 5680s-2901 3434-6193 3904-7834-161-12155-589c-4321-427-8421-649-10976-1537-2555-889-3565-2443-4071-4061-505-1619-505-3302 938-4835 1442-1533 4327-2916 6274-3122s2958 764 3877 1522 1746 1304 2738 1382 2148-312 2976-730 1327-864 2136-1014c810-151 1929-6 2757 206s1363 490 1978 775c614 284 1308 574 1947 535s1223-407 1935-875c712-469 1552-1037 2240-1266 688-228 1223-117 1832 530 608 646 1290 1828 1794 3495z"/>
        </g>
        <g id="wave2">
          <path id="wave2shadow" class="fil2" d="M24810 10589c-170 822-305 1990-646 3115-341 1124-888 2205-1856 2808-968 602-2355 724-4668 1064-2312 340-5550 898-8520 987-2969 89-5672-290-9037-859-3365-568-7394-1326-9402-2118-2009-791-1996-1616-1893-3305 104-1689 298-4242 1412-5731 1114-1488 3146-1912 4954-1627 1807 284 3389 1276 4521 1878s1814 814 2423 552 1146-998 2333-1388c1187-389 3025-432 4266 275s1885 2163 2861 2407c976 243 2285-726 3494-1308 1208-582 2315-775 3730-567 1415 207 3137 815 4290 1221 1153 407 1737 612 1926 953 189 342-17 820-188 1643z"/>
          <path id="wave2raw" class="fil4" d="M25681 10400c-171 822-305 1990-646 3115-341 1124-889 2206-1856 2808-968 602-2355 724-4668 1064s-5550 898-8520 987-5672-290-9037-859c-3366-568-7394-1326-9403-2118-2008-791-1996-1616-1892-3305 103-1689 298-4242 1412-5731 1113-1488 3146-1912 4953-1627 1808 284 3390 1276 4522 1878s1814 814 2423 552 1145-998 2333-1388c1187-389 3025-432 4266 275 1240 707 1884 2164 2861 2407 976 244 2285-726 3493-1308 1209-581 2316-775 3731-567 1415 207 3137 815 4290 1221 1153 407 1737 612 1926 953 189 342-18 820-188 1643z"/>
        </g>
        <g id="octopus">
          <path id="octopusshadow" class="fil5" d="M12389 7200c18-216-24-456-124-711-20-49-72-74-116-53-45 22-65 79-46 129 88 225 125 432 111 615-2 20 2 38 9 55 14 28 39 49 70 53 49 5 92-34 96-88zm944 830l-554 3085-755-136 543-3027c-58-145-110-288-157-427l-191 33c-61 10-153-16-241-205-52-111-94-260-119-421-50-333-21-683 157-714l123-21c-18-330 9-642 80-930l-130-71c-29-16-53-42-69-77-66-142 3-406 90-607 122-279 313-523 466-439l213 117c146-160 315-303 504-428l-17-47c-64-177 170-370 430-483 231-100 529-156 609 15l6 15 22 60c542-126 1127-128 1579-3 89 25 139 138 104 231-19 48-56 85-102 100-695 226-1634 743-2063 1469 9 12 17 26 25 43 54 115 60 332 16 568-45 242-138 475-259 539 13 43 30 90 54 140 109 235 325 510 534 776 15 20 31 40 47 60-184 257-439 523-764 707-61 35-121 60-181 78zm-931-2999c114-163 197-330 246-499 15-51-10-107-56-124-47-18-96 10-111 61-44 147-117 295-218 440-22 30-24 72-9 105 6 12 14 23 25 32 38 34 93 27 123-15zm1098 291c-64 168-104 335-119 496-2 20 1 39 9 56 13 28 39 49 69 53 48 7 92-32 97-86 13-142 49-290 106-440 19-50-2-107-46-129-45-22-97 0-116 50zm26-1575c1 9 4 18 8 27 18 37 56 60 95 52 190-38 354-101 488-190 41-27 56-86 29-134-25-47-79-62-121-35-116 77-260 132-429 166-48 9-79 60-70 114zm246-332c205-89 351-91 389-72l91 253c-4 10-13 25-29 43-31 35-86 81-164 127-39 23-84 47-135 69-205 89-351 91-390 72l-16-46-71-197-4-9c16-43 124-151 329-240zm-1597 1611c-14-45 0-208 94-426 96-220 201-331 240-346l219 120c1 3 2 7 3 12 0 2 0 3 1 5 0 7 1 14 1 23v9c0 8-1 18-2 28 0 5 0 9-1 14-1 10-3 21-4 32-1 7-2 13-3 20-2 11-5 22-7 34-2 9-4 17-6 27-3 10-6 22-9 34-3 11-6 22-10 34-3 10-7 22-11 33-4 14-9 27-14 42-3 8-7 17-10 26-7 17-14 35-22 53-95 220-201 332-240 346l-125-68-94-52zm-76 49l78-44-78 44zm1473 1013l-238-58c0-1-1-2-1-3-1-1-1-2-2-3-20-48-30-153-18-287 2-22 4-44 7-66 0-2 1-4 1-6 3-24 7-50 12-75 45-240 123-377 158-401l238 58c0 1 1 2 1 3 29 62 38 231-1 437-44 240-122 376-157 401zm-1438 1177c-44-93-79-222-101-362-43-284-5-459 20-493l99-17 171-29c10 8 34 34 64 97 43 94 79 222 100 363 43 283 6 458-20 492l-120 20 1 1-150 26c-11-8-35-35-64-98z"/>
          <path id="octopusraw" class="fil6" d="M12929 6654c18-217-24-456-124-712-20-48-72-73-116-52-45 21-65 79-45 129 88 224 125 431 110 615-2 19 2 38 9 54 14 29 40 50 71 54 48 5 91-34 95-88zm944 830l-554 3085-755-136 544-3027c-59-145-111-288-158-427l-191 33c-61 10-153-17-241-205-52-111-94-261-118-421-51-333-22-683 156-714l123-21c-18-331 9-642 80-930l-130-71c-29-16-52-42-68-77-67-142 3-406 89-607 122-279 313-523 467-439l212 117c146-160 315-304 504-428l-17-47c-63-177 170-370 430-483 231-100 529-156 609 15l6 14 22 61c542-126 1127-129 1579-3 89 25 139 138 104 231-19 48-56 85-102 100-695 226-1634 743-2063 1469 9 12 18 26 26 43 53 115 59 332 15 568-45 242-138 475-258 538 12 44 30 91 53 140 110 236 325 511 534 777 15 19 31 40 47 60-184 257-438 522-764 707-61 34-121 60-181 78zm-931-3000c114-162 197-330 246-498 15-51-10-107-56-124-46-18-96 10-111 61-43 147-117 295-218 439-22 31-24 73-8 106 5 12 13 23 24 32 38 34 94 27 123-16zm1098 292c-64 168-104 335-119 496-2 20 2 39 9 56 14 28 39 49 69 53 49 7 92-32 97-86 13-142 49-290 107-440 19-50-2-108-47-130-45-21-97 1-116 51zm26-1576c2 10 5 19 8 28 18 37 56 60 95 52 190-38 354-102 488-190 42-27 56-86 30-134-25-47-80-62-121-35-116 76-261 132-430 166-48 9-79 60-70 113zm246-331c205-89 351-91 389-72l92 253c-5 10-14 25-30 42-31 35-85 81-164 128-39 23-84 47-135 69-205 89-351 91-389 72l-17-46-71-197-4-10c17-42 125-150 329-239zm-1597 1610c-14-44 0-208 95-425 95-220 200-332 240-346l218 120c1 3 2 7 3 12 0 1 1 3 1 5 1 6 1 14 1 23v9c0 8-1 18-2 28 0 5 0 9-1 14-1 10-2 21-4 32-1 6-2 13-3 20-2 10-5 22-7 33l-6 27c-2 11-6 23-9 34-3 12-6 23-9 35-4 10-8 22-12 33-4 14-8 27-14 42-3 8-7 17-10 26-7 17-14 35-22 53-95 220-200 331-240 346l-124-69-1 1-94-53zm-76 50l78-44-78 44zm1473 1013l-238-58c0-1-1-2-1-3-1-1-1-3-1-4-21-47-31-152-19-286 2-22 4-44 7-66 1-2 1-4 1-6 3-24 7-50 12-75 45-240 123-377 158-402l238 59c0 1 1 2 1 3 29 61 38 231 0 437-45 240-123 376-158 401zm-1438 1177c-44-93-79-222-101-363-43-283-5-458 20-492l99-17 171-29c10 7 34 34 64 97 43 94 79 222 100 363 44 283 6 458-19 492l-120 20v1l-150 25c-10-7-34-34-64-97z"/>
        </g>
        <g id="boat">
          <path id="boatshadow" class="fil5 str0" d="M2871 5099c-110-79-260 36-213 162 44 120 220 120 263-1 26 143 45 286 78 428 36 155 87 308 160 450 136 264 347 478 616 607 39 18 79 35 119 50l-367 475c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l386-501c164 49 334 71 505 79 19 1 38 1 56 2l-280 363c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l320-415c128 6 257 12 386 16v292l-39 50c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l143-184v5725h767V7552l8-10c50-65 48-153 1-215l294-382c102-1 203-3 304-7 121-4 242-19 361-45l-292 377c-72-30-158-10-208 55l-176 229c-60 77-46 188 32 248 77 60 188 46 248-32l177-228c50-65 48-153 1-215l366-474c128-42 251-99 363-176 226-155 390-377 494-629 52-129 88-263 114-399 22-122 34-245 49-368 53 95 194 94 246-2 50-91-19-207-123-207-72 0-119 56-152 114-34 59-58 124-83 187-57 145-115 290-187 428-5 10-11 19-16 29-69-167-234-285-426-285-212 0-391 144-445 340-53-196-232-340-444-340s-392 144-445 340c-45-166-181-296-351-331v-230h1219l-100-156c-292-458-331-963-108-1385l2-4h219v-253H5525v-260h-186v260H4106v253h219l2 4c224 422 184 926-108 1385l-100 156h1220v230c-170 35-307 164-352 331-53-196-232-340-445-340-212 0-391 144-444 340-53-196-232-340-445-340-207 0-383 138-441 327-72-136-129-282-180-427-24-68-47-136-74-203-20-51-41-110-87-143zm2944 1846c62 1 124 1 186 1l-186 240v-241zm1395-1089c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c82 0 149 67 149 150 1 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-33-2019c-37 94-64 191-80 290H4655c-16-99-42-196-79-290h1712zm-1615 458h1517c-5 121 5 243 29 366H4644c25-123 34-245 29-366zm-136 826h-56c49-95 89-191 119-288h1663c31 97 70 193 120 288H4537zm895 735c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-889 0c82 0 149 67 149 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 150-150zm-890 0c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150z"/>
          <path id="boatraw" class="fil6 str1" d="M3255 4921c-110-79-260 36-214 162 44 120 221 120 264-1 26 143 44 287 77 428 37 155 87 308 160 450 136 264 348 478 617 607 39 19 79 35 119 50l-367 475c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-32l176-228c50-65 49-153 1-215l387-501c163 49 334 71 505 79 19 1 37 2 56 2l-280 363c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l176-229c50-65 49-153 1-215l320-414c129 5 258 11 386 16v291l-38 50c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l142-185v5725h768V7374l7-10c50-65 48-153 1-215l295-382c101-1 202-3 303-6 121-5 243-19 361-46l-291 377c-72-30-158-9-208 55l-177 229c-59 77-45 189 32 248 78 60 189 46 249-31l176-229c50-65 49-153 1-215l367-474c128-42 250-99 363-176 226-155 390-377 494-629 51-129 88-263 113-399 23-122 35-245 50-368 53 95 194 94 246-1 50-92-19-207-123-207-73 0-119 55-152 113-34 59-58 124-83 187-58 145-115 290-188 428-5 10-10 20-15 29-70-167-234-285-426-285-213 0-392 145-445 340-53-195-232-340-444-340-213 0-392 145-445 340-45-166-181-295-352-330v-230h1220l-100-157c-292-458-332-963-108-1385l2-3h219v-254H5908v-260h-185v260H4490v254h219l2 3c223 422 184 927-108 1385l-100 157h1220v229c-171 35-307 165-352 331-53-195-233-340-445-340s-391 145-444 340c-54-195-233-340-445-340-208 0-384 138-441 328-72-137-129-283-181-428-24-68-46-136-73-203-20-51-42-110-87-143zm2944 1846c62 1 124 1 185 1l-185 240v-241zm1395-1089c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-889 0c82 0 149 67 149 150 0 82-67 149-149 149-83 0-150-67-150-149 0-83 67-150 150-150zm-34-2019c-37 95-63 192-79 290H5039c-16-98-42-195-79-290h1711zm-1614 458h1517c-5 121 4 244 29 366H5028c24-122 34-245 29-366zm-136 826h-57c50-95 89-191 120-288h1663c30 97 70 193 119 288H4921zm894 735c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c83 0 150 67 150 150 0 82-67 149-150 149-82 0-149-67-149-149 0-83 67-150 149-150zm-889 0c82 0 150 67 150 150 0 82-68 149-150 149s-150-67-150-149c0-83 67-150 150-150z"/>
        </g>
        <g id="wave1">
          <path id="wave1shadow" class="fil2" d="M29951 11948c-291 730-653 1800-1548 2971-894 1170-2321 2441-4988 3027-2667 585-6574 485-10469 540-3895 56-7777 268-10905-256s-5502-1784-6906-3382c-1405-1597-1840-3533-1958-4910-117-1377 83-2195 1029-2853 946-659 2638-1159 4034-1003 1395 156 2494 968 3440 1630 945 663 1736 1175 2905 1086 1168-89 2714-780 3809-1332 1096-552 1741-964 2666-820 925 145 2130 848 3110 1361 979 512 1734 836 2457 671 724-165 1416-818 2179-1050 764-231 1597-40 3059 270 1461 310 3550 739 5069 1176 1519 438 2468 884 2997 1112 530 229 639 240 585 441-55 200-274 590-565 1321z"/>
          <path id="wave1raw" class="fil7" d="M30706 11822c-291 731-653 1801-1548 2972-895 1170-2321 2441-4988 3026-2667 586-6574 485-10469 541s-7778 268-10906-256-5501-1784-6906-3382c-1404-1598-1840-3533-1957-4910-118-1377 82-2195 1029-2854 946-659 2637-1158 4033-1002s2495 968 3440 1630 1737 1175 2905 1086c1169-89 2714-780 3810-1332 1095-552 1740-965 2665-820s2130 848 3110 1360c980 513 1734 837 2458 672s1416-819 2179-1050 1597-40 3058 269c1461 310 3550 739 5069 1177 1519 437 2469 883 2998 1112 529 228 639 240 584 440-55 201-274 591-564 1321z"/>
        </g>
        <path id="moon" class="fil8" d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
      </g>
      <g clip-path="url(#id3)">
        <path id="Curve_x0020_" class="fil9" d="M17986 475c737 530 1095 1487 823 2406s-1093 1527-1999 1571c195 140 416 251 660 323 1163 344 2384-320 2728-1483s-320-2384-1482-2728c-244-72-490-100-730-89z"/>
        <path id="Curve_x0020__0" class="fil10" d="M18819 780c575 731 657 1774 128 2602-528 829-1508 1194-2413 981 152 193 339 365 558 505 1048 668 2439 360 3107-687 668-1048 361-2439-687-3107-219-140-453-237-693-294z"/>
      </g>
      <g clip-path="url(#id8)">
        <path class="fil11" d="M17658 804c700 395 1108 1202 958 2038s-813 1450-1607 1577c185 105 391 181 612 220 1057 190 2068-513 2258-1570s-513-2068-1570-2258c-222-40-441-40-651-7z"/>
        <g id="vikingsWord">
          <path id="vikingsS" class="fil12" d="M5093 453c188 81 296 130 323 146l1 5c0 2-56 59-169 172l-106-58c-71 76-109 119-113 129 331 137 514 215 547 233l47 260c-73 83-179 189-319 317l-5 1c-26-16-155-76-387-179l-6-8-32-176c-1-2 39-43 118-122l9-2c145 64 218 98 219 101-41 40-61 62-60 66l100 54c84-89 126-135 126-137-9-8-156-73-442-196-79-37-119-57-120-61l-42-228c27-35 130-141 311-317z"/>
          <path id="vikingsG" class="fil12" d="M4294 588l28-1 267-49c6 1 10 3 11 8l36 198c1 6-2 10-8 11l-394 72 116 639c1 4 36 24 106 61 19-17 47-49 82-95-69-29-104-43-107-42l-1-5c3-10 60-69 171-178 17-3 84 26 202 86l32 179c-209 219-319 329-329 331-241-105-381-170-420-194l-171-938c0-6 2-10 7-11l350-64c10-1 17-4 22-8z"/>
          <path id="vikingsN" class="fil12" d="M1718 2312c-290 53 894-163 0 0zM3076 820l276-50 221 111 4-1-25-137c0-7 3-10 8-11l270-50c7 0 11 2 12 8l217 1185c1 6-2 10-9 11l-270 50c-6 1-10-2-11-8l-139-759c-3-4-76-39-219-102l-5 1 164 896c1 6-1 10-8 11l-266 49c-6 1-10-2-11-8L3069 831c0-7 2-10 7-11z"/>
          <path id="vikingsI2" class="fil12" d="M2712 886l271-49c6 0 9 2 10 8l217 1185c1 6-2 10-8 11l-270 50c-6 1-10-2-11-8L2704 897c0-6 3-10 8-11z"/>
          <path id="vikingsK" class="fil12" d="M1862 1042l272-50c6 0 10 2 11 7l109 600 173-164-86-471c-1-7 1-10 7-11l271-50c7 0 10 3 11 8l103 562c0 4-87 90-263 259 197 71 308 116 335 136l52 285-9 1-534-226 48 261c1 7-1 11-7 12l-272 50c-6 1-10-2-11-9l-217-1190c0-6 2-10 7-10z"/>
          <path id="vikingsI1" class="fil12" d="M1498 1108l270-49c7 0 10 2 11 7l217 1186c1 6-2 10-8 11l-270 49c-7 1-10-1-11-7l-217-1186c0-7 3-10 8-11z"/>
          <path id="vikingsV" class="fil12" d="M684 1257l260-48c6 0 10 2 11 8l154 843c2 2 37 23 106 61 5-1 32-33 81-95l-154-844c0-6 2-9 8-10l260-48c6 0 10 3 11 8l170 935c-17 24-124 133-322 327l-4 1c-255-112-394-176-417-192l-171-936c0-6 2-10 7-10z"/>
        </g>
        <path id="inTheSea" class="fil12" d="M4799 1878h67c1 1 2 1 2 3v291c0 2-1 2-2 2h-67c-1 0-2 0-2-2v-291c0-2 1-3 2-3zm90 0h68l48 36h1v-33c0-2 1-3 2-3h66c2 1 3 1 3 3v291c0 2-1 2-3 2h-66c-2 0-2 0-2-2v-187c-1-1-17-12-48-33h-1v220c0 2-1 2-3 2h-65c-2 0-2 0-2-2v-291c0-2 1-3 2-3zm313 0h183c1 0 2 1 2 2v51c0 2-1 3-2 3h-58v238c0 2 0 2-2 2h-65c-2 0-3 0-3-2v-238h-55c-1 0-2-1-2-3v-51c0-2 1-2 2-2zm202 0h66c2 0 3 1 3 3v179h48v-179c1-2 2-3 3-3h65c2 0 3 1 3 3v291c0 2-1 2-3 2h-65c-2 0-3 0-3-2v-51h-48v51c0 2-1 2-3 2h-66c-2 0-3 0-3-2v-127c0-5 1-11 2-19-1 0-2-4-2-13v-9c0-1 1-1 2-1l-2-2v-120c1-2 1-3 3-3zm272-1c1 0 3 1 4 1h20c1 0 3-1 4-1s3 1 5 1h14c3 0 4-1 4-1l5 1h27c2 0 3 1 3 2v48c0 2-1 3-3 3h-83v54h45c2 0 2 1 2 2v48c0 1 0 2-2 2h-45v51s8 7 22 19h2c14-12 22-18 23-18 28 18 45 30 50 35v1l-73 49h-3c-57-40-87-61-90-64v-131c0-4 0-9 1-16-1 0-1-3-1-11 0-7 0-11 1-13-1-7-1-13-1-17v-42c0-2 1-2 2-2h62c2 0 4-1 5-1zm307 2c41 27 64 43 70 48v1c0 1-16 12-48 34l-22-18c-21 15-31 23-33 26 73 47 113 73 120 79v64c-21 16-51 37-90 61h-1c-5-4-33-24-84-59l-1-2v-44l33-24h3c31 22 47 33 47 34-11 8-17 12-17 13l22 17c23-17 35-26 35-27-1-2-33-24-96-66-18-12-26-19-26-19v-57c8-7 37-27 88-61zm170-2c2 0 3 1 5 1h19c2 0 3-1 4-1 2 0 3 1 5 1h15c2 0 3-1 3-1l6 1h27c1 0 2 1 2 2v48c0 2-1 3-2 3h-84v54h45c2 0 3 1 3 2v48c0 1-1 2-3 2h-45v51s8 7 23 19h1c14-12 22-18 24-18 28 18 44 30 49 35v1l-73 49h-2c-58-40-88-61-90-64v-131c0-4 0-9 1-16-1 0-1-3-1-11 0-7 0-11 1-13-1-7-1-13-1-17v-42c0-2 1-2 2-2h62c1 0 3-1 4-1zm204 2h1c55 37 85 58 92 64v229c0 2-1 2-3 2h-64c-1 0-2 0-2-2v-49h-46v49c0 2-1 2-2 2h-65c-1 0-2 0-2-2v-229c5-4 35-26 91-64zm-22 87v99h46v-100s-8-7-23-19c-11 9-19 15-23 20z"/>
      </g>
    </g>
    <path class="fil11" d="M0 0h20962v10601H0z"/>
  </g>
</svg>
!

CSS 

              
                html{
  background-color: #66C3D0;
}

svg{
  width: 100%;
}
!

JS 

              
                $( document ).ready(function() {
  
  //Boat animation
  TweenMax.fromTo('#boatraw', 2.5, {rotationX:-10, transformOrigin:"bottom 0%"},  {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.fromTo('#boatshadow', 2.5, {rotationX:-10, transformOrigin:"bottom 0%"},  {rotation:10,  ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.to('#boatraw', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.to('#boatshadow', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  
  //Tentacle animation
  TweenMax.fromTo('#octopusraw', 2.5, {rotation:-10, transformOrigin:"bottom 0%"},  {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -0.7});
  TweenMax.fromTo('#octopusshadow', 2.5, {rotation:-10, transformOrigin:"bottom 0%"},  {rotation:10, ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -0.7});
  TweenMax.to('#octopusraw', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.to('#octopusshadow', 1,   {y:-500, ease: Power1.easeInOut, repeat: -1, yoyo: true});
  
  //wave animation
  TweenMax.fromTo('#wave1', 2, {x:'-2000'},  {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true});
  TweenMax.fromTo('#wave2', 3, {x:'-1800'},  {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -1.7});
  TweenMax.fromTo('#wave3', 4, {x:'-1600'},  {x: '500', ease: Power1.easeInOut, repeat: -1, yoyo: true, delay: -1});
  
  //Star animation
  var stars = $('#stars').children();
  stars.each(function(index, element){
    TweenMax.to(element, (Math.random() * 1.5) + 1, {scale: 0, transformOrigin:"50% 50%", yoyo: true, repeat: -1, delay: -Math.random() * 2})
  })
  
  //Title animation
  var tl = new TimelineMax(),
      letterFallSpeed = .2;
  
  tl.set('#vikingsWord', {y: -2500})
    .to('#vikingsV', letterFallSpeed, {y: 2500})
    .to('#vikingsI1', letterFallSpeed, {y: 2500})
    .to('#vikingsK', letterFallSpeed, {y: 2500})
    .to('#vikingsI2', letterFallSpeed, {y: 2500})
    .to('#vikingsN', letterFallSpeed, {y: 2500})
    .to('#vikingsG', letterFallSpeed, {y: 2500})
    .to('#vikingsS', letterFallSpeed, {y: 2500})
    .fromTo('#inTheSea', .8, {scale: 0, rotation: -15, transformOrigin:"50% 50%"}, {scale: 1, rotation: 0, ease: Elastic.easeOut.config(1, 0.3)});
});
!
999px

Console