Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

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.

+ add another resource

JavaScript

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.

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

Behavior

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                 <div class="container">
      <div class="skylayer">

       <svg id="sun" width="200" height="200" viewBox="0 0 400 400">
          <g transform="translate(90 90)">
            <g>
              <path
                style="fill: #fdd633"
                d="M92.846,7.102c0-0.005,0-0.01,0-0.015C92.846,7.092,92.846,7.097,92.846,7.102z"
              />
              <path
                style="fill: #fdd633"
                d="M90.036,6.163c0.141-0.328,0.302-0.654,0.481-0.979C90.339,5.508,90.177,5.835,90.036,6.163z"
              />
              <path
                style="fill: #fdd633"
                d="M93.072,5.293C93.708,2.477,95.436,0,95.436,0c-0.891,0.61-1.676,1.248-2.363,1.905v3.38
                          C93.072,5.288,93.072,5.291,93.072,5.293z"
              />
              <path
                style="fill: #fdd633"
                d="M92.176,2.845c0.279-0.316,0.574-0.631,0.896-0.94C92.75,2.214,92.456,2.528,92.176,2.845z"
              />
              <path
                style="fill: #fdd633"
                d="M90.629,4.987C90.807,4.675,91,4.365,91.215,4.058C91,4.365,90.807,4.675,90.629,4.987z"
              />
              <path
                style="fill: #fdd633"
                d="M91.545,16.619c0.452,0.574,0.961,1.113,1.522,1.61C92.506,17.732,91.996,17.193,91.545,16.619z"
              />
              <path
                style="fill: #fdd633"
                d="M91.254,4c0.228-0.321,0.481-0.639,0.749-0.955C91.734,3.36,91.481,3.678,91.254,4z"
              />
              <path
                style="fill: #fdd633"
                d="M92.915,6.17c-0.002,0.014-0.003,0.028-0.005,0.042C92.912,6.198,92.913,6.184,92.915,6.17z"
              />
              <path
                style="fill: #fdd633"
                d="M90.71,186.146c0,0,0.011-0.016,0.027-0.039C90.728,186.12,90.71,186.146,90.71,186.146z"
              />
              <path
                style="fill: #fdd633"
                d="M91.845,166.953c0.429,0.297,0.836,0.615,1.219,0.953C92.681,167.568,92.274,167.249,91.845,166.953
                          z"
              />
              <path
                style="fill: #fdd633"
                d="M91.83,185.314c-0.355,0.281-0.724,0.561-1.121,0.832C91.106,185.874,91.475,185.595,91.83,185.314z
                          "
              />
              <path
                style="fill: #fdd633"
                d="M93.068,177.257c0.343,1.157,0.277,2.41,0.005,3.607v3.376c-0.304,0.291-0.635,0.576-0.978,0.859
                          c6.803-5.597,5.777-12.947,0.978-17.186v9.357C93.072,177.266,93.07,177.262,93.068,177.257z"
              />
              <path
                style="fill: #fdd633"
                d="M90.456,166.113c0.479,0.251,0.936,0.527,1.37,0.827C91.39,166.64,90.934,166.363,90.456,166.113z"
              />
              <path
                style="fill: #fdd633"
                d="M90.686,148.177c-0.182,0.212-0.361,0.424-0.553,0.632
                          C90.326,148.601,90.503,148.389,90.686,148.177z"
              />
              <path
                style="fill: #fdd633"
                d="M89.37,8.36c0.061-0.331,0.14-0.663,0.236-0.995C89.51,7.698,89.431,8.029,89.37,8.36z"
              />
              <path
                style="fill: #fdd633"
                d="M91.51,16.573c-0.439-0.563-0.821-1.159-1.142-1.781C90.689,15.414,91.071,16.01,91.51,16.573z"
              />
              <path
                style="fill: #fdd633"
                d="M89.549,12.681c-0.173-0.646-0.281-1.308-0.321-1.981C89.268,11.373,89.376,12.035,89.549,12.681z"
              />
              <path
                style="fill: #fdd633"
                d="M90.785,186.035L90.785,186.035L90.785,186.035z"
              />
              <path
                style="fill: #fdd633"
                d="M90.325,14.707c-0.309-0.612-0.558-1.248-0.742-1.902C89.767,13.46,90.016,14.095,90.325,14.707z"
              />
              <path
                style="fill: #fdd633"
                d="M92.706,176.374c-0.065-0.125-0.133-0.249-0.21-0.37C92.574,176.126,92.64,176.249,92.706,176.374z"
              />
              <path
                style="fill: #fdd633"
                d="M92.31,175.735c-0.165-0.222-0.345-0.438-0.562-0.642C91.965,175.296,92.143,175.514,92.31,175.735z
                          "
              />
              <path
                style="fill: #fdd633"
                d="M89.234,9.445c0.021-0.309,0.059-0.619,0.111-0.93C89.294,8.827,89.256,9.137,89.234,9.445z"
              />
              <path
                style="fill: #fdd633"
                d="M93.072,144.97c-0.225,0.357-0.469,0.711-0.715,1.064C92.605,145.68,92.847,145.327,93.072,144.97z"
              />
              <path
                style="fill: #fdd633"
                d="M92.001,146.535c-0.211,0.289-0.432,0.575-0.659,0.86C91.571,147.11,91.789,146.824,92.001,146.535z
                          "
              />
              <path
                style="fill: #fdd633"
                d="M89.658,7.2c0.094-0.304,0.203-0.608,0.328-0.911C89.861,6.592,89.753,6.896,89.658,7.2z"
              />
              <path
                style="fill: #fdd633"
                d="M164.548,108.336c-4.741,6.145-9.624,8.825-15.949-1.058c-1.613-2.521-3.551-4.549-5.539-6.175
                          c0.399-2.514,0.615-5.088,0.632-7.709c4.806,2.293,8.556,5.933,15.997,4.619c9.526-1.678,11.352-13.223,14.388-17.876
                          c3.039-4.651,11.065-0.897,11.065-0.897c-8.127-8.296-17.202-4.074-19.685,3.729c-2.354,7.397-6.026,11.586-15.349,4.462
                          c-2.38-1.819-4.896-3.063-7.322-3.91c-0.488-2.559-1.167-5.051-2.025-7.458c5.295,0.514,10.063,2.647,16.6-1.13
                          c8.379-4.835,6.146-16.309,7.406-21.72c1.265-5.41,10.091-4.629,10.091-4.629c-10.474-5.016-17.558,2.057-17.222,10.238
                          c0.318,7.756-1.7,12.947-12.897,9.441c-2.857-0.895-5.645-1.203-8.214-1.17c-1.331-2.22-2.822-4.33-4.466-6.313
                          c5.154-1.331,10.366-0.954,15.22-6.742c6.22-7.409,0.197-17.427-0.469-22.943c-0.661-5.515,7.899-7.8,7.899-7.8
                          c-11.558-1.132-15.796,7.938-12.682,15.511c2.952,7.179,2.831,12.748-8.891,13.282c-2.994,0.137-5.719,0.804-8.124,1.716
                          c-1.996-1.626-4.122-3.098-6.354-4.408c4.39-3.014,9.417-4.441,12-11.542c3.311-9.089-5.775-16.443-8.287-21.399
                          c-2.509-4.957,4.754-10.032,4.754-10.032c-11.247,2.889-12.128,12.861-6.611,18.913c5.229,5.737,7.021,11.012-3.813,15.523
                          c-2.764,1.151-5.099,2.708-7.046,4.385c-2.415-0.837-4.914-1.494-7.481-1.961c3.095-4.335,7.332-7.396,7.332-14.955
                          c0-9.671-11.053-13.472-15.107-17.272c-0.688-0.644-1.096-1.393-1.327-2.184l0,0v9.363c0.78,0.689,1.656,1.298,2.617,1.802
                          c6.876,3.602,10.364,7.945,1.728,15.89c-2.208,2.032-3.871,4.296-5.128,6.544c0.241-0.432,0.511-0.863,0.783-1.292v10.437l0,0
                          c22.898,0,41.462,18.563,41.462,41.459c0,22.9-18.563,41.463-41.462,41.463l0,0v10.433c0.271-0.429,0.541-0.858,0.781-1.288
                          c2.618-0.039,5.186-0.276,7.693-0.699c-1.424,5.128-4.355,9.456-1.77,16.553c3.307,9.09,14.993,8.881,20.104,11.064
                          c5.108,2.186,2.805,10.743,2.805,10.743c6.76-9.445,1.026-17.649-7.092-18.74c-7.692-1.031-12.455-3.921-7.058-14.341
                          c1.376-2.657,2.164-5.346,2.577-7.882c2.426-0.925,4.762-2.034,6.992-3.307c0.416,5.308-0.86,10.376,3.997,16.16
                          c6.217,7.413,17.127,3.22,22.676,3.523c5.549,0.307,6.311,9.135,6.311,9.135c3.121-11.187-5.072-16.936-13.072-15.183
                          c-7.582,1.66-13.045,0.574-11.538-11.064c0.386-2.975,0.201-5.774-0.28-8.303c1.951-1.691,3.771-3.524,5.444-5.491
                          c2.209,4.848,2.739,10.05,9.285,13.827c8.377,4.839,17.196-2.834,22.513-4.446c5.319-1.61,9.055,6.426,9.055,6.426
                          c-0.893-11.579-10.56-14.179-17.477-9.798c-6.557,4.153-12.061,5.002-14.626-6.447c-0.654-2.923-1.78-5.487-3.096-7.697
                          c1.252-2.239,2.342-4.582,3.245-7.016c3.726,3.796,6.008,8.492,13.44,9.8c9.525,1.683,15.189-8.543,19.634-11.877
                          c4.448-3.331,10.706,2.94,10.706,2.94C179.521,100.988,169.55,101.852,164.548,108.336z"
              />
              <path
                style="fill: #fdd633"
                d="M89.219,10.548c-0.015-0.331-0.014-0.665,0.006-0.999C89.205,9.884,89.205,10.217,89.219,10.548z"
              />
              <path
                style="fill: #f4ca19"
                d="M93.073,8.871c-0.167-0.573-0.234-1.169-0.227-1.769c0-0.005,0-0.01,0-0.015
                          c0.004-0.292,0.027-0.584,0.064-0.875c0.002-0.014,0.003-0.028,0.005-0.042c0.038-0.294,0.091-0.587,0.157-0.876
                          c0-0.003,0.001-0.006,0.001-0.009v-3.38l0,0c0,0,0,0-0.001,0c-0.323,0.309-0.617,0.623-0.896,0.94
                          c-0.059,0.066-0.117,0.133-0.174,0.2C91.734,3.36,91.481,3.678,91.254,4c-0.014,0.02-0.025,0.039-0.039,0.058
                          C91,4.365,90.807,4.675,90.629,4.987c-0.037,0.065-0.076,0.131-0.112,0.196c-0.178,0.325-0.34,0.652-0.481,0.979
                          c-0.018,0.042-0.033,0.084-0.05,0.127c-0.125,0.303-0.233,0.607-0.328,0.911c-0.017,0.055-0.036,0.11-0.052,0.165
                          C89.51,7.698,89.431,8.029,89.37,8.36c-0.009,0.052-0.016,0.103-0.025,0.155c-0.052,0.311-0.09,0.621-0.111,0.93
                          c-0.003,0.035-0.007,0.069-0.009,0.104c-0.02,0.335-0.021,0.668-0.006,0.999c0.002,0.051,0.006,0.101,0.009,0.152
                          c0.04,0.672,0.148,1.335,0.321,1.981c0.011,0.042,0.023,0.083,0.034,0.124c0.184,0.654,0.433,1.29,0.742,1.902
                          c0.014,0.028,0.028,0.057,0.043,0.085c0.321,0.622,0.703,1.218,1.142,1.781c0.012,0.015,0.023,0.03,0.035,0.045
                          c0.452,0.574,0.961,1.113,1.522,1.61c0.002,0.002,0.004,0.004,0.006,0.006v0V8.871L93.073,8.871z"
              />
              <path
                style="fill: #f4ca19"
                d="M93.072,134.537c-22.898,0-41.461-18.563-41.461-41.463c0-22.896,18.562-41.459,41.461-41.459h0.001
                          V41.178c-0.272,0.43-0.542,0.861-0.783,1.292c-2.618,0.04-5.186,0.277-7.692,0.699c1.423-5.131,4.358-9.457,1.775-16.559
                          c-3.308-9.088-14.995-8.88-20.105-11.064c-5.11-2.184-2.806-10.742-2.806-10.742c-6.761,9.445-1.026,17.651,7.091,18.741
                          c7.694,1.033,12.457,3.921,7.058,14.341c-1.377,2.657-2.164,5.349-2.578,7.884c-2.426,0.926-4.761,2.036-6.991,3.307
                          C67.623,43.77,68.902,38.7,64.045,32.91c-6.218-7.409-17.128-3.215-22.677-3.52c-5.549-0.304-6.311-9.133-6.311-9.133
                          c-3.122,11.187,5.073,16.937,13.073,15.185c7.583-1.662,13.046-0.577,11.538,11.062c-0.386,2.975-0.202,5.777,0.279,8.307
                          c-1.95,1.689-3.77,3.522-5.442,5.488c-2.209-4.848-2.74-10.051-9.286-13.831c-8.378-4.836-17.195,2.837-22.514,4.448
                          c-5.318,1.611-9.054-6.424-9.054-6.424c0.893,11.579,10.559,14.18,17.478,9.797c6.557-4.154,12.062-5.004,14.625,6.449
                          c0.653,2.921,1.782,5.487,3.096,7.697c-1.251,2.239-2.341,4.581-3.245,7.016c-3.725-3.798-6.006-8.494-13.441-9.805
                          c-9.526-1.68-15.188,8.546-19.634,11.881c-4.447,3.332-10.705-2.941-10.705-2.941c4.799,10.576,14.772,9.712,19.775,3.229
                          c4.741-6.146,9.623-8.828,15.949,1.059c1.612,2.521,3.549,4.548,5.539,6.174c-0.4,2.513-0.616,5.086-0.632,7.709
                          c-4.807-2.295-8.557-5.936-15.999-4.623c-9.526,1.679-11.349,13.225-14.387,17.878c-3.039,4.653-11.065,0.899-11.065,0.899
                          c8.126,8.295,17.204,4.073,19.687-3.73c2.352-7.396,6.024-11.586,15.349-4.461c2.379,1.818,4.894,3.063,7.32,3.91
                          c0.489,2.558,1.167,5.049,2.025,7.457c-5.294-0.515-10.062-2.647-16.6,1.128c-8.378,4.836-6.142,16.31-7.405,21.722
                          c-1.265,5.411-10.091,4.629-10.091,4.629c10.475,5.017,17.56-2.056,17.224-10.237c-0.32-7.757,1.698-12.948,12.898-9.442
                          c2.855,0.895,5.641,1.202,8.209,1.171c1.33,2.218,2.822,4.33,4.465,6.313c-5.153,1.328-10.364,0.954-15.219,6.74
                          c-6.219,7.409-0.194,17.426,0.471,22.942c0.662,5.518-7.9,7.8-7.9,7.8c11.558,1.133,15.798-7.936,12.684-15.509
                          c-2.953-7.18-2.832-12.749,8.891-13.284c2.991-0.137,5.715-0.802,8.119-1.713c1.996,1.626,4.121,3.098,6.353,4.408
                          c-4.388,3.013-9.415,4.442-11.997,11.542c-3.31,9.088,5.777,16.439,8.289,21.398c2.509,4.957-4.756,10.032-4.756,10.032
                          c11.249-2.89,12.131-12.86,6.614-18.913c-5.23-5.735-7.022-11.011,3.811-15.523c2.762-1.15,5.095-2.705,7.042-4.381
                          c2.415,0.838,4.914,1.495,7.48,1.962c-3.093,4.333-7.329,7.396-7.326,14.949c-0.002,9.673,11.051,13.475,15.107,17.275
                          c0.217,0.203,0.397,0.42,0.562,0.642c0.065,0.089,0.128,0.179,0.186,0.27c0.077,0.121,0.146,0.245,0.21,0.37
                          c0.147,0.287,0.272,0.58,0.362,0.883c0.001,0.005,0.003,0.009,0.005,0.014v-9.357v-0.001c-0.003-0.003-0.006-0.005-0.009-0.007
                          c-0.384-0.338-0.79-0.656-1.219-0.953c-0.006-0.004-0.013-0.009-0.019-0.013c-0.435-0.3-0.892-0.576-1.37-0.827
                          c-6.876-3.604-10.363-7.946-1.728-15.893c0.499-0.459,0.962-0.932,1.405-1.411c0.192-0.208,0.371-0.42,0.553-0.632
                          c0.224-0.259,0.446-0.518,0.656-0.782c0.227-0.285,0.448-0.571,0.659-0.86c0.122-0.166,0.24-0.333,0.356-0.5
                          c0.246-0.354,0.49-0.708,0.715-1.064l0.001-0.001l0,0L93.072,134.537L93.072,134.537z"
              />
              <path
                style="fill: #f4ca19"
                d="M93.073,180.865L93.073,180.865c-0.559,2.459-1.948,4.656-2.288,5.169l0,0.001
                          c-0.021,0.031-0.036,0.054-0.048,0.072c-0.016,0.023-0.027,0.039-0.027,0.039c0.397-0.271,0.765-0.551,1.121-0.832
                          c0.089-0.071,0.178-0.143,0.265-0.214c0.343-0.283,0.674-0.568,0.978-0.859V180.865z"
              />
              <path
                style="fill: #f2ab0c"
                d="M134.535,93.074c0-22.896-18.563-41.459-41.462-41.459v82.922
                          C115.971,134.537,134.535,115.974,134.535,93.074z"
              />
              <path
                style="fill: #f4940b"
                d="M51.612,93.074c0,22.9,18.562,41.463,41.461,41.463h0.001l0,0V51.615l0,0h-0.001
                          C70.174,51.615,51.612,70.177,51.612,93.074z"
              />
            </g>

            <animateTransform
              attributeName="transform"
              type="scale"
              dur="8s"
              values="1; 1.5; 1;"
              repeatCount="indefinite"
              ;
              additive="sum"
            ></animateTransform>
          </g>
        </svg>
        <svg id="cloud">
          <defs id="defs3">
            <linearGradient id="linearGradient912">
              <stop
                style="stop-color: #f3f3f3; stop-opacity: 1"
                offset="0.0000000"
                id="stop913"
              />
              <stop
                style="stop-color: #ffffff; stop-opacity: 1"
                offset="0.37650406"
                id="stop855"
              />
              <stop
                style="stop-color: #e6ffff; stop-opacity: 1"
                offset="1.0000000"
                id="stop914"
              />
            </linearGradient>
            <radialGradient
              xlink:href="#linearGradient912"
              id="radialGradient915"
            />
            <linearGradient
              xlink:href="#linearGradient912"
              id="linearGradient854"
              x1="0.90873015"
              y1="0.63281250"
              x2="-0.47619048"
              y2="-0.14062500"
            />
          </defs>
          <path
            style="
              fill: url(#linearGradient854);
              fill-rule: evenodd;
              stroke: #000000;
              stroke-width: 1.25;
              stroke-dasharray: none;
              stroke-linejoin: round;
            "
            d="M 48.996171,37.251271 C 47.958668,32.143973 39.185631,24.658486 33.930828,26.057885 C 27.350244,27.875054 24.319102,33.750906 29.022229,38.180278 C 24.861109,35.364180 14.478948,32.941167 8.8516150,42.752305 C 5.3584330,50.061076 15.250525,54.633620 18.276730,54.093064 C 12.486132,53.396616 -1.7806601,65.306814 4.5717298,71.373662 C 12.398859,77.540434 30.328023,70.871946 31.115271,65.721140 C 29.368597,73.253219 49.289455,74.699245 49.782264,64.230844 C 48.360488,69.138884 62.574082,74.362572 69.331408,72.364112 C 77.800433,70.297826 76.782138,63.322187 75.780037,61.195189 C 82.294178,61.939711 92.493777,63.786015 97.011836,57.091162 C 100.16106,50.764622 98.288765,43.698338 94.234782,41.475620 C 89.817633,39.373843 84.991240,39.483372 79.361925,43.043469 C 83.828729,40.136070 81.073796,30.760619 76.597083,28.701006 C 71.495048,26.361815 65.365281,25.905286 59.859869,27.042626 C 55.323516,27.769206 48.144478,31.594752 48.996171,37.251271 z "
            id="path853"
          />
        </svg>
    

        <div class="middle">
         
           <!-- ships -->
          <div class="sealayer">
            <svg
              id="sea"
              x="0"
              y="0"
              width="1055"
              height="641"
              viewBox="0 0 1055 590"
              "
            >
              <path class="wave1"
                d="M0 90L6.8 96.5C13.7 103 27.3 116 41 117.8C54.7 119.7 68.3 110.3 82 104.2C95.7 98 109.3 95 123 101C136.7 107 150.3 122 164 127.5C177.7 133 191.3 129 204.8 128.5C218.3 128 231.7 131 245.2 129.7C258.7 128.3 272.3 122.7 286 116.7C299.7 110.7 313.3 104.3 327 109.5C340.7 114.7 354.3 131.3 368 135.7C381.7 140 395.3 132 409 131.3C422.7 130.7 436.3 137.3 450 141.2C463.7 145 477.3 146 491 146.2C504.7 146.3 518.3 145.7 532 139.7C545.7 133.7 559.3 122.3 573 114.7C586.7 107 600.3 103 614 104.5C627.7 106 641.3 113 654.8 118.2C668.3 123.3 681.7 126.7 695.2 127.8C708.7 129 722.3 128 736 122.7C749.7 117.3 763.3 107.7 777 104.2C790.7 100.7 804.3 103.3 818 106C831.7 108.7 845.3 111.3 859 114.8C872.7 118.3 886.3 122.7 893.2 124.8L900 127L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
                fill="#69edfa"
              ></path>
              <path class="wave2"
                d="M0 200L6.8 194.5C13.7 189 27.3 178 41 178.2C54.7 178.3 68.3 189.7 82 196.2C95.7 202.7 109.3 204.3 123 198.2C136.7 192 150.3 178 164 176.8C177.7 175.7 191.3 187.3 204.8 188.2C218.3 189 231.7 179 245.2 178.2C258.7 177.3 272.3 185.7 286 192C299.7 198.3 313.3 202.7 327 196.7C340.7 190.7 354.3 174.3 368 166.3C381.7 158.3 395.3 158.7 409 162.3C422.7 166 436.3 173 450 172.2C463.7 171.3 477.3 162.7 491 167.2C504.7 171.7 518.3 189.3 532 194.8C545.7 200.3 559.3 193.7 573 189.7C586.7 185.7 600.3 184.3 614 187.8C627.7 191.3 641.3 199.7 654.8 202.8C668.3 206 681.7 204 695.2 201.8C708.7 199.7 722.3 197.3 736 189.8C749.7 182.3 763.3 169.7 777 165C790.7 160.3 804.3 163.7 818 166.8C831.7 170 845.3 173 859 177.7C872.7 182.3 886.3 188.7 893.2 191.8L900 195L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
                fill="#17d9ff"
              ></path>

            <path class="wave1"
              d="M0 240L6.8 243.8C13.7 247.7 27.3 255.3 41 256C54.7 256.7 68.3 250.3 82 243.2C95.7 236 109.3 228 123 225.8C136.7 223.7 150.3 227.3 164 233.5C177.7 239.7 191.3 248.3 204.8 252.7C218.3 257 231.7 257 245.2 256.2C258.7 255.3 272.3 253.7 286 249C299.7 244.3 313.3 236.7 327 232.3C340.7 228 354.3 227 368 231.5C381.7 236 395.3 246 409 246C422.7 246 436.3 236 450 232.8C463.7 229.7 477.3 233.3 491 239C504.7 244.7 518.3 252.3 532 256.8C545.7 261.3 559.3 262.7 573 263.3C586.7 264 600.3 264 614 258C627.7 252 641.3 240 654.8 238.3C668.3 236.7 681.7 245.3 695.2 248.8C708.7 252.3 722.3 250.7 736 246.8C749.7 243 763.3 237 777 236.8C790.7 236.7 804.3 242.3 818 245.8C831.7 249.3 845.3 250.7 859 246.8C872.7 243 886.3 234 893.2 229.5L900 225L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
              fill="#00c2ff"
            ></path>              

              <!-- fish in the sea -->
              <svg xmlns="http://www.w3.org/2000/svg" 
              height="450px" width="1000px" 
              x="0"
              y="50"                    
              viewBox="0 0 3555 641"
              version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" id="298b7c64-5ad9-11e9-b8a2-ac7ba1acfd1e">
               <defs id="defs1">
                <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="145.084573271" cx="52.5011724864" gradientTransform="matrix(1.345908543046436, 0.0, 0.0, -1.345908543046436, 222.67304800601354, 316.8110059626103)" r="15.7988834934" id="grad1">
                  <stop style="stop-color:#f6aa00;stop-opacity:1.0;" offset="0.0" />
                  <stop style="stop-color:#f4a900;stop-opacity:1.0;" offset="0.4375" />
                  <stop style="stop-color:#e09c00;stop-opacity:1.0;" offset="1.0" />
                </radialGradient>
                <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="99.775390625" cx="-39.318359375" gradientTransform="matrix(1.345908543046436, 0.0, 0.0, -1.345908543046436, 222.67304800601354, 316.8110059626103)" r="77.927734375" id="grad2">
                  <stop style="stop-color:#efd785;stop-opacity:1.0;" offset="0.0" />
                  <stop style="stop-color:#e8a300;stop-opacity:1.0;" offset="1.0" />
                </radialGradient>
                <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="143.105307534" cx="60.9304720397" gradientTransform="matrix(1.0, 0.0, 0.0, -1.0, 170.078735, 240.944885)" r="39.2625211067" id="grad3">
                  <stop style="stop-color:#ffffff;stop-opacity:1.0;" offset="0.0" />
                  <stop style="stop-color:#ceced0;stop-opacity:1.0;" offset="1.0" />
                </radialGradient>
                <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="141.882792007" cx="38.3952002768" gradientTransform="matrix(1.0, 0.0, 0.0, -1.0, 170.078735, 240.944885)" r="17.580711775" id="grad4">
                <stop style="stop-color:#006bdc;stop-opacity:1.0;" offset="0.0" />
                <stop style="stop-color:#000060;stop-opacity:1.0;" offset="1.0" />
              </radialGradient>
              <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="145.802379361" cx="-13.1624487614" gradientTransform="matrix(1.0, 0.0, 0.0, -1.0, 170.078735, 240.944885)" r="54.7124630757" id="grad5">
                <stop style="stop-color:#ceced0;stop-opacity:1.0;" offset="0.0" />
                <stop style="stop-color:#ffffff;stop-opacity:1.0;" offset="1.0" />
              </radialGradient>
              <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="126.236671603" cx="12.8857053942" gradientTransform="matrix(1.0, 0.0, 0.0, -1.0, 170.078735, 240.944885)" r="14.4687438885" id="grad6">
                <stop style="stop-color:#006bdc;stop-opacity:1.0;" offset="0.0" />
                <stop style="stop-color:#000060;stop-opacity:1.0;" offset="1.0" />
                 </radialGradient>
                <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="123.074910785" cx="5.85382811365" gradientTransform="matrix(1.345908543046436, 0.0, 0.0, -1.345908543046436, 222.67304800601354, 316.8110059626103)" r="32.9240725961" id="grad7">
                <stop style="stop-color:#ff6600;stop-opacity:1.0;" offset="0.0" />
                <stop style="stop-color:#fb6300;stop-opacity:1.0;" offset="0.7725" />
                <stop style="stop-color:#cd3e00;stop-opacity:1.0;" offset="1.0" />
              </radialGradient>
              <linearGradient y2="137.221957206" spreadMethod="pad" gradientUnits="userSpaceOnUse" x2="53.9508525178" y1="54.8626482216" x1="99.7060241756" id="grad8">
                <stop style="stop-color:#f65328;stop-opacity:1.0;" offset="0.0" />
                <stop style="stop-color:#a42500;stop-opacity:1.0;" offset="1.0" />
              </linearGradient>
              <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="-1.6997875485" cx="-90.5136869577" gradientTransform="matrix(1.345908543046436, 0.0, 0.0, -1.345908543046436, 222.67304800601354, 316.8110059626103)" r="82.3037762875" id="grad9">
                <stop style="stop-color:#f65328;stop-opacity:1.0;" offset="0.0" />
                <stop style="stop-color:#a42500;stop-opacity:1.0;" offset="1.0" />
              </radialGradient>
              <radialGradient spreadMethod="pad" gradientUnits="userSpaceOnUse" cy="104.350272551" cx="-91.711392159" gradientTransform="matrix(1.345908543046436, 0.0, 0.0, -1.345908543046436, 222.67304800601354, 316.8110059626103)" r="13.2423561129" id="grad10">
                <stop style="stop-color:#f6aa00;stop-opacity:1.0;" offset="0.0" />
                <stop style="stop-color:#f4a900;stop-opacity:1.0;" offset="0.4375" />
                <stop style="stop-color:#e09c00;stop-opacity:1.0;" offset="1.0" />
              </radialGradient>
            </defs>
          <g class="goldfish">
            <path style="stroke-width:1.7095;stroke:#000000;fill-rule:evenodd;stroke-miterlimit:4.0;fill:#f6aa00;" d="M 191.4391,205.6632 C 184.3579,214.5208 189.1869,226.5974 186.0447,236.7644 185.6988,241.2636 180.2514,256.9403 180.0014,245.0566 178.1371,238.4625 178.8653,222.9478 172.4944,222.6928 168.183,230.3352 171.7292,246.3898 159.8068,247.194 157.8279,236.4843 149.7594,226.1078 135.2351,233.6591 128.9192,238.4564 154.6172,191.2236 116.9745,227.6649 124.9939,217.7407 128.1164,205.9982 126.9637,193.5792 128.8801,179.901 145.2019,176.5776 154.2393,185.7357 165.7105,194.2142 182.3835,193.5829 191.4391,205.6632 Z" />
            <path style="stroke-width:2.483;stroke:#000000;fill-rule:evenodd;stroke-miterlimit:4.0;fill:url(#grad1);" d="M 248.5306,157.3715 C 250.4894,147.7158 263.7894,140.3951 276.1702,141.2307 299.0766,151.9008 307.2121,142.1181 322.8704,152.9751 314.4917,147.2154 306.2259,137.7428 295.554,136.6006 308.9158,133.4426 316.6482,129.901 329.6039,137.3899 319.8939,121.3471 308.7663,124.4162 308.4127,122.9394 307.5782,119.4541 315.2252,116.8916 330.0885,115.4985 317.0967,111.5291 293.8046,115.296 281.4215,120.622 266.1428,128.0934 254.6373,140.2618 250.7827,153.6543 250.2247,154.9473 249.5286,156.2232 248.5306,157.3715 Z" />
            <path style="stroke-width:1.7095;stroke:#000000;fill-rule:evenodd;stroke-miterlimit:4.0;fill:url(#grad2);" d="M 133.2229,55.6246 C 143.3168,50.959 155.6594,49.5462 170.9235,52.6534 176.8171,51.3867 188.5878,53.7034 200.17,54.1675 251.2622,57.8339 246.6035,99.5883 261.1151,103.9876 295.1713,114.3121 257.1158,162.608 232.2225,195.999 184.8847,190.7359 200.1352,226.2301 155.6266,202.8391 110.7065,175.1712 85.3619,239.0651 121.3892,294.2845 128.2334,324.9802 38.411,319.292 95.3675,281.6147 70.0218,230.8805 63.7292,175.5992 65.0267,159.1916 72.9512,124.4512 107.4274,67.5481 133.2229,55.6246 Z" />
            <path style="stroke-miterlimit:4.0;stroke:#808080;stroke-width:1.2547;stroke-linecap:round;fill:url(#grad3);" d="M 207.7781,100.2472 C 213.5376,114.5516 225.8639,123.1271 235.304,119.3971 244.7441,115.6671 247.7289,101.0418 241.9694,86.7374 236.2099,72.433 223.8835,63.8575 214.4435,67.5875 205.0034,71.3175 202.0186,85.9428 207.7781,100.2472 Z" />
            <path style="fill:url(#grad4);" d="M 215.1466,99.4125 C 218.1142,106.783 224.6948,111.1111 229.8415,109.0775 234.9883,107.0439 236.7555,99.4174 233.7878,92.0469 230.8201,84.6764 224.2396,80.3484 219.0929,82.382 213.9461,84.4156 212.1789,92.042 215.1466,99.4125 Z" />
            <path style="fill:#ffffff;" d="M 224.4266,91.1275 C 224.7847,92.9731 226.5236,94.2392 228.3097,93.9548 230.0958,93.6704 231.2539,91.943 230.8958,90.0974 230.5377,88.2518 228.7989,86.9857 227.0127,87.2701 225.2266,87.5545 224.0685,89.2819 224.4266,91.1275 Z" />
            <path style="fill:#ffffff;" d="M 227.8487,95.0753 C 228.0172,95.9438 228.8355,96.5396 229.676,96.4058 230.5165,96.2719 231.0615,95.459 230.893,94.5905 230.7245,93.722 229.9062,93.1262 229.0657,93.26 228.2251,93.3939 227.6802,94.2067 227.8487,95.0753 Z" />
            <path style="stroke-miterlimit:4.0;stroke:#808080;stroke-width:1.5173;stroke-linecap:round;fill:url(#grad5);" d="M 166.4036,123.0787 C 175.5815,137.7286 191.4935,144.3783 201.9368,137.9281 212.3801,131.478 213.4064,114.3667 204.2286,99.7168 195.0508,85.067 179.1387,78.4173 168.6954,84.8674 158.2521,91.3175 157.2258,108.4289 166.4036,123.0787 Z" />
            <path style="fill:url(#grad6);" d="M 181.7127,115.9537 C 185.902,122.6409 193.3899,125.5375 198.4339,122.4221 203.4779,119.3068 204.171,111.3573 199.9817,104.6702 195.7923,97.9831 188.3044,95.0865 183.2604,98.2018 178.2164,101.3172 177.5233,109.2666 181.7127,115.9537 Z" />
            <path style="fill:#ffffff;" d="M 193.4606,107.937 C 195.5456,107.7671 196.9687,105.808 196.6386,103.562 196.3085,101.316 194.3499,99.6323 192.2649,99.8022 190.1799,99.972 188.7568,101.9311 189.0869,104.1771 189.417,106.4231 191.3756,108.1068 193.4606,107.937 Z" />
            <path style="fill:#ffffff;" d="M 194.7313,109.9762 C 195.2106,110.7717 196.2676,111.0099 197.0916,110.5082 197.9157,110.0065 198.1952,108.9546 197.7159,108.1592 197.2366,107.3637 196.1796,107.1255 195.3556,107.6272 194.5315,108.1289 194.252,109.1808 194.7313,109.9762 Z" />
            <path style="fill-rule:evenodd;fill:#550000;" d="M 195.2485,175.0092 C 206.63,166.7759 213.911,153.5571 226.378,146.7895 230.2337,145.0002 233.7329,142.3681 237.7954,141.0889 243.8854,138.9729 251.1369,137.6442 256.4775,141.1699 259.329,143.2689 261.2995,147.1288 260.1795,150.9481 257.7231,164.2293 250.7686,176.7015 242.0318,187.2685 237.0456,192.5868 241.1115,188.0592 233.8512,188.0721 224.0582,188.8878 204.1847,186.6778 196.6486,180.0483 195.7062,178.5989 195.0677,176.8533 195.2485,175.0092 Z" />
            <path style="stroke-width:1.0497;stroke:#d00000;fill-rule:evenodd;stroke-miterlimit:4.0;fill:url(#grad7);" d="M 220.1187,131.868 C 223.3009,138.49 230.0165,136.0826 233.3413,135.4218 236.7329,134.7476 242.0226,128.0711 242.4599,121.8965 248.1776,129.3595 256.4731,141.1913 261.7222,133.3869 261.2979,136.3579 260.5579,142.2831 259.7824,144.1159 260.1499,213.5463 222.0881,213.5423 188.5433,173.1664 192.5684,173.6352 201.077,167.1701 207.5748,156.2818 213.9828,145.5441 215.5611,141.8191 220.1187,131.868 Z M 243.7316,146.7831 C 238.7704,158.7502 232.2185,154.6745 226.7416,153.2612 219.1163,155.0343 203.8617,174.113 195.6644,174.9563 236.0682,202.0253 257.2153,184.5957 256.4319,143.8251 249.8176,141.1644 248.4285,137.4223 243.7316,146.7831 Z" />
            <path style="stroke-width:1.7258;stroke:#000000;fill-rule:evenodd;stroke-miterlimit:4.0;fill:url(#grad8);" d="M 192.2978,67.1371 C 190.3459,15.3858 151.5414,22.173 119.769,21.6798 179.2713,61.3995 95.7184,27.8275 60.1154,57.5509 73.2373,54.3431 112.1716,65.8151 83.8766,70.6652 64.7962,73.22 37.2814,78.3697 18.0302,100.0915 40.6788,93.4385 85.9133,113.3204 52.7772,126.1679 15.48,145.0016 31.4427,164.4654 22.5077,188.1246 59.4039,125.0541 78.4347,177.3606 43.7051,266.6578 70.7701,193.6383 92.2352,285.6774 85.3934,258.8301 56.8988,177.5196 73.9434,96.6076 159.0776,58.3161 174.1594,54.0274 187.4236,59.7745 192.2978,67.1371 Z" />
            <path style="stroke-width:1.7976;stroke:#000000;fill-rule:evenodd;stroke-miterlimit:4.0;fill:url(#grad9);" d="M 52.1114,321.4446 C 29.5873,357.7291 44.327,423.5459 20.8206,466.702 86.6124,345.38 111.0152,279.7989 192.4152,361.4666 151.7163,271.4987 128.5324,303.256 117.0566,284.3436 123.1128,311.6666 101.1718,312.9092 94.2873,289.9298 85.253,278.9386 60.2622,308.3144 52.1114,321.4446 Z" />
            <path style="stroke-width:2.6949;stroke:#000000;fill-rule:evenodd;stroke-miterlimit:4.0;fill:url(#grad10);" d="M 144.4315,175.0674 C 134.3388,169.2486 118.5534,173.462 110.7871,183.1275 100.8979,197.1002 100.1111,212.3389 82.2013,219.4949 90.8476,204.849 84.144,202.0199 90.4562,193.3718 76.5731,192.1148 71.7668,208.7586 66.94,218.3359 64.0694,210.51 73.1205,194.3001 72.0265,192.9333 69.4447,189.7077 61.8599,193.3664 50.3664,203.1709 55.7152,190.7069 75.1609,176.5312 88.5087,171.4897 105.7927,165.9449 124.733,166.6808 139.5149,173.9209 141.07,174.4843 142.7046,174.9339 144.4315,175.0674 Z" />
          </g>
          </svg>     

              <path class="wave2"
                d="M0 302L6.8 299.8C13.7 297.7 27.3 293.3 41 288.7C54.7 284 68.3 279 82 284.2C95.7 289.3 109.3 304.7 123 304C136.7 303.3 150.3 286.7 164 282.3C177.7 278 191.3 286 204.8 287.7C218.3 289.3 231.7 284.7 245.2 288.3C258.7 292 272.3 304 286 306.2C299.7 308.3 313.3 300.7 327 300.5C340.7 300.3 354.3 307.7 368 306.5C381.7 305.3 395.3 295.7 409 296.2C422.7 296.7 436.3 307.3 450 313.5C463.7 319.7 477.3 321.3 491 313.3C504.7 305.3 518.3 287.7 532 287.2C545.7 286.7 559.3 303.3 573 306.5C586.7 309.7 600.3 299.3 614 291.5C627.7 283.7 641.3 278.3 654.8 277.2C668.3 276 681.7 279 695.2 285.7C708.7 292.3 722.3 302.7 736 308.5C749.7 314.3 763.3 315.7 777 314.3C790.7 313 804.3 309 818 309.7C831.7 310.3 845.3 315.7 859 314.7C872.7 313.7 886.3 306.3 893.2 302.7L900 299L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
                fill="#00a9ff"
              ></path>
         

              <path class="wave1"
                d="M0 367L6.8 367.3C13.7 367.7 27.3 368.3 41 367.3C54.7 366.3 68.3 363.7 82 359.5C95.7 355.3 109.3 349.7 123 350.8C136.7 352 150.3 360 164 358C177.7 356 191.3 344 204.8 346.5C218.3 349 231.7 366 245.2 368C258.7 370 272.3 357 286 350.5C299.7 344 313.3 344 327 347.2C340.7 350.3 354.3 356.7 368 354.5C381.7 352.3 395.3 341.7 409 336.2C422.7 330.7 436.3 330.3 450 332.5C463.7 334.7 477.3 339.3 491 345.5C504.7 351.7 518.3 359.3 532 365.7C545.7 372 559.3 377 573 375.3C586.7 373.7 600.3 365.3 614 359.7C627.7 354 641.3 351 654.8 351.5C668.3 352 681.7 356 695.2 358.3C708.7 360.7 722.3 361.3 736 360.5C749.7 359.7 763.3 357.3 777 358.5C790.7 359.7 804.3 364.3 818 367.7C831.7 371 845.3 373 859 370.5C872.7 368 886.3 361 893.2 357.5L900 354L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
                fill="#008dfb"
              ></path>
              <path
                d="M0 390L6.8 396.8C13.7 403.7 27.3 417.3 41 418C54.7 418.7 68.3 406.3 82 403.8C95.7 401.3 109.3 408.7 123 411.3C136.7 414 150.3 412 164 415.8C177.7 419.7 191.3 429.3 204.8 435C218.3 440.7 231.7 442.3 245.2 437C258.7 431.7 272.3 419.3 286 415C299.7 410.7 313.3 414.3 327 415.3C340.7 416.3 354.3 414.7 368 415C381.7 415.3 395.3 417.7 409 423.5C422.7 429.3 436.3 438.7 450 436.2C463.7 433.7 477.3 419.3 491 415.3C504.7 411.3 518.3 417.7 532 423.7C545.7 429.7 559.3 435.3 573 434.7C586.7 434 600.3 427 614 427.8C627.7 428.7 641.3 437.3 654.8 436.3C668.3 435.3 681.7 424.7 695.2 417.2C708.7 409.7 722.3 405.3 736 409.7C749.7 414 763.3 427 777 428.3C790.7 429.7 804.3 419.3 818 413.5C831.7 407.7 845.3 406.3 859 405.5C872.7 404.7 886.3 404.3 893.2 404.2L900 404L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
                fill="#006fef"
              ></path>
              <path
                d="M0 506L6.8 503.2C13.7 500.3 27.3 494.7 41 492.5C54.7 490.3 68.3 491.7 82 491.3C95.7 491 109.3 489 123 481.8C136.7 474.7 150.3 462.3 164 464.5C177.7 466.7 191.3 483.3 204.8 492.7C218.3 502 231.7 504 245.2 503.7C258.7 503.3 272.3 500.7 286 500C299.7 499.3 313.3 500.7 327 493.5C340.7 486.3 354.3 470.7 368 464C381.7 457.3 395.3 459.7 409 468.5C422.7 477.3 436.3 492.7 450 495.8C463.7 499 477.3 490 491 489.5C504.7 489 518.3 497 532 497.8C545.7 498.7 559.3 492.3 573 490C586.7 487.7 600.3 489.3 614 484.7C627.7 480 641.3 469 654.8 467.2C668.3 465.3 681.7 472.7 695.2 479.7C708.7 486.7 722.3 493.3 736 491.3C749.7 489.3 763.3 478.7 777 471.8C790.7 465 804.3 462 818 461C831.7 460 845.3 461 859 460C872.7 459 886.3 456 893.2 454.5L900 453L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
                fill="#004ede"
              ></path>
              <path
                d="M0 565L6.8 558.8C13.7 552.7 27.3 540.3 41 535.5C54.7 530.7 68.3 533.3 82 531.2C95.7 529 109.3 522 123 525.8C136.7 529.7 150.3 544.3 164 551.5C177.7 558.7 191.3 558.3 204.8 558.2C218.3 558 231.7 558 245.2 550.8C258.7 543.7 272.3 529.3 286 523.8C299.7 518.3 313.3 521.7 327 527.5C340.7 533.3 354.3 541.7 368 545C381.7 548.3 395.3 546.7 409 545.7C422.7 544.7 436.3 544.3 450 547C463.7 549.7 477.3 555.3 491 556.2C504.7 557 518.3 553 532 552.2C545.7 551.3 559.3 553.7 573 556.2C586.7 558.7 600.3 561.3 614 559C627.7 556.7 641.3 549.3 654.8 547.8C668.3 546.3 681.7 550.7 695.2 546.8C708.7 543 722.3 531 736 524.8C749.7 518.7 763.3 518.3 777 520.7C790.7 523 804.3 528 818 532.2C831.7 536.3 845.3 539.7 859 536.2C872.7 532.7 886.3 522.3 893.2 517.2L900 512L900 601L893.2 601C886.3 601 872.7 601 859 601C845.3 601 831.7 601 818 601C804.3 601 790.7 601 777 601C763.3 601 749.7 601 736 601C722.3 601 708.7 601 695.2 601C681.7 601 668.3 601 654.8 601C641.3 601 627.7 601 614 601C600.3 601 586.7 601 573 601C559.3 601 545.7 601 532 601C518.3 601 504.7 601 491 601C477.3 601 463.7 601 450 601C436.3 601 422.7 601 409 601C395.3 601 381.7 601 368 601C354.3 601 340.7 601 327 601C313.3 601 299.7 601 286 601C272.3 601 258.7 601 245.2 601C231.7 601 218.3 601 204.8 601C191.3 601 177.7 601 164 601C150.3 601 136.7 601 123 601C109.3 601 95.7 601 82 601C68.3 601 54.7 601 41 601C27.3 601 13.7 601 6.8 601L0 601Z"
                fill="#2e24c7"
              ></path>
            </svg>
            
          </div>
        </div>
      </div>
    </div>
              
            
!

CSS

              
                html {
  box-sizing: border-box;
  font-size: 10px;
}

body {
  font-size: 1.6rem;
  width: 900px;
  margin: auto;
  padding: 20px;
  background-color: rgb(17, 53, 3);
}

.container {
  margin: auto;
  border: 6px solid #333;
  border-radius: 90px;
  background: rgb(95, 180, 230);
  box-shadow: 7px 7px 37px 7px #7d9b37;
}

.container,
.skylayer,
.middle,
.sealayer {
  width: 900px;
  height: 600px;
  transform: translateZ(0);
  overflow: hidden;
}

#cloud {
  animation: floatingcloud 80s ease-in-out infinite;
  
}

