Free SVG Download, o1. Free SVG and PNG Vector Icons.

2LgZI6HN

N/A

-1px x -1px

2.07 KB

1.61 KB-22%

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 900 700" height="700" width="900">
  <style>
    .pin { font-size: 10px; font-family: sans-serif; }
    .line { stroke-width: 2; stroke-linecap: round; animation: booster 1s linear infinite; }
    @keyframes booster {
      0% { stroke-dashoffset: 20; }
      100% { stroke-dashoffset: 0; }
    }
    .input .line { stroke: green; }
    .output .line { stroke: blue; }
    .both .line { stroke: orange; }
    .power .line { stroke: red; }
    .ground .line { stroke: black; }
    .arrow { fill: inherit; }
    .board { stroke: #ccc; stroke-width: 2; rx: 10px; ry: 10px; }
    .chip { fill: #ddd; }
    .chip-text { font-size: 14px; font-family: sans-serif; dominant-baseline: middle; text-anchor: middle; }
  </style>

  <rect fill="#eee" class="board" height="500" width="700" y="100" x="100"></rect>
  <rect class="chip" height="100" width="200" y="300" x="350"></rect>
  <text class="chip-text" y="350" x="450">ESP32 Wroom 32</text>

  <g class="output" transform="translate(150, 150)">
    <text class="pin" y="-5" x="-30">GPIO23 / VSPI MOSI</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L30,0"></path>
    <polygon class="arrow" points="30,0 25,-5 25,5"></polygon>
  </g>

  <g class="ground" transform="translate(800, 150)">
    <text class="pin" y="-5" x="30">GND</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L-30,0"></path>
    <polygon class="arrow" points="-30,0 -25,-5 -25,5"></polygon>
  </g>

  <g class="input" transform="translate(150, 200)">
    <text class="pin" y="-5" x="-30">ADC1_CH0 / GPIO36</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L30,0"></path>
    <polygon class="arrow" points="30,0 25,-5 25,5"></polygon>
  </g>

    <g class="power" transform="translate(120, 80)">
    <text class="pin" y="-10" x="0">3V3</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L0,30"></path>
  </g>
  <g class="ground" transform="translate(800, 80)">
    <text class="pin" y="-10" x="0">GND</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L0,30"></path>
  </g>



  </svg>

Upload

100%

SVGViewer

-1px x -1px

2.07 KB

1.61 KB-22%

<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 900 700" height="700" width="900">
  <style>
    .pin { font-size: 10px; font-family: sans-serif; }
    .line { stroke-width: 2; stroke-linecap: round; animation: booster 1s linear infinite; }
    @keyframes booster {
      0% { stroke-dashoffset: 20; }
      100% { stroke-dashoffset: 0; }
    }
    .input .line { stroke: green; }
    .output .line { stroke: blue; }
    .both .line { stroke: orange; }
    .power .line { stroke: red; }
    .ground .line { stroke: black; }
    .arrow { fill: inherit; }
    .board { stroke: #ccc; stroke-width: 2; rx: 10px; ry: 10px; }
    .chip { fill: #ddd; }
    .chip-text { font-size: 14px; font-family: sans-serif; dominant-baseline: middle; text-anchor: middle; }
  </style>

  <rect fill="#eee" class="board" height="500" width="700" y="100" x="100"></rect>
  <rect class="chip" height="100" width="200" y="300" x="350"></rect>
  <text class="chip-text" y="350" x="450">ESP32 Wroom 32</text>

  <g class="output" transform="translate(150, 150)">
    <text class="pin" y="-5" x="-30">GPIO23 / VSPI MOSI</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L30,0"></path>
    <polygon class="arrow" points="30,0 25,-5 25,5"></polygon>
  </g>

  <g class="ground" transform="translate(800, 150)">
    <text class="pin" y="-5" x="30">GND</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L-30,0"></path>
    <polygon class="arrow" points="-30,0 -25,-5 -25,5"></polygon>
  </g>

  <g class="input" transform="translate(150, 200)">
    <text class="pin" y="-5" x="-30">ADC1_CH0 / GPIO36</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L30,0"></path>
    <polygon class="arrow" points="30,0 25,-5 25,5"></polygon>
  </g>

    <g class="power" transform="translate(120, 80)">
    <text class="pin" y="-10" x="0">3V3</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L0,30"></path>
  </g>
  <g class="ground" transform="translate(800, 80)">
    <text class="pin" y="-10" x="0">GND</text>
    <path stroke-dasharray="5,5" class="line" d="M0,0 L0,30"></path>
  </g>



  </svg>

Upload

100%