<!--



Generated by DrawGPT.

Free, open source, AI generated images in SVG, PNG, and HTML Canvas format.

https://drawgpt.ai



Created: 2025-05-17T16:12:35+00:00

-->

<svg xmlns="http://www.w3.org/2000/svg"

     xmlns:xlink="http://www.w3.org/1999/xlink"

     viewBox="0 0 512 512"

     width="512"

     height="512">

  <title>Weekend Fun: Sun, Relaxing Chair, Drinks &amp; Laughs</title>

  <desc>No Mondays allowed! Enjoy beach chairs, giggling sun, wiggly drinks, and silly clouds arm wrestling. Sunblock not included!</desc>

  <metadata type="keywords">weekend,relax,beach,fun,sun</metadata>



  <!-- Background sky gradient -->

  <defs>

    <linearGradient id="id-bg-gradient" x1="0" y1="0" x2="0" y2="1">

      <stop offset="0%" stop-color="#ffe87c"/>

      <stop offset="100%" stop-color="#74c0fc"/>

    </linearGradient>

    <radialGradient id="id-sun-glow" cx="50%" cy="45%" r="70%" fx="50%" fy="45%">

      <stop offset="0%" stop-color="#fffcd3" stop-opacity="1"/>

      <stop offset="100%" stop-color="#ffe557" stop-opacity="0.45"/>

    </radialGradient>

  </defs>

  <rect id="id-sky" class="background" width="512" height="512" fill="url(#id-bg-gradient)" />



  <!-- Animated sun with face -->

  <g id="id-sunGroup" class="sun">

    <!-- Sun glow -->

    <circle id="id-sun-glow" class="sun-glow" cx="390" cy="90" r="70" fill="url(#id-sun-glow)" opacity="0.7">

      <animate attributeName="opacity" values="0.7;1;0.7" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>

    </circle>

    <!-- Sun body -->

    <circle id="id-sun" class="sun-face" cx="390" cy="90" r="45" fill="#ffe557" stroke="#fbb03b" stroke-width="5" />

    <!-- Sun rays (animated) -->

    <g id="id-rays" class="rays">

      <g>

        <line id="id-ray1" class="sun-ray" x1="390" y1="30" x2="390" y2="0" stroke="#ffef85" stroke-width="7" stroke-linecap="round">

          <animate attributeName="y2" values="0;18;0" keyTimes="0;0.5;1" begin="0s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

      <g>

        <line id="id-ray2" class="sun-ray" x1="435" y1="45" x2="460" y2="20" stroke="#ffef85" stroke-width="6" stroke-linecap="round">

          <animate attributeName="x2" values="460;475;460" keyTimes="0;0.5;1" begin="0.2s" dur="5s" repeatCount="indefinite"/>

          <animate attributeName="y2" values="20;5;20" keyTimes="0;0.5;1" begin="0.2s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

      <g>

        <line id="id-ray3" class="sun-ray" x1="460" y1="85" x2="492" y2="85" stroke="#fbe870" stroke-width="5" stroke-linecap="round">

          <animate attributeName="x2" values="492;504;492" keyTimes="0;0.5;1" begin="0.4s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

      <g>

        <line id="id-ray4" class="sun-ray" x1="435" y1="130" x2="460" y2="165" stroke="#d8cc5a" stroke-width="5" stroke-linecap="round">

          <animate attributeName="x2" values="460;472;460" keyTimes="0;0.5;1" begin="0.6s" dur="5s" repeatCount="indefinite"/>

          <animate attributeName="y2" values="165;190;165" keyTimes="0;0.5;1" begin="0.6s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

      <g>

        <line id="id-ray5" class="sun-ray" x1="390" y1="150" x2="390" y2="187" stroke="#ffe062" stroke-width="7" stroke-linecap="round">

          <animate attributeName="y2" values="187;206;187" keyTimes="0;0.5;1" begin="0.8s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

      <g>

        <line id="id-ray6" class="sun-ray" x1="345" y1="130" x2="322" y2="160" stroke="#fff49a" stroke-width="6" stroke-linecap="round">

          <animate attributeName="x2" values="322;306;322" keyTimes="0;0.5;1" begin="1.0s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

      <g>

        <line id="id-ray7" class="sun-ray" x1="320" y1="90" x2="280" y2="110" stroke="#fbe956" stroke-width="6" stroke-linecap="round">

          <animate attributeName="x2" values="280;264;280" keyTimes="0;0.5;1" begin="1.2s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

      <g>

        <line id="id-ray8" class="sun-ray" x1="345" y1="45" x2="323" y2="13" stroke="#e2c220" stroke-width="5" stroke-linecap="round">

          <animate attributeName="x2" values="323;308;323" keyTimes="0;0.5;1" begin="1.4s" dur="5s" repeatCount="indefinite"/>

          <animate attributeName="y2" values="13;0;13" keyTimes="0;0.5;1" begin="1.4s" dur="5s" repeatCount="indefinite"/>

        </line>

      </g>

    </g>



    <!-- Sun face (eyes, mouth) animated to "giggle" up/down -->

    <ellipse id="id-sun-eye-left" class="sun-eye" cx="378" cy="97" rx="5" ry="8" fill="#5c4630">

      <animate attributeName="cy" values="97;100;97" dur="5s" repeatCount="indefinite" />

    </ellipse>

    <ellipse id="id-sun-eye-right" class="sun-eye" cx="402" cy="97" rx="5" ry="8" fill="#5c4630">

      <animate attributeName="cy" values="97;100;97" dur="5s" repeatCount="indefinite" />

    </ellipse>

    <path id="id-sun-mouth" class="sun-mouth"

          d="M380 112 Q390 122 400 112"

          stroke="#5c4630" stroke-width="3" fill="none">

      <animate attributeName="d"

        values="

        M380 112 Q390 122 400 112;

        M380 112 Q390 126 400 112;

        M380 112 Q390 122 400 112"

        keyTimes="0;0.5;1"

        dur="5s" repeatCount="indefinite"/>

    </path>

  </g>



  <!-- Beach sand foreground -->

  <ellipse id="id-beach" class="beach" cx="260" cy="480" rx="320" ry="90" fill="#fde6ac" opacity="1" />



  <!-- Animated Arm-Wrestling Clouds -->

  <g id="id-clouds-group" class="clouds">

    <!-- Left Cloud -->

    <g id="id-cloud-left" class="cloud">

      <ellipse id="id-clbody1" class="cloud-body" cx="105" cy="80" rx="55" ry="30" fill="#fff" opacity="0.93"/>

      <ellipse id="id-clbody2" class="cloud-body" cx="155" cy="90" rx="25" ry="18" fill="#f8fcff"/>

      <ellipse id="id-clbody3" class="cloud-body" cx="78" cy="96" rx="18" ry="14" fill="#e9f6fa"/>

      <!-- Left Cloud arm (animated up)-->

      <rect id="id-clarm1" class="cloud-arm" x="150" y="95" rx="10" ry="10" width="45" height="16" fill="#e4f1fa">

        <animateTransform attributeName="transform" type="rotate"

          from="0 159 103" to="25 159 103" dur="2.5s" begin="0s" repeatCount="indefinite" />

        <animateTransform attributeName="transform" type="rotate"

          from="25 159 103" to="0 159 103" dur="2.5s" begin="2.5s" repeatCount="indefinite" />

      </rect>

    </g>

    <!-- Right Cloud -->

    <g id="id-cloud-right" class="cloud">

      <ellipse id="id-crbody1" class="cloud-body" cx="230" cy="70" rx="44" ry="23" fill="#f6fcfe"/>

      <ellipse id="id-crbody2" class="cloud-body" cx="215" cy="95" rx="20" ry="14" fill="#e8f9fa"/>

      <ellipse id="id-crbody3" class="cloud-body" cx="258" cy="80" rx="17" ry="11" fill="#e2f5f8"/>

      <!-- Right Cloud arm (animated up) -->

      <rect id="id-crarm1" class="cloud-arm" x="209" y="85" rx="7" ry="7" width="40" height="12" fill="#ddeef5">

        <animateTransform attributeName="transform" type="rotate"

          from="0 249 91" to="-22 249 91" dur="2.5s" begin="2.5s" repeatCount="indefinite" />

        <animateTransform attributeName="transform" type="rotate"

          from="-22 249 91" to="0 249 91" dur="2.5s" begin="0s" repeatCount="indefinite" />

      </rect>

    </g>

  </g>

  <!-- Lounge chair with drink (animated umbrella) -->

  <g id="id-lounge-chair-group" class="chair">

    <!-- Chair back -->

    <rect id="id-chair-back" class="chair-back" x="120" y="350" width="18" height="110" fill="#dab27a" stroke="#9d7c4b" rx="8" stroke-width="3"

      transform="rotate(-12 129 405)"/>

    <!-- Seat -->

    <rect id="id-chair-seat" class="chair-seat" x="110" y="425" width="75" height="20" fill="#f0d3b6" stroke="#98753f" rx="6" stroke-width="3"

      transform="rotate(-14 147 435)"/>

    <!-- Chair legs -->

    <rect id="id-chair-leg1" class="chair-leg" x="125" y="438" width="10" height="48" rx="3" fill="#cfb079" />

    <rect id="id-chair-leg2" class="chair-leg" x="165" y="442" width="12" height="44" rx="3" fill="#cfb079" />



    <!-- Cushion stripes -->

    <rect id="id-cushion-stripe1" class="chair-cushion" x="114" y="428" width="7" height="15" rx="2" fill="#e46e56"/>

    <rect id="id-cushion-stripe2" class="chair-cushion" x="124" y="428" width="7" height="15" rx="2" fill="#74bddd"/>



    <!-- Tropical smoothie cup -->

    <ellipse id="id-sm-cup" class="drink-cup" cx="164" cy="420" rx="11" ry="13" fill="#faf6ed" stroke="#d4baa6" stroke-width="2"/>

    <rect id="id-sm-straw" class="drink-straw" x="168" y="410" width="5" height="23" fill="#ea5c52" rx="1.8"/>

    <ellipse id="id-sm-top" class="drink-lid" cx="166.5" cy="413" rx="12.5" ry="4" fill="#8fe267" opacity="0.75"/>

    <!-- Animated Umbrella -->

    <g id="id-umbrella-group" class="umbrella">

      <line id="id-umb-stick" class="umbrella-stick" x1="163" y1="409" x2="158" y2="375" stroke="#be9a6a" stroke-width="2.5"/>

      <ellipse id="id-umb-shadow" class="umbrella-shadow" cx="153" cy="375" rx="7" ry="6" fill="#e3d376" opacity="0.29"/>

      <!-- Umbrella canopy - waves open and close animation -->

      <path id="id-umb-canopy" class="umbrella-canopy"

            d="M158 375 Q160 360 170 372 Q175 363 185 370 Q190 359 201 371 Q205 363 214 375 Q186 380 158 375 Z"

            fill="#f74332" stroke="#902008" stroke-width="2">

        <animate attributeName="d"

            values="

            M158 375 Q160 360 170 372 Q175 363 185 370 Q190 359 201 371 Q205 363 214 375 Q186 380 158 375 Z;

            M158 375 Q165 355 170 372 Q185 345 185 370 Q195 355 201 371 Q215 355 214 375 Q186 380 158 375 Z;

            M158 375 Q160 360 170 372 Q175 363 185 370 Q190 359 201 371 Q205 363 214 375 Q186 380 158 375 Z"

            keyTimes="0;0.5;1"

            dur="5s" repeatCount="indefinite" />

      </path>

      <!-- Umbrella golden stripes -->

      <path id="id-umb-stripe1" class="umbrella-stripe"

            d="M170 374 Q176 362 185 370"

            stroke="#ffe26a" stroke-width="3" fill="none" opacity="0.64">

        <animate attributeName="d"

          values="

           M170 374 Q176 362 185 370;

           M170 372 Q176 348 185 370;

           M170 374 Q176 362 185 370"

          keyTimes="0;0.5;1"

          dur="5s" repeatCount="indefinite"/>

      </path>

      <path id="id-umb-stripe2" class="umbrella-stripe"

            d="M201 371 Q208 364 211 373"

            stroke="#f2d441" stroke-width="2" fill="none" opacity="0.64">

        <animate attributeName="d"

          values="

           M201 371 Q208 364 211 373;

           M201 371 Q215 351 211 373;

           M201 371 Q208 364 211 373"

          keyTimes="0;0.5;1"

          dur="5s" repeatCount="indefinite"/>

      </path>

    </g>

  </g>



  <!-- Animated Cute Beach Crab waving claws and eyes blinking -->

  <g id="id-crab" class="crab">

    <!-- Crab body -->

    <ellipse id="id-crab-body" class="crab-body" cx="358" cy="470" rx="28" ry="18" fill="#e74015" stroke="#ad2212" stroke-width="3"/>

    <!-- Eyes with animated up/down for blink -->

    <g id="id-crab-eyes" class="crab-eyes">

      <ellipse id="id-cbeye1" class="crab-eye" cx="347" cy="458" rx="4" ry="6" fill="#fff"/>

      <ellipse id="id-cbeye2" class="crab-eye" cx="369" cy="458" rx="4" ry="6" fill="#fff"/>

      <!-- Eyeballs: animate "blink" -->

      <ellipse id="id-cbeyeball1" class="crab-eyeball" cx="347" cy="460" rx="2" ry="2" fill="#391c03">

        <animate attributeName="ry" values="2;0.1;2" keyTimes="0;0.35;1" repeatCount="indefinite" dur="5s"/>

      </ellipse>

      <ellipse id="id-cbeyeball2" class="crab-eyeball" cx="369" cy="460" rx="2" ry="2" fill="#391c03">

        <animate attributeName="ry" values="2;0.1;2" keyTimes="0;0.35;1" repeatCount="indefinite" dur="5s"/>

      </ellipse>

    </g>

    <!-- Crab smile -->

    <path id="id-crab-mouth" class="crab-mouth"

     d="M353 472 Q357 478 363 473" stroke="#930500" stroke-width="2" fill="none"/>

    <!-- Crab left claw -->

    <g id="id-claw-left" class="crab-claw">

      <path d="M332 462 Q325 441 350 454" stroke="#e15327" stroke-width="8" fill="none">

        <animateTransform attributeName="transform" type="rotate"

          from="0 335 464" to="-15 335 464" dur="1s" begin="0s" repeatCount="indefinite"/>

        <animateTransform attributeName="transform" type="rotate"

          from="-15 335 464" to="0 335 464" dur="1s" begin="1s" repeatCount="indefinite"/>

      </path>

      <ellipse cx="321" cy="449" rx="6" ry="8" fill="#c83d12" transform="rotate(-25 321 449)">

        <animateTransform attributeName="transform" type="scale"

          values="1 1;1.2 1.2;1 1" keyTimes="0;0.5;1"

          additive="sum"

          begin="0s" dur="2s" repeatCount="indefinite"/>

      </ellipse>

    </g>

    <!-- Crab right claw -->

    <g id="id-claw-right" class="crab-claw">

      <path d="M382 464 Q391 447 370 454" stroke="#e15327" stroke-width="8" fill="none">

        <animateTransform attributeName="transform" type="rotate"

          from="0 385 460" to="21 385 460" dur="1s" begin="2.5s" repeatCount="indefinite"/>

        <animateTransform attributeName="transform" type="rotate"

          from="21 385 460" to="0 385 460" dur="1s" begin="3.5s" repeatCount="indefinite"/>

      </path>

      <ellipse cx="394" cy="449" rx="6" ry="7" fill="#c83d12" transform="rotate(18 394 449)">

        <animateTransform attributeName="transform" type="scale"

          values="1 1;1.24 1.24;1 1" keyTimes="0;0.4;1"

          additive="sum"

          begin="2.5s" dur="2s" repeatCount="indefinite"/>

      </ellipse>

    </g>

    <!-- Crab Legs, both sides -->

    <!-- Left legs -->

    <rect id="id-crab-leg-l1" class="crab-leg" x="333" y="481" width="4" height="23" rx="1.0" fill="#c83d12" transform="rotate(-20 333 481)"/>

    <rect id="id-crab-leg-l2" class="crab-leg" x="340" y="484" width="3" height="17" rx="1.0" fill="#c83d12" transform="rotate(-8 340 484)"/>

    <rect id="id-crab-leg-l3" class="crab-leg" x="349" y="487" width="2.7" height="15" rx="1.0" fill="#c83d12" transform="rotate(3 349 487)"/>

    <!-- Right legs -->

    <rect id="id-crab-leg-r1" class="crab-leg" x="366" y="484" width="3.2" height="17" rx="1.0" fill="#c83d12" transform="rotate(12 369 484)"/>

    <rect id="id-crab-leg-r2" class="crab-leg" x="376" y="482.5" width="2.7" height="14" rx="1.0" fill="#c83d12" transform="rotate(24 378 484)"/>

    <rect id="id-crab-leg-r3" class="crab-leg" x="384" y="480" width="3" height="18" rx="1.0" fill="#c83d12" transform="rotate(45 388 490)"/>

  </g>



  <!-- Sea waves (sepia to blue) -->

  <g id="id-waves-group" class="waves">

    <path id="id-wave1" class="wave"

      d="M-5 347 Q100 375 230 347 T512 350 L512 448 L0 439 Z"

      fill="#90cdf7" opacity="0.55">

      <animateTransform attributeName="transform" type="translate"

        from="0 0" to="16 7" dur="2.5s" repeatCount="indefinite" begin="0s"/>

      <animateTransform attributeName="transform" type="translate"

        from="16 7" to="0 0" dur="2.5s" repeatCount="indefinite" begin="2.5s"/>

    </path>

    <path id="id-wave2" class="wave"

      d="M0 377 Q140 389 250 386 T520 377 L 520 399 L0 410 Z"

      fill="#bee0fa" opacity="0.34">

      <animateTransform attributeName="transform" type="translate"

        from="0 0" to="-25 2" dur="1.6s" repeatCount="indefinite" begin="0.6s"/>

      <animateTransform attributeName="transform" type="translate"

        from="-25 2" to="0 0" dur="1.6s" repeatCount="indefinite" begin="2.2s"/>

    </path>

    <ellipse id="id-wave-highlight" class="wavehighlight" cx="150" cy="400" rx="55" ry="12" fill="#eed379" opacity="0.13"/>

  </g>



  <!-- A frisbee mid-air above the crab -->

  <ellipse id="id-frisbee" class="frisbee" cx="300" cy="410" rx="35" ry="8" fill="#fa618d" stroke="#be224a" stroke-width="2"

           opacity="0.86">

    <animate attributeName="cx" values="300;390;300" dur="5s" repeatCount="indefinite"/>

    <animate attributeName="cy" values="410;340;410" dur="5s" repeatCount="indefinite"/>

    <animateTransform attributeName="transform"

      type="rotate"

      from="0 300 410"

      to="360 300 410"

      dur="2.5s"

      repeatCount="indefinite"/>

  </ellipse>

</svg>