<!--



Generated by DrawGPT.

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

https://drawgpt.ai



Created: 2025-05-16T23:20:53+00:00

-->

<svg id="svg-001" viewBox="0 0 512 512"   xmlns="http://www.w3.org/2000/svg">

  <title>Mine Water Recycling Fun</title>

  <desc>A whimsical recycling scene with a mine, flowing water, and dancing tanks – it's recycling magic in the mine world!</desc>

  <!-- Sky Background -->

  <rect id="bg-rect-001" class="background" x="0" y="0" width="512" height="512" fill="#cfe8f3" />

  

  <!-- Distant Mountains -->

  <polygon id="mountain-001" class="mountain" points="0,300 100,150 200,300" fill="#8B4513">

    <animate attributeName="fill" values="#8B4513;#A0522D;#8B4513" dur="5s" repeatCount="indefinite" />

  </polygon>

  <polygon id="mountain-002" class="mountain" points="150,320 250,180 350,320" fill="#8B4513">

    <animate attributeName="fill" values="#8B4513;#CD853F;#8B4513" dur="5s" repeatCount="indefinite" />

  </polygon>

  <polygon id="mountain-003" class="mountain" points="300,310 400,170 512,310" fill="#8B4513">

    <animate attributeName="fill" values="#8B4513;#D2691E;#8B4513" dur="5s" repeatCount="indefinite" />

  </polygon>

  

  <!-- Sun with a gentle pulse -->

  <circle id="sun-001" class="sun" cx="450" cy="60" r="30" fill="yellow">

    <animate attributeName="r" values="30;32;30" dur="5s" repeatCount="indefinite" />

  </circle>

  

  <!-- Mine Entrance (left side) -->

  <g id="mine-entrance-group" class="mine">

    <rect id="mine-wall-001" class="mine-wall" x="50" y="280" width="80" height="150" fill="#555555" />

    <path id="mine-door-001" class="mine-door" d="M50 300 Q90 260 130 300 L130 400 Q90 440 50 400 Z" fill="#333333">

      <animate attributeName="d" values="

        M50 300 Q90 260 130 300 L130 400 Q90 440 50 400 Z;

        M50 300 Q90 265 130 300 L130 400 Q90 435 50 400 Z;

        M50 300 Q90 260 130 300 L130 400 Q90 440 50 400 Z" dur="5s" repeatCount="indefinite"/>

    </path>

  </g>

  

  <!-- Water Reservoir (near mine) -->

  <ellipse id="reservoir-001" class="reservoir" cx="120" cy="430" rx="40" ry="10" fill="#1E90FF">

    <animate attributeName="fill" values="#1E90FF;#00BFFF;#1E90FF" dur="5s" repeatCount="indefinite" />

  </ellipse>

  <ellipse id="reservoir-002" class="reservoir-reflection" cx="120" cy="435" rx="40" ry="6" fill="#87CEFA">

    <animate attributeName="fill" values="#87CEFA;#B0E0E6;#87CEFA" dur="5s" repeatCount="indefinite" />

  </ellipse>

  

  <!-- Pipe from Reservoir to Recycling Tank -->

  <path id="pipe-001" class="pipe" d="M120 430 C170 400, 280 400, 360 300" fill="none" stroke="#696969" stroke-width="6" stroke-linecap="round">

    <animate attributeName="stroke" values="#696969;#808080;#696969" dur="5s" repeatCount="indefinite" />

  </path>

  

  <!-- Animated Water Droplet traveling in the Pipe -->

  <circle id="water-droplet-001" class="water-droplet" r="5" fill="#00BFFF">

    <animateMotion dur="5s" repeatCount="indefinite" rotate="auto">

      <mpath xlink:href="#pipe-001" />

    </animateMotion>

  </circle>

  

  <!-- Recycling Treatment Tank -->

  <g id="tank-group-001" class="tank-group">

    <rect id="tank-body-001" class="tank" x="360" y="250" width="100" height="100" fill="#add8e6" stroke="#4682B4" stroke-width="3"/>

    <!-- Animated water level inside the tank -->

    <rect id="tank-water-001" class="tank-water" x="360" y="260" width="100" height="80" fill="#87CEEB">

      <animate attributeName="y" values="260;255;260" dur="5s" repeatCount="indefinite"/>

      <animate attributeName="height" values="80;85;80" dur="5s" repeatCount="indefinite"/>

    </rect>

    <!-- Recycling Arrow rotating on the tank -->

    <polygon id="recycle-arrow-001" class="recycle-arrow" points="410,310 430,290 450,310 430,330" fill="#006400">

      <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 430 310" to="360 430 310" dur="5s" repeatCount="indefinite"/>

    </polygon>

  </g>

  

  <!-- Additional Static Elements for Detail -->

  <!-- Pipes and valves -->

  <circle id="valve-001" class="valve" cx="200" cy="380" r="8" fill="#A9A9A9" stroke="black" stroke-width="1"/>

  <circle id="valve-002" class="valve" cx="280" cy="380" r="8" fill="#A9A9A9" stroke="black" stroke-width="1"/>

  

  <!-- Animated gear to represent process control -->

  <g id="gear-group-001" class="gear-group" transform="translate(260,320)">

    <circle id="gear-center-001" class="gear-center" cx="0" cy="0" r="15" fill="#D3D3D3"/>

    <path id="gear-teeth-001" class="gear-teeth" d="M0 -25 L5 -15 L15 -15 L8 -5 L15 0 L8 5 L15 15 L5 15 L0 25 L-5 15 L-15 15 L-8 5 L-15 0 L-8 -5 L-15 -15 L-5 -15 Z" fill="#A9A9A9"/>

    <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 0 0" to="360 0 0" dur="5s" repeatCount="indefinite"/>

  </g>

  

  <!-- Grass and ground details -->

  <rect id="ground-001" class="ground" x="0" y="430" width="512" height="82" fill="#228B22" />

  <path id="grass-001" class="grass" d="M10 430 Q20 420 30 430 T50 430 T70 430 T90 430" fill="none" stroke="#006400" stroke-width="2">

    <animate attributeName="stroke" values="#006400;#228B22;#006400" dur="5s" repeatCount="indefinite" />

  </path>

  <path id="grass-002" class="grass" d="M120 430 Q130 420 140 430 T160 430 T180 430 T200 430" fill="none" stroke="#006400" stroke-width="2">

    <animate attributeName="stroke" values="#006400;#228B22;#006400" dur="5s" repeatCount="indefinite" />

  </path>

</svg>