Arbitrary SVG
Proof of concept for an on-chain interactive SVG, encoded completely in the image_data key of the tokenURI.
Project Description
LootProject popularized how NFTs can be rendered on-chain via building an SVG in the tokenURI function. ArbitrarySVG takes this a step further, using the same method with an injected script. This allows an artist or developer to create a dynamic work completely on-chain, rather than redirecting to a web2 url ( as Artblocks does to their https://generator.artblocks.io/[tokenId] ).
The first contract proves the concept of an arbitrary interactive SVG NFT. The second project allows the minter to inject their own javascript into the SVG, modifying the base circle as they please.
How it's Made
The smart contract was created with Foundry, utilizing Solmate's ERC721, OpenZeppelin's Strings, Base64, and Ownable.
The frontend was written with Typescript, utilizing WAGMI, Ethers, React, and Vite. It also uses Zora's iFrame here: https://docs.zora.co/docs/developer-tools/nft-rendering/introduction#nft-iframe
The crucial breakthrough was encoding a functional script into the SVG, using some somewhat esoteric SVG and encoding tricks.
The second step, making it injectable, then was a matter of storing the input string in the mint function, and serializing it back into the SVG.
