distributive-law.svg

<svg xmlns="http://www.w3.org/2000/svg" width="480" height="224">

<g transform="scale(2) translate(24, 24)" font-size="16" style="font-style: italic;">

    <rect x=" 0" y="0" width="32"  height="64" fill="#D66"/>
    <rect x="32" y="0" width="48"  height="64" fill="#8D8"/>
    <rect x="80" y="0" width="112" height="64" fill="#79F"/>

    <line x1="32" y1="0" x2="32" y2="64" stroke="black"/>
    <line x1="80" y1="0" x2="80" y2="64" stroke="black"/>
    <rect x="0" y="0" width="192" height="64" stroke="black" fill="none"/>

    <text x="-10" y="32"  text-anchor="middle" alignment-baseline="middle">x</text>
    <text x="16"  y="-10" text-anchor="middle" alignment-baseline="middle">a</text>
    <text x="56"  y="-10" text-anchor="middle" alignment-baseline="middle">b</text>
    <text x="136" y="-10" text-anchor="middle" alignment-baseline="middle">c</text>

</g>

</svg>