Explore how to generate a pseudo-random noun, fully on-chain, with just two contract calls.

Overview

The traits of nouns are determined by a Seed . To generate an on-chain image of a noun, we will first generate a seed using the NounSeeder contract. Once we have our seed, we will then generate our noun image using the NounsDescriptor contract.

Generate a Seed

The NounsSeeder contract is in charge of generating Noun seeds. The contract has a generateSeed function that accepts two arguments: nounId and INounsDescriptor .

• nounId can be any valid uint256.

• INounsDescriptor is the address of the NounDescriptor contract.

function generateSeed(uint256 nounId, INounsDescriptor descriptor) external view returns (Seed memory);

The Seed is a list of part ids that determine the noun traits. It can be randomly generated using the NounSeeder contract or specified directly if you know which parts you want. Pseudo-random generation happens using the pending block's blockhash and passed in nounId.

A successful call will return a Seed with random traits:

struct Seed {
    uint48 background;
    uint48 body;
    uint48 accessory;
    uint48 head;
    uint48 glasses;
}

Using your favorite web3 library, call the NounSeeder contract passing an arbitrary nounId and the NounDescriptor address as arguments.

const nounId = 1234;
const nounDescriptor = "0x0Cfdb3Ba1694c2bb2CFACB0339ad7b1Ae5932B63";

Generate the Noun image

The NounsDescriptor contract is used to store/render Noun artwork. We will use it to generate an .svg image from our Seed.

function generateSVGImage(INounsSeeder.Seed memory seed) external view returns (string memory);

Using our Seed from step one, we can call the function as follows:

const nounId = 1234;
const nounDescriptor = "0x0Cfdb3Ba1694c2bb2CFACB0339ad7b1Ae5932B63";
const seed = await nounSeederContract.generateSeed(nounId, nounDescriptor);

A successful response will return a base64 encoded string representing the .svg image of the noun determined by the Seed:

