MacBook 14' top view

by jorgeluis

HTML

<svg id="macbook-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600">
  <defs>
    <rect id="macbook-key" width="20" height="20" fill="var(--mackbook-dark,#222)" fill-rule="evenodd" rx="4"/>
    <rect id="macbook-key--1625" width="26" height="20" fill="var(--mackbook-dark,#222)" fill-rule="evenodd" rx="4"/>
    <rect id="macbook-key--2125" width="34" height="20" fill="var(--mackbook-dark,#222)" fill-rule="evenodd" rx="4"/>
    <rect id="macbook-key--2625" width="46" height="20" fill="var(--mackbook-dark,#222)" fill-rule="evenodd" rx="4"/>
    <linearGradient id="body-gradient" x1="0" x2="0" y1="0" y2="1">
      <stop offset="0%" stop-color="#444" />
      <stop offset="50%" stop-color="#444" />
      <stop offset="100%" stop-color="#666" />
    </linearGradient>
    <style>
      body {
        --macbook-dark: #333;
      }
    </style>
  </defs>
  
  <symbol id="keygroup10">
    <use xlink:href="#macbook-key" x="0" y="0"/>
    <use xlink:href="#macbook-key" x="24" y="0"/>
    <use xlink:href="#macbook-key" x="48" y="0"/>
    <use xlink:href="#macbook-key" x="72" y="0"/>
    <use xlink:href="#macbook-key" x="96" y="0"/>
    <use xlink:href="#macbook-key" x="120" y="0"/>
    <use xlink:href="#macbook-key" x="144" y="0"/>
    <use xlink:href="#macbook-key" x="168" y="0"/>
    <use xlink:href="#macbook-key" x="192" y="0"/>
    <use xlink:href="#macbook-key" x="216" y="0"/>
  </symbol>

  <polygon points="0,8, 466,8, 414,42, 46,42" r="2"/>
  <rect width="466" height="9" fill="var(--macbook-body, #666)" fill-rule="evenodd" rx="2" x="0" y="0"/>
  <polygon points="16,14, 450,14, 416,36, 44,36" fill="rgba(120, 50, 140, 0.4)"/>

  <g class="macbook-icon-body" transform="translate(40, 40)">
    <rect width="388" height="250" fill="url(#body-gradient)" fill-rule="evenodd" rx="12"/>
    <rect  width="346" height="144" fill="rgba(0, 0, 0, 0.2)" fill-rule="evenodd" rx="3" x="20" y="8"/>
    <rect  width="140" height="80" fill="rgba(0, 0, 0, 0.1)" fill-rule="evenodd"...