About three years ago(2018) I created a pong game that used Scalable Vector Graphics(SVG) for the graphics instead of a traditional HTML canvas. This is its story.
Some resources related to SVGs.
The main reason for this project was to learn about SVG and SVG animations. Before starting this I had never used an SVG in my own websites. My only interactions with them was seeing them used on other websites and the one time I opened up InkScape. Back in the days when I cared about fancy websites I was envious of the cool animations some sites had and wanted them for myself.
The thing that motivated me to create a game was seeing the 13k game jam. A jam that only accepts games whos entire contents fit in 13kb including all their assets. I had only heard about it after it was already over that year but that wasn't going to stop me from creating a tiny game.
Why Pong?
Pong is second only to Tetris[Citation Needed] though I had never played it. Plus with a game as simple as pong it would be impossible for me not to finish it. And as it turns out anything is possible.
Partially. I did create a game that used an SVG instead of an HTMLCanvas. I learned how to move the paddles using the transform attribute from JavaScript, as well as move the ball along a path using a nanimateMotion tag.
As a bonus the game was 9kb when compressed when I had "finnished it". That included the svg, html, and transpiled typescript.
However the game wasn't finnished when I stopped working on it three years ago but I feel I achieved my goal. Or rather the pong game took me as far as it could on my SVG adventure. Or at least that's what I thought back then...
What you see below is the new and improved SVG Pong, with far fewer bugs, a cleaner(TM) codebase, and better preformace.
I revisted this project because I thought it would be fun. That really is the main reason. And guess what. It was fun. I got to track down weird bugs related to collisions and missing state. The project truely was just slapped together over a weekend and it show(ed/s).
Try to have fun against the restless AI.