<!--

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"
     width="512" height="512">
  <title>Gnomes Get Constructive: A Brick-tacular Build!</title>
  <desc>Never brick a smile! Gnomes lay bricks and raise a silly building, but one keeps cementing his hat to the wall. No slip-shoddery here!</desc>
  <metadata type="keywords">gnome, construction, brick, silly, animation</metadata>
  <!-- Animate Sun -->
  <circle id="sun" class="sun" cx="440" cy="80" r="34" fill="#ffe066">
    <animate attributeName="cy" values="80;60;80" dur="5s" repeatCount="indefinite" />
    <animate attributeName="r" values="34;40;34" dur="5s" repeatCount="indefinite" />
  </circle>
  <!-- Sky background -->
  <rect id="sky" class="sky" x="0" y="0" width="512" height="340" fill="#a7d3f9"/>
  <!-- Fluffy clouds, animated to drift -->
  <g id="cloud1" class="cloud">
    <ellipse cx="120" cy="80" rx="38" ry="16" fill="#fff" opacity="0.84"/>
    <ellipse cx="148" cy="90" rx="24" ry="13" fill="#f7fafc"/>
    <animateTransform attributeName="transform" type="translate"
      values="0,0;40,0;0,0" dur="5s" repeatCount="indefinite" />
  </g>
  <g id="cloud2" class="cloud">
    <ellipse cx="240" cy="56" rx="22" ry="10" fill="#fff" opacity="0.75"/>
    <ellipse cx="256" cy="64" rx="15" ry="6" fill="#f7fafc" opacity="0.9"/>
    <animateTransform attributeName="transform" type="translate"
      values="0,0;-30,0;0,0" dur="5s" repeatCount="indefinite" />
  </g>
  <!-- Animated bird flying -->
  <g id="bird" class="bird">
    <path d="M345,56 Q350,61 347,66 Q355,62 363,66" fill="none" stroke="#444" stroke-width="2"/>
    <animateTransform attributeName="transform" type="translate"
      from="0,0" to="50,10" dur="2.5s" begin="0s" repeatCount="indefinite"/>
    <animateTransform attributeName="transform" type="translate"
      from="50,10" to="0,0" dur="2.5s" begin="2.5s" repeatCount="indefinite"/>
  </g>
  <!-- Rolling meadow foreground -->
  <ellipse id="meadow" class="meadow" cx="256" cy="430" rx="265" ry="95" fill="#79d944"/>
  <!-- Wildflowers on the meadow -->
  <g id="flowers" class="flowers">
    <circle id="flower1" class="flower" cx="60" cy="452" r="7" fill="#ffe79a"/>
    <circle id="flower2" class="flower" cx="80" cy="478" r="5" fill="#ef53cd"/>
    <circle id="flower3" class="flower" cx="123" cy="444" r="6" fill="#fda54b"/>
    <circle id="flower4" class="flower" cx="324" cy="470" r="7" fill="#9ac9fb"/>
    <circle id="flower5" class="flower" cx="456" cy="457" r="5" fill="#f65858"/>
  </g>

  <!-- Bricks for wall under construction -->
  <g id="wall" class="wall">
    <!-- Wall rows -->
    <g>
      <!-- First row -->
      <rect id="brick11" class="brick" x="240" y="340" width="32" height="14" rx="3" fill="#d65a31"/>
      <rect id="brick12" class="brick" x="272" y="340" width="32" height="14" rx="3" fill="#e37240"/>
      <rect id="brick13" class="brick" x="304" y="340" width="32" height="14" rx="3" fill="#cf5135"/>
      <rect id="brick14" class="brick" x="336" y="340" width="32" height="14" rx="3" fill="#e57949"/>
    </g>
    <g>
      <!-- 2nd row -->
      <rect id="brick21" class="brick" x="256" y="326" width="32" height="14" rx="3" fill="#e37240"/>
      <rect id="brick22" class="brick" x="288" y="326" width="32" height="14" rx="3" fill="#e57c50"/>
      <rect id="brick23" class="brick" x="320" y="326" width="32" height="14" rx="3" fill="#d65a31"/>
    </g>
    <g>
      <!-- Top row (incomplete) -->
      <rect id="brick31" class="brick" x="272" y="312" width="32" height="14" rx="3" fill="#e58159" />
      <rect id="brick32" class="brick" x="304" y="312" width="32" height="14" rx="3" fill="#cb9178" />
    </g>
    <!-- Some extra bricks lying on the grass -->
    <rect id="brick_ground1" class="brick" x="377" y="400" width="32" height="13" rx="3" fill="#dac8b6" />
    <rect id="brick_ground2" class="brick" x="312" y="386" width="32" height="13" rx="3" fill="#c85738" />
  </g>
  <!-- Gnome 1 carrying a brick (animated) -->
  <g id="gnome1" class="gnome">
    <!-- Shadow -->
    <ellipse id="shadow1" class="shadow" cx="375" cy="425" rx="18" ry="6" fill="#6ba349" opacity="0.32">
      <animate attributeName="cx" values="375;372;375" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <!-- Feet -->
    <ellipse id="gnome1foot1" class="gnome-foot" cx="377" cy="416" rx="6" ry="2.8" fill="#8c5f3a"/>
    <ellipse id="gnome1foot2" class="gnome-foot" cx="367" cy="418" rx="4.9" ry="2.3" fill="#723a18"/>
    <!-- Body -->
    <ellipse id="gnome1body" class="gnome-body" cx="372" cy="404" rx="13" ry="20" fill="#4778c2"/>
    <!-- Arms -->
    <rect id="gnome1arm1" class="gnome-arm" x="370" y="389" width="5.6" height="18" fill="#f1cab2"
      transform="rotate(-23 372 398)">
      <animateTransform attributeName="transform" type="rotate"
        values="-23 372 398;-16 372 398;-23 372 398" keyTimes="0;0.4;1"
        dur="5s" repeatCount="indefinite"/>
    </rect>
    <rect id="gnome1arm2" class="gnome-arm" x="367.2" y="402" width="5" height="14" fill="#f3bc9f"
      transform="rotate(-7 370 410)">
      <animateTransform attributeName="transform" type="rotate"
        values="-7 370 410;-12 370 410;-7 370 410" keyTimes="0;0.55;1"
        dur="5s" repeatCount="indefinite"/>
    </rect>
    <!-- Brick in hands -->
    <rect id="gnome1-brick" class="held-brick" x="366" y="411" width="20" height="8" rx="2" fill="#dd835b">
      <animate attributeName="y" values="411;406;411" dur="5s" repeatCount="indefinite"/>
    </rect>
    <!-- Head -->
    <ellipse id="gnome1head" class="gnome-head" cx="373" cy="389" rx="9.2" ry="8.2" fill="#fadbbb"/>
    <!-- Nose -->
    <ellipse id="gnome1nose" class="gnome-nose" cx="373" cy="392" rx="2.4" ry="1.7" fill="#f1bc9c"/>
    <!-- Smiling mouth -->
    <path id="gnome1mouth" class="gnome-mouth" d="M370 395 Q373 398 376 395" stroke="#991f07" stroke-width="1.5" fill="none"/>
    <!-- Beard -->
    <path id="gnome1beard" class="gnome-beard" d="M366 394 Q373 400 380 394 Q373 401 373 401 Z" fill="#fff"/>
    <!-- Red Hat -->
    <path id="gnome1hat" class="gnome-hat" d="M378 382 Q373 368 368 384 Q374 385 378 382" fill="#db2138">
      <animate attributeName="d" values="
        M378 382 Q373 368 368 384 Q374 385 378 382;
        M378 382 Q373 362 368 384 Q374 385 378 382;
        M378 382 Q373 368 368 384 Q374 385 378 382
        " dur="5s" repeatCount="indefinite" />
    </path>
    <!-- Winking eye -->
    <ellipse id="gnome1eye-open" class="gnome-eye" cx="370" cy="389" rx="1.1" ry="1.9" fill="#54251b"/>
    <ellipse id="gnome1eye-wink" class="gnome-eye" cx="376" cy="389" rx="1.1" ry="0.3" fill="#54251b">
      <animate attributeName="ry" values="0.3;1.2;0.3" keyTimes="0;0.53;1"
        dur="5s" repeatCount="indefinite"/>
    </ellipse>
  </g>

  <!-- Gnome 2 atop the wall laying a brick (animated brick laying) -->
  <g id="gnome2" class="gnome">
    <!-- Shadow -->
    <ellipse id="shadow2" class="shadow" cx="317" cy="357" rx="14" ry="5" fill="#5ea43d" opacity="0.28" />
    <!-- Feet -->
    <ellipse id="gnome2foot1" class="gnome-foot" cx="314" cy="337" rx="4.7" ry="2.1" fill="#ac7641"/>
    <ellipse id="gnome2foot2" class="gnome-foot" cx="320.8" cy="335" rx="4.2" ry="2.28" fill="#874a21"/>
    <!-- Body -->
    <ellipse id="gnome2body" class="gnome-body" cx="317" cy="328" rx="10" ry="15" fill="#dab626"/>
    <!-- Arm reaching down with animating position (moves as he lays a brick!) -->
    <rect id="gnome2arm" class="gnome-arm" x="318" y="322" width="5.5" height="20" fill="#f2c2a4"
      transform="rotate(33 320 332)">
      <animateTransform attributeName="transform" type="rotate"
        values="33 320 332;54 320 332;33 320 332" keyTimes="0;0.55;1"
        dur="5s" repeatCount="indefinite" />
    </rect>
    <!-- Brick sets onto wall -->
    <rect id="gnome2-brick" class="held-brick" x="319" y="312" width="32" height="14" rx="3" fill="#de8157">
      <animate attributeName="y" values="300;312;300" keyTimes="0;0.6;1"
        dur="5s" repeatCount="indefinite" />
      <animate attributeName="opacity" values="1;1;0;0;1;1" keyTimes="0;0.6;0.7;0.9;0.95;1"
        dur="5s" repeatCount="indefinite" />
    </rect>
    <!-- Head -->
    <ellipse id="gnome2head" class="gnome-head" cx="318" cy="312" rx="8.1" ry="7" fill="#faddcf"/>
    <!-- Big Cheery Nose -->
    <ellipse id="gnome2nose" class="gnome-nose" cx="319" cy="314" rx="1.7" ry="2.3" fill="#ebaf94"/>
    <!-- Smile -->
    <path id="gnome2mouth" class="gnome-mouth" d="M316 317 Q319 321 322 317" stroke="#874512" stroke-width="1" fill="none"/>
    <!-- Beardy -->
    <path id="gnome2beard" class="gnome-beard" d="M310 316 Q318 326 326 316 Q318 323 318 323 Z" fill="#fffffa"/>
    <!-- Blue hat, slightly tipping as he reaches out -->
    <path id="gnome2hat" class="gnome-hat" d="M325 311 Q322 297 314 305 Q318 311 325 311 Z" fill="#2869c7">
      <animate attributeName="d" values="
        M325 311 Q322 297 314 305 Q318 311 325 311 Z;
        M327 304 Q324 292 310 310 Q320 314 327 304 Z;
        M325 311 Q322 297 314 305 Q318 311 325 311 Z
        " keyTimes="0;0.55;1" dur="5s" repeatCount="indefinite" />
    </path>
    <!-- Eyes -->
    <ellipse id="gnome2eye" class="gnome-eye" cx="316.6" cy="312.2" rx="1" ry="1.25" fill="#302826"/>
    <ellipse id="gnome2eye2" class="gnome-eye" cx="320.3" cy="312.49" rx="0.8" ry="1" fill="#333"/>
  </g>

  <!-- Gnome 3 reading blueprints (animated paper fluttering) -->
  <g id="gnome3" class="gnome">
    <!-- Shadow -->
    <ellipse id="shadow3" class="shadow" cx="200" cy="409" rx="13" ry="4" fill="#337c27" opacity="0.25"/>
    <!-- Body -->
    <ellipse id="gnome3body" class="gnome-body" cx="200" cy="394" rx="11" ry="16" fill="#ae53b1"/>
    <!-- Arms holding blueprint -->
    <rect id="gnome3arm" class="gnome-arm" x="193" y="385" width="6" height="20" rx="3" fill="#f9d9be"/>
    <rect id="gnome3arm2" class="gnome-arm" x="203" y="383" width="6" height="19" rx="3" fill="#ffcead"/>
    <!-- Blueprint animated to flutter -->
    <rect id="blueprint" class="blueprint" x="190" y="401" width="22" height="13" rx="3" fill="#8cc7f0"
      stroke="#337fb6" stroke-width="2">
      <animate attributeName="y" values="401;398;401" keyTimes="0;0.3;1" dur="5s" repeatCount="indefinite"/>
      <animate attributeName="width" values="22;25;22" keyTimes="0;0.43;1" dur="5s" repeatCount="indefinite"/>
    </rect>
    <!-- Head -->
    <ellipse id="gnome3head" class="gnome-head" cx="200" cy="381" rx="7.7" ry="7.2" fill="#fce5c8"/>
    <!-- Cheeks -->
    <ellipse id="gnome3cheek" class="gnome-cheek" cx="196.5" cy="385" rx="2" ry="1.5" fill="#ffc2a8" opacity="0.82"/>
    <!-- Smile -->
    <path id="gnome3mouth" class="gnome-mouth" d="M198 388 Q200 392 203 388" stroke="#b16240" stroke-width="1" fill="none"/>
    <!-- Beard -->
    <path id="gnome3beard" class="gnome-beard" d="M193 388 Q200 395 207 388 Q200 392 200 392 Z" fill="#ffffff"/>
    <!-- Tall green pointed hat (fluttering!) -->
    <path id="gnome3hat" class="gnome-hat" d="M196 377 Q195 363 205 376 Q200 378 196 377 Z" fill="#2bb335">
      <animate attributeName="d" values="
        M196 377 Q195 363 205 376 Q200 378 196 377 Z;
        M196 377 Q194 365 210 375 Q200 380 196 377 Z;
        M196 377 Q195 363 205 376 Q200 378 196 377 Z
        " dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- Eyes, blink animation -->
    <ellipse id="gnome3eye1" class="gnome-eye" cx="197.5" cy="380" rx="1" ry="1.3" fill="#30302f">
      <animate attributeName="ry" values="1.3;0.2;1.3" keyTimes="0;0.29;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <ellipse id="gnome3eye2" class="gnome-eye" cx="202.2" cy="380.1" rx="0.8" ry="1.1" fill="#333"/>
  </g>

  <!-- A funny gnome stuck on scaffolding, hat glued to brick wall (animated embarrassment) -->
  <g id="gnome4" class="gnome">
    <!-- Scaffolding -->
    <rect id="scaffold" class="scaffolding" x="272" y="355" width="18" height="54" fill="#b8b5af"/>
    <rect id="scaffoldtop" class="scaffolding" x="266" y="355" width="30" height="8" fill="#84736c"/>
    <!-- Shadow -->
    <ellipse id="shadow4" class="shadow" cx="281" cy="410" rx="7" ry="2" fill="#2a7410" opacity="0.22"/>
    <!-- Body -->
    <ellipse id="gnome4body" class="gnome-body" cx="282" cy="380" rx="8" ry="13" fill="#dda657"/>
    <!-- Hand stuck to head -->
    <rect id="gnome4arm" class="gnome-arm" x="287" y="372" width="7" height="19" rx="3" fill="#f8d8c7"
          transform="rotate(32 287 381)">
      <animateTransform attributeName="transform" type="rotate"
        values="32 287 381;49 287 381;32 287 381" keyTimes="0;0.65;1" dur="5s" repeatCount="indefinite"/>
    </rect>
    <!-- Head -->
    <ellipse id="gnome4head" class="gnome-head" cx="282" cy="367" rx="7" ry="7.2" fill="#ffdaba"/>
    <!-- Embarrassed cheeks -->
    <ellipse id="gnome4cheek1" class="gnome-cheek" cx="285.4" cy="371.3" rx="1.2" ry="0.91" fill="#f69aa9"/>
    <ellipse id="gnome4cheek2" class="gnome-cheek" cx="278" cy="371.15" rx="1.13" ry="0.8" fill="#f2a8aa"/>
    <!-- Closed mouth -->
    <path id="gnome4mouth" class="gnome-mouth" d="M280.5 372 Q282 373 284 372.5" stroke="#bc3636" stroke-width="0.9" fill="none"/>
    <!-- Beard -->
    <path id="gnome4beard" class="gnome-beard" d="M275 371 Q282 376 288 372 Q282 375 282 375 Z" fill="#fffffb"/>
    <!-- Hat, tip actually 'stuck' to wall (wiggle animation) -->
    <path id="gnome4hat" class="gnome-hat" d="M283 358 Q286 350 296 359 Q289 363 283 358 Z" fill="#f1447a">
      <animateTransform attributeName="transform" type="rotate"
        values="0 283 358;7 283 358;0 283 358;-5 283 358;0 283 358" keyTimes="0;0.23;0.53;0.83;1" dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- One eye open, one squinting (apologetic wink) -->
    <ellipse id="gnome4eye1" class="gnome-eye" cx="280.2" cy="368.7" rx="1" ry="1.2" fill="#463a29"/>
    <ellipse id="gnome4eye2" class="gnome-eye-squint" cx="284.8" cy="369" rx="1.1" ry="0.2" fill="#463a29">
      <animate attributeName="ry" values="0.2;1;0.2" keyTimes="0;0.36;1" dur="5s" repeatCount="indefinite"/>
    </ellipse>
    <!-- Paint puddle on scarf (cement) -->
    <ellipse id="cement_puddle" class="cement" cx="291" cy="372" rx="6.8" ry="3.1" fill="#d7ded9" opacity="0.44"/>
  </g>

  <!-- Pile of bricks with a trowel and animated glint -->
  <g id="brick_pile" class="bricks-pile">
    <rect id="pilebrick1" class="brick" x="111" y="422" width="24" height="10" rx="2" fill="#bc643a"/>
    <rect id="pilebrick2" class="brick" x="130" y="428" width="21" height="9" rx="2" fill="#e29c64"/>
    <rect id="pilebrick3" class="brick" x="120" y="436" width="22" height="10" rx="2" fill="#c95f3c"/>
    <polygon id="trowel" class="trowel" points="123,413 131,413 127,423" fill="#b2bfcf" stroke="#888" stroke-width="1"/>
    <!-- Handle -->
    <rect id="trowel_handle" class="trowel-handle" x="126.2" y="407" width="3" height="11" rx="1"
      fill="#8e5634" />
    <ellipse id="pileglint" class="bricks-glint" cx="137" cy="432" rx="1" ry="3" fill="#ffa" opacity="0.7">
      <animate attributeName="opacity" values="0.7;0.05;0.7" dur="5s" repeatCount="indefinite" />
      <animate attributeName="cy" values="432;426;432" dur="5s" repeatCount="indefinite"/>
    </ellipse>
  </g>
  <!-- Tools scattered -->
  <rect id="bucket" class="bucket" x="454" y="414" width="22" height="22" rx="8" fill="#bfeaf2" stroke="#56a8bb" stroke-width="2"/>
  <rect id="shovel" class="shovel" x="465" y="435" width="6" height="16" rx="2" fill="#4a708d"/>
  <!-- Wheelbarrow on the left, animated tilting back and forth -->
  <g id="wheelbarrow" class="wheelbarrow">
    <!-- Barrow body -->
    <rect id="barrowbody" class="barrowbody" x="66" y="412" width="38" height="21" rx="8" fill="#d54e1f" stroke="#862e12" stroke-width="2">
      <animateTransform attributeName="transform" type="rotate"
        values="0 75 420;8 75 420;0 75 420;-7 75 420;0 75 420" keyTimes="0;0.23;0.54;0.81;1" dur="5s" repeatCount="indefinite"/>
    </rect>
    <!-- Front wheel -->
    <circle id="barrowwheel" class="barrowwheel" cx="72" cy="435" r="7" fill="#181413" stroke="#555" stroke-width="2"/>
    <!-- Bricks in wheelbarrow -->
    <rect id="barrowbrick1" class="brick" x="72" y="418" width="14" height="7" rx="2" fill="#e6823e"/>
    <rect id="barrowbrick2" class="brick" x="88" y="420" width="12" height="7" rx="1.7" fill="#da9b69"/>
    <!-- Handles -->
    <rect id="barrowhandle1" class="barrowhandle" x="67" y="413" width="5" height="20" rx="1.5" fill="#81462d"
      transform="rotate(13 72 423)"/>
    <rect id="barrowhandle2" class="barrowhandle" x="101" y="413" width="5" height="19" rx="1.5" fill="#805b25"
      transform="rotate(13 104 422.5)"/>
  </g>

  <!-- Additional landscaping for more cheer! -->
  <g id="grass_blades" class="grass">
    <path d="M15 480 Q20 474 22 488" stroke="#54cb23" stroke-width="2" fill="none"/>
    <path d="M38 483 Q44 470 49 492" stroke="#50a518" stroke-width="3" fill="none"/>
    <path d="M502 465 Q505 458 509 491" stroke="#57b025" stroke-width="2" fill="none"/>
  </g>
</svg>