On Chain SVGs

Published: 5/1/2022

The team behind WatchFaces World (WFW) recently released a toolkit for building on-chain SVG images.

It is a bit ridiculous. If you've spent any time trying to write an on-chain SVG you know exactly how much of a headache the process quickly becomes. But hot-chain-svg delivers on its promise.

One of the best features is the yarn qa command, and that is saying something because what isn't "one of the best features" in this tool?.. This command generates 255 SVGs to a temporary folder, and analyzes them for syntax errors. The QA output from a recent project is below. Now that the renderer is ready to go it can be plugged into a minting contract.

This render contract is set up to parse the minters eth address to get 7 color hex codes. These are then used to color the output SVG.

Here is an example set of 255 animated SVG files created using hot-chain-svg. The only change needed from the default qa script was moving const address = await deploy(vm, pk, bytecode); inside of the for loop so that a new address was generated for each tokenId.