<?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="filter_stepoffset.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 and a step of 3:</tspan></text><rect class="segments" x="160" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="220" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="280" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="340" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="400" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="460" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="520" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="580" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="640" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="700" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="760" y="42" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="820" y="42" width="48" height="48" rx="10" ry="10"/><text x="50" y="71" font-size="16px" xml:space="preserve"><tspan x="50" y="71" sodipodi:role="line">Light # = 1</tspan></text><rect class="segments inactive" x="160" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="220" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="280" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="340" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="400" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="460" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="520" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="580" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="640" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="700" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="760" y="122" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="820" y="122" width="48" height="48" rx="10" ry="10"/><text x="50" y="151" font-size="16px" xml:space="preserve"><tspan x="50" y="151" sodipodi:role="line">Light # = 2</tspan></text><rect class="segments inactive" x="160" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="220" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="280" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="340" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="400" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="460" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="520" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="580" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="640" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="700" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="760" y="202" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="820" y="202" width="48" height="48" rx="10" ry="10"/><text x="50" y="231" font-size="16px" xml:space="preserve"><tspan x="50" y="231" sodipodi:role="line">Light # = 3</tspan></text><rect class="segments inactive" x="160" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="220" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="280" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="340" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="400" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="460" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="520" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="580" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="640" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments" x="700" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments inactive" x="760" y="282" width="48" height="48" rx="10" ry="10"/><rect class="segments  inactive" x="820" y="282" width="48" height="48" rx="10" ry="10"/><text x="50" y="311" font-size="16px" xml:space="preserve"><tspan x="50" y="311" sodipodi:role="line">Light # = 4</tspan></text></g></svg>
