<!--

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 viewBox="0 0 512 512"   xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Vibing Programmer Creating a Hit App</title>
  <desc>This cool coder vibes while coding, turning tacos and tunes into pure app magic—spaghetti code never tasted so good.</desc>
  <metadata type="keywords">programmer, app, coding, vibes, developer</metadata>
  <!-- Background: Fun home workspace -->
  <rect id="bgroom" class="background" x="0" y="0" width="512" height="512" fill="#eceaf4"/>
  <!-- Funky rug -->
  <ellipse id="rug" class="rug" cx="260" cy="470" rx="170" ry="35" fill="#c8a2ff" opacity="0.35"/>
  <!-- Desk -->
  <rect id="desk" class="desk" x="100" y="350" width="320" height="45" rx="16" fill="#b5824a"/>
  <!-- Programmer's chair -->
  <ellipse id="chair_seat" class="chair" cx="150" cy="415" rx="32" ry="15" fill="#20254e"/>
  <rect id="chair_back" class="chair" x="128" y="370" width="44" height="50" rx="16" fill="#604777"/>
  <!-- Programmer -->
  <g id="programmer" class="programmer">
    <!-- legs -->
    <path id="leg_left" class="leg" d="M183 405 Q183 444 210 478 Q222 489 235 483" fill="none" stroke="#48413c" stroke-width="13"/>
    <path id="leg_right" class="leg" d="M214 407 Q226 460 248 491 Q257 501 273 492" fill="none" stroke="#574440" stroke-width="13"/>
    <!-- hoodie body -->
    <ellipse id="body" class="body" cx="203" cy="377" rx="43" ry="49" fill="#54d0c1"/>
    <!-- animated face/hood -->
    <ellipse id="head" class="head" cx="203" cy="343" rx="30" ry="33" fill="#ffc998"/>
    <ellipse id="hoodie_hood" class="hood" cx="203" cy="338" rx="35" ry="36" fill="#45a89c" opacity="0.8"/>
    <!-- animated sunglasses -->
    <g id="shades" class="sunglasses">
      <rect x="186" y="340" width="11" height="8" rx="2" fill="#23282a"/>
      <rect x="206" y="340" width="12" height="8" rx="2" fill="#23282a"/>
      <rect x="197" y="344" width="9" height="3" fill="#181313"/>
      <animateTransform attributeName="transform" type="translate" values="0 0;0 -2;0 0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </g>
    <!-- headphones -->
    <g id="headphones" class="headphones">
      <ellipse cx="173" cy="344" rx="7" ry="11" fill="#373649"/>
      <ellipse cx="233" cy="344" rx="7" ry="11" fill="#373649"/>
      <path d="M177 335 Q203 320 229 335" stroke="#181b1e" stroke-width="7" fill="none"/>
      <animateTransform attributeName="transform" type="rotate" values="0 203 344;5 203 344;0 203 344" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    </g>
    <!-- animated bobbing -->
    <animateTransform attributeName="transform" type="translate" values="0 0;0 8;0 0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
    <!-- left arm (typing hand) -->
    <path id="arm_left" class="arm" d="M183 380 Q150 398 130 390 Q120 385 135 370 Q140 362 167 363 Q178 364 183 376" fill="#51aa9f"/>
    <ellipse id="hand_left" class="hand" cx="131" cy="389" rx="11" ry="9" fill="#ffc998">
      <animateTransform attributeName="transform" type="translate" values="0 0;0 5;0 0" keyTimes="0;0.25;1" dur="2s" repeatCount="indefinite"/>
    </ellipse>
    <!-- right arm (mouse hand) -->
    <path id="arm_right" class="arm" d="M219 378 Q256 393 272 386 Q285 382 275 368 Q271 361 245 364 Q233 365 219 378" fill="#51aa9f"/>
    <ellipse id="hand_right" class="hand" cx="271" cy="390" rx="10" ry="8" fill="#ffd0aa">
      <animateTransform attributeName="transform" type="translate" values="0 0;0 4;0 0" keyTimes="0;0.5;1" dur="1.7s" repeatCount="indefinite"/>
    </ellipse>
  </g>
  <!-- Laptop with animated screen -->
  <g id="laptop" class="laptop">
    <rect x="178" y="392" width="56" height="32" rx="7" fill="#ededed" stroke="#939393" stroke-width="3"/>
    <rect x="185" y="397" width="41" height="16" rx="4" fill="#636cab"/>
    <rect id="screen_flash" x="187" y="399" width="37" height="13" rx="2" fill="#bfd1ee">
      <animate attributeName="fill" values="#bfd1ee;#d3ffd3;#ffd1d6;#dfeaff;#bfd1ee" keyTimes="0;0.25;0.5;0.75;1" dur="5s" repeatCount="indefinite"/>
    </rect>
    <!-- Fun code lines -->
    <rect x="196" y="401" width="18" height="2.5" fill="#2b002b"/>
    <rect x="193" y="405" width="24" height="2" fill="#fafaa0"/>
    <rect x="199" y="409" width="17" height="2" fill="#01d19e"/>
    <rect x="191" y="413" width="27" height="2" fill="#e7a469"/>
  </g>
  <!-- Smartphone "hit app" floating with sparkles -->
  <g id="smartphone_app" class="hitapp">
    <rect x="356" y="210" width="56" height="100" rx="15" fill="#313cef" stroke="#1d202c" stroke-width="4"/>
    <ellipse cx="384" cy="272" rx="25" ry="30" fill="#fdce44"/>
    <text x="379" y="277" font-size="24" font-family="Verdana" fill="#623e13" font-weight="bold" id="hit_emoji" class="emoji">⭐</text>
    <ellipse cx="383" cy="255" rx="9" ry="4" fill="#fff46c" opacity="0.56"/>
    <!-- Sparkles "pop up" -->
    <g id="sparkles" class="sparkles">
      <circle cx="410" cy="212" r="5" fill="#fff369">
        <animate attributeName="r" values="5;9;5" dur="2.2s" repeatCount="indefinite" keyTimes="0;0.5;1"/>
      </circle>
      <circle cx="375" cy="220" r="4" fill="#fffac2">
        <animate attributeName="r" values="4;7;4" dur="2.8s" repeatCount="indefinite" keyTimes="0;0.4;1"/>
      </circle>
      <circle cx="401" cy="242" r="3" fill="#fce267">
        <animate attributeName="r" values="3;7;3" dur="1.6s" repeatCount="indefinite" keyTimes="0;0.6;1"/>
      </circle>
    </g>
    <!-- Phone up-and-down float -->
    <animateTransform attributeName="transform" type="translate" values="0 0;0 -12;0 0" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
  </g>
  <!-- Posters in the background -->
  <g id="posters" class="poster">
    <rect x="40" y="45" width="94" height="55" rx="5" fill="#222235"/>
    <text x="87" y="85" text-anchor="middle" font-size="36" font-family="Verdana" fill="#ed2f52" font-weight="bold">🎧</text>
    <rect x="400" y="40" width="62" height="48" rx="6" fill="#f8ca48" stroke="#ba8322" stroke-width="2"/>
    <text x="431" y="77" text-anchor="middle" font-size="26" font-family="Verdana" fill="#333;background:rgba(0,0,0,0.1);">🔥</text>
    <rect x="335" y="100" width="77" height="42" rx="7" fill="#6ad4e7" stroke="#2098a0" stroke-width="2"/>
    <text x="373" y="128" text-anchor="middle" font-size="22" font-family="Verdana" fill="#257872" font-style="italic">#CODE</text>
  </g>
  <!-- Houseplant buddy -->
  <g id="plantpot" class="plant">
    <rect x="77" y="410" width="31" height="28" rx="7" fill="#ffc479"/>
    <ellipse cx="92" cy="408" rx="17" ry="11" fill="#84cc5a" stroke="#658b3f" stroke-width="2"/>
    <path d="M88,406 Q91,396 77,389" stroke="#459064" stroke-width="2" fill="none"/>
    <path d="M95,407 Q102,387 110,391" stroke="#3ca775" stroke-width="2" fill="none"/>
    <animateTransform attributeName="transform" type="rotate" values="0 92 408;4 92 408;0 92 408" keyTimes="0;0.5;1" dur="5s" repeatCount="indefinite"/>
  </g>
  <!-- Animated musical notes for vibes -->
  <g id="musicnotes" class="note">
    <g>
      <text x="235" y="250" fill="#936fe4" font-size="22" font-weight="bold" id="music_1">&#119136;</text>
      <animateTransform attributeName="transform" type="translate" from="0,0" to="7,-32" begin="1s" dur="2s" repeatCount="indefinite"/>
    </g>
    <g>
      <text x="270" y="270" fill="#b985de" font-size="18" font-weight="bold" id="music_2">&#9836;</text>
      <animateTransform attributeName="transform" type="translate" from="0,0" to="17,-33" begin="0.5s" dur="2.7s" repeatCount="indefinite"/>
    </g>
    <g>
      <text x="219" y="228" fill="#61d388" font-size="21" font-weight="bold" id="music_3">&#9835;</text>
      <animateTransform attributeName="transform" type="translate" from="0,0" to="-8,-26" begin="1.3s" dur="1.7s" repeatCount="indefinite"/>
    </g>
  </g>
</svg>