On-chain Christmas gifting service, Xmasbook: Postcard edition

Nounish Discussion
1

TLDR:

we are zero budget team, and we created an on-chain gifting service in optimism, Arbitrum, Polygon
we leverage the cost effectivity of L2s to create big size SVGs and on chain massage.

Screenshot 2022-12-19 144952
Screenshot 2022-12-19 144952792Ă—410 165 KB

me and my friends believe in on-chain technologies and this project is bit by bit on the blockchain.

status:(finalized)

ASK:

we don’t want to ask the nouns community for funds but we need support.
if you are interested in this project please consider to mint a few for yourself and loved ones.
the whole things cost around 0.002 Eth, and it would be huge help.
if you could share this project with anybody it would be a huge honor and I’d be so grateful.

Xmasbook Under the hood:

a brief history of SVG

Xmasbook images are made with SVG, SVG was developed in early days of web, when bandwidth was not high like these days and if wanted to have high resolution regular images (like .jpeg or .png) in a website that website would have became a big size website that have long loading time, so to overcome the problem of size of the images, world wide web consortium (the guys behind making internet an open standard) aim to create an new standard to make an scalable graphics (an image that if you zoom it won’t become pixelized).
Bitmap_VS_SVG.svg

SVG is an markup language ?!?

SVG files are consist of something that it called Tags . these tags defines what an image should look like. let’ draw an rectangle in a SVG.


<svg width="400" height="400">

<rect width="200" height="100" fill="pink" />

</svg>

the above code will be rendered to this image. the <rect> tag is stand for rectangle.
svgviewer-png-output(1)

  • SVG language is a feature reach language that support too many amazing things. If you are interested to understand more by doing, I highly recommend to get your hand on this tutorial.
    w3schools SVG intro
    w3-t
    w3-t931Ă—529 14.4 KB

why using SVG for NFTs?

In a way you should consider blockchain as a precious storage device, all of us storing all sort of data, transaction, … on the blockchain. but blockchain has a limited capacity. for example Ethereum will produce almost 5 blocks per minute and each block has an average size of 80 KB(kilo bytes), it means that we have around 400KB/min for this millions of users. so when we want to consider a regular images(.jpeg or .png or raster images) size these days, it in order of megabytes and Ethereum machines have not this much capacity. so we have no other choice to use SVG.

becuase it has more efficent memory.

this way we can create images that has only is 7KB in size and has much details as well.

mfervsmfer1
mfervsmfer11160Ă—601 308 KB

  • this way we created a repository of our assets in SVG and store them all in the blockchain.

How Xmasbook postcard created.

we are going talk about two thing here how SVG are stacked, and how user store them in smart contract

SVG stacked:

Xmasbook postcard is created by stacking diffrent SVGs that user selects images in blockchain.

  1. sky or the background
    sky

  2. second layer is the planet
    planet

If you stack these two togethor you get this.
skyplanet

and I think you get the idea of how this is created.
xmasgifff01

svgviewer-png-output (1)

storing and creating.

visual data:

Xmasbook has 13 bytes of data, each of them controls 1 field of visual data that each user put on the chain, to determine what that NFT should look like.

  • first byte determine the background in the image

  • second byte determine the palnet in the sky

  • third byte determine the landmark

  • 4th byte determine which christmas tree should be in the image

  • 5th byte determine gift box under the tree

  • 6th byte determine the NFT guest

  • 7th, 8th, 9th, 10th byte decide the ornament on the tree

  • there is a pre determined layer here that we internaly call “papyrus”, it has paper like texture and “To:” and “From:” field on it

  • 11th byte determine the stamp of the postcard

  • 12th byte determine the frame of postcard

massage Data:

  • user can pick the NFT without a massage but we highly encorage to write a massage for your loved ones

after the NFT visuals are ready user can put a 160 charter massage that stores in a byte array

  • we limited the chataters to ASCII-128 with the exception of “<” and “>” character to prevent HTML injection in SVG.

  • user can write a from and to section in the card too. and it’s limited to 20 character.

previous Xmasbook:

we also made another Christmas themed project back in 2021 if you were interested, you can check them out here.
the contract still haven’t reached total supply limit and you can still mint them.
at https://xmb22.xmasbook.xyz/

74
741920Ă—1080 315 KB

Opensea previous Xmasbook

Disclaimer: then we didn’t much about on-chain technologies, and previous project is an IPFS project.

thank you for reading this sincerely, sciNFTist.eth

2 Likes