Recipe: Dynamic on-chain SVG NFTs with price-reactive metadata

[PetarStoev02]

Description

Recipe showing how to interact with and create NFTs that store their artwork entirely on-chain as SVG, with metadata that changes based on external data (like token prices from Chainlink).

Why this matters

Most NFTs point to off-chain images (IPFS or centralized servers). On-chain SVG NFTs are fully decentralized — the art lives in the contract forever. Dynamic NFTs that change based on real-world data (price feeds, time, user actions) are the next evolution. The 32-hour course builds one from Solidity — we show the TS interaction side.

Scope

• Read on-chain SVG NFT metadata (decode base64 tokenURI)
• Display on-chain SVG in a frontend
• Mint dynamic NFTs with price thresholds
• Update NFT state based on Chainlink price feeds
• Base64 encoding/decoding for on-chain metadata
• Construct tokenURI JSON with embedded SVG

w3-kit approach

• TypeScript utilities for base64 metadata handling
• Rendering on-chain SVGs in React components
• Integration with Chainlink price feed recipe
• Practical: build a portfolio NFT that shows happy/sad face based on ETH price

Acceptance criteria

• Recipe in recipes/evm/
• Decode and display on-chain SVG NFTs
• Base64 tokenURI parsing utilities
• Dynamic NFT interaction example
• .learn.md explaining on-chain vs off-chain NFT storage tradeoffs