How I Built an Interactive "Number Bonds" Math Game using Next.js and Pure SVGs

Hey DEV community! 👋 I just pushed a new educational puzzle game live on my web arcade, 7x.games . It’s called Number Bonds—a classic "part-part-whole" math concept where kids figure out how two smaller numbers combine to make a larger one. While building educational games, I try to avoid heavy game engines like WebGL or Phaser. For a puzzle like this, DOM elements and React state are more than enough. But the challenge is making it look fluid, interactive, and visually appealing for kids without relying on massive image assets. Here is a breakdown of how I engineered the UI and the math logic using Next.js, Tailwind CSS, and pure SVGs. 📐 1. The Visual Architecture: Pure SVG Connections A Number Bond is typically represented as a large "Whole" circle connected by lines to two or more smaller "Part" circles. Instead of exporting PNGs for every possible layout, I built a dynamic component. I used CSS Grid for the positioning of the HTML input bubbles, and placed an absolute-positioned la