Arbitrary SVG

Screenshots

Problem Statement

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.

Solution

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-iframeThe 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.