<?xml version="1.0" standalone="no"?>
<svg xmlns="http://www.w3.org/2000/svg"
     version="1.1" 
     max-width="100%"
     preserveAspectRatio="xMinYMin meet"
     viewBox="0 0 950 750"
     >
     <defs>
       <pattern id="diagonal-stripes" patternUnits="userSpaceOnUse" width="16" height="16">
         <path d="M-1,1 l8,-8
                  M0,16 l16,-16
                  M12,20 l8,-8" 
               stroke-width="4"
               class="stripes" />
       </pattern>
       <style type="text/css">@import url(http://fonts.googleapis.com/css?family=Alegreya+Sans:wght@400;700);</style>
       <style type="text/css">
         text {
           font-family: "Alegreya Sans", sans-serif;
         }
         text {
           fill: #2c363c;
         }
         path {
           stroke: #2c363c;
         }
         rect, line, circle {
           stroke: #2c363c;
         }
         path.red, rect.red {
           stroke: #A8334C;
         }
         text.red {
           fill: #A8334C;
         }
         text.blue {
           fill: #286486;
         }
         path.blue, rect.blue {
           stroke: #286486;
         }
         .stripes {
           stroke: #4F6C31;
           opacity: 0.15;
         }
         @media (prefers-color-scheme: dark) {
           text {
             fill: #b4bdc3;
           }
           path {
             stroke: #b4bdc3;
           }
           rect, line, circle {
             stroke: #b4bdc3;
           }
           path.red, rect.red {
             stroke: #DE6E7C;
           }
           text.red {
             fill: #DE6E7C;
           }
           path.blue, rect.blue {
             stroke: #6099C0;
           }
           text.blue {
             fill: #6099C0;
           }
           .stripes {
             stroke: #819B69;
             opacity: 0.3;
           }
         }
       </style>
     </defs>

    <g stroke-width="2" stroke-linecap="square">
      <line x1="50" y1="200" x2="50" y2="700" />
      <line x1="50" y1="700" x2="850" y2="700" />
    </g>

    <g font-size="24">
      <text x="50" y="186" text-anchor="middle">Value</text>
      <text x="864" y="700" text-anchor="start" dominant-baseline="middle">State</text>
    </g>

    <!-- Y ticks -->
    <g transform="translate(0, 200)" font-size="24" text-anchor="end" dominant-baseline="central">
      <text x="40" y="50">15</text>
      <text x="40" y="200">10</text>
      <text x="40" y="350">5</text>
      <text x="40" y="500">0</text>
    </g>

    <!-- X ticks -->
    <g transform="translate(50, 710)" font-size="24" text-anchor="middle" dominant-baseline="hanging">
      <text x="0" y="0">0</text>
      <text x="85" y="0">1</text>
      <text x="170" y="0">2</text>
      <text x="255" y="0">3</text>
      <text x="340" y="0">4</text>
      <text x="425" y="0">5</text>
      <text x="510" y="0">6</text>
      <text x="595" y="0">7</text>
      <text x="680" y="0">8</text>
      <text x="765" y="0">9</text>
    </g>

    <!-- Annotations -->
    <g transform="translate(50, 0)" font-size="28" text-anchor="start" dominant-baseline="central">
      <rect x="85" y="200" width="425" height="500" fill="url(#diagonal-stripes)" stroke-width="0" />
      <g>
        <circle cx="0" cy="20" r="6" stroke-width="2" fill="none" />
        <path d="
          M 6,32
          A 30 10 0 0 0 79 32
        "  stroke-width="3" fill="none" stroke-dasharray="4 4" />
        <rect x="79" y="14" width="12" height="12" stroke-width="2" fill="none" />
        <text x="103" y="20">It must always be the case that B is greater than C</text>
        <path d="
          M 85,32
          L 86,700
        "  stroke-width="3" fill="none" stroke-dasharray="4 4" />
      </g>
      <g>
        <g transform="translate(504, 74)" stroke-width="2" fill="none">
        <path d="
          M 0,0
          L 12,12
          M 0,12
          L 12,0
        " class="red" />
        </g>
        <text transform="translate(528, 80)" class="red">
          <tspan x="0" dy="0">In state 6, B (13) is not greater</tspan>
          <tspan x="0" dy="28">than C (15)</tspan>
        </text>
        <path d="
          M 510,92
          L 510,700
        " class="red" stroke-dasharray="4 4" stroke-width="3" />
      </g>
    </g>

    <!-- Lines -->
    <g transform="translate(50, 200)" stroke-width="3" fill="none">
      <path d="
        M 0,140
        L 425,140
        L 425,110
        L 765,110
      " />
      <path d="
        M 0,320
        L 170,320
        L 170,290
        L 510,290
        L 510,50
        L 765,50
      " />
    </g>

    <!-- Labels -->
    <g transform="translate(50, 200)" font-size="24" font-weight="600" text-anchor="start" dominant-baseline="central">
      <text x="779" y="110">B</text>
      <text x="779" y="50">C</text>
    </g>
</svg>
