Files

Thomas Hallock dedc0e7873 fix: match React component font sizing for SVG numbers

Updated SVG text generation to use the exact same font size calculation as
the React component: Math.max(8, 14 * scaleFactor). This ensures perfect
visual consistency between live React components and generated SVG examples.

Font styling now matches exactly:
- fontSize: Math.max(8, 14 * scaleFactor)
- fontFamily: 'monospace'
- fontWeight: 'bold'

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

Co-Authored-By: Claude <noreply@anthropic.com>

2025-09-19 15:45:46 -05:00

724 B

Raw Blame History

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:45:33.669Z

724 B Raw Blame History

AbacusReact Examples

Files

Usage in Documentation

724 B

Raw Blame History