PHN2ZyB3aWR0aD0iMzIwIiBoZWlnaHQ9IjMyMCIgdmlld0JveD0iMCAwIDMyMCAzMjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgc2hhcGUtcmVuZGVyaW5nPSJjcmlzcEVkZ2VzIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjZTFkN2Q1IiAvPjxyZWN0IHdpZHRoPSIxNDAiIGhlaWdodD0iMTAiIHg9IjkwIiB5PSIyMTAiIGZpbGw9IiM5ZjIxYTAiIC8+PHJlY3Qgd2lkdGg9IjE0MCIgaGVpZ2h0PSIxMCIgeD0iOTAiIHk9IjIyMCIgZmlsbD0iIzlmMjFhMCIgLz48cmVjdCB3aWR0aD0iMTQwIiBoZWlnaHQ9IjEwIiB4PSI5MCIgeT0iMjMwIiBmaWxsPSIjOWYyMWEwIiAvPjxyZWN0IHdpZHRoPSIxNDAiIGhlaWdodD0iMTAiIHg9IjkwIiB5PSIyNDAiIGZpbGw9IiM5ZjIxYTAiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSI5MCIgeT0iMjUwIiBmaWxsPSIjOWYyMWEwIiAvPjxyZWN0IHdpZHRoPSIxMTAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iMjUwIiBmaWxsPSIjOWYyMWEwIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iOTAiIHk9IjI2MCIgZmlsbD0iIzlmMjFhMCIgLz48cmVjdCB3aWR0aD0iMTEwIiBoZWlnaHQ9IjEwIiB4PSIxMjAiIHk9IjI2MCIgZmlsbD0iIzlmMjFhMCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjkwIiB5PSIyNzAiIGZpbGw9IiM5ZjIxYTAiIC8+PHJlY3Qgd2lkdGg9IjExMCIgaGVpZ2h0PSIxMCIgeD0iMTIwIiB5PSIyNzAiIGZpbGw9IiM5ZjIxYTAiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSI5MCIgeT0iMjgwIiBmaWxsPSIjOWYyMWEwIiAvPjxyZWN0IHdpZHRoPSIxMTAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iMjgwIiBmaWxsPSIjOWYyMWEwIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iOTAiIHk9IjI5MCIgZmlsbD0iIzlmMjFhMCIgLz48cmVjdCB3aWR0aD0iMTEwIiBoZWlnaHQ9IjEwIiB4PSIxMjAiIHk9IjI5MCIgZmlsbD0iIzlmMjFhMCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjkwIiB5PSIzMDAiIGZpbGw9IiM5ZjIxYTAiIC8+PHJlY3Qgd2lkdGg9IjExMCIgaGVpZ2h0PSIxMCIgeD0iMTIwIiB5PSIzMDAiIGZpbGw9IiM5ZjIxYTAiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSI5MCIgeT0iMzEwIiBmaWxsPSIjOWYyMWEwIiAvPjxyZWN0IHdpZHRoPSIxMTAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iMzEwIiBmaWxsPSIjOWYyMWEwIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTQwIiB5PSIyMzAiIGZpbGw9IiNhM2VmZDAiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjIzMCIgZmlsbD0iI2EzZWZkMCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE0MCIgeT0iMjQwIiBmaWxsPSIjYTNlZmQwIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTYwIiB5PSIyNDAiIGZpbGw9IiNhM2VmZDAiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIxMzAiIHk9IjI2MCIgZmlsbD0iI2EzZWZkMCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE2MCIgeT0iMjYwIiBmaWxsPSIjYTNlZmQwIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTgwIiB5PSIyNjAiIGZpbGw9IiNhM2VmZDAiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIxMzAiIHk9IjI3MCIgZmlsbD0iI2EzZWZkMCIgLz48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHg9IjE2MCIgeT0iMjcwIiBmaWxsPSIjYTNlZmQwIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTQwIiB5PSIyOTAiIGZpbGw9IiNhM2VmZDAiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjI5MCIgZmlsbD0iI2EzZWZkMCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE0MCIgeT0iMzAwIiBmaWxsPSIjYTNlZmQwIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTYwIiB5PSIzMDAiIGZpbGw9IiNhM2VmZDAiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNTAiIHk9IjIwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTQwIiB5PSIzMCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjgwIiB5PSI0MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE1MCIgeT0iNDAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMDAiIHk9IjQwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iNzAiIHk9IjUwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTEwIiB5PSI1MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHg9IjE0MCIgeT0iNTAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjUwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTkwIiB5PSI1MCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjgwIiB5PSI2MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iNjAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNDAiIHk9IjYwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTUwIiB5PSI2MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHg9IjE3MCIgeT0iNjAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIyNDAiIHk9IjYwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIxMCIgeD0iMTAwIiB5PSI3MCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjEzMCIgeT0iNzAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNTAiIHk9IjcwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTYwIiB5PSI3MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE3MCIgeT0iNzAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxODAiIHk9IjcwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTkwIiB5PSI3MCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIxMCIgeT0iNzAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyNDAiIHk9IjcwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iNjAiIHk9IjgwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iOTAiIHk9IjgwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTAwIiB5PSI4MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHg9IjExMCIgeT0iODAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNDAiIHk9IjgwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTUwIiB5PSI4MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE2MCIgeT0iODAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjgwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTkwIiB5PSI4MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjIwMCIgeT0iODAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIyMjAiIHk9IjgwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIxMCIgeD0iNTAiIHk9IjkwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIxMCIgeD0iODAiIHk9IjkwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTEwIiB5PSI5MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iOTAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjEwIiB4PSIxNTAiIHk9IjkwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTgwIiB5PSI5MCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIwMCIgeT0iOTAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMTAiIHk9IjkwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjIwIiB5PSI5MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjYwIiB5PSIxMDAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSI4MCIgeT0iMTAwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iOTAiIHk9IjEwMCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjExMCIgeT0iMTAwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIxMCIgeD0iMTIwIiB5PSIxMDAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNTAiIHk9IjEwMCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE2MCIgeT0iMTAwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTcwIiB5PSIxMDAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxOTAiIHk9IjEwMCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIwMCIgeT0iMTAwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjEwIiB5PSIxMDAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIyMjAiIHk9IjEwMCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjgwIiB5PSIxMTAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSI5MCIgeT0iMTEwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTAwIiB5PSIxMTAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxMjAiIHk9IjExMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjEzMCIgeT0iMTEwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTUwIiB5PSIxMTAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjExMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjE4MCIgeT0iMTEwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMjAwIiB5PSIxMTAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMjAiIHk9IjExMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjIzMCIgeT0iMTEwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjYwIiB5PSIxMTAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSI2MCIgeT0iMTIwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iODAiIHk9IjEyMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjkwIiB5PSIxMjAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIxMDAiIHk9IjEyMCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iMTIwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTMwIiB5PSIxMjAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIxNTAiIHk9IjEyMCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE3MCIgeT0iMTIwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTgwIiB5PSIxMjAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIyMDAiIHk9IjEyMCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHg9IjIyMCIgeT0iMTIwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjYwIiB5PSIxMjAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSI3MCIgeT0iMTMwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iODAiIHk9IjEzMCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjkwIiB5PSIxMzAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxMTAiIHk9IjEzMCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iMTMwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTMwIiB5PSIxMzAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjEwIiB4PSIxNTAiIHk9IjEzMCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjIwMCIgeT0iMTMwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMjIwIiB5PSIxMzAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyNDAiIHk9IjEzMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjI1MCIgeT0iMTMwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjYwIiB5PSIxMzAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjUwIiBoZWlnaHQ9IjEwIiB4PSI2MCIgeT0iMTQwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSI3MCIgaGVpZ2h0PSIxMCIgeD0iMTEwIiB5PSIxNDAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjEwIiB4PSIxODAiIHk9IjE0MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIxMCIgeT0iMTQwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjIwIiB5PSIxNDAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjEwIiB4PSIyMzAiIHk9IjE0MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjUwIiB5PSIxNTAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjMwIiBoZWlnaHQ9IjEwIiB4PSI3MCIgeT0iMTUwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTAwIiB5PSIxNTAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjgwIiBoZWlnaHQ9IjEwIiB4PSIxMTAiIHk9IjE1MCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjE5MCIgeT0iMTUwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjEwIiB5PSIxNTAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMjAiIHk9IjE1MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjIzMCIgeT0iMTUwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iNTAiIHk9IjE2MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjgwIiB5PSIxNjAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSI5MCIgeT0iMTYwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIxMDAiIGhlaWdodD0iMTAiIHg9IjEwMCIgeT0iMTYwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjAwIiB5PSIxNjAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMTAiIHk9IjE2MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjIyMCIgeT0iMTYwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIxMCIgeD0iNzAiIHk9IjE3MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjEwMCIgeT0iMTcwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTEwIiB5PSIxNzAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxMjAiIHk9IjE3MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHg9IjEzMCIgeT0iMTcwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTkwIiB5PSIxNzAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMDAiIHk9IjE3MCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMzAiIGhlaWdodD0iMTAiIHg9IjIxMCIgeT0iMTcwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjQwIiB5PSIxNzAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSI4MCIgeT0iMTgwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iOTAiIHk9IjE4MCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjEwMCIgeT0iMTgwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTIwIiB5PSIxODAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxMzAiIHk9IjE4MCIgZmlsbD0iIzcxYmRlNCIgLz48cmVjdCB3aWR0aD0iNDAiIGhlaWdodD0iMTAiIHg9IjE0MCIgeT0iMTgwIiBmaWxsPSIjMDAwMDAwIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTgwIiB5PSIxODAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjEwIiB4PSIxOTAiIHk9IjE4MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMjAiIGhlaWdodD0iMTAiIHg9IjI0MCIgeT0iMTgwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSI0MCIgaGVpZ2h0PSIxMCIgeD0iNzAiIHk9IjE5MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjExMCIgeT0iMTkwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSI3MCIgaGVpZ2h0PSIxMCIgeD0iMTIwIiB5PSIxOTAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwIiB4PSIxOTAiIHk9IjE5MCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIxMCIgeT0iMTkwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMjIwIiB5PSIxOTAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSI3MCIgeT0iMjAwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iOTAiIHk9IjIwMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iNzAiIGhlaWdodD0iMTAiIHg9IjExMCIgeT0iMjAwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIyMCIgaGVpZ2h0PSIxMCIgeD0iMTgwIiB5PSIyMDAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMDAiIHk9IjIwMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIxMCIgeT0iMjAwIiBmaWxsPSIjYTNiYWVkIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjIwIiB5PSIyMDAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxMDAiIHk9IjIxMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjEyMCIgeT0iMjEwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIxMCIgeD0iMTQwIiB5PSIyMTAiIGZpbGw9IiM3MWJkZTQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjIxMCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE4MCIgeT0iMjEwIiBmaWxsPSIjNjdiMWUzIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTkwIiB5PSIyMTAiIGZpbGw9IiNhM2JhZWQiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIyMTAiIHk9IjIxMCIgZmlsbD0iI2EzYmFlZCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE0MCIgeT0iMjIwIiBmaWxsPSIjNzFiZGU0IiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTUwIiB5PSIyMjAiIGZpbGw9IiM2N2IxZTMiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjIyMCIgZmlsbD0iIzY3YjFlMyIgLz48cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHg9IjEwMCIgeT0iMTEwIiBmaWxsPSIjMDAwMDAwIiAvPjxyZWN0IHdpZHRoPSI2MCIgaGVpZ2h0PSIxMCIgeD0iMTcwIiB5PSIxMTAiIGZpbGw9IiMwMDAwMDAiIC8+PHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjEwIiB4PSIxMDAiIHk9IjEyMCIgZmlsbD0iIzAwMDAwMCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjE0MCIgeT0iMTIwIiBmaWxsPSIjZmZmZmZmIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTUwIiB5PSIxMjAiIGZpbGw9IiMwMDAwMDAiIC8+PHJlY3Qgd2lkdGg9IjQwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjEyMCIgZmlsbD0iIzAwMDAwMCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIxMCIgeT0iMTIwIiBmaWxsPSIjZmZmZmZmIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjIwIiB5PSIxMjAiIGZpbGw9IiMwMDAwMDAiIC8+PHJlY3Qgd2lkdGg9IjcwIiBoZWlnaHQ9IjEwIiB4PSI3MCIgeT0iMTMwIiBmaWxsPSIjMDAwMDAwIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMTQwIiB5PSIxMzAiIGZpbGw9IiNmZmZmZmYiIC8+PHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjEwIiB4PSIxNTAiIHk9IjEzMCIgZmlsbD0iIzAwMDAwMCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjIxMCIgeT0iMTMwIiBmaWxsPSIjZmZmZmZmIiAvPjxyZWN0IHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCIgeD0iMjIwIiB5PSIxMzAiIGZpbGw9IiMwMDAwMDAiIC8+PHJlY3Qgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwIiB4PSI3MCIgeT0iMTQwIiBmaWxsPSIjMDAwMDAwIiAvPjxyZWN0IHdpZHRoPSI2MCIgaGVpZ2h0PSIxMCIgeD0iMTAwIiB5PSIxNDAiIGZpbGw9IiMwMDAwMDAiIC8+PHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjE0MCIgZmlsbD0iIzAwMDAwMCIgLz48cmVjdCB3aWR0aD0iMTAiIGhlaWdodD0iMTAiIHg9IjcwIiB5PSIxNTAiIGZpbGw9IiMwMDAwMDAiIC8+PHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjEwIiB4PSIxMDAiIHk9IjE1MCIgZmlsbD0iIzAwMDAwMCIgLz48cmVjdCB3aWR0aD0iNjAiIGhlaWdodD0iMTAiIHg9IjE3MCIgeT0iMTUwIiBmaWxsPSIjMDAwMDAwIiAvPjxyZWN0IHdpZHRoPSI2MCIgaGVpZ2h0PSIxMCIgeD0iMTAwIiB5PSIxNjAiIGZpbGw9IiMwMDAwMDAiIC8+PHJlY3Qgd2lkdGg9IjYwIiBoZWlnaHQ9IjEwIiB4PSIxNzAiIHk9IjE2MCIgZmlsbD0iIzAwMDAwMCIgLz48L3N2Zz4=

