static/generated/desk-reader.svg

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 675" role="img" aria-label="Illustration of an accessible article reader with narration controls and a highlighted reading path">
  <defs>
    <linearGradient id="pageGlow" x1="136" y1="94" x2="1054" y2="604" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fffdf8"/>
      <stop offset="1" stop-color="#edf7f4"/>
    </linearGradient>
    <linearGradient id="panelInk" x1="184" y1="158" x2="864" y2="532" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#26353a"/>
      <stop offset="1" stop-color="#15252b"/>
    </linearGradient>
    <linearGradient id="accentWash" x1="700" y1="112" x2="1010" y2="454" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#ffd86f"/>
      <stop offset="1" stop-color="#62b9ae"/>
    </linearGradient>
    <filter id="softShadow" x="-20%" y="-20%" width="140%" height="150%">
      <feDropShadow dx="0" dy="20" stdDeviation="20" flood-color="#26353a" flood-opacity=".16"/>
    </filter>
    <filter id="smallShadow" x="-30%" y="-30%" width="160%" height="160%">
      <feDropShadow dx="0" dy="8" stdDeviation="8" flood-color="#26353a" flood-opacity=".14"/>
    </filter>
  </defs>

  <rect width="1200" height="675" fill="#f2eee6"/>
  <path d="M0 542c152-54 254-28 384-7 160 26 306 19 448-37 151-59 264-54 368-4v181H0Z" fill="#dcefeb"/>
  <circle cx="1030" cy="126" r="84" fill="#f6d266" opacity=".38"/>
  <circle cx="145" cy="520" r="118" fill="#75b7ad" opacity=".18"/>

  <g filter="url(#softShadow)">
    <rect x="92" y="72" width="1016" height="520" rx="28" fill="url(#pageGlow)" stroke="#d8d1c6" stroke-width="4"/>
    <rect x="92" y="72" width="1016" height="64" rx="28" fill="#ffffff"/>
    <path d="M92 108h1016" stroke="#e1dbd1" stroke-width="4"/>
    <circle cx="138" cy="104" r="9" fill="#c5452c"/>
    <circle cx="168" cy="104" r="9" fill="#f4c64d"/>
    <circle cx="198" cy="104" r="9" fill="#62b9ae"/>
  </g>

  <g transform="translate(154 168)">
    <rect width="650" height="330" rx="20" fill="#ffffff" stroke="#dad3c8" stroke-width="3"/>
    <rect x="42" y="42" width="310" height="22" rx="11" fill="#23343a"/>
    <rect x="42" y="83" width="486" height="12" rx="6" fill="#bccbc8"/>
    <rect x="42" y="109" width="422" height="12" rx="6" fill="#d7dfdc"/>
    <rect x="42" y="148" width="548" height="86" rx="14" fill="#e7f4f0" stroke="#62b9ae" stroke-width="4"/>
    <rect x="68" y="174" width="434" height="12" rx="6" fill="#1f6f68"/>
    <rect x="68" y="202" width="372" height="12" rx="6" fill="#77bcb2"/>
    <path d="M48 148v86" stroke="#f4c64d" stroke-width="8" stroke-linecap="round"/>
    <rect x="42" y="264" width="512" height="12" rx="6" fill="#d0d9d6"/>
    <rect x="42" y="292" width="396" height="12" rx="6" fill="#e1e6e3"/>

    <g transform="translate(470 42)">
      <rect width="122" height="72" rx="16" fill="#f7d86c" stroke="#e3bd3b" stroke-width="3"/>
      <path d="M34 37h52" stroke="#23343a" stroke-width="8" stroke-linecap="round"/>
      <path d="M63 18v38" stroke="#23343a" stroke-width="8" stroke-linecap="round"/>
    </g>
  </g>

  <g transform="translate(826 170)" filter="url(#smallShadow)">
    <rect x="0" y="0" width="210" height="266" rx="26" fill="url(#panelInk)"/>
    <rect x="24" y="28" width="162" height="56" rx="14" fill="#f8f4e8"/>
    <circle cx="54" cy="56" r="15" fill="#62b9ae"/>
    <path d="M82 47h72M82 66h48" stroke="#26353a" stroke-width="8" stroke-linecap="round"/>
    <rect x="30" y="116" width="150" height="22" rx="11" fill="#62b9ae"/>
    <rect x="30" y="154" width="108" height="22" rx="11" fill="#f7d86c"/>
    <rect x="30" y="192" width="132" height="22" rx="11" fill="#ffffff" opacity=".72"/>
    <circle cx="158" cy="228" r="20" fill="#c5452c"/>
    <path d="M151 228h14M158 221v14" stroke="#fffdf8" stroke-width="5" stroke-linecap="round"/>
  </g>

  <g transform="translate(264 528)">
    <rect width="612" height="70" rx="35" fill="#24343a" filter="url(#smallShadow)"/>
    <circle cx="58" cy="35" r="20" fill="#f7d86c"/>
    <path d="M52 25v20l18-10Z" fill="#24343a"/>
    <path d="M114 35h64M214 35h42M292 35h82M414 35h48" stroke="#f8f4e8" stroke-width="12" stroke-linecap="round"/>
    <path d="M508 35h55" stroke="#62b9ae" stroke-width="12" stroke-linecap="round"/>
    <circle cx="566" cy="35" r="15" fill="#62b9ae"/>
  </g>

  <g transform="translate(776 468)" fill="none" stroke-linecap="round">
    <path d="M0 38c24-30 48-30 72 0s48 30 72 0 48-30 72 0" stroke="#1f6f68" stroke-width="10"/>
    <path d="M21 14c16-18 32-18 48 0M165 14c16-18 32-18 48 0" stroke="#f4c64d" stroke-width="8"/>
  </g>

  <g transform="translate(158 216)">
    <circle cx="0" cy="0" r="18" fill="#c5452c"/>
    <path d="M-7 0h14M0-7v14" stroke="#fffdf8" stroke-width="4" stroke-linecap="round"/>
  </g>
</svg>