Nouns Art EngineNouns Art Engine

In this course, we will explore the on-chain and off-chain generation and rendering logic of Nouns NFTs, and demonstrate how to retrieve Nouns NFT images through a hands-on project.

Language

Solidity

Total Length

3.0h

Part of Learning Track

Build on Nouns + 1

What You’ll Learn

Understand theNouns image generation mechanism: complete flow from PNG to RLE, then to SVG

Master core methods ofnouns-sdk:getNounSeedFromBlockHash,getNounData,buildSVG

Build a completeindependent Next.js projectthat implements Noun SVG generation and display

Seed structure(background, body, accessory, head, glasses)

RLE compression and decodingapplications in on-chain storage

SVG rendering: pixel art scaling and<rect>rendering techniques

Syllabus

Unit 1 - From PNG to RLE Encoding

In this unit, we will learn how to convert PNG images to RLE encoding.

Unit 2 - Off-chain Image Generation Process

In this unit, we will learn how to render RLE-encoded data into SVG images.

Unit 3 - On-Chain Image Processing Logic

In this unit, we will learn the on-chain processing logic for PNG images.