<!-- 
1. Tutorial： https://levelup.gitconnected.com/making-your-first-svg-animations-d79aad48f014
2. Author: @Jeremie https://levelup.gitconnected.com/@jeremie.roberrini
-->
<div class="container">
  <svg width="120" height="280" viewBox="0 0 60 140" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g id="solar">
      <g clip-path="url(#clip0)">
        <g id="element">
          <rect id="maskbg" width="60" height="140" rx="30" fill="#3E477B" />
          <circle id="sun" cx="30" cy="147" r="37" fill="#FFD97E" />
          <g id="stars">
            <path id="Star 5" d="M13.5 32L13.744 33.256L15 33.5L13.744 33.744L13.5 35L13.256 33.744L12 33.5L13.256 33.256L13.5 32Z" fill="#F8ECCF" />
            <path id="Star 6" d="M36.5 21L36.744 22.256L38 22.5L36.744 22.744L36.5 24L36.256 22.744L35 22.5L36.256 22.256L36.5 21Z" fill="#F8ECCF" />
            <path id="Star 7" d="M51.5 33L51.744 34.256L53 34.5L51.744 34.744L51.5 36L51.256 34.744L50 34.5L51.256 34.256L51.5 33Z" fill="#F8ECCF" />
            <path id="Star 8" d="M46.5 54L46.744 55.256L48 55.5L46.744 55.744L46.5 57L46.256 55.744L45 55.5L46.256 55.256L46.5 54Z" fill="#F8ECCF" />
            <path id="Star 9" d="M15.5 83L15.744 84.256L17 84.5L15.744 84.744L15.5 86L15.256 84.744L14 84.5L15.256 84.256L15.5 83Z" fill="#F8ECCF" />
            <path id="Star 14" d="M36.5 7L36.744 8.25605L38 8.5L36.744 8.74395L36.5 10L36.256 8.74395L35 8.5L36.256 8.25605L36.5 7Z" fill="#F8ECCF" />
            <path id="Star 12" d="M47.5 79L47.744 80.256L49 80.5L47.744 80.744L47.5 82L47.256 80.744L46 80.5L47.256 80.256L47.5 79Z" fill="#F8ECCF" />
            <path id="Star 13" d="M39.5 103L39.744 104.256L41 104.5L39.744 104.744L39.5 106L39.256 104.744L38 104.5L39.256 104.256L39.5 103Z" fill="#F8ECCF" />
            <path id="Star 10" d="M7.5 58L7.74395 59.256L9 59.5L7.74395 59.744L7.5 61L7.25605 59.744L6 59.5L7.25605 59.256L7.5 58Z" fill="#F8ECCF" />
            <path id="Star 11" d="M26.5 55L26.744 56.256L28 56.5L26.744 56.744L26.5 58L26.256 56.744L25 56.5L26.256 56.256L26.5 55Z" fill="#F8ECCF" />
          </g>
          <g id="mercury">
            <path id="mercurypath" d="M-6 109.5C-6 109.5 7.5 90 30.5 90C53.5 90 66.5 109.5 66.5 109.5" stroke="white" stroke-opacity="0.5" stroke-width="0.5" />
            <circle id="mercury_2" cx="00" cy="00" r="2" fill="#2F2A2A">
              <animateMotion dur="2s" begin="0" repeatCount="indefinite" fill="freeze" path="M-6 109.5C-6 109.5 7.5 90 30.5 90C53.5 90 66.5 109.5 66.5 109.5" />

            </circle>
          </g>
          <g id="mars">
            <path id="marspath" d="M-6 34.5C-6 34.5 7.5 15 30.5 15C53.5 15 66.5 34.5 66.5 34.5" stroke="white" stroke-opacity="0.5" stroke-width="0.5" />
            <circle id="mars_2" cx="0" cy="0" r="2" fill="#FFD97E">
              <animateMotion dur="5s" begin="0" repeatCount="indefinite" fill="freeze" path="M-6 34.5C-6 34.5 7.5 15 30.5 15C53.5 15 66.5 34.5 66.5 34.5" />
              />
            </circle>
          </g>
          <g id="venus">
            <path id="venuspath" d="M-6 84.5C-6 84.5 7.5 65 30.5 65C53.5 65 66.5 84.5 66.5 84.5" stroke="white" stroke-opacity="0.5" stroke-width="0.5" />
            <circle id="Venus" cx="0" cy="0" r="3" fill="#FC5FAB">
              <animateMotion dur="3s" begin="0" repeatCount="indefinite" fill="freeze" path="M-6 84.5C-6 84.5 7.5 65 30.5 65C53.5 65 66.5 84.5 66.5 84.5" />
              />
            </circle>

          </g>
          <g id="earth">
            <path id="earthpath" d="M-6 59.5C-6 59.5 7.5 40 30.5 40C53.5 40 66.5 59.5 66.5 59.5" stroke="white" stroke-opacity="0.5" stroke-width="0.5" />
            <g id="earth_2">
              <circle id="earth_3" cx="0" cy="0" r="4" fill="#90CDF9">
                <animateMotion dur="4s" begin="0" repeatCount="indefinite" fill="freeze" path="M-6 59.5C-6 59.5 7.5 40 30.5 40C53.5 40 66.5 59.5 66.5 59.5" />
                />
              </circle>

            </g>
          </g>
        </g>
        <g id="overlay">
          <path id="Border" fill-rule="evenodd" clip-rule="evenodd" d="M56 110V30C56 15.6406 44.3594 4 30 4C15.6406 4 4 15.6406 4 30V110C4 124.359 15.6406 136 30 136C44.3594 136 56 124.359 56 110ZM30 0C13.4315 0 0 13.4315 0 30V110C0 126.569 13.4315 140 30 140C46.5685 140 60 126.569 60 110V30C60 13.4315 46.5685 0 30 0Z" fill="url(#paint0_linear)" fill-opacity="0.4" />
          <circle id="large light" cx="19.5" cy="14.5" r="5.5" fill="white" fill-opacity="0.7" />
          <circle id="mini light" cx="24" cy="16" r="2" fill="white" fill-opacity="0.8" />
          <path id="sidemoon" d="M46 127C39 133.5 26.5 137 12 125.5C31 128.5 48 114.5 54 96C53.5 113.5 53 120.5 46 127Z" fill="white" fill-opacity="0.1" />
        </g>
      </g>
    </g>
    <defs>
      <linearGradient id="paint0_linear" x1="0.500001" y1="0.999999" x2="60" y2="140" gradientUnits="userSpaceOnUse">
        <stop stop-color="white" stop-opacity="0.8" />
        <stop offset="1" stop-color="white" stop-opacity="0.5" />
      </linearGradient>
      <clipPath id="clip0">
        <rect width="60" height="140" rx="30" fill="white" />
      </clipPath>
    </defs>
  </svg>
