project screenshot 1
project screenshot 2
project screenshot 3
project screenshot 4
project screenshot 5
project screenshot 6

Arbitrary SVG

Proof of concept for an on-chain interactive SVG, encoded completely in the image_data key of the tokenURI.

Arbitrary SVG

Created At

Metabolism

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.

background image mobile

Join the mailing list

Get the latest news and updates