<!--

Generated by DrawGPT.
Free, open source, AI generated images in SVG, PNG, and HTML Canvas format.
https://drawgpt.ai

Created: 2025-05-16T23:21:00+00:00
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"  >
  <title>Epic Surfing Day!</title>
  <desc>A cool surfer rides a wave as a crab cheers from the sand. Surf's up, wipeouts are down!</desc>
  <metadata type="keywords">surfing, ocean, waves, beach, fun</metadata>

  <!-- Background sea gradient -->
  <defs>
    <linearGradient id="bgsea" x1="0%" y1="60%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#5adae7"/>
      <stop offset="100%" stop-color="#0077b3"/>
    </linearGradient>
    <linearGradient id="bgsky" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" stop-color="#f6fad5"/>
      <stop offset="100%" stop-color="#72dbf8"/>
    </linearGradient>
    <linearGradient id="surfboard-grad" x1="0%" y1="25%" x2="100%" y2="75%">
      <stop offset="0%" stop-color="#fed850"/>
      <stop offset="100%" stop-color="#ff5e62"/>
    </linearGradient>
    <radialGradient id="wave-highlight" cx="50%" cy="40%" r="60%">
      <stop offset="0%" stop-color="#fff" stop-opacity="0.8"/>
      <stop offset="40%" stop-color="#bdf6fd" stop-opacity="0.4"/>
      <stop offset="100%" stop-color="#24b6e8" stop-opacity="0.2"/>
    </radialGradient>  
  </defs>

  <!-- Sky and setting sun -->
  <rect id="bg-sky" class="sky" x="0" y="0" width="512" height="320" fill="url(#bgsky)"/>
  <ellipse id="sun" class="sun" cx="72" cy="106" rx="44" ry="36" fill="#fff7b6">
    <animate attributeName="cy" values="106;126;106" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    <animate attributeName="opacity" values="1;0.8;1" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
  </ellipse>
  
  <!-- Clouds -->
  <g id="clouds" class="clouds">
    <ellipse id="cloud1" class="cloud" cx="260" cy="85" rx="32" ry="14" fill="#fff" opacity="0.87"/>
    <ellipse id="cloud2" class="cloud" cx="390" cy="58" rx="24" ry="10" fill="#fff" opacity="0.82">
      <animate attributeName="cx" values="390;460;390" keyTimes="0;0.7;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <ellipse id="cloud3" class="cloud" cx="180" cy="54" rx="17" ry="8" fill="#fff" opacity="0.85">
      <animate attributeName="cx" values="180;240;180" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
  </g>

  <!-- Sea -->
  <rect id="bg-sea" class="sea" x="0" y="185" width="512" height="255" fill="url(#bgsea)" />

  <!-- Animated Large Main Wave -->
  <g id="main-wave" class="wave">
    <path id="wave-shadow" class="waveBase" d="
      M 0,270 
      Q 120,250 255,312 
      Q 360,340 512,252 
      L 512,440 
      L 0,440 
      Z
    " fill="#0688c9" opacity="0.15"/>
    <path id="wave-top" class="waveTop" d="
      M 0,308
      Q 90,245 255,324 
      Q 420,410 512,268 
      L 512,445 
      L 0,445 
      Z
    " fill="url(#wave-highlight)" opacity="0.8">
      <animate attributeName="d"
        values="M 0,308 Q 90,245 255,324 Q 420,410 512,268 L 512,445 L 0,445 Z;
                M 0,293 Q 110,255 266,303 Q 420,375 512,280 L 512,445 L 0,445 Z;
                M 0,308 Q 90,245 255,324 Q 420,410 512,268 L 512,445 L 0,445 Z"
        keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- Animated breaking white wave crest -->
    <path id="wave-crest" class="waveCrest" 
      d="M 180,275 Q 205,265 255,295 Q 305,325 380,255"
      fill="none" stroke="#fff" stroke-width="13" stroke-linecap="round" opacity="0.94">
      <animate attributeName="d"
        values="M 180,275 Q 205,265 255,295 Q 305,325 380,255;
                M 175,270 Q 210,245 260,277 Q 320,295 385,265;
                M 180,275 Q 205,265 255,295 Q 305,325 380,255"
        keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- White spray drops -->
    <g id="wave-spray" class="waveSpray">
      <ellipse id="spray1" class="sprayDrop" cx="220" cy="255" rx="5" ry="3" fill="#fff" opacity="0.7">
        <animate attributeName="cy" values="255;238;255" keyTimes="0;0.4;1" dur="5s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.7;0.1;0.7" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
      </ellipse>
      <ellipse id="spray2" class="sprayDrop" cx="255" cy="266" rx="3" ry="1.5" fill="#fff" opacity="0.65">
        <animate attributeName="cy" values="266;252;266" keyTimes="0;0.41;1" dur="5s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.65;0.2;0.65" keyTimes="0;0.51;1" dur="5s" repeatCount="indefinite"/>
      </ellipse>
      <ellipse id="spray3" class="sprayDrop" cx="291" cy="282" rx="2.4" ry="1.1" fill="#fff" opacity="0.5">
        <animate attributeName="cy" values="282;260;282" keyTimes="0;0.49;1" dur="5s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.5;0.09;0.5" keyTimes="0;0.69;1" dur="5s" repeatCount="indefinite"/>
      </ellipse>
      <ellipse id="spray4" class="sprayDrop" cx="340" cy="258" rx="2.2" ry="1" fill="#fff" opacity="0.45">
        <animate attributeName="cy" values="258;247;258" keyTimes="0;0.36;1" dur="5s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.45;0.05;0.45" keyTimes="0;0.57;1" dur="5s" repeatCount="indefinite"/>
      </ellipse>
    </g>
  </g>
  
  <!-- Surfer on Board -->
  <g id="surfer" class="surfer">
    <!-- Surfboard -->
    <ellipse id="surfboard" class="surfboard" cx="260" cy="315" rx="59" ry="13" fill="url(#surfboard-grad)" stroke="#ec9232" stroke-width="2">
      <animate attributeName="transform" attributeType="XML"
        type="rotate"
        values="2 260 315;-5 260 315;2 260 315"
        keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>

    <!-- Bod shadow animation follows surfboard -->
    <ellipse id="board-shadow" class="surfboardShadow" cx="262" cy="329" rx="47" ry="7" fill="#203948" opacity="0.23">
      <animate attributeName="cx" values="262;267;262" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="329;334;329" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>

    <!-- Animated legs -->
    <ellipse id="leg-left" class="surferLeg" cx="240" cy="300" rx="6" ry="19" fill="#f9c88e" transform="rotate(-15 240 300)">
      <animate attributeName="cx" values="240;235;240" keyTimes="0;0.4;1" dur="5s" repeatCount="indefinite"/>
      <animate attributeName="cy" values="300;307;300" keyTimes="0;0.4;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <ellipse id="leg-right" class="surferLeg" cx="273" cy="304" rx="6" ry="19" fill="#e3b889" transform="rotate(13 273 304)">
      <animate attributeName="cx" values="273;276;273" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>

    <!-- Shorts with silly palm tree pattern -->
    <rect id="shorts" class="surferShorts" x="238" y="282" width="35" height="24" rx="9" fill="#2584c4" stroke="#11507d" stroke-width="2">
      <animate attributeName="y" values="282;286;282" keyTimes="0;0.52;1" dur="5s" repeatCount="indefinite"/>
    </rect>
    <!-- funny palm pattern -->
    <g id="shortspattern" class="pattern">
      <circle id="palm1" class="patternDot" cx="247" cy="292" r="2" fill="#cce869"/>
      <ellipse id="palm2" class="patternDot" cx="260" cy="300" rx="1.3" ry="2.1" fill="#cce869" />
      <ellipse id="palm3" class="patternDot" cx="270" cy="288" rx="2" ry="1" fill="#a4db34" />
    </g>

    <!-- Body -->
    <ellipse id="body" class="surferBody" cx="257" cy="277" rx="17" ry="29" fill="#ffe2c2" stroke="#d1975e" stroke-width="1.5">
      <animate attributeName="cy" values="277;273;277" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    
    <!-- Surfer's face with animated smile -->
    <ellipse id="face" class="surferFace" cx="257" cy="260" rx="12" ry="13" fill="#ffd083" stroke="#d8aa6e" stroke-width="1.2"/>
    <ellipse id="eye-l" class="surferEye" cx="253.5" cy="258.8" rx="1.4" ry="1.5" fill="#222"/>
    <ellipse id="eye-r" class="surferEye" cx="262.2" cy="257.2" rx="1.4" ry="1.6" fill="#222"/>
    <path id="smile" class="smile" d="M253,264 C257,270 261,267 263,264" stroke="#bf7200" stroke-width="1.1" fill="none">
      <animate attributeName="d"
        values="M253,264 C257,270 261,267 263,264;M253,264 C257,274 261,269 263,264;M253,264 C257,270 261,267 263,264" 
        keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </path>
    
    <!-- Hair (sticky and windblown) -->
    <path id="hair" class="surferHair" d="M245,249 Q256,246 264,252 Q266,250 271,247 Q262,257 264,260 Q261,250 246,250 Z"
      fill="#ac6908" stroke="#7b4e1a" stroke-width="1.2">
      <animate attributeName="d"
        values="
        M245,249 Q256,246 264,252 Q266,250 271,247 Q262,257 264,260 Q261,250 246,250 Z;
        M242,253 Q258,242 268,251 Q274,252 276,250 Q265,256 266,260 Q261,253 242,253 Z;
        M245,249 Q256,246 264,252 Q266,250 271,247 Q262,257 264,260 Q261,250 246,250 Z"
        keyTimes="0;0.63;1" dur="5s" repeatCount="indefinite"/>
    </path>
    
    <!-- Left arm waving -->
    <path id="arm-left" class="surferArm" d="M242,262 Q222,255 230,241 Q235,240 242,256"
      stroke="#f5bc76" stroke-width="7.5" fill="none" stroke-linecap="round">
      <animate attributeName="d"
        values="M242,262 Q222,255 230,241 Q235,240 242,256;
                M255,256 Q239,245 243,233 Q244,230 255,246;
                M242,262 Q222,255 230,241 Q235,240 242,256"
        keyTimes="0;0.55;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- Right arm dabbing -->
    <path id="arm-right" class="surferArm" d="M267,258 Q285,261 296,249"
      stroke="#e0ae6b" stroke-width="7.2" fill="none" stroke-linecap="round">
      <animate attributeName="d"
        values="M267,258 Q285,261 296,249;
                M272,264 Q304,265 300,246;
                M267,258 Q285,261 296,249"
        keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
    </path>
  </g>

  <!-- Funny scene: Crab on the sunny shore cheering -->
  <g id="beach-scene" class="beach">
    <!-- The sandy beach -->
    <ellipse id="sand" class="sand" cx="136" cy="402" rx="124" ry="45" fill="#ffe8b3" stroke="#f3c481" stroke-width="2"/>
    <!-- Crab body -->
    <ellipse id="crab-body" class="crabBody" cx="77" cy="417" rx="17" ry="11" fill="#fd493c" stroke="#e41712" stroke-width="2"/>
    <!-- Crab eyes -->
    <g id="crab-eyes" class="crabEyes">
      <ellipse id="crabl-eyeMound" class="crabEyeStalk" cx="70" cy="409" rx="3" ry="5" fill="#fd493c"/>
      <ellipse id="crabr-eyeMound" class="crabEyeStalk" cx="84" cy="409" rx="3" ry="5" fill="#fd493c"/>
      <circle id="crabeye-l" class="crabEye" cx="70" cy="406" r="2.3" fill="#fff"/>
      <circle id="crabeye-r" class="crabEye" cx="84" cy="406" r="2.3" fill="#fff"/>
      <circle id="crabeye-in-l" class="crabEyeInner" cx="70.7" cy="406.3" r="1.2" fill="#190a0a"/>
      <circle id="crabeye-in-r" class="crabEyeInner" cx="84.4" cy="406.8" r="1.2" fill="#190a0a"/>
      <animate xlink:href="#crabeye-in-l" attributeName="cy" from="406.3" to="404.7" dur="2.5s" repeatCount="indefinite" 
        values="406.3;404.7;406.3" keyTimes="0;0.5;1"/>
      <animate xlink:href="#crabeye-in-r" attributeName="cy" from="406.8" to="404.5" dur="2.5s" repeatCount="indefinite" 
        values="406.8;404.5;406.8" keyTimes="0;0.4;1"/>
    </g>
    <!-- Crab legs moving up and down like cheering -->
    <g id="crab-legs" class="crabLegs">
      <!-- Left legs -->
      <path id="crableg-l1" class="crabLeg" d="M61,419 C44,420 54,435 70,426" stroke="#fd493c" stroke-width="4" fill="none">
        <animate attributeName="d"
          values="M61,419 C44,420 54,435 70,426;
                  M61,413 C42,410 52,440 74,427;
                  M61,419 C44,420 54,435 70,426"
          keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
      </path>
      <path id="crableg-l2" class="crabLeg" d="M63,429 C56,438 66,439 74,431" stroke="#fd493c" stroke-width="3" fill="none"/>
      <!-- Right legs -->
      <path id="crableg-r1" class="crabLeg" d="M93,417 C108,434 102,437 85,427" stroke="#fd493c" stroke-width="4" fill="none">
        <animate attributeName="d"
          values="M93,417 C108,434 102,437 85,427;
                  M93,411 C119,454 99,448 88,425;
                  M93,417 C108,434 102,437 85,427"
          keyTimes="0;0.7;1" dur="5s" repeatCount="indefinite"/>
      </path>
      <path id="crableg-r2" class="crabLeg" d="M96,426 C104,440 90,440 85,432" stroke="#fd493c" stroke-width="3" fill="none"/>
      <!-- Claws waving -->
      <path id="crabclaw-l" class="crabClaw" d="M58,413 C48,402 43,414 61,419" stroke="#ffb37a" stroke-width="4" fill="none" stroke-linecap="round">
        <animate attributeName="d"
          values="M58,413 C48,402 43,414 61,419;
                  M54,410 C36,386 36,415 62,419;
                  M58,413 C48,402 43,414 61,419"
          keyTimes="0;0.4;1" dur="5s" repeatCount="indefinite"/>
      </path>
      <path id="crabclaw-r" class="crabClaw" d="M96,410 C110,398 120,412 93,417" stroke="#ffb37a" stroke-width="4" fill="none" stroke-linecap="round">
        <animate attributeName="d"
          values="M96,410 C110,398 120,412 93,417;
                  M99,406 C132,381 113,428 95,414;
                  M96,410 C110,398 120,412 93,417"
          keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
      </path>
    </g>
    <!-- Crab smile -->
    <path id="crab-smile" class="crabSmile" d="M73,425 Q77,431 81,425" stroke="#96301e" stroke-width="2" fill="none">
      <animate attributeName="d"
        values="M73,425 Q77,431 81,425;M74,426 Q77,438 79,426;M73,425 Q77,431 81,425"
        keyTimes="0;0.37;1" dur="5s" repeatCount="indefinite"/>
    </path>
  </g>

  <!-- Beach ball tumbling on shore -->
  <g id="beach-ball" class="beachBall">
    <circle id="ball" class="beachBallBody" cx="193" cy="400" r="19" fill="#ffffff" stroke="#1aaaf8" stroke-width="4">
      <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0 193 400"
        to="360 193 400"
        dur="5s"
        repeatCount="indefinite"/>
    </circle>
    <!-- Colorful pattern -->
    <path id="ball-pattern" class="beachBallPattern" d="M193,400 L204,383 A19,19 1 0,1 197,381 z" fill="#d11544" opacity="0.92">
      <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0 193 400"
        to="360 193 400"
        dur="5s"
        repeatCount="indefinite"/>
    </path>
    <path id="ball-pattern2" class="beachBallPattern" d="M193,400 L181,383 A19,19 1 0,0 186,381 z" fill="#6ade26" opacity="0.74">
      <animateTransform attributeName="transform"
        attributeType="XML"
        type="rotate"
        from="0 193 400"
        to="360 193 400"
        dur="5s"
        repeatCount="indefinite"/>
    </path>
  </g>
</svg>