About This Project
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.
Just Why
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.
Was it a Success?
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...
The Revitalized SVG Pong
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.