"svg"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/FabioG/pen/ZLONRY?limit=all&page=35&q=svg" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">html { background-color: #66C3D0; } svg { width: 100%; } </style></head><body> <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> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/TweenMax-latest-beta.js?v=333'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> <script >$( 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)}); }); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: