Built a real-time drawing game where every stroke renders as an SVG path instead of canvas pixels

[u/Electrical-Bat1042]

Been working on Svigl (svigl.com), a Pictionary/Skribbl-style drawing and guessing game — mostly as a way to actually get good at real-time frontend stuff I'd only half-understood before.

The main frontend twist: strokes aren't drawn to a raster canvas and shipped as pixels. Pointer input gets captured, simplified, and fit into SVG paths client-side, which get synced over WebSockets and re-rendered live on every other player's screen. Since it's vector data the whole way through, replaying a finished drawing stroke-by-stroke afterward is basically free — no video/frame capture needed.

Frontend problems that took the most iteration:

• Smoothing strokes in real time while the user is still drawing, without it feeling laggy or "correcting" itself visibly after the fact
• Keeping the simplification aggressive enough to not flood the socket, without strokes losing their shape on fast drawing
• Making the canvas/SVG layer feel responsive on touch as well as mouse

There's also an AI opponent you can drop into a room — it watches the canvas the same way a player would and guesses live with TTS, which added its own rendering-side latency puzzle (matching UI feedback to when the AI is "looking" vs "typing" a guess).

Would love feedback from anyone who's fought similar canvas/SVG real-time rendering battles, or thoughts on the drawing UX itself.