<!--

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

Created: 2025-05-16T23:20:50+00:00
-->
<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
  <title>Shrek and Fiona's Exciting Conversation</title>
  <desc>Shrek and Fiona are gearing up for an adventure! Watch their excitement bloom as they prepare to explore.</desc>
  
  <!-- Background -->
  <rect id="background" class="background" width="512" height="512" fill="#a3d9a5">
    <animate attributeName="fill" from="#a3d9a5" to="#a8e6cf" dur="5s" repeatCount="indefinite" />
  </rect>
  
  <!-- Shrek's Body -->
  <ellipse id="shrek-body" class="shrek-body" cx="160" cy="320" rx="60" ry="80" fill="#4caf50">
    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 160 320" to="360 160 320" dur="5s" repeatCount="indefinite"/>
  </ellipse>
  
  <!-- Shrek's Head -->
  <circle id="shrek-head" class="shrek-head" cx="160" cy="220" r="50" fill="#388e3c">
    <animate attributeName="cy" values="220;210;220" dur="2.5s" repeatCount="indefinite" />
  </circle>
  
  <!-- Shrek's Eyes -->
  <circle id="shrek-left-eye" class="shrek-eye" cx="140" cy="210" r="8" fill="#ffffff">
    <animate attributeName="cy" values="210;205;210" dur="2.5s" repeatCount="indefinite" />
  </circle>
  
  <circle id="shrek-right-eye" class="shrek-eye" cx="180" cy="210" r="8" fill="#ffffff">
    <animate attributeName="cy" values="210;205;210" dur="2.5s" repeatCount="indefinite" />
  </circle>
  
  <!-- Shrek's Mouth -->
  <path id="shrek-mouth" class="shrek-mouth" d="M140,230 Q160,245 180,230" stroke="#000000" stroke-width="2" fill="transparent">
    <animate attributeName="d" values="
      M140,230 Q160,245 180,230;
      M140,230 Q160,235 180,230;
      M140,230 Q160,245 180,230" dur="2.5s" repeatCount="indefinite" />
  </path>
  
  <!-- Fiona's Body -->
  <ellipse id="fiona-body" class="fiona-body" cx="352" cy="320" rx="60" ry="80" fill="#e91e63">
    <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1;1.05;1" dur="5s" repeatCount="indefinite"/>
  </ellipse>
  
  <!-- Fiona's Head -->
  <circle id="fiona-head" class="fiona-head" cx="352" cy="220" r="50" fill="#c2185b">
    <animate attributeName="cy" values="220;215;220" dur="2.5s" repeatCount="indefinite" />
  </circle>
  
  <!-- Fiona's Eyes -->
  <circle id="fiona-left-eye" class="fiona-eye" cx="332" cy="210" r="8" fill="#ffffff">
    <animate attributeName="cy" values="210;205;210" dur="2.5s" repeatCount="indefinite" />
  </circle>
  
  <circle id="fiona-right-eye" class="fiona-eye" cx="372" cy="210" r="8" fill="#ffffff">
    <animate attributeName="cy" values="210;205;210" dur="2.5s" repeatCount="indefinite" />
  </circle>
  
  <!-- Fiona's Mouth -->
  <path id="fiona-mouth" class="fiona-mouth" d="M332,230 Q352,245 372,230" stroke="#000000" stroke-width="2" fill="transparent">
    <animate attributeName="d" values="
      M332,230 Q352,245 372,230;
      M332,230 Q352,235 372,230;
      M332,230 Q352,245 372,230" dur="2.5s" repeatCount="indefinite" />
  </path>
  
  <!-- Speech Bubble for Shrek -->
  <path id="shrek-speech" class="speech-bubble" d="M100,180 Q100,150 130,150 H180 Q210,150 210,180 V200 H220 V180 Q220,150 250,150 H300 Q330,150 330,180 V200 H340 V180 Q340,150 370,150 H420 Q450,150 450,180 V200 H460 V180 Q460,150 490,150" 
        fill="none" stroke="#000000" stroke-width="2">
    <animate attributeName="d" values="
      M100,180 Q100,150 130,150 H180 Q210,150 210,180 V200 H220 V180 Q220,150 250,150 H300 Q330,150 330,180 V200 H340 V180 Q340,150 370,150 H420 Q450,150 450,180 V200 H460 V180 Q460,150 490,150;
      M100,180 Q100,155 130,155 H180 Q210,155 210,180 V200 H220 V180 Q220,155 250,155 H300 Q330,155 330,180 V200 H340 V180 Q340,155 370,155 H420 Q450,155 450,180 V200 H460 V180 Q460,155 490,155;
      M100,180 Q100,150 130,150 H180 Q210,150 210,180 V200 H220 V180 Q220,150 250,150 H300 Q330,150 330,180 V200 H340 V180 Q340,150 370,150 H420 Q450,150 450,180 V200 H460 V180 Q460,150 490,150" 
        dur="5s" repeatCount="indefinite"/>
  </path>
  
  <!-- Speech Text -->
  <text id="speech-text" class="speech-text" x="150" y="170" font-family="Arial" font-size="14" fill="#000000">"To je super, Fiono!"</text>
  
  <!-- Trees in Background -->
  <g id="trees" class="trees">
    <!-- Tree 1 -->
    <rect id="tree1-trunk" class="tree-trunk" x="50" y="350" width="20" height="80" fill="#8d6e63">
      <animate attributeName="x" from="50" to="55" dur="5s" repeatCount="indefinite" />
    </rect>
    <circle id="tree1-leaves" class="tree-leaves" cx="60" cy="330" r="40" fill="#2e7d32">
      <animate attributeName="cy" from="330" to="325" dur="5s" repeatCount="indefinite" />
    </circle>
    
    <!-- Tree 2 -->
    <rect id="tree2-trunk" class="tree-trunk" x="400" y="350" width="20" height="80" fill="#8d6e63">
      <animate attributeName="x" from="400" to="395" dur="5s" repeatCount="indefinite" />
    </rect>
    <circle id="tree2-leaves" class="tree-leaves" cx="410" cy="330" r="40" fill="#2e7d32">
      <animate attributeName="cy" from="330" to="325" dur="5s" repeatCount="indefinite" />
    </circle>
  </g>
  
  <!-- Sun -->
  <circle id="sun" class="sun" cx="450" cy="70" r="40" fill="#ffeb3b">
    <animate attributeName="cx" from="450" to="460" dur="5s" repeatCount="indefinite" />
    <animate attributeName="cy" from="70" to="80" dur="5s" repeatCount="indefinite" />
  </circle>
  
  <!-- Animated Clouds -->
  <g id="clouds" class="clouds">
    <ellipse id="cloud1" class="cloud" cx="100" cy="80" rx="50" ry="20" fill="#ffffff">
      <animate attributeName="cx" from="100" to="150" dur="10s" repeatCount="indefinite" />
    </ellipse>
    <ellipse id="cloud2" class="cloud" cx="300" cy="120" rx="60" ry="25" fill="#ffffff">
      <animate attributeName="cx" from="300" to="350" dur="12s" repeatCount="indefinite" />
    </ellipse>
  </g>
  
</svg>