images/ch02/02-02.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="328.04" height="145.3" viewBox="0 0 328.04 145.3">
  <defs>
    <style>
      .cls-1 {
        fill: #e4eef2;
      }

      .cls-2 {
        fill: #e6e2de;
      }

      .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
        stroke: gray;
      }

      .cls-10, .cls-11, .cls-15, .cls-2, .cls-3, .cls-4, .cls-5, .cls-6 {
        stroke-width: 0.5px;
      }

      .cls-17, .cls-20, .cls-3 {
        fill: none;
      }

      .cls-4 {
        fill: #fb8160;
      }

      .cls-5 {
        fill: #fff2a2;
      }

      .cls-6 {
        fill: #86cc7f;
      }

      .cls-7 {
        fill: #f5f3f1;
      }

      .cls-8 {
        fill: gray;
      }

      .cls-9 {
        fill: #bcd6e1;
      }

      .cls-10, .cls-15 {
        fill: #fff;
      }

      .cls-10, .cls-11, .cls-15, .cls-20 {
        stroke: #000;
      }

      .cls-10, .cls-20 {
        stroke-miterlimit: 10;
      }

      .cls-11 {
        fill: #e5e5e5;
      }

      .cls-11, .cls-15, .cls-17 {
        stroke-linejoin: round;
      }

      .cls-12 {
        font-size: 7px;
      }

      .cls-12, .cls-16 {
        font-family: ArialMT, Arial;
      }

      .cls-13, .cls-16 {
        font-size: 9px;
      }

      .cls-13 {
        font-family: Humanist521BT-BoldCondensed, Humanst521 Cn BT;
        font-weight: 700;
      }

      .cls-14 {
        fill: url(#linear-gradient);
      }

      .cls-17 {
        stroke: #fff;
        stroke-width: 0.75px;
      }

      .cls-18 {
        font-size: 8.5px;
        font-family: Arial-BoldMT, Arial;
        letter-spacing: -0.08em;
      }

      .cls-19 {
        letter-spacing: 0em;
      }

      .cls-20 {
        stroke-width: 0.3px;
      }

      .cls-21 {
        letter-spacing: 0em;
      }

      .cls-22 {
        letter-spacing: -0.02em;
      }
    </style>
    <linearGradient id="linear-gradient" x1="47.46" y1="152.96" x2="154.71" y2="152.96" gradientTransform="translate(160.84 -16.58) rotate(90)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="1" stop-color="#318aaf"/>
    </linearGradient>
  </defs>
  <g id="Layer_2" data-name="Layer 2">
    <g>
      <rect class="cls-1" x="21.22" y="0.25" width="175.11" height="142.8" rx="2.1"/>
      <path class="cls-2" d="M346.23,158H175.33a2.1,2.1,0,0,0-2.1,2.1v11.2h175.1v-11.2A2.1,2.1,0,0,0,346.23,158Z" transform="translate(-152.01 -157.7)"/>
      <rect class="cls-3" x="21.22" y="0.25" width="175.11" height="142.8" rx="2.1"/>
      <path class="cls-4" d="M182.26,164.43a2.1,2.1,0,0,1-2.1,2.1h0a2.1,2.1,0,0,1-2.1-2.1h0a2.1,2.1,0,0,1,2.1-2.1h0a2.1,2.1,0,0,1,2.1,2.1Z" transform="translate(-152.01 -157.7)"/>
      <path class="cls-5" d="M188.6,164.43a2.1,2.1,0,0,1-2.1,2.1h0a2.1,2.1,0,0,1-2.1-2.1h0a2.1,2.1,0,0,1,2.1-2.1h0a2.1,2.1,0,0,1,2.1,2.1Z" transform="translate(-152.01 -157.7)"/>
      <path class="cls-6" d="M194.94,164.43a2.1,2.1,0,0,1-2.1,2.1h0a2.1,2.1,0,0,1-2.1-2.1h0a2.1,2.1,0,0,1,2.1-2.1h0a2.1,2.1,0,0,1,2.1,2.1Z" transform="translate(-152.01 -157.7)"/>
      <g>
        <rect class="cls-7" x="47.61" y="3.39" width="6.6" height="6.67" rx="0.5"/>
        <rect class="cls-3" x="47.61" y="3.39" width="6.6" height="6.67" rx="0.5"/>
      </g>
      <polygon class="cls-8" points="51.66 8.57 49.58 6.73 51.66 4.88 52.01 5.27 50.37 6.73 52.01 8.18 51.66 8.57"/>
      <g>
        <rect class="cls-7" x="55.9" y="3.39" width="6.6" height="6.67" rx="0.5"/>
        <rect class="cls-3" x="55.9" y="3.39" width="6.6" height="6.67" rx="0.5"/>
      </g>
      <g>
        <rect class="cls-7" x="66.86" y="3.39" width="114.89" height="6.67" rx="0.5"/>
        <rect class="cls-3" x="66.86" y="3.39" width="114.89" height="6.67" rx="0.5"/>
      </g>
      <polygon class="cls-8" points="58.45 8.57 58.1 8.18 59.73 6.73 58.1 5.27 58.45 4.88 60.52 6.73 58.45 8.57"/>
      <polygon class="cls-8" points="177.16 4.49 178.31 5.18 177.16 5.87 177.16 4.49"/>
      <path class="cls-8" d="M329.17,166.18a1.76,1.76,0,1,1,0-3.51v.42a1.34,1.34,0,1,0,1.34,1.34,1.27,1.27,0,0,0,0-.28l.41-.09a2.21,2.21,0,0,1,0,.37A1.75,1.75,0,0,1,329.17,166.18Z" transform="translate(-152.01 -157.7)"/>
      <polygon class="cls-8" points="188.11 7.03 186.26 8.88 186.33 7.7 185.95 7.68 185.83 9.58 187.73 9.46 187.71 9.08 186.53 9.15 188.38 7.3 188.11 7.03"/>
      <polygon class="cls-8" points="188.96 6.19 190.8 4.34 189.63 4.41 189.6 4.03 191.5 3.91 191.39 5.81 191 5.79 191.08 4.61 189.22 6.46 188.96 6.19"/>
    </g>
    <rect class="cls-9" x="31.3" y="21.41" width="158.35" height="114.87"/>
    <rect class="cls-10" x="29.54" y="19.76" width="158.35" height="114.87"/>
    <rect class="cls-11" x="42.52" y="39.88" width="44.17" height="12.29"/>
    <rect class="cls-11" x="86.69" y="39.88" width="44.17" height="12.29"/>
    <rect class="cls-11" x="130.86" y="39.88" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(88.79 30.71)">Spreadsheet</text>
    <text class="cls-13" transform="translate(210.52 45.48)">A lot of old CT transfers</text>
    <polygon class="cls-14" points="10.55 127.3 10.55 30.88 5.2 30.88 5.2 127.3 2.41 127.3 7.88 138.13 13.35 127.3 10.55 127.3"/>
    <text class="cls-12" transform="translate(56.45 48.25)">From</text>
    <rect class="cls-15" x="42.52" y="52.17" width="44.17" height="12.29"/>
    <text class="cls-16" transform="translate(47.28 60.54)">...</text>
    <rect class="cls-15" x="42.52" y="64.46" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(47.28 72.83)">Alice</text>
    <rect class="cls-15" x="42.52" y="76.75" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(47.28 85.12)">Cafe</text>
    <rect class="cls-15" x="42.52" y="89.04" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(47.28 97.41)">Lisa</text>
    <rect class="cls-15" x="42.52" y="101.33" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(47.28 109.7)">Cafe</text>
    <rect class="cls-15" x="86.69" y="52.17" width="44.17" height="12.29"/>
    <text class="cls-16" transform="translate(91.45 60.54)">...</text>
    <rect class="cls-15" x="86.69" y="64.46" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(91.45 72.83)">Cafe</text>
    <rect class="cls-15" x="86.69" y="76.75" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(91.45 85.12)">Anne</text>
    <rect class="cls-15" x="86.69" y="89.04" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(91.45 97.41)">Cafe</text>
    <rect class="cls-15" x="86.69" y="101.33" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(91.45 109.7)">Company</text>
    <rect class="cls-15" x="130.86" y="52.17" width="44.17" height="12.29"/>
    <text class="cls-16" transform="translate(160.78 60.54)">...</text>
    <rect class="cls-15" x="130.86" y="64.46" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(160.49 72.83)">10</text>
    <rect class="cls-15" x="130.86" y="76.75" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(150.76 85.12)">1,000</text>
    <rect class="cls-15" x="130.86" y="89.04" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(160.49 97.41)">10</text>
    <rect class="cls-15" x="130.86" y="101.33" width="44.17" height="12.29"/>
    <text class="cls-12" transform="translate(146.87 109.7)">10,000</text>
    <text class="cls-12" transform="translate(104.7 48.25)">To</text>
    <text class="cls-12" transform="translate(135.25 48.25)">Amount CT</text>
    <rect class="cls-15" x="42.52" y="113.62" width="44.17" height="12.29"/>
    <rect class="cls-15" x="86.69" y="113.62" width="44.17" height="12.29"/>
    <rect class="cls-15" x="130.86" y="113.62" width="44.17" height="12.29"/>
    <polyline class="cls-17" points="43.18 51.75 43.18 40.56 86.15 40.56"/>
    <polyline class="cls-17" points="87.34 51.75 87.34 40.56 130.31 40.56"/>
    <polyline class="cls-17" points="131.51 51.75 131.51 40.56 174.48 40.56"/>
    <text class="cls-12" transform="translate(0 28.96)">Time</text>
    <text class="cls-13" transform="translate(210.52 59.37)">Alice buys a cookie.</text>
    <text class="cls-13" transform="translate(210.52 71.89)">Anne buys <tspan class="cls-18" x="38.23" y="0">1</tspan><tspan x="42.32" y="0">,000 CT from</tspan><tspan x="0" y="9.5">the cafe for $</tspan><tspan class="cls-18" x="46.25" y="9.5">1</tspan><tspan class="cls-19" x="50.34" y="9.5">00.</tspan></text>
    <text class="cls-13" transform="translate(210.52 94.31)">Lisa buys a cookie.</text>
    <g>
      <path class="cls-20" d="M331.25,252.92c6.33,0,23.25-3.5,28.92-3.5" transform="translate(-152.01 -157.7)"/>
      <polygon points="179.79 97.08 176.55 95.21 179.79 93.34 179.79 97.08"/>
    </g>
    <text class="cls-13" transform="translate(210.52 108.38)">The company buys <tspan class="cls-18" x="67.17" y="0">1</tspan><tspan class="cls-21" x="71.26" y="0">0,000 CT</tspan><tspan x="0" y="9.5">from the cafe to reward</tspan><tspan x="0" y="19">coworkers for making great stuf</tspan><tspan class="cls-22" x="113.18" y="19">f</tspan><tspan class="cls-19" x="115.33" y="19">.</tspan></text>
    <g>
      <path class="cls-20" d="M331.25,265.7c8,1.55,23.25,7.3,28.92,7.3" transform="translate(-152.01 -157.7)"/>
      <polygon points="179.43 109.93 176.6 107.47 180.14 106.26 179.43 109.93"/>
    </g>
    <text class="cls-13" transform="translate(210.52 143.17)">New payments appended here</text>
    <g>
      <path class="cls-20" d="M331.25,214.37c10.5-4.12,21.92-12.2,28.92-13.7" transform="translate(-152.01 -157.7)"/>
      <polygon points="180.43 58.2 176.73 57.64 179.06 54.72 180.43 58.2"/>
    </g>
    <g>
      <path class="cls-20" d="M331.25,280.5c11,4.5,21.92,15.83,28.92,17.33" transform="translate(-152.01 -157.7)"/>
      <polygon points="179.04 124.73 176.76 121.77 180.46 121.27 179.04 124.73"/>
    </g>
    <g>
      <path class="cls-20" d="M331.25,227.7c10.25-4.2,21.92-12.7,28.92-14.2" transform="translate(-152.01 -157.7)"/>
      <polygon points="180.46 71.52 176.75 71.02 179.04 68.06 180.46 71.52"/>
    </g>
    <g>
      <path class="cls-20" d="M331.25,240c9.37-5,21.92-12.54,28.92-14" transform="translate(-152.01 -157.7)"/>
      <polygon points="180.6 83.72 176.86 83.59 178.84 80.42 180.6 83.72"/>
    </g>
  </g>
</svg>