<!--

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

Created: 2025-05-16T23:21:01+00:00
-->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512"  >
  <title>Mother's Day Bash: Hugs, Flowers &amp; Giggles</title>
  <desc>This scene is blooming with love, cake, and laughs—because every mom deserves more than just a bouquet! Why did the flower give its mom a hug? It was feeling a little stem-otional.</desc>
  <metadata type="keywords">Mother's Day, celebration, flowers, family, love</metadata>
  <!-- Background: cheerful pastel wallpaper & window -->
  <rect id="bg-rect" class="background" width="512" height="512" fill="#ffe6f7"/>
  <rect id="window" class="window" x="320" y="60" width="130" height="180" rx="18" ry="18" fill="#b2e6ff" stroke="#61bfff" stroke-width="6"/>
  <rect id="window-pane1" class="window-pane" x="340" y="80" width="42" height="70" fill="#e0f7fa" opacity="0.7"/>
  <rect id="window-pane2" class="window-pane" x="396" y="80" width="34" height="70" fill="#b3e5fc" opacity="0.6"/>
  <rect id="window-pane3" class="window-pane" x="340" y="160" width="90" height="60" fill="#b2ebf2" opacity="0.3"/>
  <!-- Stripes on the wall -->
  <g id="bg-stripes" class="bg-stripes">
    <rect x="0" y="0" width="30" height="512" fill="#fff6fb" opacity="0.4"/>
    <rect x="60" y="0" width="20" height="512" fill="#fff6fb" opacity="0.4"/>
    <rect x="120" y="0" width="20" height="512" fill="#fff6fb" opacity="0.4"/>
    <rect x="200" y="0" width="32" height="512" fill="#fff6fb" opacity="0.4"/>
    <rect x="350" y="0" width="18" height="512" fill="#fff6fb" opacity="0.28"/>
    <rect x="420" y="0" width="20" height="512" fill="#efdffc" opacity="0.26"/>
  </g>
  <!-- Mother figure, smiling and holding flowers -->
  <g id="mother" class="mother">
    <!-- Body -->
    <ellipse id="mom-body" class="mother-body" cx="175" cy="350" rx="64" ry="98" fill="#ffe0b2" stroke="#542403" stroke-width="3"/>
    <!-- Dress -->
    <ellipse id="dress-front" class="dress" cx="175" cy="366" rx="67" ry="82" fill="#eeabe7"/>
    <!-- Left arm -->
    <path id="left-arm" class="mother-arm" d="M120,295 Q99,343 120,395 Q130,408 145,385" fill="none" stroke="#fad4c1" stroke-width="16" stroke-linecap="round"/>
    <!-- Right arm -->
    <path id="right-arm" class="mother-arm" d="M238,304 Q255,329 240,376 Q235,390 220,372" fill="none" stroke="#fad4c1" stroke-width="16" stroke-linecap="round"/>
    <!-- Head -->
    <ellipse id="mom-head" class="mother-head" cx="175" cy="222" rx="44" ry="56" fill="#fad4c1" stroke="#542403" stroke-width="3"/>
    <!-- Hair -->
    <ellipse id="mom-hair" class="mother-hair" cx="175" cy="185" rx="48" ry="38" fill="#81401f"/>
    <!-- Fringe -->
    <path id="mom-fringe" class="mother-fringe" d="M128,210 Q160,165 222,216 Q208,188 187,177 Q153,188 149,213z" fill="#ad6650"/>
    <!-- Smile and cheeky blush -->
    <ellipse id="cheek-left" class="cheek" cx="156" cy="235" rx="10" ry="6" fill="#ff82a9" opacity="0.6">
      <animate attributeName="opacity" values="0.3;0.6;0.3" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <ellipse id="cheek-right" class="cheek" cx="194" cy="235" rx="10" ry="6" fill="#ff82a9" opacity="0.5">
      <animate attributeName="opacity" values="0.2;0.5;0.2" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <path id="mom-smile" class="mouth" d="M160,262 Q176,272 191,258" stroke="#913227" stroke-width="3.5" fill="none"/>
    <!-- Eyes -->
    <ellipse id="eye-l" class="eye" cx="161" cy="228" rx="6" ry="7" fill="#2e180a">
      <animate attributeName="ry" values="7;1;7" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <ellipse id="eye-r" class="eye" cx="191" cy="228" rx="6" ry="7" fill="#2e180a">
      <animate attributeName="ry" values="7;1;7" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <!-- Bouquet of flowers (held just under right arm) -->
    <g id="bouquet" class="bouquet">
      <ellipse id="flower1-petal-a" class="flower-petal" cx="222" cy="319" rx="18" ry="6" fill="#fcd347" transform="rotate(-25 222 319)">
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 222 319" to="7 222 319" dur="3s" values="-12  222 319;14 222 319;-12  222 319" keyTimes="0;0.65;1" repeatCount="indefinite"/>
      </ellipse>
      <ellipse id="flower1-petal-b" class="flower-petal" cx="222" cy="319" rx="6" ry="18" fill="#faf1e3" transform="rotate(22 222 319)">
        <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="22 222 319" to="-5 222 319" dur="5s" values="22 222 319;-12  222 319;22 222 319" keyTimes="0;0.52;1" repeatCount="indefinite"/>
      </ellipse>
      <circle id="flower1-center" class="flower-center" cx="222" cy="319" r="9" fill="#ff6aa6"/>
      <!-- Another bloom -->
      <ellipse id="flower2-petal" class="flower-petal" cx="211" cy="334" rx="14" ry="6" fill="#aad374" transform="rotate(0 211 334)">
        <animateTransform attributeName="transform" attributeType="XML" type="scale" additive="sum" from="1 1" to="1.22 1.13" begin="0.6s" dur="4s" values="1 1;1.22 1.13;1 1" keyTimes="0;0.7;1" keySplines="0.24 0.64 0.36 1;0.24 0.64 0.36 1" calcMode="spline" repeatCount="indefinite"/>
      </ellipse>
      <circle id="flower2-center" class="flower-center" cx="211" cy="334" r="7" fill="#fa6fed"/>
      <!-- Small pink blossom -->
      <ellipse id="flower3-petal" class="flower-petal" cx="233" cy="333" rx="8" ry="5" fill="#fa9fe0" transform="rotate(0 233 333)">
        <animateTransform attributeName="transform" attributeType="XML" type="scale" additive="replace" from="1 1" to="1.35 1.15" begin="1.2s" dur="5s" values="1 1;1.35 1.15;1 1" keyTimes="0;0.84;1" keySplines="0.24 0.64 0.36 1;0.24 0.64 0.36 1" calcMode="spline" repeatCount="indefinite"/>
      </ellipse>
      <circle id="flower3-center" class="flower-center" cx="233" cy="333" r="5" fill="#dac508"/>
      <!-- Flower stems -->
      <path id="bouquet-stem1" class="flower-stem" d="M222,319 Q219,350 220 375" stroke="#9bd274" stroke-width="4" fill="none"/>
      <path id="bouquet-stem2" class="flower-stem" d="M211,334 Q209,362 215 374" stroke="#53b646" stroke-width="4" fill="none"/>
      <path id="bouquet-stem3" class="flower-stem" d="M233,333 Q240,364 225 373" stroke="#9eae19" stroke-width="4" fill="none"/>
      <!-- Animated bouquet wiggle -->
      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="-2 222 330" to="6 222 330" dur="5s" values="-2 222 330;6 222 330;-2 222 330" keyTimes="0;0.53;1" repeatCount="indefinite"/>
    </g>
  </g>
  <!-- Child hugging mother -->
  <g id="child" class="child">
    <!-- Outline for body -->
    <ellipse id="child-body" class="child-body" cx="115" cy="410" rx="36" ry="66" fill="#b3e3ff" stroke="#154672" stroke-width="2.5"/>
    <!-- Head -->
    <ellipse id="child-head" class="child-head" cx="114" cy="364" rx="28" ry="26" fill="#ffe6c6"/>
    <!-- Hair -->
    <ellipse id="child-hair-back" class="child-hair" cx="109" cy="359" rx="25" ry="14" fill="#23281b"/>
    <ellipse id="child-hair-top" class="child-hair" cx="114" cy="350" rx="24" ry="10" fill="#827015"/>
    <!-- Blush cheeks -->
    <ellipse id="child-cheek-left" class="child-cheek" cx="104" cy="370" rx="4" ry="2" fill="#fc779e" opacity="0.6">
      <animate attributeName="opacity" values="0.6;0;0.6" keyTimes="0;0.45;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <!-- Eyes closed: hug -->
    <path id="child-eye-l" class="child-eye" d="M107,368 Q112,371 115,368" stroke="#37240b" stroke-width="2.8" fill="none">
      <animate attributeName="d" values="M107,368 Q112,371 115,368;M107,368 Q112,371 116,369;M107,368 Q112,371 115,368" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <path id="child-eye-r" class="child-eye" d="M123,369 Q127,372 130,370" stroke="#37240b" stroke-width="2.8" fill="none">
       <animate attributeName="d" values="M123,369 Q127,372 130,370;M124,369 Q127,370 129,372;M123,369 Q127,372 130,370" keyTimes="0;0.55;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- Smile -->
    <path id="child-mouth" class="child-mouth" d="M112,375 Q114,377 118,375" stroke="#712433" stroke-width="2" fill="none"/>
    <!-- Left arm hugging mom -->
    <path id="child-arm-left" class="child-arm" d="M98,385 Q60,390 140,333 Q144,340 125,395" fill="none" stroke="#fdd7ad" stroke-width="11" stroke-linecap="round">
      <animate attributeName="d" values="M98,385 Q60,390 140,333 Q144,340 125,395;M98,390 Q46,400 142,334 Q145,338 127,398;M98,385 Q60,390 140,333 Q144,340 125,395" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- Right arm -->
    <path id="child-arm-right" class="child-arm" d="M134,391 Q154,395 183,379" fill="none" stroke="#fdd7ad" stroke-width="11" stroke-linecap="round"/>
  </g>
  <!-- Table with treats, cake, teacups -->
  <g id="table" class="table">
    <rect id="table-main" class="table-top" x="250" y="390" width="180" height="36" rx="16" fill="#fff5dc" stroke="#da971b" stroke-width="4"/>
    <ellipse id="table-shadow" class="table-shadow" cx="340" cy="432" rx="106" ry="14" fill="#f7dab0" opacity="0.33"/>
    <!-- Cake -->
    <g id="cake" class="cake">
      <ellipse id="cake-top" class="cake-top" cx="312" cy="403" rx="36" ry="12" fill="#ffd8ea" stroke="#902456" stroke-width="2.4"/>
      <rect id="cake-body" class="cake-body" x="276" y="403" width="72" height="22" rx="15" fill="#ffe4b1" stroke="#d08794"/>
      <ellipse id="cake-bottom" class="cake-bottom" cx="312" cy="425" rx="36" ry="11" fill="#fcd0dd" opacity="0.81"/>
      <!-- Cake candle -->
      <rect id="cake-candle" class="cake-candle" x="309" y="387" width="6" height="19" rx="3" fill="#fff4a9" stroke="#ffbb0b"/>
      <ellipse id="cake-candle-flame" class="candle-flame" cx="312" cy="386" rx="5" ry="8" fill="#ffe066" opacity="0.93">
        <animate attributeName="ry" values="8;12;10;8" keyTimes="0;0.25;0.55;1" dur="1.2s" repeatCount="indefinite"/>
        <animate attributeName="cy" values="386;380;386" keyTimes="0;0.25;1" dur="1.2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.93;0.7;0.93;1" keyTimes="0;0.24;0.73;1" dur="1.2s" repeatCount="indefinite"/>
        <animate attributeName="fill" values="#ffe066;#fff2a0;#ffe7a0;#ffe066" keyTimes="0;0.3;0.6;1" dur="1.2s" repeatCount="indefinite"/>
      </ellipse>
    </g>
    <!-- Teacups and little treats -->
    <g id="table-treats" class="treats">
      <!-- Cups -->
      <ellipse id="cup1-base" class="teacup" cx="250" cy="413" rx="13" ry="7" fill="#fff7ee" stroke="#dec67b" stroke-width="2.2"/>
      <path id="cup1-handle" class="cup-handle" d="M262,411 Q272,414 264,421" stroke="#c19755" stroke-width="2.5" fill="none"/>
      <ellipse id="cup2-base" class="teacup" cx="390" cy="419" rx="10" ry="6" fill="#f5fefc" stroke="#6fc1a2" stroke-width="1.6"/>
      <!-- Small pastries -->
      <ellipse id="pastry1" class="pastry" cx="355" cy="415" rx="10" ry="6" fill="#e2826b"/>
      <ellipse id="pastry2" class="pastry" cx="372" cy="412" rx="10" ry="5.2" fill="#dec195"/>
      <ellipse id="choco" class="pastry-choco" cx="330" cy="419" rx="8" ry="6" fill="#602415"/>
      <ellipse id="strawberry" class="pastry-straw" cx="277" cy="416" rx="6" ry="11" fill="#eb2341"/>
    </g>
  </g>
  <!-- Balloons for celebration -->
  <g id="balloons" class="balloons">
    <!-- Pink Balloon -->
    <ellipse id="balloon-pink" class="balloon" cx="75" cy="140" rx="34" ry="46" fill="#ffadce" stroke="#e65499" stroke-width="5" opacity="0.72">
      <animate attributeName="cy" repeatCount="indefinite" values="140;105;140" keyTimes="0;0.55;1" dur="5s"/>
    </ellipse>
    <path id="string-pink" class="balloon-string" d="M75,186 Q90,234 74,270 Q70,286 74,292" fill="none" stroke="#b9897b" stroke-width="2"/>
    <!-- Blue Balloon -->
    <ellipse id="balloon-blue" class="balloon" cx="145" cy="75" rx="28" ry="38" fill="#86e3fa" stroke="#2787c8" stroke-width="5" opacity="0.68">
      <animate attributeName="cy" repeatCount="indefinite" values="75;55;75" keyTimes="0;0.37;1" dur="5s"/>
    </ellipse>
    <path id="string-blue" class="balloon-string" d="M145,113 Q153,171 141,212 Q139,228 143,233" fill="none" stroke="#284e5c" stroke-width="2"/>
    <!-- Purple Balloon -->
    <ellipse id="balloon-purple" class="balloon" cx="60" cy="235" rx="22" ry="32" fill="#cd7bfa" stroke="#733cd6" stroke-width="5" opacity="0.7">
      <animate attributeName="cy" repeatCount="indefinite" values="235;220;235" keyTimes="0;0.7;1" dur="5s"/>
    </ellipse>
    <path id="string-purple" class="balloon-string" d="M60,267 Q65,278 59,312" fill="none" stroke="#737577" stroke-width="2"/>
    <!-- Yellow Balloon with heart-->
    <ellipse id="balloon-yellow" class="balloon" cx="420" cy="105" rx="25" ry="42" fill="#fff89c" stroke="#ffb847" stroke-width="5" opacity="0.67">
      <animate attributeName="cy" repeatCount="indefinite" values="105;89;105" keyTimes="0;0.46;1" dur="5s"/>
    </ellipse>
    <path id="string-yellow" class="balloon-string" d="M424,145 Q438,180 421,219 Q417,227 420,249" fill="none" stroke="#a8ab23" stroke-width="2"/>
    <!-- Heart shape decor on yellow balloon -->
    <path id="balloon-heart" class="balloon-heart" d="M421,101 Q415,91 411,101 Q421,115 431,101 Q427,91 421,101Z" fill="#fd7eae" opacity="0.95">
      <animate attributeName="opacity" values="0.9;0.32;0.9" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </path>
  </g>
  <!-- Banner says "Happy Mother's Day" -->
  <g id="banner" class="banner">
    <path id="banner-curve" class="banner-curve" d="M52,52 Q256,15 460,61 Q450,60 450,80 Q225,60 64,110" fill="#f3a0c8" stroke="#f4ffee" stroke-width="7" opacity="0.8"/>
    <text id="banner-text" class="banner-text" x="257" y="54" font-family="Comic Sans MS, cursive" font-size="37" fill="#fff5e7" stroke="#ff82af" stroke-width="2.3" text-anchor="middle">
      <tspan id="banner-tspan" class="banner-tspan">Happy Mother&apos;s Day!</tspan>
      <animate attributeName="y" values="54;64;54" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
      <animate attributeName="fill" values="#fff5e7;#fff9ee;#fff5e7" keyTimes="0;0.52;1" dur="5s" repeatCount="indefinite"/>
    </text>
  </g>
  <!-- Confetti animation: colorful dots cascade down and loop -->
  <g id="confetti" class="confetti">
    <!-- Multiple confetti circles, scattered and animated with SMIL -->
    <circle id="confetti1" class="confetti-piece" cx="80" cy="50" r="6" fill="#d3b2ff" opacity="0.85">
      <animate attributeName="cy" values="50;510;50" keyTimes="0;0.83;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cx" values="80;95;80" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.8;0.95;0.8" keyTimes="0;0.35;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle id="confetti2" class="confetti-piece" cx="110" cy="80" r="5" fill="#ffe060" opacity="0.93">
      <animate attributeName="cy" values="80;456;80" keyTimes="0;0.92;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cx" values="110;128;110" keyTimes="0;0.43;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.93;0.55;0.93" keyTimes="0;0.72;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle id="confetti3" class="confetti-piece" cx="260" cy="60" r="7" fill="#6cebc1">
      <animate attributeName="cy" values="60;460;60" keyTimes="0;0.86;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cx" values="260;232;260" keyTimes="0;0.8;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="r" values="7;11;7" keyTimes="0;0.47;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle id="confetti4" class="confetti-piece" cx="444" cy="90" r="6" fill="#fc8092" opacity="0.86">
      <animate attributeName="cy" values="90;511;90" keyTimes="0;0.82;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cx" values="444;446;444" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle id="confetti5" class="confetti-piece" cx="382" cy="39" r="5" fill="#eabd68" opacity="0.54">
      <animate attributeName="cy" values="39;509;39" keyTimes="0;0.6;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.54;1;0.54" keyTimes="0;0.46;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle id="confetti6" class="confetti-piece" cx="296" cy="131" r="7" fill="#95f95d" opacity="0.69">
      <animate attributeName="cy" values="131;511;131" keyTimes="0;0.56;1" dur="5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="0.69;1;0.69" keyTimes="0;0.78;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle id="confetti7" class="confetti-piece" cx="468" cy="142" r="8" fill="#ff82b3">
      <animate attributeName="cy" values="142;505;142" keyTimes="0;0.92;1" dur="5s" repeatCount="indefinite" />
    </circle>
    <circle id="confetti8" class="confetti-piece" cx="182" cy="68" r="7" fill="#baa9e9" opacity="0.79">
      <animate attributeName="cy" values="68;491;68" keyTimes="0;0.63;1" dur="5s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.66;0.89;0.66" keyTimes="0;0.22;1" dur="5s" repeatCount="indefinite"/>
    </circle>
  </g>
  <!-- Animated hearts float above mom and child -->
  <g id="hearts" class="animation-hearts">
    <path id="heart1" class="heart" d="M164,196 Q155,178 170,183 Q164,169 174,180 Q194,170 185,189 Q195,198 180,204 Q175,200 170,207 Q155,200 164,196Z" 
      fill="#ff7fa9" opacity="0.86">
      <animateTransform attributeName="transform" type="translate" from="0 0" to="0 -26" dur="5s" values="0 0;0 -26;0 0" keyTimes="0;0.48;1" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.86;0.55;0.86" keyTimes="0;0.48;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <path id="heart2" class="heart" d="M130,238 Q122,223 134,226 Q131,217 138,222 Q147,215 142,226 Q150,230 141,237 Q137,233 133,240 Q122,234 130,238Z" 
      fill="#fd91b8" opacity="0.73">
      <animateTransform attributeName="transform" type="translate" from="0 0" to="2 -17" begin="1s" dur="5s" values="0 0;2 -17;0 0" keyTimes="0;0.87;1" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.73;0.32;0.73" keyTimes="0;0.87;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <path id="heart3" class="heart" d="M190,269 Q185,260 193,263 Q192,256 196,258 Q204,256 202,263 Q205,267 197,270 Q196,267 195,272 Q188,274 190,269Z"
      fill="#faa4bc" opacity="0.72">
      <animateTransform attributeName="transform" type="translate" from="0 0" to="-7 -14" begin="0.55s" dur="5s" values="0 0;-7 -14;0 0" keyTimes="0;0.62;1" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="0.72;0.45;0.72" keyTimes="0;0.79;1" dur="5s" repeatCount="indefinite"/>
    </path>
  </g>
</svg>