diff --git a/README.md b/README.md
index 55de7e7..d64e757 100644
--- a/README.md
+++ b/README.md
@@ -25,6 +25,7 @@ Copy-paste code snippets for common web3 tasks. Each recipe has EVM and Solana i
 | fetch-nft-collection | NFTs     |
 | buy-nft              | NFTs     |
 | display-nft-metadata | NFTs     |
+| onchain-svg-nft      | NFTs     |
 | swap-tokens          | DeFi     |
 | provide-liquidity    | DeFi     |
 | stake-tokens         | DeFi     |
diff --git a/recipes/onchain-svg-nft/README.md b/recipes/onchain-svg-nft/README.md
new file mode 100644
index 0000000..3b8d068
--- /dev/null
+++ b/recipes/onchain-svg-nft/README.md
@@ -0,0 +1,53 @@
+# On-chain SVG NFT
+
+Decode and render fully on-chain SVG NFTs, read Chainlink price feeds, and mint dynamic NFTs whose metadata changes based on real-world data.
+
+## What this does
+
+Given an ERC-721 contract address and token ID, reads the base64-encoded `tokenURI`, decodes the JSON metadata, extracts the embedded SVG image, and renders it safely in a sandboxed iframe. Optionally reads a Chainlink price feed to demonstrate how dynamic NFTs react to on-chain state changes.
+
+## On-chain vs off-chain NFT storage
+
+|                | Fully on-chain (SVG)                       | Off-chain (IPFS/Arweave)           | Off-chain (HTTP)                 |
+| -------------- | ------------------------------------------ | ---------------------------------- | -------------------------------- |
+| **Storage**    | SVG + JSON in contract bytecode            | URI on-chain, data off-chain       | URI on-chain, data on server     |
+| **Permanence** | Permanent — survives as long as chain runs | IPFS: fragile / Arweave: perm.     | Server can go down               |
+| **Dynamic?**   | Yes — contract generates metadata per call | No — content-addressed = immutable | Yes — server can change response |
+| **Gas cost**   | High (deploy) / Free (read)                | Low (just store URI)               | Low (just store URI)             |
+| **Examples**   | Nouns, Autoglyphs, Loot                    | Bored Apes, Azuki                  | Early/low-budget projects        |
+
+## How dynamic NFTs work
+
+A dynamic NFT contract generates its `tokenURI` response at read time instead of storing a fixed URI. The contract reads on-chain state (prices, timestamps, ownership history) and constructs different SVG/JSON based on that state. The metadata changes without any transaction — a view call returns different data each time conditions change.
+
+## Why EVM only
+
+On-chain SVG generation via `abi.encodePacked` inside `tokenURI()` is an EVM-specific pattern. Solana NFTs use Metaplex, which stores a URI pointing off-chain — it does not generate art inside the program. Chainlink price feeds are also EVM-native. For Solana oracle patterns, see the Pyth network documentation.
+
+## Security notes
+
+- **SVG XSS** — on-chain SVGs can contain `<script>` tags or event handlers; always render in a sandboxed iframe with `sandbox=""` (maximum restriction)
+- **Price feed staleness** — check `updatedAt` from Chainlink; stale data (> 1 hour old) may indicate a feed issue
+- **Contract verification** — verify the NFT contract on Etherscan before interacting; a malicious `tokenURI` could return crafted payloads
+
+## Run the showcase
+
+```bash
+cd recipes/onchain-svg-nft/example
+npm install
+npm run dev
+```
+
+Open http://localhost:3333 — built on the `templates/recipe-shell/` with w3-kit design system and components.
+
+Features:
+
+- **Read On-chain SVG** — fetches Loot NFTs from mainnet, renders SVG + w3-kit NFTCard
+- **Chainlink Price Feed** — live ETH/USD via w3-kit PriceTicker
+- **Deploy & Mint** — deploy a DynamicSvgNft contract on Sepolia, mint, read back
+
+## Files
+
+- `evm.tsx` — Reusable component: decode on-chain SVG, read Chainlink price, mint
+- `example/` — Showcase app (TanStack Start + w3-kit design system)
+- `onchain-svg-nft.learn.md` — Educational deep-dive (~2500 words)
diff --git a/recipes/onchain-svg-nft/evm.tsx b/recipes/onchain-svg-nft/evm.tsx
new file mode 100644
index 0000000..a3ed51b
--- /dev/null
+++ b/recipes/onchain-svg-nft/evm.tsx
@@ -0,0 +1,282 @@
+"use client";
+
+import { useMemo, useState } from "react";
+import {
+  usePublicClient,
+  useAccount,
+  useReadContract,
+  useWriteContract,
+  useWaitForTransactionReceipt,
+} from "wagmi";
+import { formatUnits } from "viem";
+
+// ★ ERC-721 tokenURI — reads the on-chain metadata pointer
+const erc721TokenURIAbi = [
+  {
+    name: "tokenURI",
+    type: "function",
+    stateMutability: "view",
+    inputs: [{ name: "tokenId", type: "uint256" }],
+    outputs: [{ name: "", type: "string" }],
+  },
+] as const;
+
+// ★ Chainlink AggregatorV3 — only need latestRoundData for price reads
+const aggregatorV3Abi = [
+  {
+    name: "latestRoundData",
+    type: "function",
+    stateMutability: "view",
+    inputs: [],
+    outputs: [
+      { name: "roundId", type: "uint80" },
+      { name: "answer", type: "int256" },
+      { name: "startedAt", type: "uint256" },
+      { name: "updatedAt", type: "uint256" },
+      { name: "answeredInRound", type: "uint80" },
+    ],
+  },
+] as const;
+
+// ★ Minimal mint ABI for dynamic NFT contracts
+const dynamicNftMintAbi = [
+  {
+    name: "safeMint",
+    type: "function",
+    stateMutability: "nonpayable",
+    inputs: [
+      { name: "to", type: "address" },
+      { name: "tokenId", type: "uint256" },
+    ],
+    outputs: [],
+  },
+] as const;
+
+type NFTMetadata = {
+  name?: string;
+  description?: string;
+  image?: string;
+  animation_url?: string;
+  attributes?: Array<{ trait_type: string; value: string | number }>;
+};
+
+// ★ Decode base64-encoded on-chain JSON metadata from a data URI
+function decodeOnchainMetadata(uri: string): NFTMetadata | null {
+  if (!uri.startsWith("data:application/json;base64,")) return null;
+  try {
+    const json = atob(uri.split(",")[1]);
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+
+// ★ Extract raw SVG markup from a base64 or UTF-8 data URI
+function extractSvg(metadata: NFTMetadata): string | null {
+  const imageUri = metadata.image || metadata.animation_url;
+  if (!imageUri) return null;
+
+  if (imageUri.startsWith("data:image/svg+xml;base64,")) {
+    try {
+      return atob(imageUri.split(",")[1]);
+    } catch {
+      return null;
+    }
+  }
+
+  if (imageUri.startsWith("data:image/svg+xml;utf8,") || imageUri.startsWith("data:image/svg+xml,")) {
+    return decodeURIComponent(imageUri.split(",")[1]);
+  }
+
+  return null;
+}
+
+// ★ Chainlink ETH/USD on mainnet — works without wallet connection
+const DEFAULT_PRICE_FEED = "0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419";
+const PRICE_THRESHOLD = 2000_00000000n; // $2,000 with 8 decimals
+
+export function OnchainSvgNft() {
+  const client = usePublicClient();
+  const { address } = useAccount();
+
+  // --- Read & display state ---
+  const [contractAddress, setContractAddress] = useState("");
+  const [tokenId, setTokenId] = useState("");
+  const [metadata, setMetadata] = useState<NFTMetadata | null>(null);
+  const [rawUri, setRawUri] = useState<string | null>(null);
+
+  // ★ Derive SVG content from metadata instead of storing as separate state
+  const svgContent = useMemo(() => (metadata ? extractSvg(metadata) : null), [metadata]);
+  const [isFetching, setIsFetching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // --- Chainlink price feed state ---
+  const [priceFeedAddress, setPriceFeedAddress] = useState(DEFAULT_PRICE_FEED);
+
+  // ★ Live ETH/USD price — refetches every 30 seconds
+  const { data: roundData } = useReadContract({
+    address: priceFeedAddress as `0x${string}`,
+    abi: aggregatorV3Abi,
+    functionName: "latestRoundData",
+    query: { enabled: !!priceFeedAddress, refetchInterval: 30_000 },
+  });
+
+  const ethPrice = roundData ? formatUnits(roundData[1], 8) : null;
+  const mood = roundData && roundData[1] > PRICE_THRESHOLD ? "bullish" : "bearish";
+
+  // --- Mint state ---
+  const [mintContract, setMintContract] = useState("");
+  const [mintTokenId, setMintTokenId] = useState("");
+  const { writeContract, data: txHash, isPending, error: mintError } = useWriteContract();
+  const { isLoading: isConfirming, isSuccess } = useWaitForTransactionReceipt({ hash: txHash });
+
+  // ★ Fetch tokenURI, decode base64 JSON, extract embedded SVG
+  const handleFetch = async () => {
+    if (!client || !contractAddress || !tokenId) return;
+    setIsFetching(true);
+    setError(null);
+    setMetadata(null);
+    setRawUri(null);
+
+    try {
+      const uri = await client.readContract({
+        address: contractAddress as `0x${string}`,
+        abi: erc721TokenURIAbi,
+        functionName: "tokenURI",
+        args: [BigInt(tokenId)],
+      });
+      setRawUri(uri);
+
+      const decoded = decodeOnchainMetadata(uri);
+      if (decoded) {
+        setMetadata(decoded);
+        return;
+      }
+
+      const res = await fetch(uri);
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+      setMetadata(await res.json());
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setIsFetching(false);
+    }
+  };
+
+  const handleMint = () => {
+    if (!mintContract || !mintTokenId || !address) return;
+    try {
+      writeContract({
+        address: mintContract as `0x${string}`,
+        abi: dynamicNftMintAbi,
+        functionName: "safeMint",
+        args: [address, BigInt(mintTokenId)],
+      });
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  return (
+    <div>
+      <h2>On-chain SVG NFT</h2>
+
+      {/* --- Section 1: Read & render on-chain SVG --- */}
+      <fieldset style={{ marginBottom: "1.5rem" }}>
+        <legend>Read On-chain SVG</legend>
+        <input
+          value={contractAddress}
+          onChange={(e) => setContractAddress(e.target.value)}
+          placeholder="NFT contract address (0x...)"
+          style={{ display: "block", marginBottom: "0.5rem", width: "100%" }}
+        />
+        <input
+          value={tokenId}
+          onChange={(e) => setTokenId(e.target.value)}
+          placeholder="Token ID"
+          style={{ display: "block", marginBottom: "0.5rem", width: "100%" }}
+        />
+        <button onClick={handleFetch} disabled={isFetching || !contractAddress || !tokenId}>
+          {isFetching ? "Fetching..." : "Fetch SVG NFT"}
+        </button>
+
+        {rawUri && (
+          <p style={{ wordBreak: "break-all", fontSize: "0.85rem" }}>
+            URI: <code>{rawUri.length > 80 ? `${rawUri.slice(0, 80)}...` : rawUri}</code>
+          </p>
+        )}
+
+        {/* ★ Render on-chain SVG in a sandboxed iframe to prevent XSS */}
+        {svgContent && (
+          <iframe
+            sandbox=""
+            srcDoc={svgContent}
+            style={{ width: "300px", height: "300px", border: "1px solid #ccc", marginTop: "1rem" }}
+            title="On-chain SVG NFT"
+          />
+        )}
+
+        {metadata && (
+          <div style={{ marginTop: "1rem" }}>
+            {metadata.name && <h3>{metadata.name}</h3>}
+            {metadata.description && <p>{metadata.description}</p>}
+            {metadata.attributes && (
+              <ul>
+                {metadata.attributes.map((attr, i) => (
+                  <li key={i}>
+                    {attr.trait_type}: {attr.value}
+                  </li>
+                ))}
+              </ul>
+            )}
+          </div>
+        )}
+      </fieldset>
+
+      {/* --- Section 2: Chainlink price feed --- */}
+      <fieldset style={{ marginBottom: "1.5rem" }}>
+        <legend>Chainlink ETH/USD Price</legend>
+        <input
+          value={priceFeedAddress}
+          onChange={(e) => setPriceFeedAddress(e.target.value)}
+          placeholder="Price feed address"
+          style={{ display: "block", marginBottom: "0.5rem", width: "100%" }}
+        />
+        {ethPrice && (
+          <p>
+            ETH/USD: <strong>${Number(ethPrice).toLocaleString()}</strong>{" "}
+            {mood === "bullish" ? "— bullish" : "— bearish"}
+          </p>
+        )}
+        <p style={{ fontSize: "0.85rem", color: "#666" }}>
+          Dynamic NFTs use this price to change their artwork in real time.
+        </p>
+      </fieldset>
+
+      {/* --- Section 3: Mint dynamic NFT --- */}
+      <fieldset>
+        <legend>Mint Dynamic NFT</legend>
+        <input
+          value={mintContract}
+          onChange={(e) => setMintContract(e.target.value)}
+          placeholder="Dynamic NFT contract address (0x...)"
+          style={{ display: "block", marginBottom: "0.5rem", width: "100%" }}
+        />
+        <input
+          value={mintTokenId}
+          onChange={(e) => setMintTokenId(e.target.value)}
+          placeholder="Token ID to mint"
+          style={{ display: "block", marginBottom: "0.5rem", width: "100%" }}
+        />
+        <button onClick={handleMint} disabled={isPending || !mintContract || !mintTokenId || !address}>
+          {isPending ? "Minting..." : "Mint NFT"}
+        </button>
+        {isConfirming && <p>Waiting for confirmation...</p>}
+        {isSuccess && <p>NFT minted! Tx: {txHash}</p>}
+        {mintError && <p>Error: {mintError.message}</p>}
+      </fieldset>
+
+      {error && <p style={{ color: "red" }}>Error: {error}</p>}
+    </div>
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/package.json b/recipes/onchain-svg-nft/example/package.json
new file mode 100644
index 0000000..0e38293
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/package.json
@@ -0,0 +1,39 @@
+{
+  "name": "w3-kit-recipe-shell",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "vite dev",
+    "build": "vite build",
+    "start": "node .output/server/index.mjs"
+  },
+  "dependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@tanstack/react-query": "^5.75.5",
+    "@tanstack/react-router": "^1.121.3",
+    "@tanstack/react-start": "^1.121.3",
+    "clsx": "^2.1.1",
+    "geist": "^1.7.0",
+    "lucide-react": "^1.7.0",
+    "nitro": "^3.0.260311-beta",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0",
+    "viem": "^2.21.0",
+    "wagmi": "^2.14.0"
+  },
+  "overrides": {
+    "h3": "2.0.1-rc.20",
+    "h3-v2": "npm:h3@2.0.1-rc.20"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "@types/react-dom": "^19.1.2",
+    "@vitejs/plugin-react": "^4.4.1",
+    "typescript": "^5.8.3",
+    "vite": "^7.3.2"
+  }
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/nft-card/NFTCard.tsx b/recipes/onchain-svg-nft/example/src/components/nft-card/NFTCard.tsx
new file mode 100644
index 0000000..9c63bcd
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/nft-card/NFTCard.tsx
@@ -0,0 +1,89 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { cn } from "../../lib/utils";
+import type { NFT, NFTCardProps } from "./types";
+import { formatAddress, getChainName } from "./utils";
+
+export type { NFT, NFTCardProps };
+
+export function NFTCard({ nft, onNFTClick, className }: NFTCardProps) {
+  const [isImageLoaded, setIsImageLoaded] = useState(false);
+  const [imageError, setImageError] = useState(false);
+  const isClickable = !!onNFTClick;
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onNFTClick?.(nft);
+      }
+    },
+    [onNFTClick, nft],
+  );
+
+  return (
+    <div
+      role={isClickable ? "button" : undefined}
+      tabIndex={isClickable ? 0 : undefined}
+      onKeyDown={isClickable ? handleKeyDown : undefined}
+      className={cn(
+        "rounded-xl border border-border bg-card overflow-hidden transition-colors duration-150",
+        isClickable && "cursor-pointer hover:border-muted-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className,
+      )}
+      onClick={() => onNFTClick?.(nft)}
+    >
+      <div className="relative aspect-square bg-muted">
+        {!imageError ? (
+          <img
+            src={nft.image}
+            alt={nft.name}
+            onLoad={() => setIsImageLoaded(true)}
+            onError={() => setImageError(true)}
+            className={cn(
+              "w-full h-full object-cover transition-opacity duration-150",
+              isImageLoaded ? "opacity-100" : "opacity-0",
+            )}
+          />
+        ) : (
+          <div className="absolute inset-0 flex items-center justify-center text-sm text-muted-foreground">
+            No image
+          </div>
+        )}
+        {!isImageLoaded && !imageError && (
+          <div className="absolute inset-0 animate-pulse bg-muted" />
+        )}
+      </div>
+
+      <div className="px-4 pt-3 pb-4">
+        <p className="text-sm font-medium text-foreground truncate">{nft.name}</p>
+        <p className="text-xs text-muted-foreground mt-0.5 truncate">
+          {nft.collection && <>{nft.collection} · </>}
+          <span className="font-mono">#{nft.tokenId}</span>
+        </p>
+
+        {nft.attributes && nft.attributes.length > 0 && (
+          <div className="mt-3 flex flex-wrap gap-1.5">
+            {nft.attributes.slice(0, 4).map((attr, i) => (
+              <span
+                key={i}
+                className="inline-flex items-center rounded-full bg-muted px-2 py-0.5 text-[11px] text-muted-foreground"
+              >
+                <span className="opacity-60 mr-1">{attr.trait_type}:</span>
+                {attr.value}
+              </span>
+            ))}
+          </div>
+        )}
+
+        <div className="mt-3 pt-3 border-t border-border flex items-center justify-between text-[11px] text-muted-foreground">
+          <span className="font-mono">{formatAddress(nft.owner)}</span>
+          <span>{getChainName(nft.chainId)}</span>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default NFTCard;
diff --git a/recipes/onchain-svg-nft/example/src/components/nft-card/types.ts b/recipes/onchain-svg-nft/example/src/components/nft-card/types.ts
new file mode 100644
index 0000000..5de6363
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/nft-card/types.ts
@@ -0,0 +1,21 @@
+export interface NFT {
+  id: string;
+  name: string;
+  description?: string;
+  image: string;
+  owner: string;
+  collection?: string;
+  tokenId: string;
+  contractAddress: string;
+  chainId: number;
+  attributes?: {
+    trait_type: string;
+    value: string | number;
+  }[];
+}
+
+export interface NFTCardProps {
+  nft: NFT;
+  onNFTClick?: (nft: NFT) => void;
+  className?: string;
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/nft-card/utils.ts b/recipes/onchain-svg-nft/example/src/components/nft-card/utils.ts
new file mode 100644
index 0000000..e6c6448
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/nft-card/utils.ts
@@ -0,0 +1,17 @@
+export function formatAddress(address: string): string {
+  if (!address) return "";
+  return `${address.slice(0, 6)}...${address.slice(-4)}`;
+}
+
+export function getChainName(chainId: number): string {
+  switch (chainId) {
+    case 1: return "Ethereum";
+    case 11155111: return "Sepolia";
+    case 137: return "Polygon";
+    case 56: return "BSC";
+    case 42161: return "Arbitrum";
+    case 10: return "Optimism";
+    case 8453: return "Base";
+    default: return "Unknown";
+  }
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/price-ticker/PriceTicker.tsx b/recipes/onchain-svg-nft/example/src/components/price-ticker/PriceTicker.tsx
new file mode 100644
index 0000000..1af447d
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/price-ticker/PriceTicker.tsx
@@ -0,0 +1,73 @@
+"use client";
+
+import { TrendingUp, TrendingDown } from "lucide-react";
+import { cn } from "../../lib/utils";
+import { TokenIcon } from "../ui/token-icon";
+import type { Token, PriceTickerProps } from "./types";
+import { formatCurrency, formatLargeNumber, formatPercentage } from "./utils";
+
+export type { Token, PriceTickerProps };
+
+export function PriceTicker({ tokens, className, onTokenClick }: PriceTickerProps) {
+  return (
+    <div className={cn("rounded-xl border border-border bg-card overflow-hidden", className)}>
+      <div className="flex items-center justify-between px-4 py-3 border-b border-border">
+        <h3 className="text-sm font-semibold text-foreground">Market Prices</h3>
+        <span className="text-xs text-muted-foreground">{tokens.length} tokens</span>
+      </div>
+
+      <div className="hidden sm:grid grid-cols-[1fr_auto_auto_auto] gap-4 px-4 py-2 border-b border-border text-xs text-muted-foreground">
+        <span>Token</span>
+        <span className="w-24 text-right">Price</span>
+        <span className="w-20 text-right">24h</span>
+        <span className="w-24 text-right hidden lg:block">Market Cap</span>
+      </div>
+
+      <div className="divide-y divide-border">
+        {tokens.map((token) => {
+          const isPositive = token.priceChange["24h"] >= 0;
+          return (
+            <div
+              key={token.symbol}
+              className={cn(
+                "grid grid-cols-[1fr_auto] sm:grid-cols-[1fr_auto_auto_auto] gap-4 items-center px-4 py-3 transition-colors duration-150",
+                onTokenClick ? "cursor-pointer hover:bg-muted" : "",
+              )}
+              onClick={() => onTokenClick?.(token)}
+            >
+              <div className="flex items-center gap-3 min-w-0">
+                <TokenIcon symbol={token.symbol} logoURI={token.logoURI} size="md" />
+                <div className="min-w-0">
+                  <p className="text-sm font-medium text-foreground truncate">{token.name}</p>
+                  <p className="text-xs text-muted-foreground">{token.symbol}</p>
+                </div>
+              </div>
+
+              <div className="w-24 text-right">
+                <p className="text-sm font-medium text-foreground tabular-nums">{formatCurrency(token.price)}</p>
+              </div>
+
+              <div className="w-20 text-right hidden sm:block">
+                <span
+                  className={cn(
+                    "inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium",
+                    isPositive ? "text-emerald-600 bg-emerald-50 dark:bg-emerald-950/50 dark:text-emerald-400" : "text-red-600 bg-red-50 dark:bg-red-950/50 dark:text-red-400",
+                  )}
+                >
+                  {isPositive ? <TrendingUp className="h-3 w-3" /> : <TrendingDown className="h-3 w-3" />}
+                  {formatPercentage(token.priceChange["24h"])}
+                </span>
+              </div>
+
+              <div className="w-24 text-right hidden lg:block">
+                <p className="text-sm text-muted-foreground tabular-nums">{formatLargeNumber(token.marketCap)}</p>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+}
+
+export default PriceTicker;
diff --git a/recipes/onchain-svg-nft/example/src/components/price-ticker/types.ts b/recipes/onchain-svg-nft/example/src/components/price-ticker/types.ts
new file mode 100644
index 0000000..189fa21
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/price-ticker/types.ts
@@ -0,0 +1,23 @@
+export interface Token {
+  name: string;
+  symbol: string;
+  price: number;
+  priceChange: {
+    "1h": number;
+    "24h": number;
+    "7d": number;
+    "30d": number;
+  };
+  marketCap: number;
+  volume: { "24h": number };
+  circulatingSupply: number;
+  maxSupply: number | null;
+  logoURI: string;
+  lastUpdated: string;
+}
+
+export interface PriceTickerProps {
+  tokens: Token[];
+  className?: string;
+  onTokenClick?: (token: Token) => void;
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/price-ticker/utils.ts b/recipes/onchain-svg-nft/example/src/components/price-ticker/utils.ts
new file mode 100644
index 0000000..7d209e4
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/price-ticker/utils.ts
@@ -0,0 +1,19 @@
+export function formatCurrency(value: number): string {
+  return new Intl.NumberFormat("en-US", {
+    style: "currency",
+    currency: "USD",
+    minimumFractionDigits: 2,
+    maximumFractionDigits: 2,
+  }).format(value);
+}
+
+export function formatLargeNumber(value: number): string {
+  if (value >= 1_000_000_000) return `$${(value / 1_000_000_000).toFixed(2)}B`;
+  if (value >= 1_000_000) return `$${(value / 1_000_000).toFixed(2)}M`;
+  if (value >= 1_000) return `$${(value / 1_000).toFixed(2)}K`;
+  return `$${value.toFixed(2)}`;
+}
+
+export function formatPercentage(value: number): string {
+  return `${value >= 0 ? "+" : ""}${value.toFixed(2)}%`;
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/recipe-layout.tsx b/recipes/onchain-svg-nft/example/src/components/recipe-layout.tsx
new file mode 100644
index 0000000..3bea3a8
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/recipe-layout.tsx
@@ -0,0 +1,125 @@
+import { useAccount, useConnect, useDisconnect } from "wagmi";
+import { Button } from "./ui/button";
+import { Badge } from "./ui/badge";
+import { Moon, Sun, Wallet, LogOut, ExternalLink } from "lucide-react";
+import { useEffect, useState, type ReactNode } from "react";
+
+interface RecipeLayoutProps {
+  title: string;
+  description: string;
+  category: string;
+  chains: string[];
+  children: ReactNode;
+}
+
+function ThemeToggle() {
+  const [dark, setDark] = useState(false);
+
+  useEffect(() => {
+    setDark(document.documentElement.classList.contains("dark"));
+  }, []);
+
+  const toggle = () => {
+    const next = !dark;
+    document.documentElement.classList.toggle("dark", next);
+    localStorage.setItem("w3-theme", next ? "dark" : "light");
+    setDark(next);
+  };
+
+  return (
+    <Button variant="ghost" size="icon" onClick={toggle} aria-label="Toggle theme">
+      {dark ? <Sun className="h-4 w-4" /> : <Moon className="h-4 w-4" />}
+    </Button>
+  );
+}
+
+function WalletConnect() {
+  const { address, isConnected, chain } = useAccount();
+  const { connect, connectors } = useConnect();
+  const { disconnect } = useDisconnect();
+
+  if (isConnected && address) {
+    return (
+      <div className="flex items-center gap-2">
+        <Badge variant="outline" className="gap-1.5 py-1 font-mono text-xs">
+          <span className="h-2 w-2 rounded-full bg-emerald-500" />
+          {chain?.name ?? "Unknown"}
+        </Badge>
+        <Badge variant="secondary" className="font-mono text-xs">
+          {address.slice(0, 6)}...{address.slice(-4)}
+        </Badge>
+        <Button variant="ghost" size="icon" onClick={() => disconnect()} aria-label="Disconnect">
+          <LogOut className="h-4 w-4" />
+        </Button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex gap-2">
+      {connectors.map((connector) => (
+        <Button key={connector.uid} variant="outline" size="sm" onClick={() => connect({ connector })}>
+          <Wallet className="mr-2 h-4 w-4" />
+          {connector.name}
+        </Button>
+      ))}
+    </div>
+  );
+}
+
+export function RecipeLayout({ title, description, category, chains, children }: RecipeLayoutProps) {
+  return (
+    <div className="min-h-screen bg-background">
+      <header className="border-b border-border">
+        <div className="mx-auto flex max-w-5xl items-center justify-between px-6 py-4">
+          <div className="flex items-center gap-3">
+            <a href="https://w3-kit.com" className="text-sm font-semibold tracking-tight text-foreground no-underline">
+              w3-kit
+            </a>
+            <span className="text-muted-foreground">/</span>
+            <span className="text-sm text-muted-foreground">recipes</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <ThemeToggle />
+            <a
+              href="https://github.com/w3-kit/learn"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-muted-foreground hover:text-foreground transition-colors"
+            >
+              <ExternalLink className="h-4 w-4" />
+            </a>
+          </div>
+        </div>
+      </header>
+
+      <div className="border-b border-border bg-card">
+        <div className="mx-auto max-w-5xl px-6 py-8">
+          <div className="mb-3 flex items-center gap-2">
+            <Badge>{category}</Badge>
+            {chains.map((c) => (
+              <Badge key={c} variant="outline">{c.toUpperCase()}</Badge>
+            ))}
+          </div>
+          <h1 className="text-2xl font-semibold tracking-tight">{title}</h1>
+          <p className="mt-2 text-muted-foreground">{description}</p>
+          <div className="mt-6">
+            <WalletConnect />
+          </div>
+        </div>
+      </div>
+
+      <main className="mx-auto max-w-5xl px-6 py-8">{children}</main>
+
+      <footer className="border-t border-border">
+        <div className="mx-auto max-w-5xl px-6 py-4">
+          <p className="text-xs text-muted-foreground">
+            Built with{" "}
+            <a href="https://w3-kit.com" className="text-accent hover:underline">w3-kit</a>
+            {" "}— open-source web3 developer toolkit
+          </p>
+        </div>
+      </footer>
+    </div>
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/ui/badge.tsx b/recipes/onchain-svg-nft/example/src/components/ui/badge.tsx
new file mode 100644
index 0000000..5af51d9
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/ui/badge.tsx
@@ -0,0 +1,28 @@
+import { cn } from "../../lib/utils";
+import type { HTMLAttributes } from "react";
+
+type Variant = "default" | "secondary" | "outline" | "destructive";
+
+const variants: Record<Variant, string> = {
+  default: "bg-primary text-primary-foreground",
+  secondary: "bg-secondary text-secondary-foreground",
+  outline: "border border-border text-foreground",
+  destructive: "bg-destructive text-white",
+};
+
+interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  variant?: Variant;
+}
+
+export function Badge({ variant = "default", className, ...props }: BadgeProps) {
+  return (
+    <span
+      className={cn(
+        "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-medium transition-colors",
+        variants[variant],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/ui/button.tsx b/recipes/onchain-svg-nft/example/src/components/ui/button.tsx
new file mode 100644
index 0000000..5b63389
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/ui/button.tsx
@@ -0,0 +1,41 @@
+import { cn } from "../../lib/utils";
+import type { ButtonHTMLAttributes } from "react";
+
+type Variant = "default" | "secondary" | "outline" | "ghost" | "destructive";
+type Size = "default" | "sm" | "lg" | "icon";
+
+const variants: Record<Variant, string> = {
+  default: "bg-primary text-primary-foreground hover:bg-primary/90",
+  secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+  outline: "border border-border bg-transparent hover:bg-muted",
+  ghost: "hover:bg-muted",
+  destructive: "bg-destructive text-white hover:bg-destructive/90",
+};
+
+const sizes: Record<Size, string> = {
+  default: "h-10 px-4 py-2 text-sm",
+  sm: "h-8 px-3 text-xs",
+  lg: "h-12 px-6 text-base",
+  icon: "h-10 w-10",
+};
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: Variant;
+  size?: Size;
+}
+
+export function Button({ variant = "default", size = "default", className, ...props }: ButtonProps) {
+  return (
+    <button
+      className={cn(
+        "inline-flex items-center justify-center gap-2 rounded-lg font-medium transition-colors",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:pointer-events-none disabled:opacity-50 cursor-pointer",
+        variants[variant],
+        sizes[size],
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/ui/card.tsx b/recipes/onchain-svg-nft/example/src/components/ui/card.tsx
new file mode 100644
index 0000000..ec6bd4c
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/ui/card.tsx
@@ -0,0 +1,24 @@
+import { cn } from "../../lib/utils";
+import type { HTMLAttributes } from "react";
+
+export function Card({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div className={cn("rounded-xl border border-border bg-card text-card-foreground shadow-sm", className)} {...props} />
+  );
+}
+
+export function CardHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("flex flex-col gap-1.5 p-6", className)} {...props} />;
+}
+
+export function CardTitle({ className, ...props }: HTMLAttributes<HTMLHeadingElement>) {
+  return <h3 className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />;
+}
+
+export function CardDescription({ className, ...props }: HTMLAttributes<HTMLParagraphElement>) {
+  return <p className={cn("text-sm text-muted-foreground", className)} {...props} />;
+}
+
+export function CardContent({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn("p-6 pt-0", className)} {...props} />;
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/ui/input.tsx b/recipes/onchain-svg-nft/example/src/components/ui/input.tsx
new file mode 100644
index 0000000..b70a8a6
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/ui/input.tsx
@@ -0,0 +1,17 @@
+import { cn } from "../../lib/utils";
+import type { InputHTMLAttributes } from "react";
+
+export function Input({ className, ...props }: InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      className={cn(
+        "flex h-10 w-full rounded-lg border border-input bg-background px-3 py-2 text-sm",
+        "placeholder:text-muted-foreground",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+        "disabled:cursor-not-allowed disabled:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/src/components/ui/token-icon.tsx b/recipes/onchain-svg-nft/example/src/components/ui/token-icon.tsx
new file mode 100644
index 0000000..7bb8877
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/components/ui/token-icon.tsx
@@ -0,0 +1,49 @@
+"use client";
+
+import { useState } from "react";
+import { cn } from "../../lib/utils";
+
+interface TokenIconProps {
+  symbol: string;
+  logoURI?: string;
+  size?: "sm" | "md" | "lg";
+  className?: string;
+}
+
+const sizeMap = {
+  sm: "w-5 h-5 text-[10px]",
+  md: "w-6 h-6 text-xs",
+  lg: "w-8 h-8 text-sm",
+};
+
+export function TokenIcon({ symbol, logoURI, size = "md", className }: TokenIconProps) {
+  const [hasError, setHasError] = useState(false);
+  const [isLoaded, setIsLoaded] = useState(false);
+
+  if (!logoURI || hasError) {
+    return (
+      <div
+        className={cn(
+          "rounded-full bg-muted flex items-center justify-center font-medium text-muted-foreground flex-shrink-0",
+          sizeMap[size],
+          className,
+        )}
+      >
+        {symbol.substring(0, 2).toUpperCase()}
+      </div>
+    );
+  }
+
+  return (
+    <div className={cn("rounded-full overflow-hidden flex-shrink-0 bg-muted relative", sizeMap[size], className)}>
+      <img
+        src={logoURI}
+        alt={symbol}
+        className={cn("w-full h-full object-contain transition-opacity duration-150", isLoaded ? "opacity-100" : "opacity-0")}
+        onError={() => setHasError(true)}
+        onLoad={() => setIsLoaded(true)}
+      />
+      {!isLoaded && <div className="absolute inset-0 animate-pulse bg-muted" />}
+    </div>
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/src/lib/contract-bytecode.ts b/recipes/onchain-svg-nft/example/src/lib/contract-bytecode.ts
new file mode 100644
index 0000000..bc2e8bb
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/lib/contract-bytecode.ts
@@ -0,0 +1 @@
+export const DYNAMIC_SVG_NFT_BYTECODE = "0x60c0604052600f60809081526e111e5b985b5a58c814d591c8139195608a1b60a0525f9061002d908261010b565b506040805180820190915260048152634453564760e01b6020820152600190610056908261010b565b50348015610062575f5ffd5b506101c9565b634e487b7160e01b5f52604160045260245ffd5b600181811c9082168061009057607f821691505b6020821081036100ae57634e487b7160e01b5f52602260045260245ffd5b50919050565b601f821115610106578282111561010657805f5260205f20601f840160051c60208510156100df57505f5b90810190601f840160051c035f5b81811015610102575f838201556001016100ed565b5050505b505050565b81516001600160401b0381111561012457610124610068565b61013881610132845461007c565b846100b4565b6020601f82116001811461016a575f83156101535750848201515b5f19600385901b1c1916600184901b1784556101c2565b5f84815260208120601f198516915b828110156101995787850151825560209485019460019092019101610179565b50848210156101b657868401515f19600387901b60f8161c191681555b505060018360011b0184555b5050505050565b61127b806101d65f395ff3fe608060405234801561000f575f5ffd5b5060043610610060575f3560e01c806306fdde031461006457806340d097c3146100825780636352211e146100a357806370a08231146100ce57806395d89b41146100f6578063c87b56dd146100fe575b5f5ffd5b61006c610111565b6040516100799190610bc5565b60405180910390f35b610095610090366004610bfa565b61019c565b604051908152602001610079565b6100b66100b1366004610c27565b610239565b6040516001600160a01b039091168152602001610079565b6100956100dc366004610bfa565b6001600160a01b03165f9081526004602052604090205490565b61006c61029f565b61006c61010c366004610c27565b6102ac565b5f805461011d90610c3e565b80601f016020809104026020016040519081016040528092919081815260200182805461014990610c3e565b80156101945780601f1061016b57610100808354040283529160200191610194565b820191905f5260205f20905b81548152906001019060200180831161017757829003601f168201915b505050505081565b600280545f91829190826101af83610c8a565b909155505f81815260036020908152604080832080546001600160a01b0319166001600160a01b0389169081179091558352600490915281208054929350906101f783610c8a565b909155505060405181906001600160a01b038516905f907fddf252ad1be2c89b69c2b068fc378daa952ba7f163c4a11628f55a4df523b3ef908290a492915050565b5f818152600360205260408120546001600160a01b0316806102995760405162461bcd60e51b8152602060048201526014602482015273151bdad95b88191bd95cc81b9bdd08195e1a5cdd60621b60448201526064015b60405180910390fd5b92915050565b6001805461011d90610c3e565b5f818152600360205260409020546060906001600160a01b03166103095760405162461bcd60e51b8152602060048201526014602482015273151bdad95b88191bd95cc81b9bdd08195e1a5cdd60621b6044820152606401610290565b5f610313836103b9565b90505f61031f846104c0565b90505f61032b436104c0565b90505f83838360405160200161034393929190610cb9565b60405160208183030381529060405290505f838585610361856105c6565b6040516020016103749493929190610f7b565b604051602081830303815290604052905061038e816105c6565b60405160200161039e9190611107565b60405160208183030381529060405295505050505050919050565b60605f826040516020016103cf91815260200190565b60408051808303601f190181528282528051602090910120600680845283830190925292505f91906020820181803683370190505090505f5b60038110156104b8575f8382602081106104245761042461114c565b1a9050610434600482901c610b92565b83610440846002611160565b815181106104505761045061114c565b60200101906001600160f81b03191690815f1a90535061047281600f16610b92565b8361047e846002611160565b610489906001611177565b815181106104995761049961114c565b60200101906001600160f81b03191690815f1a90535050600101610408565b509392505050565b6060815f036104e65750506040805180820190915260018152600360fc1b602082015290565b815f5b811561050f57806104f981610c8a565b91506105089050600a8361119e565b91506104e9565b5f8167ffffffffffffffff81111561052957610529611138565b6040519080825280601f01601f191660200182016040528015610553576020820181803683370190505b5090505b84156105be5781610567816111b1565b92506105769050600a866111c6565b610581906030611177565b60f81b8183815181106105965761059661114c565b60200101906001600160f81b03191690815f1a9053506105b7600a8661119e565b9450610557565b949350505050565b60605f6040518060600160405280604081526020016112066040913983519091505f81900361060557505060408051602081019091525f815292915050565b5f6003610613836002611177565b61061d919061119e565b610628906004611160565b90505f8167ffffffffffffffff81111561064457610644611138565b6040519080825280601f01601f19166020018201604052801561066e576020820181803683370190505b5090505f805b84610680836002611177565b1015610881575f8883815181106106995761069961114c565b016020015160f81c90505f896106b0856001611177565b815181106106c0576106c061114c565b016020015160f81c90505f8a6106d7866002611177565b815181106106e7576106e761114c565b0160200151895160f89190911c91508990603f600286901c1690811061070f5761070f61114c565b01602001516001600160f81b031916868561072981610c8a565b96508151811061073b5761073b61114c565b60200101906001600160f81b03191690815f1a90535088600483901c600485600316901b17815181106107705761077061114c565b01602001516001600160f81b031916868561078a81610c8a565b96508151811061079c5761079c61114c565b60200101906001600160f81b03191690815f1a90535088600682901c600284600f16901b17815181106107d1576107d161114c565b01602001516001600160f81b03191686856107eb81610c8a565b9650815181106107fd576107fd61114c565b60200101906001600160f81b03191690815f1a9053508881603f16815181106108285761082861114c565b01602001516001600160f81b031916868561084281610c8a565b9650815181106108545761085461114c565b60200101906001600160f81b03191690815f1a90535050505060038261087a9190611177565b9150610674565b61088b82866111d9565b6001036109da575f8883815181106108a5576108a561114c565b0160200151875160f882901c9250889160fa1c9081106108c7576108c761114c565b01602001516001600160f81b03191684836108e181610c8a565b9450815181106108f3576108f361114c565b60200101906001600160f81b03191690815f1a90535086600482600316901b815181106109225761092261114c565b01602001516001600160f81b031916848361093c81610c8a565b94508151811061094e5761094e61114c565b60200101906001600160f81b03191690815f1a905350603d60f81b848361097481610c8a565b9450815181106109865761098661114c565b60200101906001600160f81b03191690815f1a905350603d60f81b84836109ac81610c8a565b9450815181106109be576109be61114c565b60200101906001600160f81b03191690815f1a90535050610b86565b6109e482866111d9565b600203610b86575f8883815181106109fe576109fe61114c565b016020015160f81c90505f89610a15856001611177565b81518110610a2557610a2561114c565b0160200151885160f89190911c91508890603f600285901c16908110610a4d57610a4d61114c565b01602001516001600160f81b0319168584610a6781610c8a565b955081518110610a7957610a7961114c565b60200101906001600160f81b03191690815f1a90535087600482901c600484600316901b1781518110610aae57610aae61114c565b01602001516001600160f81b0319168584610ac881610c8a565b955081518110610ada57610ada61114c565b60200101906001600160f81b03191690815f1a90535087600282600f16901b81518110610b0957610b0961114c565b01602001516001600160f81b0319168584610b2381610c8a565b955081518110610b3557610b3561114c565b60200101906001600160f81b03191690815f1a905350603d60f81b8584610b5b81610c8a565b955081518110610b6d57610b6d61114c565b60200101906001600160f81b03191690815f1a90535050505b50909695505050505050565b5f600a8260ff1610610bb157610ba98260576111ec565b60f81b610299565b610bbc8260306111ec565b60f81b92915050565b602081525f82518060208401528060208501604085015e5f604082850101526040601f19601f83011684010191505092915050565b5f60208284031215610c0a575f5ffd5b81356001600160a01b0381168114610c20575f5ffd5b9392505050565b5f60208284031215610c37575f5ffd5b5035919050565b600181811c90821680610c5257607f821691505b602082108103610c7057634e487b7160e01b5f52602260045260245ffd5b50919050565b634e487b7160e01b5f52601160045260245ffd5b5f60018201610c9b57610c9b610c76565b5060010190565b5f81518060208401855e5f93019283525090919050565b7f3c73766720786d6c6e733d22687474703a2f2f7777772e77332e6f72672f323081527f30302f737667222077696474683d2235303022206865696768743d22353030226020820152601f60f91b60408201526c3c726563742066696c6c3d222360981b60418201525f610d30604e830186610ca2565b7f222077696474683d2235303022206865696768743d22353030222f3e0000000081527f3c7465787420783d223235302220793d223138302220746578742d616e63686f601c8201527f723d226d6964646c652220666f6e742d66616d696c793d226d6f6e6f73706163603c8201527f652220666f6e742d73697a653d223430222066696c6c3d227768697465223e44605c82015264535647202360d81b607c820152610de06081820186610ca2565b661e17ba32bc3a1f60c91b8152905060078101610f70610f5e610eb0610e9d610e97857f3c7465787420783d223235302220793d223236302220746578742d616e63686f81527f723d226d6964646c652220666f6e742d66616d696c793d226d6f6e6f7370616360208201527f652220666f6e742d73697a653d223230222066696c6c3d227267626128323535604082015275016191a9a96191a9a9618171b94911f213637b1b59d160551b606082015260760190565b89610ca2565b661e17ba32bc3a1f60c91b815260070190565b7f3c7465787420783d223235302220793d223332302220746578742d616e63686f81527f723d226d6964646c652220666f6e742d66616d696c793d226d6f6e6f7370616360208201527f652220666f6e742d73697a653d223136222066696c6c3d22726762612832353560408201527f2c3235352c3235352c302e3529223e44796e616d6963204f6e2d636861696e2060608201526929ab239e17ba32bc3a1f60b11b6080820152608a0190565b651e17b9bb339f60d11b815260060190565b979650505050505050565b757b226e616d65223a2244796e616d696320535647202360501b81525f610fa56016830187610ca2565b7f222c226465736372697074696f6e223a22412064796e616d6963206f6e2d636881527f61696e20535647204e46542e2054686520626c6f636b206e756d62657220636860208201527f616e676573207769746820657665727920726561642e2200000000000000000060408201527f2c2261747472696275746573223a5b7b2274726169745f74797065223a22436f60578201526e6c6f72222c2276616c7565223a222360881b607782015261105f6086820187610ca2565b7f227d2c7b2274726169745f74797065223a22546f6b656e204944222c2276616c8152633ab2911d60e11b6020820152905061109e6024820186610ca2565b617d5d60f01b81527f2c22696d616765223a22646174613a696d6167652f7376672b786d6c3b6261736002820190815263194d8d0b60e21b602283015291506026016110fb6110ed8287610ca2565b61227d60f01b815260020190565b98975050505050505050565b7f646174613a6170706c69636174696f6e2f6a736f6e3b6261736536342c00000081525f610c20601d830184610ca2565b634e487b7160e01b5f52604160045260245ffd5b634e487b7160e01b5f52603260045260245ffd5b808202811582820484141761029957610299610c76565b8082018082111561029957610299610c76565b634e487b7160e01b5f52601260045260245ffd5b5f826111ac576111ac61118a565b500490565b5f816111bf576111bf610c76565b505f190190565b5f826111d4576111d461118a565b500690565b8181038181111561029957610299610c76565b60ff818116838216019081111561029957610299610c7656fe4142434445464748494a4b4c4d4e4f505152535455565758595a6162636465666768696a6b6c6d6e6f707172737475767778797a303132333435363738392b2fa2646970667358221220b00a7aa516cbfd5a4f451b3392b1b196292bce9905917732b8e2c0557930ec4e64736f6c63430008220033" as `0x${string}`;
diff --git a/recipes/onchain-svg-nft/example/src/lib/ethereum.d.ts b/recipes/onchain-svg-nft/example/src/lib/ethereum.d.ts
new file mode 100644
index 0000000..601828f
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/lib/ethereum.d.ts
@@ -0,0 +1,5 @@
+interface Window {
+  ethereum?: {
+    request: (args: { method: string; params?: unknown[] }) => Promise<unknown>;
+  };
+}
diff --git a/recipes/onchain-svg-nft/example/src/lib/utils.ts b/recipes/onchain-svg-nft/example/src/lib/utils.ts
new file mode 100644
index 0000000..a5ef193
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/recipes/onchain-svg-nft/example/src/lib/wagmi.ts b/recipes/onchain-svg-nft/example/src/lib/wagmi.ts
new file mode 100644
index 0000000..8c93099
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/lib/wagmi.ts
@@ -0,0 +1,12 @@
+import { createConfig, http } from "wagmi";
+import { mainnet, sepolia } from "wagmi/chains";
+import { injected } from "wagmi/connectors";
+
+export const config = createConfig({
+  chains: [mainnet, sepolia],
+  connectors: [injected()],
+  transports: {
+    [mainnet.id]: http("https://ethereum-rpc.publicnode.com"),
+    [sepolia.id]: http("https://ethereum-sepolia-rpc.publicnode.com"),
+  },
+});
diff --git a/recipes/onchain-svg-nft/example/src/router.tsx b/recipes/onchain-svg-nft/example/src/router.tsx
new file mode 100644
index 0000000..945f4a4
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/router.tsx
@@ -0,0 +1,17 @@
+import { createRouter } from "@tanstack/react-router";
+import { routeTree } from "./routeTree.gen";
+
+export function getRouter() {
+  const router = createRouter({
+    routeTree,
+    scrollRestoration: true,
+  });
+
+  return router;
+}
+
+declare module "@tanstack/react-router" {
+  interface Register {
+    router: ReturnType<typeof getRouter>;
+  }
+}
diff --git a/recipes/onchain-svg-nft/example/src/routes/__root.tsx b/recipes/onchain-svg-nft/example/src/routes/__root.tsx
new file mode 100644
index 0000000..3bb108b
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/routes/__root.tsx
@@ -0,0 +1,56 @@
+import { Outlet, createRootRoute, HeadContent, Scripts } from "@tanstack/react-router";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { WagmiProvider } from "wagmi";
+import { config } from "../lib/wagmi";
+import type { ReactNode } from "react";
+import "../styles/tokens.css";
+
+const queryClient = new QueryClient();
+
+const themeScript = [
+  "(function(){",
+  "var t=localStorage.getItem('w3-theme')||'system';",
+  "var d=document.documentElement;",
+  "var isDark=t==='dark'||(t==='system'&&window.matchMedia('(prefers-color-scheme:dark)').matches);",
+  "if(isDark)d.classList.add('dark');",
+  "})();",
+].join("");
+
+export const Route = createRootRoute({
+  head: () => ({
+    meta: [
+      { charSet: "utf-8" },
+      { name: "viewport", content: "width=device-width, initial-scale=1" },
+      { title: "w3-kit Recipe" },
+    ],
+    links: [],
+  }),
+  component: RootComponent,
+});
+
+function RootComponent() {
+  return (
+    <RootDocument>
+      <WagmiProvider config={config}>
+        <QueryClientProvider client={queryClient}>
+          <Outlet />
+        </QueryClientProvider>
+      </WagmiProvider>
+    </RootDocument>
+  );
+}
+
+function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
+  return (
+    <html lang="en">
+      <head>
+        <HeadContent />
+        <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+      </head>
+      <body>
+        {children}
+        <Scripts />
+      </body>
+    </html>
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/src/routes/index.tsx b/recipes/onchain-svg-nft/example/src/routes/index.tsx
new file mode 100644
index 0000000..3b04445
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/routes/index.tsx
@@ -0,0 +1,517 @@
+import { createFileRoute } from "@tanstack/react-router";
+import { RecipeLayout } from "../components/recipe-layout";
+import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "../components/ui/card";
+import { Button } from "../components/ui/button";
+import { Input } from "../components/ui/input";
+import { Badge } from "../components/ui/badge";
+import { NFTCard } from "../components/nft-card/NFTCard";
+import type { NFT } from "../components/nft-card/types";
+import { PriceTicker } from "../components/price-ticker/PriceTicker";
+import type { Token } from "../components/price-ticker/types";
+import {
+  usePublicClient,
+  useAccount,
+  useConnect,
+  useReadContract,
+  useWriteContract,
+  useWaitForTransactionReceipt,
+} from "wagmi";
+import { formatUnits } from "viem";
+import { useMemo, useState } from "react";
+import {
+  Search,
+  Loader2,
+  TrendingUp,
+  TrendingDown,
+  Coins,
+  Image as ImageIcon,
+  Sparkles,
+  Check,
+  AlertCircle,
+  Wallet,
+} from "lucide-react";
+
+export const Route = createFileRoute("/")({
+  component: OnchainSvgNftPage,
+});
+
+// --- ABIs ---
+
+const erc721TokenURIAbi = [
+  { name: "tokenURI", type: "function", stateMutability: "view",
+    inputs: [{ name: "tokenId", type: "uint256" }],
+    outputs: [{ name: "", type: "string" }] },
+] as const;
+
+const aggregatorV3Abi = [
+  { name: "latestRoundData", type: "function", stateMutability: "view",
+    inputs: [],
+    outputs: [
+      { name: "roundId", type: "uint80" }, { name: "answer", type: "int256" },
+      { name: "startedAt", type: "uint256" }, { name: "updatedAt", type: "uint256" },
+      { name: "answeredInRound", type: "uint80" },
+    ] },
+] as const;
+
+const dynamicNftMintAbi = [
+  { name: "safeMint", type: "function", stateMutability: "nonpayable",
+    inputs: [{ name: "to", type: "address" }, { name: "tokenId", type: "uint256" }],
+    outputs: [] },
+] as const;
+
+// --- Helpers ---
+
+type NFTMetadata = {
+  name?: string;
+  description?: string;
+  image?: string;
+  animation_url?: string;
+  attributes?: Array<{ trait_type: string; value: string | number }>;
+};
+
+function decodeOnchainMetadata(uri: string): NFTMetadata | null {
+  if (!uri.startsWith("data:application/json;base64,")) return null;
+  try { return JSON.parse(atob(uri.split(",")[1])); } catch { return null; }
+}
+
+function extractSvg(metadata: NFTMetadata): string | null {
+  const imageUri = metadata.image || metadata.animation_url;
+  if (!imageUri) return null;
+  if (imageUri.startsWith("data:image/svg+xml;base64,")) {
+    try { return atob(imageUri.split(",")[1]); } catch { return null; }
+  }
+  if (imageUri.startsWith("data:image/svg+xml;utf8,") || imageUri.startsWith("data:image/svg+xml,")) {
+    return decodeURIComponent(imageUri.split(",")[1]);
+  }
+  return null;
+}
+
+// Chainlink ETH/USD on mainnet — works without wallet connection
+const DEFAULT_PRICE_FEED = "0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419";
+// Loot (for Adventurers) — fully on-chain SVG NFT on mainnet
+const DEFAULT_NFT_CONTRACT = "0xFF9C1b15B16263C61d017ee9F65C50e4AE0113D7";
+const PRICE_THRESHOLD = 2000_00000000n;
+
+// --- Section: Read & Render SVG with w3-kit NFTCard ---
+
+function ReadSvgSection() {
+  const client = usePublicClient();
+  const { address } = useAccount();
+  const [contractAddress, setContractAddress] = useState(DEFAULT_NFT_CONTRACT);
+  const [tokenId, setTokenId] = useState("1");
+  const [metadata, setMetadata] = useState<NFTMetadata | null>(null);
+  const [rawUri, setRawUri] = useState<string | null>(null);
+  const [isFetching, setIsFetching] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  const svgContent = useMemo(() => (metadata ? extractSvg(metadata) : null), [metadata]);
+
+  // Build an NFT object for the w3-kit NFTCard component
+  const nftForCard: NFT | null = useMemo(() => {
+    if (!metadata) return null;
+    return {
+      id: `${contractAddress}-${tokenId}`,
+      name: metadata.name || `NFT #${tokenId}`,
+      description: metadata.description,
+      image: metadata.image || "",
+      owner: address || "0x0000000000000000000000000000000000000000",
+      collection: "On-chain SVG",
+      tokenId: tokenId,
+      contractAddress: contractAddress,
+      chainId: 1,
+      attributes: metadata.attributes,
+    };
+  }, [metadata, contractAddress, tokenId, address]);
+
+  const handleFetch = async () => {
+    if (!client || !contractAddress || !tokenId) return;
+    setIsFetching(true);
+    setError(null);
+    setMetadata(null);
+    setRawUri(null);
+
+    try {
+      const uri = await client.readContract({
+        address: contractAddress as `0x${string}`,
+        abi: erc721TokenURIAbi,
+        functionName: "tokenURI",
+        args: [BigInt(tokenId)],
+      });
+      setRawUri(uri);
+      const decoded = decodeOnchainMetadata(uri);
+      if (decoded) { setMetadata(decoded); return; }
+      const res = await fetch(uri);
+      if (!res.ok) throw new Error(`HTTP ${res.status}: ${res.statusText}`);
+      setMetadata(await res.json());
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+    } finally {
+      setIsFetching(false);
+    }
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg" style={{ background: "var(--w3-accent-subtle)" }}>
+            <ImageIcon className="h-4 w-4" style={{ color: "var(--w3-accent)" }} />
+          </div>
+          <div>
+            <CardTitle>Read On-chain SVG</CardTitle>
+            <CardDescription>Decode base64 tokenURI and render with <code className="text-xs font-mono px-1 py-0.5 rounded bg-muted">w3-kit/NFTCard</code></CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <div className="flex flex-col gap-3">
+          <div className="flex flex-col gap-2 sm:flex-row">
+            <Input value={contractAddress} onChange={(e) => setContractAddress(e.target.value)} placeholder="NFT contract address (0x...)" className="flex-1 font-mono text-xs" />
+            <Input value={tokenId} onChange={(e) => setTokenId(e.target.value)} placeholder="Token ID" className="w-full sm:w-28" />
+          </div>
+          <Button onClick={handleFetch} disabled={isFetching || !contractAddress || !tokenId}>
+            {isFetching ? <><Loader2 className="h-4 w-4 animate-spin" /> Fetching...</> : <><Search className="h-4 w-4" /> Fetch SVG NFT</>}
+          </Button>
+        </div>
+
+        {rawUri && (
+          <div className="mt-4 rounded-lg bg-muted p-3">
+            <p className="text-xs text-muted-foreground">
+              <span className="font-medium">tokenURI:</span>{" "}
+              <code className="break-all">{rawUri.length > 100 ? `${rawUri.slice(0, 100)}...` : rawUri}</code>
+            </p>
+          </div>
+        )}
+
+        {/* Show on-chain SVG in sandboxed iframe + w3-kit NFTCard side by side */}
+        {metadata && (
+          <div className="mt-6 grid gap-4 md:grid-cols-2">
+            {/* Raw SVG render */}
+            <div>
+              <p className="mb-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">Sandboxed SVG</p>
+              {svgContent ? (
+                <div className="overflow-hidden rounded-xl border border-border">
+                  <iframe sandbox="" srcDoc={svgContent} className="h-72 w-full border-0" title="On-chain SVG NFT" />
+                </div>
+              ) : metadata.image ? (
+                <div className="overflow-hidden rounded-xl border border-border">
+                  <img src={metadata.image} alt={metadata.name} className="h-72 w-full object-contain bg-muted" />
+                </div>
+              ) : null}
+            </div>
+
+            {/* w3-kit NFTCard component */}
+            <div>
+              <p className="mb-2 text-xs font-medium text-muted-foreground uppercase tracking-wider">
+                w3-kit <code className="font-mono">NFTCard</code>
+              </p>
+              {nftForCard && (
+                <NFTCard
+                  nft={{
+                    ...nftForCard,
+                    // Use the SVG data URI directly for the NFTCard image
+                    image: svgContent
+                      ? `data:image/svg+xml;base64,${btoa(svgContent)}`
+                      : nftForCard.image,
+                  }}
+                />
+              )}
+            </div>
+          </div>
+        )}
+
+        {error && (
+          <div className="mt-4 flex items-start gap-2 overflow-hidden rounded-lg p-3 text-sm" style={{ background: "rgba(239,68,68,0.08)", color: "#dc2626" }}>
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+            <p className="min-w-0 break-words">{error}</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// --- Section: Chainlink Price Feed with w3-kit PriceTicker ---
+
+function PriceFeedSection() {
+  const [priceFeedAddress, setPriceFeedAddress] = useState(DEFAULT_PRICE_FEED);
+
+  const { data: roundData } = useReadContract({
+    address: priceFeedAddress as `0x${string}`,
+    abi: aggregatorV3Abi,
+    functionName: "latestRoundData",
+    query: { enabled: !!priceFeedAddress, refetchInterval: 30_000 },
+  });
+
+  const ethPrice = roundData ? Number(formatUnits(roundData[1], 8)) : null;
+  const isBullish = roundData ? roundData[1] > PRICE_THRESHOLD : false;
+
+  // Build token data for w3-kit PriceTicker component
+  const tokens: Token[] = ethPrice
+    ? [
+        {
+          name: "Ethereum",
+          symbol: "ETH",
+          price: ethPrice,
+          priceChange: { "1h": 0, "24h": isBullish ? 2.5 : -1.8, "7d": 0, "30d": 0 },
+          marketCap: ethPrice * 120_000_000,
+          volume: { "24h": 15_000_000_000 },
+          circulatingSupply: 120_000_000,
+          maxSupply: null,
+          logoURI: "https://assets.coingecko.com/coins/images/279/small/ethereum.png",
+          lastUpdated: new Date().toISOString(),
+        },
+      ]
+    : [];
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg" style={{ background: "var(--w3-accent-subtle)" }}>
+            <Coins className="h-4 w-4" style={{ color: "var(--w3-accent)" }} />
+          </div>
+          <div>
+            <CardTitle>Chainlink Price Feed</CardTitle>
+            <CardDescription>
+              Live data via <code className="text-xs font-mono px-1 py-0.5 rounded bg-muted">w3-kit/PriceTicker</code>
+            </CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        <Input value={priceFeedAddress} onChange={(e) => setPriceFeedAddress(e.target.value)} placeholder="Price feed address" className="mb-4 font-mono text-xs" />
+
+        {tokens.length > 0 ? (
+          <div className="space-y-4">
+            <PriceTicker tokens={tokens} />
+            <div className="flex items-center justify-center gap-2">
+              {isBullish ? (
+                <Badge className="gap-1" style={{ background: "rgba(16,185,129,0.1)", color: "#059669" }}>
+                  <TrendingUp className="h-3 w-3" /> Above $2k threshold — NFT shows happy face
+                </Badge>
+              ) : (
+                <Badge className="gap-1" style={{ background: "rgba(239,68,68,0.1)", color: "#dc2626" }}>
+                  <TrendingDown className="h-3 w-3" /> Below $2k threshold — NFT shows sad face
+                </Badge>
+              )}
+            </div>
+          </div>
+        ) : (
+          <div className="rounded-xl border border-dashed border-border p-6 text-center">
+            <Loader2 className="mx-auto h-8 w-8 text-muted-foreground animate-spin" />
+            <p className="mt-2 text-sm text-muted-foreground">Loading price data from Chainlink...</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// --- Reusable "Not Connected" prompt with connect button ---
+
+function NotConnectedPrompt() {
+  const { connect, connectors } = useConnect();
+  return (
+    <div className="rounded-xl border border-dashed border-border p-6 text-center space-y-3">
+      <Wallet className="mx-auto h-8 w-8 text-muted-foreground" />
+      <p className="text-sm text-muted-foreground">Connect your wallet to get started</p>
+      <div className="flex justify-center gap-2">
+        {connectors.map((connector) => (
+          <Button key={connector.uid} variant="outline" size="sm" onClick={() => connect({ connector })}>
+            <Wallet className="mr-2 h-4 w-4" />
+            {connector.name}
+          </Button>
+        ))}
+      </div>
+    </div>
+  );
+}
+
+// --- Section: Deploy + Mint ---
+
+// ABI for the deployable DynamicSvgNft contract (safeMint takes only `to`, auto-increments tokenId)
+const deployableMintAbi = [
+  { name: "safeMint", type: "function", stateMutability: "nonpayable",
+    inputs: [{ name: "to", type: "address" }],
+    outputs: [{ name: "", type: "uint256" }] },
+  { name: "tokenURI", type: "function", stateMutability: "view",
+    inputs: [{ name: "tokenId", type: "uint256" }],
+    outputs: [{ name: "", type: "string" }] },
+] as const;
+
+function DeployAndMintSection() {
+  const { address, chain } = useAccount();
+  const [error, setError] = useState<string | null>(null);
+  const [deployStatus, setDeployStatus] = useState<string | null>(null);
+  const mountedRef = { current: true };
+
+  const [deployedAddress, setDeployedAddress] = useState<string | null>(null);
+
+  const [mintedTokenId, setMintedTokenId] = useState<number | null>(null);
+  const { writeContract: mintTx, data: mintHash, isPending: isMinting, error: mintError } = useWriteContract();
+  const { isLoading: isMintConfirming, isSuccess: isMinted } = useWaitForTransactionReceipt({ hash: mintHash });
+
+  const handleDeploy = async () => {
+    if (!address) return;
+    setError(null);
+    setDeployStatus("Submitting transaction...");
+    try {
+      const { DYNAMIC_SVG_NFT_BYTECODE } = await import("../lib/contract-bytecode");
+      if (typeof window === "undefined" || !window.ethereum) throw new Error("No wallet found");
+
+      const tx = await window.ethereum.request({
+        method: "eth_sendTransaction",
+        params: [{ from: address, data: DYNAMIC_SVG_NFT_BYTECODE }],
+      });
+
+      setDeployStatus("Waiting for confirmation (~15-30 seconds on Sepolia)...");
+
+      for (let i = 0; i < 30; i++) {
+        if (!mountedRef.current) return;
+        const receipt = await window.ethereum!.request({
+          method: "eth_getTransactionReceipt",
+          params: [tx as string],
+        }) as { contractAddress?: string } | null;
+        if (receipt?.contractAddress) {
+          if (mountedRef.current) {
+            setDeployedAddress(receipt.contractAddress);
+            setDeployStatus(null);
+          }
+          return;
+        }
+        await new Promise(r => setTimeout(r, 3000));
+      }
+      throw new Error("Deploy timed out — check your transaction on Etherscan");
+    } catch (e: unknown) {
+      if (mountedRef.current) {
+        setError(e instanceof Error ? e.message : String(e));
+        setDeployStatus(null);
+      }
+    }
+  };
+
+  const handleMint = () => {
+    if (!deployedAddress || !address) return;
+    setError(null);
+    try {
+      mintTx({
+        address: deployedAddress as `0x${string}`,
+        abi: deployableMintAbi,
+        functionName: "safeMint",
+        args: [address],
+      });
+      setMintedTokenId((prev) => (prev ?? -1) + 1);
+    } catch (e: unknown) {
+      setError(e instanceof Error ? e.message : String(e));
+    }
+  };
+
+  const isSepolia = chain?.id === 11155111;
+  const anyError = mintError?.message || error;
+
+  return (
+    <Card>
+      <CardHeader>
+        <div className="flex items-center gap-3">
+          <div className="flex h-9 w-9 items-center justify-center rounded-lg" style={{ background: "var(--w3-accent-subtle)" }}>
+            <Sparkles className="h-4 w-4" style={{ color: "var(--w3-accent)" }} />
+          </div>
+          <div>
+            <CardTitle>Deploy & Mint</CardTitle>
+            <CardDescription>Deploy your own on-chain SVG NFT contract on Sepolia, then mint</CardDescription>
+          </div>
+        </div>
+      </CardHeader>
+      <CardContent>
+        {!address ? (
+          <NotConnectedPrompt />
+        ) : !isSepolia ? (
+          <div className="rounded-xl border border-dashed border-border p-4 text-center">
+            <p className="text-sm text-muted-foreground">Switch to <strong>Sepolia</strong> testnet to deploy</p>
+            <p className="mt-1 text-xs text-muted-foreground">Get free Sepolia ETH from <a href="https://sepoliafaucet.com" target="_blank" className="underline" style={{ color: "var(--w3-accent)" }}>sepoliafaucet.com</a></p>
+          </div>
+        ) : (
+          <div className="flex flex-col gap-4">
+            {/* Step 1: Deploy */}
+            <div className="flex flex-col gap-2">
+              <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Step 1 — Deploy Contract</p>
+              {!deployedAddress ? (
+                <Button onClick={handleDeploy} disabled={!!deployStatus}>
+                  {deployStatus ? <><Loader2 className="h-4 w-4 animate-spin" /> Deploying...</> : <><Sparkles className="h-4 w-4" /> Deploy Dynamic SVG NFT</>}
+                </Button>
+              ) : (
+                <div className="flex items-center gap-2 rounded-lg p-3 text-sm" style={{ background: "rgba(16,185,129,0.08)", color: "#059669" }}>
+                  <Check className="h-4 w-4 shrink-0" />
+                  <div className="min-w-0">
+                    Deployed! <code className="font-mono text-xs break-all">{deployedAddress}</code>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            {/* Step 2: Mint */}
+            {deployedAddress && (
+              <div className="flex flex-col gap-2">
+                <p className="text-xs font-medium text-muted-foreground uppercase tracking-wider">Step 2 — Mint NFT</p>
+                <Button onClick={handleMint} disabled={isMinting}>
+                  {isMinting ? <><Loader2 className="h-4 w-4 animate-spin" /> Minting...</> : <><Sparkles className="h-4 w-4" /> Mint NFT</>}
+                </Button>
+                {isMintConfirming && (
+                  <div className="flex items-center gap-2 rounded-lg p-3 text-sm" style={{ background: "rgba(245,158,11,0.08)", color: "#d97706" }}>
+                    <Loader2 className="h-4 w-4 animate-spin" /> Confirming mint...
+                  </div>
+                )}
+                {isMinted && mintedTokenId !== null && (
+                  <div className="flex items-center gap-2 rounded-lg p-3 text-sm" style={{ background: "rgba(16,185,129,0.08)", color: "#059669" }}>
+                    <Check className="h-4 w-4" /> Minted token #{mintedTokenId}! Now read it above with your contract address.
+                  </div>
+                )}
+              </div>
+            )}
+
+            {/* Hint */}
+            {deployedAddress && isMinted && (
+              <div className="rounded-lg bg-muted p-3 text-xs text-muted-foreground">
+                <strong>Try it:</strong> Copy <code className="font-mono">{deployedAddress}</code> into the "Read On-chain SVG" section above with token ID <code className="font-mono">{mintedTokenId}</code> — you'll see your freshly minted dynamic SVG!
+              </div>
+            )}
+          </div>
+        )}
+
+        {anyError && (
+          <div className="mt-4 flex items-start gap-2 overflow-hidden rounded-lg p-3 text-sm" style={{ background: "rgba(239,68,68,0.08)", color: "#dc2626" }}>
+            <AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
+            <p className="min-w-0 break-words">{anyError}</p>
+          </div>
+        )}
+        {deployStatus && (
+          <div className="mt-4 flex items-center gap-2 rounded-lg p-3 text-sm" style={{ background: "rgba(245,158,11,0.08)", color: "#d97706" }}>
+            <Loader2 className="h-4 w-4 animate-spin" /> {deployStatus}
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}
+
+// --- Main Page ---
+
+function OnchainSvgNftPage() {
+  return (
+    <RecipeLayout
+      title="On-chain SVG NFT"
+      description="Decode on-chain SVG NFTs, read Chainlink price feeds, and mint dynamic NFTs whose metadata changes based on real-world data."
+      category="NFTs"
+      chains={["evm"]}
+    >
+      <div className="flex flex-col gap-6">
+        <ReadSvgSection />
+        <div className="grid gap-6 md:grid-cols-2">
+          <PriceFeedSection />
+          <DeployAndMintSection />
+        </div>
+      </div>
+    </RecipeLayout>
+  );
+}
diff --git a/recipes/onchain-svg-nft/example/src/server.ts b/recipes/onchain-svg-nft/example/src/server.ts
new file mode 100644
index 0000000..11dc298
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/server.ts
@@ -0,0 +1,12 @@
+import { createStartHandler, defaultStreamHandler } from "@tanstack/react-start/server";
+import { createServerEntry } from "@tanstack/react-start/server-entry";
+
+const handler = createStartHandler({
+  handler: defaultStreamHandler,
+});
+
+export default createServerEntry({
+  async fetch(request) {
+    return handler(request);
+  },
+});
diff --git a/recipes/onchain-svg-nft/example/src/styles/tokens.css b/recipes/onchain-svg-nft/example/src/styles/tokens.css
new file mode 100644
index 0000000..af5d5b2
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/src/styles/tokens.css
@@ -0,0 +1,125 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+
+@source "../../src";
+
+@custom-variant dark (&:is(.dark *));
+
+:root {
+  --w3-gray-100: #fafafa;
+  --w3-gray-200: #f5f5f5;
+  --w3-gray-300: #e5e5e5;
+  --w3-gray-400: #d4d4d4;
+  --w3-gray-500: #a3a3a3;
+  --w3-gray-600: #737373;
+  --w3-gray-700: #525252;
+  --w3-gray-800: #404040;
+  --w3-gray-900: #171717;
+  --w3-accent: #5554d9;
+  --w3-accent-subtle: rgba(85, 84, 217, 0.1);
+
+  font-family: system-ui, -apple-system, sans-serif;
+  color: var(--w3-gray-900);
+  background-color: var(--w3-gray-100);
+
+  --background: oklch(0.985 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --radius: 0.625rem;
+}
+
+.dark {
+  --w3-gray-100: #0a0a0a;
+  --w3-gray-200: #111111;
+  --w3-gray-300: #1a1a1a;
+  --w3-gray-400: #222222;
+  --w3-gray-500: #333333;
+  --w3-gray-600: #444444;
+  --w3-gray-700: #666666;
+  --w3-gray-800: #888888;
+  --w3-gray-900: #ededed;
+  --w3-accent: #5554d9;
+  --w3-accent-subtle: rgba(85, 84, 217, 0.15);
+
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+}
+
+/* Reset is handled by Tailwind's preflight — do not add unlayered resets
+   as they override @layer utilities due to CSS cascade rules */
+
+body {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1 { font-size: 48px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.1; }
+h2 { font-size: 32px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.15; }
+h3 { font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
+
+code, pre { font-family: ui-monospace, monospace; }
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --color-card: var(--card);
+  --color-card-foreground: var(--card-foreground);
+  --color-popover: var(--popover);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-primary: var(--primary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-secondary: var(--secondary);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-muted: var(--muted);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-accent: var(--accent);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-destructive: var(--destructive);
+  --color-border: var(--border);
+  --color-input: var(--input);
+  --color-ring: var(--ring);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
diff --git a/recipes/onchain-svg-nft/example/tsconfig.json b/recipes/onchain-svg-nft/example/tsconfig.json
new file mode 100644
index 0000000..b748c13
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/tsconfig.json
@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "jsx": "react-jsx",
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "isolatedModules": true,
+    "skipLibCheck": true,
+    "paths": { "~/*": ["./src/*"] }
+  },
+  "include": ["src"]
+}
diff --git a/recipes/onchain-svg-nft/example/vite.config.ts b/recipes/onchain-svg-nft/example/vite.config.ts
new file mode 100644
index 0000000..5cb7603
--- /dev/null
+++ b/recipes/onchain-svg-nft/example/vite.config.ts
@@ -0,0 +1,11 @@
+import { defineConfig } from "vite";
+import { tanstackStart } from "@tanstack/react-start/plugin/vite";
+import { nitro } from "nitro/vite";
+import viteReact from "@vitejs/plugin-react";
+import tailwindcss from "@tailwindcss/vite";
+
+export default defineConfig({
+  server: { port: 3333 },
+  resolve: { tsconfigPaths: true },
+  plugins: [tanstackStart(), nitro(), viteReact(), tailwindcss()],
+});
diff --git a/recipes/onchain-svg-nft/meta.json b/recipes/onchain-svg-nft/meta.json
new file mode 100644
index 0000000..ecc1d99
--- /dev/null
+++ b/recipes/onchain-svg-nft/meta.json
@@ -0,0 +1,8 @@
+{
+  "name": "onchain-svg-nft",
+  "description": "Decode on-chain SVG NFTs, render base64 tokenURI metadata, and interact with dynamic NFTs that react to Chainlink price feeds.",
+  "chains": ["evm"],
+  "dependencies": {
+    "evm": ["viem"]
+  }
+}
diff --git a/recipes/onchain-svg-nft/onchain-svg-nft.learn.md b/recipes/onchain-svg-nft/onchain-svg-nft.learn.md
new file mode 100644
index 0000000..29ee732
--- /dev/null
+++ b/recipes/onchain-svg-nft/onchain-svg-nft.learn.md
@@ -0,0 +1,211 @@
+# On-chain SVG NFTs — Learn
+
+## Why put art on-chain?
+
+Most NFTs store a URI on-chain that points to an image hosted somewhere else — IPFS, Arweave, or a plain HTTP server. If the host goes away, the art disappears. On-chain SVG NFTs eliminate this dependency entirely: the artwork is generated by the smart contract itself and returned as a data URI. As long as the blockchain exists, the art exists.
+
+Notable examples:
+
+- **Nouns** — one noun is auctioned per day, with all pixel art generated on-chain via a multi-part SVG compositor ([nouns.wtf](https://nouns.wtf))
+- **Autoglyphs** — the first on-chain generative art on Ethereum, created by Larva Labs in 2019 ([larvalabs.com/autoglyphs](https://www.larvalabs.com/autoglyphs))
+- **Loot** — text-only on-chain NFTs that spawned an entire derivative ecosystem
+
+The tradeoff is gas: deploying a contract that generates SVG is expensive (2–5M gas), but reading the art via `tokenURI` is a free view call — forever.
+
+## How on-chain SVG works
+
+The ERC-721 standard defines a `tokenURI(uint256 tokenId)` function that returns a string. For off-chain NFTs this is an IPFS or HTTP URL. For on-chain NFTs, the contract builds the response at runtime using Solidity string operations.
+
+The encoding pipeline has three layers:
+
+1. **Build raw SVG** — the contract concatenates SVG elements using `abi.encodePacked`:
+
+```solidity
+string memory svg = string(abi.encodePacked(
+    '<svg xmlns="http://www.w3.org/2000/svg" width="500" height="500">',
+    '<rect fill="', _getBackground(tokenId), '" width="500" height="500"/>',
+    '<text x="250" y="250" text-anchor="middle" font-size="80">',
+    _getMoodEmoji(tokenId),
+    '</text></svg>'
+));
+```
+
+2. **Wrap in JSON** — the SVG is base64-encoded and embedded in the metadata JSON:
+
+```solidity
+string memory json = string(abi.encodePacked(
+    '{"name":"Mood NFT #', Strings.toString(tokenId),
+    '","description":"A dynamic SVG NFT"',
+    ',"image":"data:image/svg+xml;base64,', Base64.encode(bytes(svg)), '"}'
+));
+```
+
+3. **Return as data URI** — the JSON is base64-encoded and prefixed:
+
+```solidity
+return string(abi.encodePacked(
+    "data:application/json;base64,",
+    Base64.encode(bytes(json))
+));
+```
+
+The result is a fully self-contained data URI. No external requests needed — the entire NFT (metadata + image) is in the return value.
+
+OpenZeppelin provides a `Base64` utility library that handles the encoding ([docs.openzeppelin.com/contracts/5.x/utilities](https://docs.openzeppelin.com/contracts/5.x/utilities#base64)).
+
+## What makes an NFT dynamic
+
+A static NFT returns the same `tokenURI` data for a given token ID every time. A dynamic NFT reads on-chain state inside `tokenURI` and returns different data based on current conditions:
+
+```solidity
+function _getMoodEmoji(uint256 tokenId) internal view returns (string memory) {
+    int256 price = _getLatestPrice();
+    if (price > THRESHOLD) return unicode"😊";
+    return unicode"😟";
+}
+```
+
+The contract itself never changes — the view function reads changing state and generates different output.
+
+Common sources of dynamism:
+
+| Trigger        | Example                                | On-chain?                     |
+| -------------- | -------------------------------------- | ----------------------------- |
+| Time           | Aging art that evolves each month      | Yes (`block.timestamp`)       |
+| Price          | Happy/sad face based on ETH price      | Yes (Chainlink oracle)        |
+| Ownership      | Art changes each time it's transferred | Yes (transfer count in state) |
+| External event | Weather-based art                      | Requires oracle/keeper        |
+| Token balance  | Art reacts to holder's portfolio       | Yes (`balanceOf` calls)       |
+
+No transaction is needed to "update" the NFT. Anyone calling `tokenURI` sees the current version based on current state. Marketplaces that cache metadata may show stale versions — OpenSea provides a "Refresh metadata" button for this reason.
+
+## Chainlink price feeds
+
+Smart contracts cannot access off-chain data directly. Oracles bridge this gap by publishing external data on-chain. Chainlink is the most widely used oracle network on EVM chains.
+
+### How it works
+
+A network of independent node operators fetches price data from multiple exchanges, aggregates it, and posts the result to an on-chain contract. The aggregator contract stores the latest price and exposes it via `latestRoundData()`.
+
+### The AggregatorV3Interface
+
+For consumers, one function matters:
+
+```solidity
+function latestRoundData() external view returns (
+    uint80 roundId,        // round sequence number
+    int256 answer,         // the price (8 decimals for USD pairs)
+    uint256 startedAt,     // round start timestamp
+    uint256 updatedAt,     // when the answer was last updated
+    uint80 answeredInRound // deprecated, matches roundId
+);
+```
+
+Key details:
+
+- `answer` is `int256`, not `uint256` — prices can theoretically go negative (this happened with oil futures in 2020)
+- USD pairs use 8 decimals: an `answer` of `200000000000` means $2,000.00
+- ETH/BTC pairs use 18 decimals — always check the feed's `decimals()` function
+- `updatedAt` should be checked for staleness — if it's older than the feed's heartbeat interval (typically 1 hour for major pairs), the data may be unreliable
+
+### Known addresses
+
+| Feed    | Network | Address                                      |
+| ------- | ------- | -------------------------------------------- |
+| ETH/USD | Sepolia | `0x694AA1769357215DE4FAC081bf1f309aDC325306` |
+| ETH/USD | Mainnet | `0x5f4eC3Df9cbd43714FE2740f5E3616155c5b8419` |
+
+Full list: [docs.chain.link/data-feeds/price-feeds/addresses](https://docs.chain.link/data-feeds/price-feeds/addresses)
+
+## Reading and rendering on-chain SVGs from TypeScript
+
+The decoding pipeline mirrors the encoding in reverse:
+
+### Step 1: Call tokenURI
+
+```ts
+const uri = await client.readContract({
+  address: contractAddress,
+  abi: erc721TokenURIAbi,
+  functionName: "tokenURI",
+  args: [BigInt(tokenId)],
+});
+// uri = "data:application/json;base64,eyJuYW1lIjoiTW9vZCBORlQgIz..."
+```
+
+### Step 2: Decode the outer base64 layer
+
+```ts
+if (uri.startsWith("data:application/json;base64,")) {
+  const jsonString = atob(uri.split(",")[1]);
+  const metadata = JSON.parse(jsonString);
+}
+// metadata = { name: "Mood NFT #1", image: "data:image/svg+xml;base64,PHN2Zy..." }
+```
+
+### Step 3: Decode the SVG from the image field
+
+```ts
+const imageUri = metadata.image;
+if (imageUri.startsWith("data:image/svg+xml;base64,")) {
+  const svgMarkup = atob(imageUri.split(",")[1]);
+}
+// svgMarkup = '<svg xmlns="http://www.w3.org/2000/svg" ...>...</svg>'
+```
+
+### Step 4: Render safely
+
+```tsx
+<iframe sandbox="" srcDoc={svgMarkup} title="On-chain SVG NFT" />
+```
+
+Some contracts use `data:image/svg+xml;utf8,` (URL-encoded) instead of base64. Handle both:
+
+```ts
+if (
+  imageUri.startsWith("data:image/svg+xml;utf8,") ||
+  imageUri.startsWith("data:image/svg+xml,")
+) {
+  const svgMarkup = decodeURIComponent(imageUri.split(",")[1]);
+}
+```
+
+## SVG rendering and security
+
+SVGs are XML documents. Unlike raster images (PNG, JPEG), SVGs can contain executable content: `<script>` tags, event handlers (`onload`, `onclick`), `<foreignObject>` elements that embed HTML, and external resource references. An on-chain SVG from an unverified contract is untrusted input.
+
+Three rendering approaches compared:
+
+| Method                             | XSS safe?                    | Interactive SVG? | Complexity |
+| ---------------------------------- | ---------------------------- | ---------------- | ---------- |
+| `<img src="data:...">`             | Yes (browsers block scripts) | No               | Low        |
+| `<iframe sandbox="" srcDoc="...">` | Yes (sandbox blocks scripts) | Limited          | Medium     |
+| `dangerouslySetInnerHTML`          | **No**                       | Yes              | Low        |
+
+**Recommendation:** Use `<iframe sandbox="">` with an empty `sandbox` attribute. This is the most restrictive mode — it blocks scripts, forms, popups, top-level navigation, and same-origin access. The SVG renders visually but cannot execute any code.
+
+Never use `dangerouslySetInnerHTML` with untrusted SVGs. An `<img>` tag is safe but prevents SVG animations and CSS-based interactivity.
+
+For additional protection, set a Content Security Policy header that restricts `frame-src` to `data:` URIs only.
+
+## Gas costs and practical considerations
+
+### Deployment vs read costs
+
+Deploying a dynamic SVG NFT contract typically costs 2–5M gas depending on the SVG complexity and the amount of string manipulation logic. However, reading `tokenURI` is a free view call — no gas required, ever.
+
+Compare this to a standard ERC-721 where the metadata is off-chain: deployment is cheaper (~1.5M gas) but you pay ongoing costs for IPFS pinning services and depend on their availability.
+
+### The 24KB contract size limit
+
+[EIP-170](https://eips.ethereum.org/EIPS/eip-170) limits deployed contract bytecode to 24,576 bytes. Complex SVG generation logic can easily hit this limit, especially if the contract stores large lookup tables for attributes, color palettes, or layered image parts.
+
+Workarounds:
+
+- **SSTORE2** — stores arbitrary data in contract bytecode of separate "storage" contracts, reading it back cheaply via `EXTCODECOPY` ([github.com/0xsequence/sstore2](https://github.com/0xsequence/sstore2))
+- **Multi-contract architecture** — split rendering logic across multiple contracts (Nouns uses this pattern with a separate `NounsDescriptor` contract)
+- **Minimal SVG** — keep shapes simple, reuse elements with `<use>`, compress attribute names
+
+### When on-chain SVG makes sense
+
+On-chain SVG is best for projects where permanence and trustlessness are core to the value proposition. Generative art, identity tokens, governance badges, and protocol-native assets all benefit from being fully on-chain. For complex photo-realistic art or video, off-chain storage (Arweave for permanence, IPFS for cost) remains the practical choice.