antialias/soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: optimize ten-frame blog examples for dark theme

Browse Source 
- Remove all scaffolding (carry boxes, answer boxes, place value colors) from ten-frame examples
- Show only the core addition problems with ten-frame visualization
- Add transparent background support for blog examples
- Implement smart color replacement for dark theme visibility:
  - White operator symbols (+) and horizontal bars (visible on dark background)
  - Black digits on white cells (preserved contrast)
  - White structural borders and lines
- Update generateTenFrameExamples.ts with post-processing to handle SVG colors
- Regenerate all 4 ten-frame example SVGs with clean, minimal presentation

The examples now focus purely on demonstrating the ten-frame concept
without distracting extra scaffolding elements.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Thomas Hallock
2025-11-07 14:05:07 -06:00
parent 440db8c9bd
commit 904701da2b
5 changed files with 1008 additions and 1428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

592
apps/web/public/blog/ten-frame-examples/beginner-ten-frames.svg
View File

@@ -1,355 +1,182 @@
<svg class="typst-doc" viewBox="0 0 129.20000000000002 196.3702" width="129.20000000000002pt" height="196.3702pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 196.3702 L 129.2 196.3702 L 129.2 0 Z "/>
<svg class="typst-doc" viewBox="0 0 129.20000000000002 179.52" width="129.20000000000002pt" height="179.52pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
<g>
<g transform="translate(12 12)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g transform="translate(40.4 32.4)">
<g class="typst-group">
<g>
<g transform="translate(5.76 16.8502)">
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g50A9CF7BBD3E245B4F50DF158AEDBE96" x="0" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g4464535FF97988491D19A1A7C0BB27B5" x="18.585199999999997" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g250F3B640C0788C697E6874B5FF00907" x="29.740199999999994" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g9A826EA0690AE39EAFE6680061F57048" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(0 16.8502)">
<g transform="translate(72.8 32.4)">
<g class="typst-group">
<g>
<g transform="translate(8 0)">
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g1232B22488ECA63989ACC8AA939D6950" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(-12.200000000000001 64.8)">
<g class="typst-group">
<g>
<g transform="translate(6.124900000000002 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA" x="0" fill="rgba(255, 255, 255, 0.9)" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g7D2321520E42B189FE68CF200F46D3B4" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g33BC6FDCD50A81E45C881AD80F3DD77D" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(40.4 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(0 0)">
<g transform="translate(1.6200000000000019 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 32.4 0 L 32.4 32.4 Z "/>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#fff9c4" fill-rule="nonzero" d="M 0 0 L 32.4 32.4 L 0 32.4 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 32.4 0 L 32.4 32.4 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 32.4 32.4 L 0 32.4 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 32.4)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g9A826EA0690AE39EAFE6680061F57048" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 32.4)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g1232B22488ECA63989ACC8AA939D6950" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(-12.200000000000001 64.8)">
<g class="typst-group">
<g>
<g transform="translate(6.124900000000002 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g7D2321520E42B189FE68CF200F46D3B4" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g33BC6FDCD50A81E45C881AD80F3DD77D" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(40.4 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(1.6200000000000019 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(1.6200000000000019 11.664)">
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
@@ -357,38 +184,110 @@
</g>
</g>
</g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 29.16 0 "/>
<g transform="translate(1.6200000000000019 11.664)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 123.12000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#fff9c4" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 123.12000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 123.12000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 29.16 0 "/>
</g>
</g>
</g>
@@ -398,15 +297,6 @@
</g>
</g>
<defs id="glyph">
<symbol id="g50A9CF7BBD3E245B4F50DF158AEDBE96" overflow="visible">
<path d="M 17.3242 2.6966 C 17.3242 3.2786002 16.7616 3.2786002 16.528801 3.2786002 L 11.9116 3.2786002 L 12.862201 6.4408 L 16.528801 6.4408 C 16.7616 6.4408 17.3242 6.4408 17.3242 7.0228004 C 17.3242 7.6242003 16.722801 7.6242003 16.4318 7.6242003 L 13.2502 7.6242003 L 14.7634 12.493601 C 14.841001 12.7264 14.841001 12.7458 14.841001 12.8816 C 14.841001 13.172601 14.6082 13.4636 14.2396 13.4636 C 13.8128 13.4636 13.7158 13.1338005 13.638201 12.8816 L 12.0086 7.6242003 L 8.2838 7.6242003 L 9.797 12.493601 C 9.8746 12.7264 9.8746 12.7458 9.8746 12.8816 C 9.8746 13.172601 9.6418 13.4636 9.2732 13.4636 C 8.8464 13.4636 8.7494 13.1338005 8.671801 12.8816 L 7.0422 7.6242003 L 2.134 7.6242003 C 1.843 7.6242003 1.2416 7.6242003 1.2416 7.0228004 C 1.2416 6.4408 1.8042 6.4408 2.0370002 6.4408 L 6.6542 6.4408 L 5.7036 3.2786002 L 2.0370002 3.2786002 C 1.8042 3.2786002 1.2416 3.2786002 1.2416 2.6966 C 1.2416 2.0952 1.843 2.0952 2.134 2.0952 L 5.3156004 2.0952 L 3.8024 -2.7936 C 3.7636 -2.91 3.7248 -3.0264 3.7248 -3.1816 C 3.7248 -3.4726 3.9576 -3.7636 4.3262 -3.7636 C 4.7336 -3.7636 4.8306003 -3.4532 4.9082003 -3.2204 L 6.5572004 2.0952 L 10.282001 2.0952 L 8.768801 -2.7936 C 8.7300005 -2.91 8.6912 -3.0264 8.6912 -3.1816 C 8.6912 -3.4726 8.924 -3.7636 9.292601 -3.7636 C 9.700001 -3.7636 9.797 -3.4532 9.8746 -3.2204 L 11.523601 2.0952 L 16.4318 2.0952 C 16.722801 2.0952 17.3242 2.0952 17.3242 2.6966 Z M 11.620601 6.4408 L 10.67 3.2786002 L 6.9452 3.2786002 L 7.8958 6.4408 Z "/>
</symbol>
<symbol id="g4464535FF97988491D19A1A7C0BB27B5" overflow="visible">
<path d="M 9.5836 0 L 9.5836 0.9118 L 6.8676004 0.9118 L 6.8676004 12.086201 C 6.8676004 12.5130005 6.8676004 12.707001 6.3632 12.707001 C 6.1498003 12.707001 6.111 12.707001 5.9364004 12.5712 C 4.4426003 11.465401 2.4444 11.465401 2.0370002 11.465401 L 1.649 11.465401 L 1.649 10.5536 L 2.0370002 10.5536 C 2.3474002 10.5536 3.4144 10.573 4.559 10.941601 L 4.559 0.9118 L 1.8624 0.9118 L 1.8624 0 C 2.716 0.0582 4.7724 0.0582 5.723 0.0582 C 6.6736 0.0582 8.7300005 0.0582 9.5836 0 Z "/>
</symbol>
<symbol id="g250F3B640C0788C697E6874B5FF00907" overflow="visible">
<path d="M 4.5978003 1.5132 C 4.5978003 2.3474002 3.9188 3.0264 3.0846 3.0264 C 2.2504 3.0264 1.5714 2.3474002 1.5714 1.5132 C 1.5714 0.679 2.2504 0 3.0846 0 C 3.9188 0 4.5978003 0.679 4.5978003 1.5132 Z "/>
</symbol>
<symbol id="g9A826EA0690AE39EAFE6680061F57048" overflow="visible">
<path d="M 11.6291 4.5066 L 10.981601 4.5066 C 10.8521 3.7296002 10.6708 2.5900002 10.4118 2.2015002 C 10.2305 1.9943 8.5211 1.9943 7.9513 1.9943 L 3.2893002 1.9943 L 6.0347004 4.662 C 10.0751 8.2362 11.6291 9.6348 11.6291 12.2248 C 11.6291 15.177401 9.2981 17.249401 6.1383 17.249401 C 3.2116 17.249401 1.2950001 14.8666 1.2950001 12.561501 C 1.2950001 11.1111 2.5900002 11.1111 2.6677 11.1111 C 3.108 11.1111 4.0145 11.421901 4.0145 12.4838 C 4.0145 13.157201 3.5483 13.830601 2.6418002 13.830601 C 2.4346 13.830601 2.3828 13.830601 2.3051 13.804701 C 2.9008 15.4882 4.2994003 16.4465 5.8016 16.4465 C 8.158501 16.4465 9.272201 14.3486 9.272201 12.2248 C 9.272201 10.152801 7.9772 8.1067 6.5527 6.5009003 L 1.5799 0.95830005 C 1.2950001 0.67340004 1.2950001 0.62160003 1.2950001 0 L 10.9039 0 Z "/>
</symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 30 KiB

964
apps/web/public/blog/ten-frame-examples/ten-frames-both-columns.svg
View File

File diff suppressed because it is too large Load Diff
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 66 KiB

After

Width:  |  Height:  |  Size: 51 KiB

592
apps/web/public/blog/ten-frame-examples/with-ten-frames.svg
View File

@@ -1,355 +1,182 @@
<svg class="typst-doc" viewBox="0 0 129.20000000000002 196.3702" width="129.20000000000002pt" height="196.3702pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 196.3702 L 129.2 196.3702 L 129.2 0 Z "/>
<svg class="typst-doc" viewBox="0 0 129.20000000000002 179.52" width="129.20000000000002pt" height="179.52pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
<g>
<g transform="translate(12 12)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g transform="translate(40.4 32.4)">
<g class="typst-group">
<g>
<g transform="translate(5.76 16.8502)">
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g50A9CF7BBD3E245B4F50DF158AEDBE96" x="0" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g4464535FF97988491D19A1A7C0BB27B5" x="18.585199999999997" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g250F3B640C0788C697E6874B5FF00907" x="29.740199999999994" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g52F799E49960B56A0CB940B7AEFF8E1" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(0 16.8502)">
<g transform="translate(72.8 32.4)">
<g class="typst-group">
<g>
<g transform="translate(8 0)">
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g11751737F8308750F67353B214B1E45A" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(-12.200000000000001 64.8)">
<g class="typst-group">
<g>
<g transform="translate(6.124900000000002 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA" x="0" fill="rgba(255, 255, 255, 0.9)" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g851DCC2C348500E95A48CED876DA2801" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g1232B22488ECA63989ACC8AA939D6950" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(40.4 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(0 0)">
<g transform="translate(1.6200000000000019 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 32.4 0 L 32.4 32.4 Z "/>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#fff9c4" fill-rule="nonzero" d="M 0 0 L 32.4 32.4 L 0 32.4 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 32.4 0 L 32.4 32.4 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 32.4 32.4 L 0 32.4 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 32.4)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g52F799E49960B56A0CB940B7AEFF8E1" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 32.4)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g11751737F8308750F67353B214B1E45A" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(-12.200000000000001 64.8)">
<g class="typst-group">
<g>
<g transform="translate(6.124900000000002 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g851DCC2C348500E95A48CED876DA2801" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g1232B22488ECA63989ACC8AA939D6950" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(40.4 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(1.6200000000000019 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(1.6200000000000019 11.664)">
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#0000004d" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
@@ -357,38 +184,110 @@
</g>
</g>
</g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 29.16 0 "/>
<g transform="translate(1.6200000000000019 11.664)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 11.664 L 29.16 11.664 L 29.16 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(5.832 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(11.664 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(17.496000000000002 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(23.328 5.832)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" stroke="rgba(255, 255, 255, 0.4)" stroke-width="0.4" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 5.832 L 5.832 5.832 L 5.832 0 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 123.12000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#fff9c4" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 123.12000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 123.12000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 29.16 0 "/>
</g>
</g>
</g>
@@ -398,15 +297,6 @@
</g>
</g>
<defs id="glyph">
<symbol id="g50A9CF7BBD3E245B4F50DF158AEDBE96" overflow="visible">
<path d="M 17.3242 2.6966 C 17.3242 3.2786002 16.7616 3.2786002 16.528801 3.2786002 L 11.9116 3.2786002 L 12.862201 6.4408 L 16.528801 6.4408 C 16.7616 6.4408 17.3242 6.4408 17.3242 7.0228004 C 17.3242 7.6242003 16.722801 7.6242003 16.4318 7.6242003 L 13.2502 7.6242003 L 14.7634 12.493601 C 14.841001 12.7264 14.841001 12.7458 14.841001 12.8816 C 14.841001 13.172601 14.6082 13.4636 14.2396 13.4636 C 13.8128 13.4636 13.7158 13.1338005 13.638201 12.8816 L 12.0086 7.6242003 L 8.2838 7.6242003 L 9.797 12.493601 C 9.8746 12.7264 9.8746 12.7458 9.8746 12.8816 C 9.8746 13.172601 9.6418 13.4636 9.2732 13.4636 C 8.8464 13.4636 8.7494 13.1338005 8.671801 12.8816 L 7.0422 7.6242003 L 2.134 7.6242003 C 1.843 7.6242003 1.2416 7.6242003 1.2416 7.0228004 C 1.2416 6.4408 1.8042 6.4408 2.0370002 6.4408 L 6.6542 6.4408 L 5.7036 3.2786002 L 2.0370002 3.2786002 C 1.8042 3.2786002 1.2416 3.2786002 1.2416 2.6966 C 1.2416 2.0952 1.843 2.0952 2.134 2.0952 L 5.3156004 2.0952 L 3.8024 -2.7936 C 3.7636 -2.91 3.7248 -3.0264 3.7248 -3.1816 C 3.7248 -3.4726 3.9576 -3.7636 4.3262 -3.7636 C 4.7336 -3.7636 4.8306003 -3.4532 4.9082003 -3.2204 L 6.5572004 2.0952 L 10.282001 2.0952 L 8.768801 -2.7936 C 8.7300005 -2.91 8.6912 -3.0264 8.6912 -3.1816 C 8.6912 -3.4726 8.924 -3.7636 9.292601 -3.7636 C 9.700001 -3.7636 9.797 -3.4532 9.8746 -3.2204 L 11.523601 2.0952 L 16.4318 2.0952 C 16.722801 2.0952 17.3242 2.0952 17.3242 2.6966 Z M 11.620601 6.4408 L 10.67 3.2786002 L 6.9452 3.2786002 L 7.8958 6.4408 Z "/>
</symbol>
<symbol id="g4464535FF97988491D19A1A7C0BB27B5" overflow="visible">
<path d="M 9.5836 0 L 9.5836 0.9118 L 6.8676004 0.9118 L 6.8676004 12.086201 C 6.8676004 12.5130005 6.8676004 12.707001 6.3632 12.707001 C 6.1498003 12.707001 6.111 12.707001 5.9364004 12.5712 C 4.4426003 11.465401 2.4444 11.465401 2.0370002 11.465401 L 1.649 11.465401 L 1.649 10.5536 L 2.0370002 10.5536 C 2.3474002 10.5536 3.4144 10.573 4.559 10.941601 L 4.559 0.9118 L 1.8624 0.9118 L 1.8624 0 C 2.716 0.0582 4.7724 0.0582 5.723 0.0582 C 6.6736 0.0582 8.7300005 0.0582 9.5836 0 Z "/>
</symbol>
<symbol id="g250F3B640C0788C697E6874B5FF00907" overflow="visible">
<path d="M 4.5978003 1.5132 C 4.5978003 2.3474002 3.9188 3.0264 3.0846 3.0264 C 2.2504 3.0264 1.5714 2.3474002 1.5714 1.5132 C 1.5714 0.679 2.2504 0 3.0846 0 C 3.9188 0 4.5978003 0.679 4.5978003 1.5132 Z "/>
</symbol>
<symbol id="g52F799E49960B56A0CB940B7AEFF8E1" overflow="visible">
<path d="M 12.1989 4.2735 L 12.1989 5.0764003 L 9.6089 5.0764003 L 9.6089 16.8609 C 9.6089 17.3789 9.6089 17.5343 9.1945 17.5343 C 8.9614 17.5343 8.8837 17.5343 8.6765 17.223501 L 0.7252 5.0764003 L 0.7252 4.2735 L 7.6146 4.2735 L 7.6146 2.0202 C 7.6146 1.0878 7.5628004 0.8029 5.6462 0.8029 L 5.1023 0.8029 L 5.1023 0 C 6.1642003 0.077700004 7.511 0.077700004 8.598801 0.077700004 C 9.686601 0.077700004 11.0593 0.077700004 12.121201 0 L 12.121201 0.8029 L 11.5773 0.8029 C 9.6607 0.8029 9.6089 1.0878 9.6089 2.0202 L 9.6089 4.2735 Z M 7.77 5.0764003 L 1.4504 5.0764003 L 7.77 14.737101 Z "/>
</symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 43 KiB

After

Width:  |  Height:  |  Size: 30 KiB

232
apps/web/public/blog/ten-frame-examples/without-ten-frames.svg
View File

@@ -1,199 +1,89 @@
<svg class="typst-doc" viewBox="0 0 129.20000000000002 170.4502" width="129.20000000000002pt" height="170.4502pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 170.4502 L 129.2 170.4502 L 129.2 0 Z "/>
<svg class="typst-doc" viewBox="0 0 129.20000000000002 153.6" width="129.20000000000002pt" height="153.6pt" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:h5="http://www.w3.org/1999/xhtml">
<g>
<g transform="translate(12 12)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<g transform="translate(40.4 32.4)">
<g class="typst-group">
<g>
<g transform="translate(5.76 16.8502)">
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g50A9CF7BBD3E245B4F50DF158AEDBE96" x="0" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g4464535FF97988491D19A1A7C0BB27B5" x="18.585199999999997" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g250F3B640C0788C697E6874B5FF00907" x="29.740199999999994" fill="#000000" fill-rule="nonzero"/>
<use xlink:href="#g52F799E49960B56A0CB940B7AEFF8E1" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(0 16.8502)">
<g transform="translate(72.8 32.4)">
<g class="typst-group">
<g>
<g transform="translate(8 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 32.4 0 L 32.4 32.4 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#fff9c4" fill-rule="nonzero" d="M 0 0 L 32.4 32.4 L 0 32.4 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(40.4 0)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 32.4 0 L 32.4 32.4 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(0 0)">
<g class="typst-group">
<g>
<g transform="translate(0 0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 32.4 32.4 L 0 32.4 Z "/>
</g>
</g>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 32.4)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g52F799E49960B56A0CB940B7AEFF8E1" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 32.4)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g11751737F8308750F67353B214B1E45A" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(-12.200000000000001 64.8)">
<g class="typst-group">
<g>
<g transform="translate(6.124900000000002 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g851DCC2C348500E95A48CED876DA2801" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g1232B22488ECA63989ACC8AA939D6950" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(40.4 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="#000000" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(8 97.20000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#fff9c4" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 97.20000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e8f5e9" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 97.20000000000002)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#e3f2fd" fill-rule="nonzero" stroke="#000000" stroke-width="0.5" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g11751737F8308750F67353B214B1E45A" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(-12.200000000000001 64.8)">
<g class="typst-group">
<g>
<g transform="translate(6.124900000000002 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA" x="0" fill="rgba(255, 255, 255, 0.9)" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(40.4 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g851DCC2C348500E95A48CED876DA2801" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(72.8 64.8)">
<g class="typst-group">
<g>
<g transform="translate(-0 -0)">
<path class="typst-shape" fill="#ffffff" fill-rule="nonzero" d="M 0 0 L 0 32.4 L 32.4 32.4 L 32.4 0 Z "/>
</g>
<g transform="translate(9.725000000000001 25.044850000000004)">
<g class="typst-text" transform="scale(1, -1)">
<use xlink:href="#g1232B22488ECA63989ACC8AA939D6950" x="0" fill="#000000" fill-rule="nonzero"/>
</g>
</g>
</g>
</g>
</g>
<g transform="translate(8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(40.4 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
<g transform="translate(72.8 97.20000000000002)">
<path class="typst-shape" fill="none" stroke="rgba(255, 255, 255, 0.8)" stroke-width="0.8" stroke-linecap="butt" stroke-linejoin="miter" stroke-miterlimit="4" d="M 0 0 L 32.4 0 "/>
</g>
</g>
</g>
</g>
</g>
<defs id="glyph">
<symbol id="g50A9CF7BBD3E245B4F50DF158AEDBE96" overflow="visible">
<path d="M 17.3242 2.6966 C 17.3242 3.2786002 16.7616 3.2786002 16.528801 3.2786002 L 11.9116 3.2786002 L 12.862201 6.4408 L 16.528801 6.4408 C 16.7616 6.4408 17.3242 6.4408 17.3242 7.0228004 C 17.3242 7.6242003 16.722801 7.6242003 16.4318 7.6242003 L 13.2502 7.6242003 L 14.7634 12.493601 C 14.841001 12.7264 14.841001 12.7458 14.841001 12.8816 C 14.841001 13.172601 14.6082 13.4636 14.2396 13.4636 C 13.8128 13.4636 13.7158 13.1338005 13.638201 12.8816 L 12.0086 7.6242003 L 8.2838 7.6242003 L 9.797 12.493601 C 9.8746 12.7264 9.8746 12.7458 9.8746 12.8816 C 9.8746 13.172601 9.6418 13.4636 9.2732 13.4636 C 8.8464 13.4636 8.7494 13.1338005 8.671801 12.8816 L 7.0422 7.6242003 L 2.134 7.6242003 C 1.843 7.6242003 1.2416 7.6242003 1.2416 7.0228004 C 1.2416 6.4408 1.8042 6.4408 2.0370002 6.4408 L 6.6542 6.4408 L 5.7036 3.2786002 L 2.0370002 3.2786002 C 1.8042 3.2786002 1.2416 3.2786002 1.2416 2.6966 C 1.2416 2.0952 1.843 2.0952 2.134 2.0952 L 5.3156004 2.0952 L 3.8024 -2.7936 C 3.7636 -2.91 3.7248 -3.0264 3.7248 -3.1816 C 3.7248 -3.4726 3.9576 -3.7636 4.3262 -3.7636 C 4.7336 -3.7636 4.8306003 -3.4532 4.9082003 -3.2204 L 6.5572004 2.0952 L 10.282001 2.0952 L 8.768801 -2.7936 C 8.7300005 -2.91 8.6912 -3.0264 8.6912 -3.1816 C 8.6912 -3.4726 8.924 -3.7636 9.292601 -3.7636 C 9.700001 -3.7636 9.797 -3.4532 9.8746 -3.2204 L 11.523601 2.0952 L 16.4318 2.0952 C 16.722801 2.0952 17.3242 2.0952 17.3242 2.6966 Z M 11.620601 6.4408 L 10.67 3.2786002 L 6.9452 3.2786002 L 7.8958 6.4408 Z "/>
</symbol>
<symbol id="g4464535FF97988491D19A1A7C0BB27B5" overflow="visible">
<path d="M 9.5836 0 L 9.5836 0.9118 L 6.8676004 0.9118 L 6.8676004 12.086201 C 6.8676004 12.5130005 6.8676004 12.707001 6.3632 12.707001 C 6.1498003 12.707001 6.111 12.707001 5.9364004 12.5712 C 4.4426003 11.465401 2.4444 11.465401 2.0370002 11.465401 L 1.649 11.465401 L 1.649 10.5536 L 2.0370002 10.5536 C 2.3474002 10.5536 3.4144 10.573 4.559 10.941601 L 4.559 0.9118 L 1.8624 0.9118 L 1.8624 0 C 2.716 0.0582 4.7724 0.0582 5.723 0.0582 C 6.6736 0.0582 8.7300005 0.0582 9.5836 0 Z "/>
</symbol>
<symbol id="g250F3B640C0788C697E6874B5FF00907" overflow="visible">
<path d="M 4.5978003 1.5132 C 4.5978003 2.3474002 3.9188 3.0264 3.0846 3.0264 C 2.2504 3.0264 1.5714 2.3474002 1.5714 1.5132 C 1.5714 0.679 2.2504 0 3.0846 0 C 3.9188 0 4.5978003 0.679 4.5978003 1.5132 Z "/>
</symbol>
<symbol id="g52F799E49960B56A0CB940B7AEFF8E1" overflow="visible">
<path d="M 12.1989 4.2735 L 12.1989 5.0764003 L 9.6089 5.0764003 L 9.6089 16.8609 C 9.6089 17.3789 9.6089 17.5343 9.1945 17.5343 C 8.9614 17.5343 8.8837 17.5343 8.6765 17.223501 L 0.7252 5.0764003 L 0.7252 4.2735 L 7.6146 4.2735 L 7.6146 2.0202 C 7.6146 1.0878 7.5628004 0.8029 5.6462 0.8029 L 5.1023 0.8029 L 5.1023 0 C 6.1642003 0.077700004 7.511 0.077700004 8.598801 0.077700004 C 9.686601 0.077700004 11.0593 0.077700004 12.121201 0 L 12.121201 0.8029 L 11.5773 0.8029 C 9.6607 0.8029 9.6089 1.0878 9.6089 2.0202 L 9.6089 4.2735 Z M 7.77 5.0764003 L 1.4504 5.0764003 L 7.77 14.737101 Z "/>
</symbol>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 20 KiB

After

Width:  |  Height:  |  Size: 9.7 KiB

56
apps/web/scripts/generateTenFrameExamples.ts
View File

@@ -35,6 +35,7 @@ interface ExampleOptions {
showPlaceValueColors?: boolean
showTenFrames?: boolean
showProblemNumbers?: boolean
transparentBackground?: boolean
fontSize?: number
addend1: number
addend2: number
@@ -58,9 +59,10 @@ function generateExampleTypst(config: ExampleOptions): string {
const showNumbers = config.showProblemNumbers ?? false
const showTenFrames = config.showTenFrames ?? false
const showTenFramesForAll = false // Not used for blog examples
const transparentBg = config.transparentBackground ?? false
return String.raw`
#set page(width: auto, height: auto, margin: 12pt, fill: white)
#set page(width: auto, height: auto, margin: 12pt, fill: ${transparentBg ? 'none' : 'white'})
#set text(size: ${fontSize}pt, font: "New Computer Modern Math")
#let heavy-stroke = 0.8pt
@@ -101,11 +103,12 @@ const examples = [
options: {
addend1: 47,
addend2: 38, // 7+8=15 requires regrouping, will show ten-frames
showCarryBoxes: true,
showAnswerBoxes: true,
showPlaceValueColors: true,
showCarryBoxes: false,
showAnswerBoxes: false,
showPlaceValueColors: false,
showTenFrames: true,
showProblemNumbers: true,
showProblemNumbers: false,
transparentBackground: true,
},
},
{
@@ -115,11 +118,12 @@ const examples = [
options: {
addend1: 47,
addend2: 38, // Same problem, no ten-frames
showCarryBoxes: true,
showAnswerBoxes: true,
showPlaceValueColors: true,
showCarryBoxes: false,
showAnswerBoxes: false,
showPlaceValueColors: false,
showTenFrames: false, // No ten-frames
showProblemNumbers: true,
showProblemNumbers: false,
transparentBackground: true,
},
},
{
@@ -129,11 +133,12 @@ const examples = [
options: {
addend1: 28,
addend2: 15, // 8+5=13 requires regrouping
showCarryBoxes: true,
showAnswerBoxes: true,
showPlaceValueColors: true,
showCarryBoxes: false,
showAnswerBoxes: false,
showPlaceValueColors: false,
showTenFrames: true,
showProblemNumbers: true,
showProblemNumbers: false,
transparentBackground: true,
},
},
{
@@ -143,11 +148,12 @@ const examples = [
options: {
addend1: 57,
addend2: 68, // Both ones (7+8=15) and tens (5+6+1=12) regroup
showCarryBoxes: true,
showAnswerBoxes: true,
showPlaceValueColors: true,
showCarryBoxes: false,
showAnswerBoxes: false,
showPlaceValueColors: false,
showTenFrames: true,
showProblemNumbers: true,
showProblemNumbers: false,
transparentBackground: true,
},
},
] as const
@@ -161,12 +167,26 @@ for (const example of examples) {
const typstSource = generateExampleTypst(example.options)
// Compile to SVG
const svg = execSync('typst compile --format svg - -', {
let svg = execSync('typst compile --format svg - -', {
input: typstSource,
encoding: 'utf8',
maxBuffer: 2 * 1024 * 1024,
})
// Post-process: Make SVG visible on dark background
// - Digits on white cells should stay BLACK
// - Operator symbols (+) should be WHITE
// - Structural elements (borders, bars) should be WHITE
svg = svg
.replace(/stroke="#000000"/g, 'stroke="rgba(255, 255, 255, 0.8)"')
.replace(/stroke="#0000004d"/g, 'stroke="rgba(255, 255, 255, 0.4)"')
// Replace operator (+) fill specifically to white
svg = svg.replace(
/(<use xlink:href="#gCFEF70472F9D2AA9AC128F96529819DA"[^>]*fill=")#000000/g,
'$1rgba(255, 255, 255, 0.9)'
)
// Save to file
const outputPath = path.join(outputDir, example.filename)
fs.writeFileSync(outputPath, svg, 'utf-8')