<!--

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 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>Time to Make Internet!</title>
  <desc>The internet is cooking up! Cables, routers, and bits are swirling in a digital mixing bowl. 
  Even the WiFi signal is whisking! If only wifi tasted like cookies.</desc>
  <metadata type="keywords">internet, computer, router, cable, wifi</metadata>
  <!-- Background: blue digital circuit -->
  <rect id="bg0" class="background" width="512" height="512" fill="#225177"/>
  <g id="bg_circuits" class="circuit-traces">
    <g id="bg_lines1" class="circuit-lines1">
      <rect id="circ_rect1" class="circuit" x="50" y="110" width="10" height="270" fill="#66a6ff" opacity="0.35"/>
      <rect id="circ_rect2" class="circuit" x="124" y="60" width="8" height="400" fill="#a7e6ff" opacity="0.15"/>
      <rect id="circ_rect3" class="circuit" x="262" y="95" width="8" height="330" fill="#74d1ea" opacity="0.2"/>
      <rect id="circ_rect4" class="circuit" x="350" y="170" width="11" height="200" fill="#54c0e8" opacity="0.2"/>
      <rect id="circ_rect5" class="circuit" x="425" y="70" width="9" height="372" fill="#CFEBF9" opacity="0.12"/>
    </g>
    <g id="bg_lines2" class="circuit-lines2">
      <!-- Animated pulsing "signal" dots -->
      <circle id="sig_dot1" class="circuit-signal" cx="54" cy="138" r="6" fill="#eff5ff">
        <animate attributeName="r" values="5;9;5" dur="5s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.25;1;0.25" dur="5s" repeatCount="indefinite"/>
      </circle>
      <circle id="sig_dot2" class="circuit-signal" cx="127" cy="247" r="5" fill="#ffffff" opacity="0.4">
        <animate attributeName="r" values="5;10;5" dur="5s" begin="1s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.3;0.8;0.3" dur="5s" begin="1s" repeatCount="indefinite"/>
      </circle>
      <circle id="sig_dot3" class="circuit-signal" cx="266" cy="325" r="7" fill="#def0ff" opacity="0.5">
        <animate attributeName="r" values="7;13;7" dur="5s" begin="2s" repeatCount="indefinite"/>
        <animate attributeName="opacity" values="0.5;1;0.5" dur="5s" begin="2s" repeatCount="indefinite"/>
      </circle>
      <circle id="sig_dot4" class="circuit-signal" cx="355" cy="230" r="7" fill="#b0ddff" opacity="0.6">
        <animate attributeName="r" values="7;11;7" dur="5s" begin="1.8s" repeatCount="indefinite"/>
      </circle>
      <circle id="sig_dot5" class="circuit-signal" cx="429" cy="328" r="6" fill="#c6e9ff" opacity="0.4">
        <animate attributeName="r" values="6;14;6" dur="5s" begin="3s" repeatCount="indefinite"/>
      </circle>
    </g>
  </g>
  <!-- Digital bowl -->
  <ellipse id="bowl_base" class="mixing-bowl" cx="256" cy="388" rx="150" ry="55" fill="#c7d2ff" stroke="#7291c2" stroke-width="4"/>
  <ellipse id="bowl_inner" class="mixing-bowl" cx="256" cy="400" rx="134" ry="41" fill="#f8fbff" opacity="0.65"/>
  <!-- Code 'dough' in bowl, animated swirl -->
  <g id="dough_codestream" class="dough-stream">
    <path id="dough1" class="code-dough" fill="#75caf7" opacity="0.86"
      d="M128,397 q45-22 90,7 t90-14" >
      <animate attributeName="d" 
        values="M128,397 q45-22 90,7 t90-14;M128,397 q40-9 90,17 t86,-23;M128,397 q45-22 90,7 t90-14" 
        keyTimes="0;0.5;1"
        dur="5s" repeatCount="indefinite"/>
    </path>
    <path id="dough2" class="code-dough" fill="#fff782" opacity="0.7"
      d="M153,390 q31 13 112 11 t98-37" >
      <animate attributeName="d" 
        values="M153,390 q31 13 112 11 t98-37;M150,390 q41 33 107 8 t98,-26;M153,390 q31 13 112 11 t98-37"
        keyTimes="0;0.5;1"
        dur="5s" repeatCount="indefinite"/>
    </path>
    <!-- Code snippets -->
    <text id="dough_code1" class="snippet-dotcom" x="167" y="380" fill="#353e56" font-size="17" 
     font-family="sans-serif">
      &lt;html&gt;
      <animate attributeName="y" values="380;375;380" dur="5s" repeatCount="indefinite"/>
    </text>
    <text id="dough_code2" class="snippet-www" x="287" y="400" fill="#6c76af" font-size="18"
     font-family="monospace">
      .com
      <animate attributeName="y" values="400;405;400" dur="5s" begin="2.5s" repeatCount="indefinite"/>
    </text>
    <text id="dough_code3" class="snippet-coding" x="235" y="412" fill="#007fff" font-size="15"
     font-family="sans-serif">
      &lt;div /&gt;
      <animate attributeName="opacity" values="1;0.6;1" dur="5s" repeatCount="indefinite"/>
    </text>
  </g>
  <!-- Animated whisk: Whisk shaped like wifi! -->
  <g id="whisk_wifi" class="whisk-wifi" >
    <g>
      <ellipse id="whisk_o1" class="wifi-img" cx="256" cy="252" rx="35" ry="13" fill="none" stroke="#f1b900" stroke-width="8" opacity="0.65"/>
      <ellipse id="whisk_o2" class="wifi-img" cx="256" cy="252" rx="24" ry="7.5" fill="none" stroke="#ffeac1" stroke-width="4" opacity="0.88"/>
      <ellipse id="whisk_o3" class="wifi-img" cx="256" cy="253" rx="13" ry="4.8" fill="none" stroke="#b18b21" stroke-width="2" opacity="0.86"/>
      <!-- Animated line whisk handle -->
      <rect id="handle_wifi" class="whisk-handle" x="248" y="157" width="16" height="106" fill="#8a7b57" rx="8">
        <animateTransform attributeName="transform"
            type="rotate"
            from="0 256 252"
            to="18 256 252"
            dur="2.5s"
            repeatCount="indefinite"
            direction="alternate"/>
      </rect>
    </g>
  </g>
  <!-- Animated bits floating up -->
  <g id="bubbling_bits" class="upward-bits">
    <circle id="bit1" class="flying-bit" cx="170" cy="360" r="7" fill="#fff482">
      <animate attributeName="cy" values="360;290;360" dur="5s" begin="0.1s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.9;0.6;0" keyTimes="0;0.7;0.85;1" dur="5s" begin="0.1s" repeatCount="indefinite"/>
    </circle>
    <circle id="bit2" class="flying-bit" cx="205" cy="365" r="6" fill="#fcefb6">
      <animate attributeName="cy" values="365;316;365" dur="5s" begin="0.8s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.7;0" dur="5s" begin="0.8s" repeatCount="indefinite"/>
    </circle>
    <circle id="bit3" class="flying-bit" cx="294" cy="368" r="9" fill="#afeaea" opacity="1">
      <animate attributeName="cy" values="368;299;368" dur="5s" begin="2.4s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;1;0.4;0" keyTimes="0;0.4;0.9;1" dur="5s" begin="2.4s" repeatCount="indefinite"/>
    </circle>
    <circle id="bit4" class="flying-bit" cx="354" cy="359" r="8" fill="#fab776" opacity="1">
      <animate attributeName="cy" values="359;295;359" dur="5s" begin="3.2s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.7;0.3;0" dur="5s" begin="3.2s" repeatCount="indefinite"/>
    </circle>
    <text id="bit0" class="flying-bit-zero" x="310" y="355" fill="#008cfc" font-size="18" font-family="monospace" font-weight="bold">0
      <animate attributeName="y" values="355;291;355" dur="5s" begin="2.0s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.6;0" dur="5s" begin="2.0s" repeatCount="indefinite"/>
    </text>
    <text id="bit1t" class="flying-bit-one" x="192" y="385" fill="#fe801b" font-size="19" font-family="monospace" font-weight="bold">1
      <animate attributeName="y" values="385;309;385" dur="5s" begin="1.5s" repeatCount="indefinite"/>
    </text>
  </g>
  <!-- WiFi Router (smiling, proud of itself) -->
  <g id="proud_router" class="smiling-router">
    <rect id="router_body" class="router-block" x="185" y="425" rx="24" ry="18" width="142" height="54" fill="#f5f2fa" stroke="#465995" stroke-width="5" />
    <!-- lights, animated -->
    <circle id="router_light1" class="router-light" cx="220" cy="456" r="5" fill="#277843" >
      <animate attributeName="fill" values="#277843;#c1ff96;#277843" dur="5s" repeatCount="indefinite"/>
    </circle>
    <circle id="router_light2" class="router-light" cx="242" cy="456" r="5" fill="#5693dd" >
      <animate attributeName="fill" values="#5693dd;#1fd5ff;#5693dd" dur="5s" begin="1.3s" repeatCount="indefinite"/>
    </circle>
    <circle id="router_light3" class="router-light" cx="264" cy="456" r="5" fill="#ceedf7" >
      <animate attributeName="fill" values="#ceedf7;#abec89;#ceedf7" dur="5s" begin="2.6s" repeatCount="indefinite"/>
    </circle>
    <!-- smiley face on router -->
    <ellipse id="router_eyeL" class="router-face" cx="205" cy="445" rx="4" ry="4" fill="#262535"/>
    <ellipse id="router_eyeR" class="router-face" cx="237" cy="445" rx="4" ry="4" fill="#262535"/>
    <path id="router_smile" class="router-face" d="M209,460 Q221,470 233,460" stroke="#ffbe3d" stroke-width="3" fill="none">
      <animate attributeName="d" values="M209,460 Q221,470 233,460;M208,461 Q221,474 234,461;M209,460 Q221,470 233,460" dur="5s" begin="1.9s" repeatCount="indefinite"/>
    </path>
    <!-- Router antennas, slide/wiggle -->
    <rect id="router_antenna1" class="router-antenna" x="193" y="405" width="7" height="27" fill="#eeac7d" rx="3.5">
      <animateTransform attributeName="transform" type="rotate"
        from="0 196.5 405" to="10 196.5 405"
        dur="2.3s" repeatCount="indefinite" direction="alternate"/>
    </rect>
    <rect id="router_antenna2" class="router-antenna" x="292" y="410" width="10" height="21" fill="#e9eecd" rx="4" opacity="0.7">
      <animateTransform attributeName="transform" type="rotate"
        values="0 297 410; -9 297 410; 0 297 410" dur="5s"
        repeatCount="indefinite"/>
    </rect>
    <!-- bit label on router -->
    <text id="router_label" class="router-text" x="247" y="473" font-size="13" font-family="Arial" fill="#6f91e3" font-weight="bold">
      INTERNET
    </text>
  </g>
  <!-- Animated plugged cable with spark -->
  <g id="plugged_cable" class="internet-cable">
    <!-- plug -->
    <rect id="plug_body" class="plug-block" x="105" y="465" width="35" height="20" rx="6" fill="#e4ddb8" stroke="#768aac" stroke-width="3"/>
    <!-- cable -->
    <path id="cable_line" class="cable-curved" fill="none" stroke="#dbbc77" stroke-width="11"
      d="M140,475 Q176.5,410 256,432 Q290,445 342,416"
      opacity="0.9">
      <animate attributeName="d"
        values="M140,475 Q176.5,410 256,432 Q290,445 342,416;M140,475 Q176.5,440 256,400 Q280,453 342,416;M140,475 Q176.5,410 256,432 Q290,445 342,416"
        dur="5s"
        keyTimes="0;0.47;1"
        repeatCount="indefinite"/>
    </path>
    <!-- cable tip spark (animated) -->
    <circle id="plug_spark" class="plug-spark" cx="140" cy="475" r="8" fill="#fffbe0" stroke="#ffe84e" stroke-width="2">
      <animate attributeName="r" values="8;13;8" dur="2.5s" repeatCount="indefinite"/>
      <animate attributeName="opacity" values="1;0.55;1" dur="2.5s" repeatCount="indefinite"/>
    </circle>
  </g>
</svg>