<!--



Generated by DrawGPT.

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

https://drawgpt.ai



Created: 2026-05-16T11:05:21+00:00

-->

<svg   viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <title>Doris's Heist!</title>

  <desc>Doris and Bowler Hat Guy duke it out for the Memory Scanner in a high-stakes, low-speed chase! Who will win? (Spoiler: It's complicated.)</desc>

  <metadata type="keywords">Meet the Robinsons, Doris, Bowler Hat Guy, Memory Scanner, Heist, Animation</metadata>

  <defs>

    <linearGradient id="grad-sky" x1="0%" y1="0%" x2="0%" y2="100%">

      <stop offset="0%" style="stop-color:#87CEEB;stop-opacity:1" />

      <stop offset="100%" style="stop-color:#ADD8E6;stop-opacity:1" />

    </linearGradient>

    <linearGradient id="grad-ground" x1="0%" y1="0%" x2="0%" y2="100%">

      <stop offset="0%" style="stop-color:#228B22;stop-opacity:1" />

      <stop offset="100%" style="stop-color:#32CD32;stop-opacity:1" />

    </linearGradient>

    <radialGradient id="grad-sun" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">

      <stop offset="0%" style="stop-color:#FFD700;stop-opacity:1" />

      <stop offset="100%" style="stop-color:#FFA500;stop-opacity:1" />

    </radialGradient>

  </defs>

  <!-- Background Elements -->

  <rect id="background-sky" class="sky" x="0" y="0" width="512" height="300" fill="url(#grad-sky)" />

  <rect id="background-ground" class="ground" x="0" y="300" width="512" height="212" fill="url(#grad-ground)" />

  <circle id="sun" class="sun" cx="450" cy="50" r="40" fill="url(#grad-sun)" />

  <!-- Doris (Hat) -->

  <path id="doris-hat-base" class="doris-hat" d="M100 50 C120 30, 140 30, 160 50 L100 50 Z" fill="#222"/>

  <path id="doris-hat-top" class="doris-hat" d="M130 30 C120 20, 140 20, 150 30 L130 30 Z" fill="#000">

      <animate attributeName="d" values="M130 30 C120 20, 140 20, 150 30 L130 30 Z;M130 30 C120 10, 140 10, 150 30 L130 30 Z;M130 30 C120 20, 140 20, 150 30 L130 30 Z" dur="5s" repeatCount="indefinite"/>

  </path>

  <!-- Doris Legs (Spider) -->

  <path id="doris-leg-1" class="doris-leg" d="M120 60 C110 80, 100 100, 90 120" stroke="#000" stroke-width="3" fill="none">

      <animate attributeName="d" values="M120 60 C110 80, 100 100, 90 120;M120 60 C110 90, 100 110, 90 130;M120 60 C110 80, 100 100, 90 120" dur="5s" repeatCount="indefinite"/>

  </path>

  <path id="doris-leg-2" class="doris-leg" d="M140 60 C150 80, 160 100, 170 120" stroke="#000" stroke-width="3" fill="none">

      <animate attributeName="d" values="M140 60 C150 80, 160 100, 170 120;M140 60 C150 90, 160 110, 170 130;M140 60 C150 80, 160 100, 170 120" dur="5s" repeatCount="indefinite"/>

  </path>

  <!-- Bowler Hat Guy -->

  <g id="bowler-hat-guy" class="bowler-hat-guy">

    <circle id="bowler-head" class="head" cx="350" cy="70" r="30" fill="#F0D8C3" />

    <path id="bowler-hat" class="hat" d="M320 40 C320 30, 380 30, 380 40 L320 40 Z" fill="#222">

        <animate attributeName="d" values="M320 40 C320 30, 380 30, 380 40 L320 40 Z;M320 35 C320 25, 380 25, 380 35 L320 35 Z;M320 40 C320 30, 380 30, 380 40 L320 40 Z" dur="5s" repeatCount="indefinite"/>

    </path>

    <rect id="bowler-body" class="body" x="330" y="100" width="40" height="80" fill="#8B4513" />

  </g>

  <!-- Memory Scanner -->

  <rect id="scanner-main" class="memory-scanner" x="200" y="80" width="50" height="30" fill="#A9A9A9"/>

  <circle id="scanner-light" class="light" cx="225" cy="95" r="5" fill="red">

      <animate attributeName="fill" values="red;yellow;red" dur="5s" repeatCount="indefinite"/>

  </circle>

  <!-- Road -->

  <rect id="road" class="road" x="0" y="400" width="512" height="112" fill="#808080" />

</svg>