We can then decode the string to get our .svg image:

<svg width="320" height="320" viewBox="0 0 320 320" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges"><rect width="100%" height="100%" fill="#e1d7d5" /><rect width="140" height="10" x="90" y="210" fill="#9f21a0" /><rect width="140" height="10" x="90" y="220" fill="#9f21a0" /><rect width="140" height="10" x="90" y="230" fill="#9f21a0" /><rect width="140" height="10" x="90" y="240" fill="#9f21a0" /><rect width="20" height="10" x="90" y="250" fill="#9f21a0" /><rect width="110" height="10" x="120" y="250" fill="#9f21a0" /><rect width="20" height="10" x="90" y="260" fill="#9f21a0" /><rect width="110" height="10" x="120" y="260" fill="#9f21a0" /><rect width="20" height="10" x="90" y="270" fill="#9f21a0" /><rect width="110" height="10" x="120" y="270" fill="#9f21a0" /><rect width="20" height="10" x="90" y="280" fill="#9f21a0" /><rect width="110" height="10" x="120" y="280" fill="#9f21a0" /><rect width="20" height="10" x="90" y="290" fill="#9f21a0" /><rect width="110" height="10" x="120" y="290" fill="#9f21a0" /><rect width="20" height="10" x="90" y="300" fill="#9f21a0" /><rect width="110" height="10" x="120" y="300" fill="#9f21a0" /><rect width="20" height="10" x="90" y="310" fill="#9f21a0" /><rect width="110" height="10" x="120" y="310" fill="#9f21a0" /><rect width="20" height="10" x="140" y="230" fill="#a3efd0" /><rect width="10" height="10" x="170" y="230" fill="#a3efd0" /><rect width="10" height="10" x="140" y="240" fill="#a3efd0" /><rect width="20" height="10" x="160" y="240" fill="#a3efd0" /><rect width="20" height="10" x="130" y="260" fill="#a3efd0" /><rect width="10" height="10" x="160" y="260" fill="#a3efd0" /><rect width="10" height="10" x="180" y="260" fill="#a3efd0" /><rect width="20" height="10" x="130" y="270" fill="#a3efd0" /><rect width="30" height="10" x="160" y="270" fill="#a3efd0" /><rect width="20" height="10" x="140" y="290" fill="#a3efd0" /><rect width="10" height="10" x="170" y="290" fill="#a3efd0" /><rect width="10" height="10" x="140" y="300" fill="#a3efd0" /><rect width="20" height="10" x="160" y="300" fill="#a3efd0" /><rect width="10" height="10" x="150" y="20" fill="#a3baed" /><rect width="10" height="10" x="140" y="30" fill="#a3baed" /><rect width="10" height="10" x="80" y="40" fill="#67b1e3" /><rect width="10" height="10" x="150" y="40" fill="#a3baed" /><rect width="10" height="10" x="200" y="40" fill="#71bde4" /><rect width="10" height="10" x="70" y="50" fill="#67b1e3" /><rect width="10" height="10" x="110" y="50" fill="#a3baed" /><rect width="30" height="10" x="140" y="50" fill="#a3baed" /><rect width="10" height="10" x="170" y="50" fill="#71bde4" /><rect width="20" height="10" x="190" y="50" fill="#71bde4" /><rect width="20" height="10" x="80" y="60" fill="#67b1e3" /><rect width="20" height="10" x="120" y="60" fill="#a3baed" /><rect width="10" height="10" x="140" y="60" fill="#67b1e3" /><rect width="20" height="10" x="150" y="60" fill="#a3baed" /><rect width="30" height="10" x="170" y="60" fill="#71bde4" /><rect width="20" height="10" x="240" y="60" fill="#67b1e3" /><rect width="30" height="10" x="100" y="70" fill="#71bde4" /><rect width="20" height="10" x="130" y="70" fill="#a3baed" /><rect width="10" height="10" x="150" y="70" fill="#67b1e3" /><rect width="10" height="10" x="160" y="70" fill="#a3baed" /><rect width="10" height="10" x="170" y="70" fill="#71bde4" /><rect width="10" height="10" x="180" y="70" fill="#67b1e3" /><rect width="20" height="10" x="190" y="70" fill="#71bde4" /><rect width="10" height="10" x="210" y="70" fill="#a3baed" /><rect width="10" height="10" x="240" y="70" fill="#67b1e3" /><rect width="10" height="10" x="60" y="80" fill="#a3baed" /><rect width="10" height="10" x="90" y="80" fill="#71bde4" /><rect width="10" height="10" x="100" y="80" fill="#67b1e3" /><rect width="30" height="10" x="110" y="80" fill="#71bde4" /><rect width="10" height="10" x="140" y="80" fill="#a3baed" /><rect width="10" height="10" x="150" y="80" fill="#67b1e3" /><rect width="10" height="10" x="160" y="80" fill="#a3baed" /><rect width="20" height="10" x="170" y="80" fill="#71bde4" /><rect width="10" height="10" x="190" y="80" fill="#67b1e3" /><rect width="20" height="10" x="200" y="80" fill="#71bde4" /><rect width="20" height="10" x="220" y="80" fill="#a3baed" /><rect width="30" height="10" x="50" y="90" fill="#a3baed" /><rect width="30" height="10" x="80" y="90" fill="#71bde4" /><rect width="10" height="10" x="110" y="90" fill="#67b1e3" /><rect width="30" height="10" x="120" y="90" fill="#71bde4" /><rect width="30" height="10" x="150" y="90" fill="#a3baed" /><rect width="20" height="10" x="180" y="90" fill="#71bde4" /><rect width="10" height="10" x="200" y="90" fill="#67b1e3" /><rect width="10" height="10" x="210" y="90" fill="#71bde4" /><rect width="10" height="10" x="220" y="90" fill="#a3baed" /><rect width="10" height="10" x="60" y="100" fill="#a3baed" /><rect width="10" height="10" x="80" y="100" fill="#a3baed" /><rect width="20" height="10" x="90" y="100" fill="#71bde4" /><rect width="10" height="10" x="110" y="100" fill="#67b1e3" /><rect width="30" height="10" x="120" y="100" fill="#71bde4" /><rect width="10" height="10" x="150" y="100" fill="#a3baed" /><rect width="10" height="10" x="160" y="100" fill="#67b1e3" /><rect width="20" height="10" x="170" y="100" fill="#a3baed" /><rect width="10" height="10" x="190" y="100" fill="#71bde4" /><rect width="10" height="10" x="200" y="100" fill="#67b1e3" /><rect width="10" height="10" x="210" y="100" fill="#71bde4" /><rect width="20" height="10" x="220" y="100" fill="#a3baed" /><rect width="10" height="10" x="80" y="110" fill="#a3baed" /><rect width="10" height="10" x="90" y="110" fill="#67b1e3" /><rect width="20" height="10" x="100" y="110" fill="#71bde4" /><rect width="10" height="10" x="120" y="110" fill="#67b1e3" /><rect width="20" height="10" x="130" y="110" fill="#71bde4" /><rect width="20" height="10" x="150" y="110" fill="#a3baed" /><rect width="10" height="10" x="170" y="110" fill="#67b1e3" /><rect width="20" height="10" x="180" y="110" fill="#a3baed" /><rect width="20" height="10" x="200" y="110" fill="#71bde4" /><rect width="10" height="10" x="220" y="110" fill="#67b1e3" /><rect width="20" height="10" x="230" y="110" fill="#a3baed" /><rect width="10" height="10" x="260" y="110" fill="#67b1e3" /><rect width="20" height="10" x="60" y="120" fill="#a3baed" /><rect width="10" height="10" x="80" y="120" fill="#67b1e3" /><rect width="10" height="10" x="90" y="120" fill="#a3baed" /><rect width="20" height="10" x="100" y="120" fill="#71bde4" /><rect width="10" height="10" x="120" y="120" fill="#67b1e3" /><rect width="20" height="10" x="130" y="120" fill="#71bde4" /><rect width="20" height="10" x="150" y="120" fill="#a3baed" /><rect width="10" height="10" x="170" y="120" fill="#67b1e3" /><rect width="20" height="10" x="180" y="120" fill="#a3baed" /><rect width="20" height="10" x="200" y="120" fill="#71bde4" /><rect width="30" height="10" x="220" y="120" fill="#a3baed" /><rect width="10" height="10" x="260" y="120" fill="#67b1e3" /><rect width="10" height="10" x="70" y="130" fill="#a3baed" /><rect width="10" height="10" x="80" y="130" fill="#71bde4" /><rect width="20" height="10" x="90" y="130" fill="#a3baed" /><rect width="10" height="10" x="110" y="130" fill="#71bde4" /><rect width="10" height="10" x="120" y="130" fill="#67b1e3" /><rect width="20" height="10" x="130" y="130" fill="#71bde4" /><rect width="50" height="10" x="150" y="130" fill="#a3baed" /><rect width="20" height="10" x="200" y="130" fill="#71bde4" /><rect width="20" height="10" x="220" y="130" fill="#a3baed" /><rect width="10" height="10" x="240" y="130" fill="#67b1e3" /><rect width="10" height="10" x="250" y="130" fill="#a3baed" /><rect width="10" height="10" x="260" y="130" fill="#67b1e3" /><rect width="50" height="10" x="60" y="140" fill="#a3baed" /><rect width="70" height="10" x="110" y="140" fill="#71bde4" /><rect width="30" height="10" x="180" y="140" fill="#a3baed" /><rect width="10" height="10" x="210" y="140" fill="#71bde4" /><rect width="10" height="10" x="220" y="140" fill="#67b1e3" /><rect width="30" height="10" x="230" y="140" fill="#a3baed" /><rect width="10" height="10" x="50" y="150" fill="#67b1e3" /><rect width="30" height="10" x="70" y="150" fill="#a3baed" /><rect width="10" height="10" x="100" y="150" fill="#67b1e3" /><rect width="80" height="10" x="110" y="150" fill="#71bde4" /><rect width="20" height="10" x="190" y="150" fill="#a3baed" /><rect width="10" height="10" x="210" y="150" fill="#71bde4" /><rect width="10" height="10" x="220" y="150" fill="#67b1e3" /><rect width="20" height="10" x="230" y="150" fill="#a3baed" /><rect width="10" height="10" x="50" y="160" fill="#67b1e3" /><rect width="10" height="10" x="80" y="160" fill="#a3baed" /><rect width="10" height="10" x="90" y="160" fill="#67b1e3" /><rect width="100" height="10" x="100" y="160" fill="#71bde4" /><rect width="10" height="10" x="200" y="160" fill="#a3baed" /><rect width="10" height="10" x="210" y="160" fill="#67b1e3" /><rect width="20" height="10" x="220" y="160" fill="#a3baed" /><rect width="30" height="10" x="70" y="170" fill="#a3baed" /><rect width="10" height="10" x="100" y="170" fill="#71bde4" /><rect width="10" height="10" x="110" y="170" fill="#a3baed" /><rect width="10" height="10" x="120" y="170" fill="#67b1e3" /><rect width="60" height="10" x="130" y="170" fill="#71bde4" /><rect width="10" height="10" x="190" y="170" fill="#a3baed" /><rect width="10" height="10" x="200" y="170" fill="#67b1e3" /><rect width="30" height="10" x="210" y="170" fill="#a3baed" /><rect width="10" height="10" x="240" y="170" fill="#67b1e3" /><rect width="10" height="10" x="80" y="180" fill="#67b1e3" /><rect width="10" height="10" x="90" y="180" fill="#71bde4" /><rect width="20" height="10" x="100" y="180" fill="#a3baed" /><rect width="10" height="10" x="120" y="180" fill="#67b1e3" /><rect width="10" height="10" x="130" y="180" fill="#71bde4" /><rect width="40" height="10" x="140" y="180" fill="#000000" /><rect width="10" height="10" x="180" y="180" fill="#71bde4" /><rect width="40" height="10" x="190" y="180" fill="#a3baed" /><rect width="20" height="10" x="240" y="180" fill="#67b1e3" /><rect width="40" height="10" x="70" y="190" fill="#a3baed" /><rect width="10" height="10" x="110" y="190" fill="#67b1e3" /><rect width="70" height="10" x="120" y="190" fill="#71bde4" /><rect width="20" height="10" x="190" y="190" fill="#a3baed" /><rect width="10" height="10" x="210" y="190" fill="#67b1e3" /><rect width="20" height="10" x="220" y="190" fill="#a3baed" /><rect width="10" height="10" x="70" y="200" fill="#a3baed" /><rect width="20" height="10" x="90" y="200" fill="#67b1e3" /><rect width="70" height="10" x="110" y="200" fill="#71bde4" /><rect width="20" height="10" x="180" y="200" fill="#a3baed" /><rect width="10" height="10" x="200" y="200" fill="#67b1e3" /><rect width="10" height="10" x="210" y="200" fill="#a3baed" /><rect width="10" height="10" x="220" y="200" fill="#67b1e3" /><rect width="10" height="10" x="100" y="210" fill="#67b1e3" /><rect width="10" height="10" x="120" y="210" fill="#71bde4" /><rect width="30" height="10" x="140" y="210" fill="#71bde4" /><rect width="10" height="10" x="170" y="210" fill="#a3baed" /><rect width="10" height="10" x="180" y="210" fill="#67b1e3" /><rect width="10" height="10" x="190" y="210" fill="#a3baed" /><rect width="10" height="10" x="210" y="210" fill="#a3baed" /><rect width="10" height="10" x="140" y="220" fill="#71bde4" /><rect width="10" height="10" x="150" y="220" fill="#67b1e3" /><rect width="10" height="10" x="170" y="220" fill="#67b1e3" /><rect width="60" height="10" x="100" y="110" fill="#000000" /><rect width="60" height="10" x="170" y="110" fill="#000000" /><rect width="40" height="10" x="100" y="120" fill="#000000" /><rect width="10" height="10" x="140" y="120" fill="#ffffff" /><rect width="10" height="10" x="150" y="120" fill="#000000" /><rect width="40" height="10" x="170" y="120" fill="#000000" /><rect width="10" height="10" x="210" y="120" fill="#ffffff" /><rect width="10" height="10" x="220" y="120" fill="#000000" /><rect width="70" height="10" x="70" y="130" fill="#000000" /><rect width="10" height="10" x="140" y="130" fill="#ffffff" /><rect width="60" height="10" x="150" y="130" fill="#000000" /><rect width="10" height="10" x="210" y="130" fill="#ffffff" /><rect width="10" height="10" x="220" y="130" fill="#000000" /><rect width="10" height="10" x="70" y="140" fill="#000000" /><rect width="60" height="10" x="100" y="140" fill="#000000" /><rect width="60" height="10" x="170" y="140" fill="#000000" /><rect width="10" height="10" x="70" y="150" fill="#000000" /><rect width="60" height="10" x="100" y="150" fill="#000000" /><rect width="60" height="10" x="170" y="150" fill="#000000" /><rect width="60" height="10" x="100" y="160" fill="#000000" /><rect width="60" height="10" x="170" y="160" fill="#000000" /></svg>

Review a working example in the CodeSandbox below:

Noun Generator

Noun Generator by gitblamecarrot using ethers, react, react-dom, react-scripts

https://codesandbox.io/s/noun-generator-noyej

Summary

With just two contract calls we were able to generate a fully on-chain noun! We called the NounSeeder contract to generate a random Seed (which determines the traits of our noun). We then passed the Seed into the NounDescriptor contract to generate the the .svg image.