</div>
<div class="container">
  <svg width="120" height="280" viewBox="0 0 60 140" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
      <rect width="60" height="140" rx="30" fill="#90CDF9" />
      <path d="M0 0H42C42 22 21 22 21 44C21 66 42 66 42 88C42 110 19 110 19 132C19 154 42 154 42 176C42 198 17 198 17 220C17 242 42 242.5 42 264H0V0Z" fill="#7AC4F9">
        <!--water-->
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="3s" values="0,-85;0,0" repeatCount="indefinite" ease-in="cubic-bezier(0.46,0.03,0.52,0.96)" ease-out="cubic-bezier(0.46,0.03,0.52,0.96)" />
      </path>

      <g id="fish">
        <g id="bottom">
          <path d="M30 90.5C25 90.5 12 110 20 106C28 102 32 102 40 106C48 110 35 90.5 30 90.5Z" fill="#F8ECCF">
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" transform-origin="50% 50%" values="-1.5 30 -10;1.5 30 -10;-1.5 30 -10" repeatCount="indefinite" />

          </path>
          <g id="wing">
            <path d="M46 73.5C46 66.5 40 58.5 40 58.5C40 58.5 33.4491 73.8935 37.5 71C41 68.5 46 76.9601 46 73.5Z" fill="#F8ECCF" />
            <path d="M14 70.5C14 63.5 20 58 20 58C20 58 26.0509 71.8935 22 69C18.5 66.5 14 73.9601 14 70.5Z" fill="#F8ECCF" />
            <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" transform-origin="50% 50%" values="-1 30 -10;1 30 -10;-1 30 -10" repeatCount="indefinite" />
          </g>
          <g id="body">
            <path d="M29.1265 94.8947C25.9953 87.2023 15.7406 60.667 20 53C25 44 34.5 44 40 53C44.6875 60.6705 34.1212 87.2266 30.8971 94.9052C30.5589 95.7106 29.4558 95.7037 29.1265 94.8947Z" fill="#FC5FAB" />
            <path d="M29.2281 95.1439C26.2248 87.7939 15.6933 60.7521 20 53C25 44 29.5 39 31 52C32.2734 63.0361 30.6641 87.7651 30.1488 94.9849C30.1116 95.506 29.4258 95.6275 29.2281 95.1439Z" fill="#FF8585" />
          </g>
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" transform-origin="50% 50%" values="-3 30 -20;3 30 -20;-3 30 -20" repeatCount="indefinite" />
        </g>
        <g id="head">
          <path d="M30 34C30 34 16.5 48 20 54C22 56.5 30 56.5 30 56.5C30 56.5 38 56.5 40 54C44 49 30 34 30 34Z" fill="#F8ECCF" />
          <path d="M30 34C30 34 16.5 48 20 54C22 56.5 30 56.5 30 56.5C30 56.5 31 51.5 31 47.5C31 43.5 30 34 30 34Z" fill="#FFFAEE" />
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" transform-origin="50% 50%" values="-3 30 0;3 30 0;-3 30 0" repeatCount="indefinite" />
        </g>
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="2s" transform-origin="50% 50%" values="-2 30 0;2 30 0;-2 30 0" repeatCount="indefinite" />
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="20s" values="-2,-10;2,10;-2,-10" repeatCount="indefinite" ease-in="cubic-bezier(0.46,0.03,0.52,0.96)" ease-out="cubic-bezier(0.46,0.03,0.52,0.96)" />

      </g>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M56 110V30C56 15.6406 44.3594 4 30 4C15.6406 4 4 15.6406 4 30V110C4 124.359 15.6406 136 30 136C44.3594 136 56 124.359 56 110ZM30 0C13.4315 0 0 13.4315 0 30V110C0 126.569 13.4315 140 30 140C46.5685 140 60 126.569 60 110V30C60 13.4315 46.5685 0 30 0Z" fill="url(#paint0_linear)" fill-opacity="0.4" />
      <circle cx="19.5" cy="14.5" r="5.5" fill="white" fill-opacity="0.7" />
      <circle cx="24" cy="16" r="2" fill="white" fill-opacity="0.8" />
      <path d="M46 127C39 133.5 26.5 137 12 125.5C31 128.5 48 114.5 54 96C53.5 113.5 53 120.5 46 127Z" fill="white" fill-opacity="0.1" />
    </g>
    <defs>
      <linearGradient id="paint0_linear" x1="0.500001" y1="0.999999" x2="60" y2="140" gradientUnits="userSpaceOnUse">
        <stop stop-color="white" stop-opacity="0.8" />
        <stop offset="1" stop-color="white" stop-opacity="0.5" />
      </linearGradient>
      <clipPath id="clip0">
        <rect width="60" height="140" rx="30" fill="white" />
      </clipPath>
    </defs>
  </svg>
</div>
<div class="container">
  <svg width="120" height="280" viewBox="0 0 60 140" fill="none" xmlns="http://www.w3.org/2000/svg">
    <g clip-path="url(#clip0)">
      <g>
        <path d="M-17 63C-2.00008 63 -2 77 12.9999 77C27.9999 77 29 63 43 63C56.9999 63 57.5 76 72.9999 76C88.4999 76 87.9999 63 103 63V223H-17V63Z" fill="#605DDB">
          <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.5s" values="-50,0;+10,0" repeatCount="indefinite" />
        </path>
        <path d="M0 63C14.9999 63 15 77 29.9999 77C44.9999 77 46 63 60 63C73.9999 63 74.5 76 89.9999 76C105.5 76 105 63 120 63V223H0V63Z" fill="#8684FF">
          <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1.5s" values="0,0;-60,0" repeatCount="indefinite" />
        </path>
        <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="4s" values="0,-75;0,+60;0,-75" repeatCount="indefinite" ease-in="cubic-bezier(0.46,0.03,0.52,0.96)" ease-out="cubic-bezier(0.46,0.03,0.52,0.96)" />
      </g>
      <path fill-rule="evenodd" clip-rule="evenodd" d="M56 110V30C56 15.6406 44.3594 4 30 4C15.6406 4 4 15.6406 4 30V110C4 124.359 15.6406 136 30 136C44.3594 136 56 124.359 56 110ZM30 0C13.4315 0 0 13.4315 0 30V110C0 126.569 13.4315 140 30 140C46.5685 140 60 126.569 60 110V30C60 13.4315 46.5685 0 30 0Z" fill="url(#paint0_linear)" fill-opacity="0.4" />
      <circle cx="19.5" cy="14.5" r="5.5" fill="white" fill-opacity="0.7" />
      <circle cx="24" cy="16" r="2" fill="white" fill-opacity="0.8" />
      <path d="M46 127C39 133.5 26.5 137 12 125.5C31 128.5 48 114.5 54 96C53.5 113.5 53 120.5 46 127Z" fill="white" fill-opacity="0.1" />
    </g>
    <defs>
      <linearGradient id="paint0_linear" x1="0.500001" y1="0.999999" x2="60" y2="140" gradientUnits="userSpaceOnUse">
        <stop stop-color="white" stop-opacity="0.8" />
        <stop offset="1" stop-color="white" stop-opacity="0.5" />
      </linearGradient>
      <clipPath id="clip0">
        <rect width="60" height="140" rx="30" fill="white" />
      </clipPath>
    </defs>
  </svg>
</div>

body {
  width: 100vw;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #2a356f;
}

body > div {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}