<!--



Generated by DrawGPT.

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

https://drawgpt.ai



Created: 2025-01-08T07:13:38+00:00

-->

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

  <title>Portable Health Hub</title>

  <desc>Keeping your heart in check while your temperature rises! 🫀🌡️</desc>

  

  <!-- Background -->

  <rect id="background" class="background" x="0" y="0" width="512" height="512" fill="#f0f8ff">

    <animate attributeName="fill" values="#f0f8ff;#e6ffe6;#f0f8ff" dur="5s" repeatCount="indefinite" />

  </rect>

  

  <!-- Microcontroller -->

  <rect id="microcontroller" class="microcontroller" x="156" y="156" width="200" height="200" rx="20" ry="20" fill="#708090" stroke="#2f4f4f" stroke-width="4">

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

  </rect>

  

  <!-- Pulse Sensor -->

  <path id="pulseSensor" class="pulseSensor" d="M256 100

           C236 100, 200 150, 256 200

           C312 150, 276 100, 256 100

           Z" fill="#ff4d4d">

    <animate attributeName="fill" values="#ff4d4d;#ff9999;#ff4d4d" dur="2.5s" repeatCount="indefinite"/>

  </path>

  

  <!-- Heart Icon -->

  <path id="heartIcon" class="heartIcon" d="M256 140

           Q246 130 236 140

           Q226 130 216 140

           Q206 130 196 140

           Q186 130 176 140

           Q166 130 156 140

           Q146 130 136 140

           Q126 130 116 140

           Q106 130 96 140

           Q86 130 76 140

           Q66 130 56 140

           L56 160

           Q66 150 76 160

           Q86 150 96 160

           Q106 150 116 160

           Q126 150 136 160

           Q146 150 156 160

           Q166 150 176 160

           Q186 150 196 160

           Q206 150 216 160

           Q226 150 236 160

           Q246 150 256 160

           Z" fill="#ff0000">

    <animateTransform attributeName="transform" attributeType="XML" type="scale" values="1;1.1;1" dur="1s" repeatCount="indefinite"/>

  </path>

  

  <!-- Temperature Sensor -->

  <path id="tempSensor" class="tempSensor" d="M356 356

           C356 326, 326 326, 326 356

           L326 416

           C326 446, 356 446, 356 416

           L356 356

           Z" fill="#ffcc00">

    <animate attributeName="fill" values="#ffcc00;#ffe680;#ffcc00" dur="2.5s" repeatCount="indefinite"/>

  </path>

  

  <!-- Thermometer Icon -->

  <rect id="thermometer" class="thermometer" x="326" y="300" width="10" height="56" fill="#ff6600">

    <animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0;0,-10;0,0" dur="1.5s" repeatCount="indefinite"/>

  </rect>

  <circle id="thermometerBulb" class="thermometerBulb" cx="331" cy="366" r="10" fill="#ff3300">

    <animate attributeName="r" values="10;12;10" dur="1.5s" repeatCount="indefinite"/>

  </circle>

  

  <!-- Battery Icon -->

  <rect id="battery" class="battery" x="400" y="100" width="40" height="20" fill="#00cc00">

    <animate attributeName="fill" values="#00cc00;#66ff66;#00cc00" dur="3s" repeatCount="indefinite"/>

  </rect>

  <rect id="batteryCap" class="batteryCap" x="440" y="105" width="5" height="10" fill="#00cc00">

    <animate attributeName="height" values="10;12;10" dur="1.5s" repeatCount="indefinite"/>

  </rect>

  

  <!-- Antenna -->

  <line id="antenna" class="antenna" x1="256" y1="156" x2="256" y2="100" stroke="#2f4f4f" stroke-width="2">

    <animate attributeName="stroke-dashoffset" values="0;10;0" dur="2s" repeatCount="indefinite"/>

  </line>

  

  <!-- Connecting Wires -->

  <line id="wire1" class="wire" x1="256" y1="356" x2="306" y2="356" stroke="#808080" stroke-width="2">

    <animate attributeName="stroke-dasharray" values="5,5;10,10;5,5" dur="3s" repeatCount="indefinite"/>

  </line>

  <line id="wire2" class="wire" x1="256" y1="356" x2="256" y2="406" stroke="#808080" stroke-width="2">

    <animate attributeName="stroke-dasharray" values="5,5;10,10;5,5" dur="3s" repeatCount="indefinite"/>

  </line>

  

  <!-- Display Screen -->

  <rect id="display" class="display" x="180" y="180" width="152" height="80" rx="10" ry="10" fill="#000000" stroke="#ffffff" stroke-width="2">

    <animate attributeName="fill" values="#000000;#1a1a1a;#000000" dur="5s" repeatCount="indefinite"/>

  </rect>

  <text id="displayText" class="displayText" x="256" y="220" font-family="Arial" font-size="12" fill="#00ff00" text-anchor="middle">

    <set attributeName="text" to="Heart Rate: 72 BPM" begin="0s" dur="5s" fill="freeze" />

    <set attributeName="text" to="Temp: 98.6°F" begin="2.5s" dur="5s" fill="freeze" />

    <animate attributeName="opacity" values="1;1;0" dur="5s" repeatCount="indefinite"/>

  </text>

  

  <!-- Portable Case -->

  <rect id="case" class="case" x="100" y="100" width="312" height="312" rx="15" ry="15" fill="none" stroke="#000000" stroke-width="4">

    <animate attributeName="stroke-width" values="4;6;4" dur="5s" repeatCount="indefinite"/>

  </rect>

  

  <!-- LED Indicators -->

  <circle id="led1" class="led" cx="150" cy="150" r="8" fill="#00ff00">

    <animate attributeName="fill" values="#00ff00;#33ff33;#00ff00" dur="1s" repeatCount="indefinite"/>

  </circle>

  <circle id="led2" class="led" cx="362" cy="150" r="8" fill="#ff0000">

    <animate attributeName="fill" values="#ff0000;#ff3333;#ff0000" dur="1s" repeatCount="indefinite"/>

  </circle>

  

  <!-- Icons Connecting Lines -->

  <path id="lineMicroToPulse" class="line" d="M256 256 L256 200" stroke="#808080" stroke-width="2" stroke-dasharray="5,5">

    <animate attributeName="stroke-dashoffset" values="0;10;0" dur="2s" repeatCount="indefinite"/>

  </path>

  <path id="lineMicroToTemp" class="line" d="M256 256 L356 356" stroke="#808080" stroke-width="2" stroke-dasharray="5,5">

    <animate attributeName="stroke-dashoffset" values="0;10;0" dur="2s" repeatCount="indefinite"/>

  </path>

</svg>