.middle {
  background: url("https://jocular-pastelito-3d6039.netlify.app/sailing-boat.svg"), url("https://jocular-pastelito-3d6039.netlify.app/sailing-boat-orange.svg");
  animation: ships 35s linear infinite;
  transform: translateZ(0);
}

.wave1 {
  animation: waves1 3s ease-in-out infinite;
}

.wave2 {
  animation: waves2 3s ease-in-out infinite;
}

.goldfish {
  animation: fish 10s ease-in-out infinite;
}

@keyframes floatingcloud {
  0% {
    background-position: 200% 0px;
  }

  50% {
    transform: translate(190%);
  }

  100% {
    background-position: 200% 0px;
  }
}

@keyframes ships {
  100% {
    background-position: 1000% 0;
  }
}

@keyframes waves1 {
  0% {
    transform: rotate(0.5deg);
  }

  50% {
    transform: rotate(-0.5deg);
  }

  100% {
    transform: rotate(0.5deg);
  }
}

@keyframes waves2 {
  0% {
    transform: rotate(-1deg);
  }

  50% {
    transform: rotate(1deg);
  }

  100% {
    transform: rotate(-1deg);
  }
}



@keyframes floatingcloud {
  0% {
    background-position: 200% 0px;
  }

  50% {
    transform: translate(190%);
  }

  100% {
    background-position: 200% 0px;
  }
}

@keyframes fish {
  0% {
    transform: translate(110px, 500px) rotate(140deg) scale(1);
    transform-origin: left;
  }

  25% {
    transform: translate(140px, 10px) rotate(410deg) scale(1);
  }

  40% {
    transform: rotate(10deg) translate(810px, 440px) scale(1.5);
  }

  50% {
    transform: translate(1000px, 40px) rotate(-270deg) scale(1.75);
  }

  75% {
    transform: translate(1400px, 40px) rotate(90deg) scale(1.25);
  }

  85% {
    transform: translate(1800px, 440px) rotate(90deg) scale(1.5);
  }

  100% {
    transform: translate(3500px, -400px) rotate(40deg) scale(1);
  }
}

              
            
!

JS

              
                
              
            
!
999px

Console