on-chain svg nft that changes its content and metadata as the chain goes on


This is first and foremost an educational project. The intent was to introduce the team to the web3 world for what basically was the first engineering experience with it. While we are proud of what we achieved, but please note that this is most certainly a beginner's project and not an attempt at a prize. This is a NFT project using some existing standard libraries that has a unique hook: it utilizes smart contracts to dynamically change the state of each NFT artwork created in this collection after users interact with this NFT in any given way.

PixelPeaks showcase

How it's made

We achieve this by placing the NFT data fully onchain -- the URI does not lead to an IPFS hash or another site. It contains all the necessary data to construct the SVG image within the token data. So, everything is onchain. Thus, everything is also possible to be changed onchain through smart contracts. We do exactly that and change some parts of the content based on actions associated with the NFT -- namely transfer using _afterTokenTransfer(). After every mint and transfer, the contract changes its state variable "currentColour", which every NFT depends on to retrieve a colour for one of its parts (in this case -- a sun's or a moon's colour over a mountain peak). The result is a fun NFT artwork that is truly unique and not right-click-saveable since it is an active, live NFT the exact composition of which is bound on the state of its contract on the ethereum chain. The additional overhead for all transfers etc. would probably only make sense in a gas abundant network like an L2. We have completely ran out of time (and expertise) to do anything with the front end at all, and will navigate the demo through just the contract debug interface on scaffold-eth.