antialias
/
soroban-abacus-flashcards
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
soroban-abacus-flashcards/packages/abacus-react/examples
History
Thomas Hallock 8024d0a25c fix: correct SVG text positioning to match React component alignment 
Adjusted SVG text element positioning to precisely match React component
foreignObject calculations, eliminating the "down" positioning offset that
made server-rendered SVGs appear misaligned compared to client-rendered versions.

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

Co-Authored-By: Claude <noreply@anthropic.com>
 		2025-09-19 15:49:53 -05:00
..
README.md fix: correct SVG text positioning to match React component alignment 2025-09-19 15:49:53 -05:00
basic-usage.svg fix: correct SVG text positioning to match React component alignment 2025-09-19 15:49:53 -05:00
custom-styling.svg fix: correct SVG text positioning to match React component alignment 2025-09-19 15:49:53 -05:00
interactive.svg fix: correct SVG text positioning to match React component alignment 2025-09-19 15:49:53 -05:00
tutorial-mode.svg fix: correct SVG text positioning to match React component alignment 2025-09-19 15:49:53 -05:00

README.md

AbacusReact Examples

Generated SVG examples demonstrating various features of the AbacusReact component.

Files

  • basic-usage.svg - Simple abacus showing a number
  • interactive.svg - Clickable abacus with animations
  • custom-styling.svg - Personalized colors and highlights
  • tutorial-mode.svg - Educational guidance with tooltips

Usage in Documentation

These SVG files can be embedded directly in markdown:

![Basic Usage](./examples/basic-usage.svg)

Or referenced in HTML:

<img src="./examples/basic-usage.svg" alt="Basic AbacusReact Usage" />

Generated automatically by generate-examples.js using react-dom/server Last updated: 2025-09-19T20:47:46.001Z