I have a great passion for games of all kinds.
Since I was a kid board games were always something I enjoyed and I even would sketch out and make up my own out of cardboard.
So as my kids get older and we start playing games together I thought it would be fun to design our own.
To make this easier I made some code snippets that are tools and templates for making various games using SVG.
Path Games
Games like Life and Candy Land follow along a path of tiles to reach some ultimate goal.
So I made a path building tool using nodes and a path that masks a voronoi for breaking up the segments.
By dragging around nodes and hitting the + button you can fork the path to create branches.
See the Pen Candy Land Game Builder by CJ Gammon (@cjgammon) on CodePen.
Grid Games
Chutes and Ladders and Checkers are games based more on a grid.
This is the kind of thing that’s easy to do in SVG.
Then we can tack on numbers, color them, and programmatically add mappings like slides between various squares.
See the Pen Chutes and Ladders by CJ Gammon (@cjgammon) on CodePen.
Card Games
Board games are cool but another classic analog game is cards.
We can utilize the ‘use’ element to repeat the symbols used to create our custom deck.
This way we can update a single heart or single spade design and have it propagate across the entire deck.
You could then save it as SVG and open it in Illustrator to tweak individually or make other adjustments.
See the Pen SVG Playing Cards by CJ Gammon (@cjgammon) on CodePen.
It’s neat to see how using a bit of code to automate designs can help with tooling and templates to make customizing your own games that much easier.