Building an Educational Math Game with Next.js, Pure SVGs, and JSON-LD

Hey DEV community! 👋 I recently added a new educational game to my web arcade, 7x.games, called Fraction Math Master. Usually, when developers think of building web games, they immediately reach for Canvas, WebGL, or engines like Phaser. But for educational puzzle games, that is often overkill. I wanted to share how I built a highly interactive, fast, and SEO-optimized math game using pure React, Tailwind CSS, and SVGs. Here is a breakdown of the technical hurdles and how I solved them. 🍕 1. Drawing Dynamic "Pizza Slices" with SVG Math Kids learn fractions best visually. I needed a way to show a circle divided into any number of slices (denominator) with a specific number of them shaded in (numerator). Instead of loading heavy image assets, I built a FractionCircle React component that generates SVG paths on the fly using basic trigonometry. By calculating the angle of each slice ((2 * Math.PI) / denominator), I used Math.cos and Math.sin to draw exact SVG arcs. JavaScript // Simplif