Switch anatomy illustration

switch-anatomy.tsx

<AspectRatio ratio={16 / 9}>
  <svg
    width='100%'
    height='100%'
    viewBox='0 0 480 270'
    fill='none'
    xmlns='http://www.w3.org/2000/svg'
  >
    <rect width='480' height='270' fill='white' />
    <rect x='172' y='97' width='136' height='76' rx='38' fill='#3182CE' />
    <circle cx='269.64' cy='134.64' r='32.64' fill='white' />
    <path
      fill-rule='evenodd'
      clip-rule='evenodd'
      d='M237.5 90L237.5 69L238.5 69L238.5 90L237.5 90Z'
      fill='#319795'
    />
    <path
      fill-rule='evenodd'
      clip-rule='evenodd'
      d='M295 135L344 135L344 136L295 136L295 135Z'
      fill='#805AD5'
    />
    <path
      fill-rule='evenodd'
      clip-rule='evenodd'
      d='M198 136L149 136L149 135L198 135L198 136Z'
      fill='#D69E2E'
    />
    <path
      d='M252 55C252 62.732 245.732 69 238 69C230.268 69 224 62.732 224 55C224 47.268 230.268 41 238 41C245.732 41 252 47.268 252 55Z'
      fill='#B2F5EA'
    />
    <path
      fill-rule='evenodd'
      clip-rule='evenodd'
      d='M238 68C245.18 68 251 62.1797 251 55C251 47.8203 245.18 42 238 42C230.82 42 225 47.8203 225 55C225 62.1797 230.82 68 238 68ZM238 69C245.732 69 252 62.732 252 55C252 47.268 245.732 41 238 41C230.268 41 224 47.268 224 55C224 62.732 230.268 69 238 69Z'
      fill='#319795'
    />
    <path
      d='M234.66 61H232.796L236.984 49.3636H239.012L243.2 61H241.336L238.046 51.4773H237.955L234.66 61ZM234.972 56.4432H241.018V57.9205H234.972V56.4432Z'
      fill='#319795'
    />
    <path
      d='M372 135C372 142.732 365.732 149 358 149C350.268 149 344 142.732 344 135C344 127.268 350.268 121 358 121C365.732 121 372 127.268 372 135Z'
      fill='#E9D8FD'
    />
    <path
      fill-rule='evenodd'
      clip-rule='evenodd'
      d='M358 148C365.18 148 371 142.18 371 135C371 127.82 365.18 122 358 122C350.82 122 345 127.82 345 135C345 142.18 350.82 148 358 148ZM358 149C365.732 149 372 142.732 372 135C372 127.268 365.732 121 358 121C350.268 121 344 127.268 344 135C344 142.732 350.268 149 358 149Z'
      fill='#805AD5'
    />
    <path
      d='M354.544 141V129.364H358.805C359.631 129.364 360.315 129.5 360.856 129.773C361.398 130.042 361.803 130.407 362.072 130.869C362.341 131.328 362.476 131.845 362.476 132.42C362.476 132.905 362.387 133.314 362.209 133.648C362.031 133.977 361.792 134.242 361.493 134.443C361.197 134.64 360.872 134.784 360.516 134.875V134.989C360.902 135.008 361.279 135.133 361.646 135.364C362.017 135.591 362.324 135.915 362.567 136.335C362.809 136.756 362.93 137.267 362.93 137.869C362.93 138.464 362.79 138.998 362.51 139.472C362.233 139.941 361.805 140.314 361.226 140.591C360.646 140.864 359.906 141 359.004 141H354.544ZM356.3 139.494H358.834C359.675 139.494 360.277 139.331 360.641 139.006C361.004 138.68 361.186 138.273 361.186 137.784C361.186 137.417 361.093 137.08 360.908 136.773C360.722 136.466 360.457 136.222 360.112 136.04C359.771 135.858 359.366 135.767 358.896 135.767H356.3V139.494ZM356.3 134.398H358.652C359.046 134.398 359.4 134.322 359.714 134.17C360.033 134.019 360.284 133.807 360.47 133.534C360.659 133.258 360.754 132.932 360.754 132.557C360.754 132.076 360.586 131.672 360.248 131.347C359.911 131.021 359.394 130.858 358.697 130.858H356.3V134.398Z'
      fill='#805AD5'
    />
    <path
      d='M149 135C149 142.732 142.732 149 135 149C127.268 149 121 142.732 121 135C121 127.268 127.268 121 135 121C142.732 121 149 127.268 149 135Z'
      fill='#FEFCBF'
    />
    <path
      fill-rule='evenodd'
      clip-rule='evenodd'
      d='M135 148C142.18 148 148 142.18 148 135C148 127.82 142.18 122 135 122C127.82 122 122 127.82 122 135C122 142.18 127.82 148 135 148ZM135 149C142.732 149 149 142.732 149 135C149 127.268 142.732 121 135 121C127.268 121 121 127.268 121 135C121 142.732 127.268 149 135 149Z'
      fill='#D69E2E'
    />
    <path
      d='M140.06 133.148H138.288C138.219 132.769 138.092 132.436 137.907 132.148C137.721 131.86 137.494 131.616 137.225 131.415C136.956 131.214 136.655 131.062 136.322 130.96C135.992 130.858 135.642 130.807 135.271 130.807C134.6 130.807 134 130.975 133.469 131.312C132.943 131.65 132.526 132.144 132.219 132.795C131.916 133.447 131.765 134.242 131.765 135.182C131.765 136.129 131.916 136.928 132.219 137.58C132.526 138.231 132.945 138.723 133.475 139.057C134.005 139.39 134.602 139.557 135.265 139.557C135.632 139.557 135.981 139.508 136.31 139.409C136.644 139.307 136.945 139.157 137.214 138.96C137.483 138.763 137.71 138.523 137.896 138.239C138.085 137.951 138.216 137.621 138.288 137.25L140.06 137.256C139.966 137.828 139.782 138.354 139.509 138.835C139.24 139.312 138.894 139.725 138.469 140.074C138.049 140.419 137.568 140.686 137.026 140.875C136.485 141.064 135.894 141.159 135.253 141.159C134.246 141.159 133.348 140.92 132.56 140.443C131.772 139.962 131.151 139.275 130.697 138.381C130.246 137.487 130.021 136.42 130.021 135.182C130.021 133.939 130.248 132.873 130.702 131.983C131.157 131.089 131.778 130.403 132.566 129.926C133.354 129.445 134.25 129.205 135.253 129.205C135.871 129.205 136.447 129.294 136.981 129.472C137.519 129.646 138.002 129.903 138.43 130.244C138.858 130.581 139.212 130.994 139.492 131.483C139.772 131.968 139.962 132.523 140.06 133.148Z'
      fill='#D69E2E'
    />
    <path
      fill-rule='evenodd'
      clip-rule='evenodd'
      d='M317 91H158V180H317V91ZM157 90V181H318V90H157Z'
      fill='#319795'
    />
    <circle cx='294' cy='135.5' r='2' fill='#805AD5' />
    <circle
      cx='199'
      cy='135.5'
      r='2'
      transform='rotate(-180 199 135.5)'
      fill='#D69E2E'
    />
  </svg>
</AspectRatio>