<?xml version="1.0" encoding="UTF-8"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg width="920" height="340" inkscape:version="1.1.1 (3bf5ae0d25, 2021-09-20)" sodipodi:docname="section_filter.svg" version="1.1" viewBox="0 0 920 340" xmlns="http://www.w3.org/2000/svg" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"><sodipodi:namedview bordercolor="#999999" borderopacity="1" pagecolor="#ffffff" showgrid="false" units="px"><sodipodi:guide inkscape:color="rgb(0,0,255)" inkscape:label="" inkscape:locked="false" orientation="-1,0" position="460,500"/></sodipodi:namedview><style><![CDATA[
:root {
  --fg-color: rgb(60, 60, 67);
  --bg-color: #ffffff;
}
@media screen and (prefers-color-scheme: dark) {
  :root {
    --fg-color: rgba(255, 255, 245, 0.86);
    --bg-color: #1e1e20;
  }
}
@media print {
  :root {
    --fg-color: #000000;
    --bg-color: #ffffff;
  }
}
.figure {
  fill: var(--fg-color);
  stroke: var(--fg-color);
  stroke-width: 0;
  font-family: 'Chinese Quotes', 'Inter var', 'Inter', ui-sans-serif,
    system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
    'Helvetica Neue', Helvetica, Arial, 'Noto Sans', sans-serif,
    'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
    'Noto Color Emoji';
  font-size: 16px;
}
.segments {
  stroke-width: 4px;
}
.segments.inactive {
  fill: none;
}
]]></style><g class="figure" inkscape:groupmode="layer" inkscape:label="Layer 1"><text x="460" y="20" font-size="16px" text-align="center" text-anchor="middle" xml:space="preserve"><tspan x="460" y="20" sodipodi:role="line">With 12 chunks in 4 segments:</tspan></text><rect class="segments" x="140" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="200" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="260" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="320" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="380" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="440" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="500" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="560" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="620" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="680" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="740" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="800" y="42" width="48" height="48" rx="10" ry="10"/><text x="70" y="71" font-size="16px" xml:space="preserve"><tspan x="70" y="71" sodipodi:role="line">Id = 1</tspan></text><g transform="translate(0,80)"><rect class="segments  inactive" x="140" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="200" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="260" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="320" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="380" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="440" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="500" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="560" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="620" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="680" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="740" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="800" y="42" width="48" height="48" rx="10" ry="10"/><text x="70" y="71" font-size="16px" xml:space="preserve"><tspan x="70" y="71" sodipodi:role="line">Id = 2</tspan></text></g><g transform="translate(0,160)"><rect class="segments  inactive" x="140" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="200" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="260" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="320" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="380" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="440" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="500" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="560" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="620" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="680" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="740" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="800" y="42" width="48" height="48" rx="10" ry="10"/><text x="70" y="71" font-size="16px" xml:space="preserve"><tspan x="70" y="71" sodipodi:role="line">Id = 3</tspan></text></g><g transform="translate(0,240)"><rect class="segments  inactive" x="140" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="200" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="260" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="320" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="380" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="440" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="500" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="560" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="620" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="680" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="740" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="800" y="42" width="48" height="48" rx="10" ry="10"/><text x="70" y="71" font-size="16px" xml:space="preserve"><tspan x="70" y="71" sodipodi:role="line">Id = 4</tspan></text></g></g></svg>
