assets/stroke_encoding.svg

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="520" viewBox="0 0 1200 520">
  <rect width="1200" height="520" fill="#f8fafc"/>
  <text x="48" y="55" font-family="Arial" font-size="30" font-weight="700" fill="#0f172a">One stroke, three synchronized representations</text>
  <g transform="translate(55 105)">
    <rect width="300" height="330" rx="18" fill="#fff" stroke="#cbd5e1" stroke-width="2"/>
    <text x="25" y="42" font-family="Arial" font-size="21" font-weight="700" fill="#0f172a">1. Raw device events</text>
    <path d="M70 260 C44 177 75 77 151 71 C216 66 243 132 209 183 C185 219 133 246 84 273 C145 281 214 270 252 219"
          fill="none" stroke="#0f172a" stroke-width="6" stroke-linecap="round"/>
    <g fill="#2563eb">
      <circle cx="70" cy="260" r="5"/><circle cx="57" cy="211" r="5"/><circle cx="63" cy="157" r="5"/>
      <circle cx="91" cy="104" r="5"/><circle cx="151" cy="71" r="5"/><circle cx="211" cy="91" r="5"/>
      <circle cx="228" cy="145" r="5"/><circle cx="209" cy="183" r="5"/><circle cx="167" cy="224" r="5"/>
      <circle cx="84" cy="273" r="5"/><circle cx="145" cy="281" r="5"/><circle cx="214" cy="270" r="5"/>
      <circle cx="252" cy="219" r="5"/>
    </g>
    <text x="25" y="310" font-family="Arial" font-size="15" fill="#475569">Every touch event is preserved in memory.</text>
  </g>
  <g transform="translate(450 105)">
    <rect width="300" height="330" rx="18" fill="#fff" stroke="#cbd5e1" stroke-width="2"/>
    <text x="25" y="42" font-family="Arial" font-size="21" font-weight="700" fill="#0f172a">2. Canonical 6 Hz taps</text>
    <path d="M70 260 C44 177 75 77 151 71 C216 66 243 132 209 183 C185 219 133 246 84 273 C145 281 214 270 252 219"
          fill="none" stroke="#94a3b8" stroke-width="5" stroke-linecap="round"/>
    <g fill="#06b6d4" stroke="#0e7490" stroke-width="2">
      <circle cx="70" cy="260" r="9"/><circle cx="63" cy="157" r="9"/><circle cx="151" cy="71" r="9"/>
      <circle cx="228" cy="145" r="9"/><circle cx="167" cy="224" r="9"/><circle cx="84" cy="273" r="9"/>
      <circle cx="214" cy="270" r="9"/><circle cx="252" cy="219" r="9"/>
    </g>
    <text x="25" y="307" font-family="Arial" font-size="15" fill="#475569">Start/end and pen-up are mandatory anchors.</text>
  </g>
  <g transform="translate(845 105)">
    <rect width="300" height="330" rx="18" fill="#fff" stroke="#cbd5e1" stroke-width="2"/>
    <text x="25" y="42" font-family="Arial" font-size="21" font-weight="700" fill="#0f172a">3. 128×19 tensor</text>
    <g transform="translate(32 72)">
      <rect width="236" height="190" fill="#e2e8f0" rx="8"/>
      <g stroke="#fff" stroke-width="1">
        <path d="M0 24H236 M0 48H236 M0 72H236 M0 96H236 M0 120H236 M0 144H236 M0 168H236"/>
        <path d="M29 0V190 M58 0V190 M87 0V190 M116 0V190 M145 0V190 M174 0V190 M203 0V190"/>
      </g>
      <g fill="#2563eb"><rect x="0" y="25" width="29" height="20"/><rect x="29" y="73" width="29" height="20"/><rect x="58" y="121" width="29" height="20"/></g>
      <g fill="#06b6d4"><rect x="87" y="49" width="29" height="20"/><rect x="116" y="97" width="29" height="20"/><rect x="145" y="145" width="29" height="20"/></g>
      <g fill="#8b5cf6"><rect x="174" y="1" width="29" height="20"/><rect x="203" y="169" width="29" height="20"/></g>
    </g>
    <text x="25" y="290" font-family="Arial" font-size="14" fill="#475569">x/y · direction · curvature · time</text>
    <text x="25" y="312" font-family="Arial" font-size="14" fill="#475569">speed · pen-up · missing mask · modality</text>
  </g>
  <path d="M365 270H430" stroke="#0ea5e9" stroke-width="4" marker-end="url(#a)"/>
  <path d="M760 270H825" stroke="#0ea5e9" stroke-width="4" marker-end="url(#a)"/>
  <defs><marker id="a" markerWidth="10" markerHeight="10" refX="9" refY="3" orient="auto"><path d="M0,0L0,6L9,3z" fill="#0ea5e9"/></marker></defs>
</svg>