Open in app

Sign in

Write

Sign in

Revealing the complexity of a Pixel Wizard NFT

Pixel Wizards
9 min readJan 4, 2023

Let’s reveal the complexity of a Pixel Wizard NFT. A Pixel Wizard NFT is not a regular NFT. Most NFT’s on any marketplace within most ecosystems are built on a raster (pixel-based). Raster images are created with pixel-based software like photoshop or captured with a camera. They are more common in general such as jpg, gif, png, and are widely used as NFT’s.

But for the Pixel Wizards, we didn’t chose for a pixel-based image. Instead we went for Scalable Vector Graphics (SVG). It uses Vectors, elements with a magnitude and a direction, to render a 2-dimensional image with support for interactivity and animations. SVG’s don’t rely on a raster to make an image, they instead use vector data in the form of computer code.

What is a Pixel Wizard?

Aside from a piece of art, each Pixel Wizard is a piece of computer code, rendered by your own browser or device. Making it infinite scalable as it re-renders when you zoom in or enlarge it on a bigger screen, meaning it is always looking sharp. Example code:

<svg id="pxlwz" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" viewBox="0 0 64 64">
    <g class="backdrop">
      <path fill="#E3B2FF" d="M0 0h64v64H0z" class="E3B2FF"/>
    </g>
</svg>

With Pixel Wizards we want to explore the boundaries of making a so called art-utility, coded artworks that provide utility straight from the NFT itself.

What technology makes up a Pixel Wizard?

Each Pixel Wizard is build with five different types of coding technologies:

  1. Scalable Vector Graphics (SVG): a language for describing two-dimensional graphics in XML. Used to define and render a Pixel Wizard.
  2. Hypertext Markup Language (HTML): a markup language for the web that defines the structure of web pages. Used to make a Progressive Web App of a pixel Wizard.
  3. Cascading Style Sheets (CSS): a language we use to style a Web page or SVG image. Used for animations and styling. Used to style and animate a Pixel Wizard
  4. JavaScript (JS): a language commonly used to create interactive effects within web browsers. Used to apply interactivity to a Pixel Wizard.
  5. JavaScript Object Notation (JSON): a lightweight data-interchange format in human-readable format. Used for Metadata and provide the Progressive Web App settings.

Scalable Vector Graphics

This is the main language used to render the artwork of a Pixel Wizard. It can be combined with CSS and JS to further enhance the features of a Pixel Wizard including animation and interactivity. An example .SVG file:

<svg id="pxlwz" xmlns="http://www.w3.org/2000/svg" shape-rendering="crispEdges" viewBox="0 0 64 64">
  <g class="wizard">
    <g class="staff">
      <g class="rebels-sword">
        <path d="M49 32v3h-1v-2h-2v-1h3Zm-3 1h-1v1h1v-1Zm-1 1h-1v1h1v-1Zm-1 1h-1v1h1v-1Zm3 1h1v-1h-1v1Zm-4 0h-1v1h1v-1Zm3 1h1v-1h-1v1Zm-4 0h-1v1h1v-1Zm3 1h1v-1h-1v1Zm-4 1v-1h-2v1h2Zm3 0h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1v1h1v-2h-1v1Zm-3 0v-2h-1v3h1v-1Zm-1 1h-1v1h1v-1Zm2 0h-1v1h3v-1h-2Zm-4 1v1h1v-1h-1Zm2 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Z" />
        <g class="pw-particles-x">
          <path fill="#FF7930" d="M50 28h-1v1h1v-1Z" />
          <path fill="#E35100" d="M48 26h1v1h-1v-1Zm0 3h1v1h-1v-1Z" />
        </g>
        <g class="pw-particles-x">
          <path fill="#B21030" d="M44 28h-1v1h1v-1Z" />
          <path fill="#E35100" d="M42 30h1v1h-1v-1Zm1 1h1v1h-1v-1Z" />
        </g>
        <path fill="#E35100" d="M49 31h1v1h-1v-1Z" class="pw-glow" opacity=".977"/>
        <path fill="#E35100" d="M48 31h1v1h-1v-1Zm1 1h1v1h-1v-1Z" class="pw-glow-66" opacity=".66"/>
        <path fill="#F5F5F5" d="M47 33v1h-1v-1h1Zm-2 2h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Z" />
        <path fill="#A2A2A2" d="M48 34v1h-1v-1h1Zm-2 2h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Z" />
        <path fill="#E35100" d="M47 32h-1v-1h2v1h-1Zm-1 0h-1v1h1v-1Zm-1 1h-1v1h1v-1Zm4 0v2h1v-2h-1Zm-5 1h-1v1h1v-1Zm-1 1h-1v1h1v-1Zm5 1h1v-1h-1v1Zm-7 1h1v-1h-1v1Zm6 0h1v-1h-1v1Zm-7 1h1v-1h-1v1Zm6 0h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Z" class="pw-glow-33" opacity=".33"/>
        <path fill="#EBEBEB" d="M48 33v1h-1v-1h1Zm-2 2h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-1 1h1v-1h-1v1Zm-2 0h-1v2h1v-2Zm1 1h1v-1h-1v1Zm-1 1v1h2v-1h-2Z" />
        <path fill="#797979" d="M41 40v1h-1v-1h1Zm-2 2h1v-1h-1v1Zm-1 1h1v-1h-1v1Z" />
        <path fill="#4161FB" d="M38 43v1h-1v-1h1Z" />
      </g>
    </g>
  </g>
</svg>

This SVG render’s the following output (a staff trait called “Rebel’s Sword”):

Rendered sword with SVG

Although this is already awesome, let’s enhance it with some animations using CSS.

Cascading Style Sheets

The CSS language is used to further enhance the styling of a Pixel Wizard by allowing us to apply all sorts of styling and animations. E.g. making a wizard levitate, responsive on any device and hide parts of the art, change color when needed etc.

By making use of CSS’s animation feature we can define custom animations and enable them with the use of JS or be infinitely applied on certain SVG objects. In the earlier mentioned example, “rebel’s sword” you will notice a piece of code called class=”pw-glow”. This class name “pw-glow” can be used in CSS to apply animations and styling. Example:

.pw-glow {
  animation: pw-anim-glow 4s infinite;
}

@keyframes pw-anim-glow {
  0% {
    opacity: 0.5;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.5;
  }
}

In this example we define an animation to change the opacity/transparency of an SVG object containing the class “pw-glow” from 0.5 (50% transparent) to 1 (0% transparent) and back and run it infinitely.

For those daring to experience a Pixel Wizard. Checkout our Merlin the Wizard Codepen where a lite version can be played with!

Combining different animations, like shifting individual pixels from left to right you can achieve the following:

Rendered + Animated Sword with CSS

To spice it up even further, let’s try to make the sword interactive!

JavaScript

Being one of the core languages of the world wide web, JavaScript is used to allow interactivity for the Pixel Wizards. It is used to fetch data from a datasource and pass it down as JSON to read the contents coming from the datasource.

In the Pixel Wizards case, each wizard is connected to our very own Wizard-API. Also known as the wizard “book of knowledge”. The information is read by the wizard and returned on the screen for you to see.

But it is also used to further enhance the experience one can have with their NFT by making it interactive based upon certain events like a click, typing a word, pressing a button etc. This can be achieved like this:

//define the main SVG object to execute code on.
let root = document.getElementById('pxlwz');

//make sure we are using the SVG object.
if (root) {
  let pwRoot = root;

  //find the sword object
  let pwSword = pwRoot.querySelector('.rebels-sword');
  
  //set SVG background color when you click on the sword object.
  pwSword.addEventListener('click', () => {
     pwRoot.style.backgroundColor = '#fbbc9b';
  });
}

In the example mentioned above we are changing the background color of the SVG object to #fbbc9b when you click on the sword:
This is just an example not part of the collection.

Rendered + Animated + Interactive with JS on click

When you combine the previous mentioned technologies, SVG, CSS and JS, you will get a standalone .SVG file that renders a Pixel Wizard with Animation and Interactivity. This is all great and stuff but we can go a little bit further to make the overall experience more amazing…!

Hypertext Markup Language

This is when HTML comes into play! HTML is a language that is being used to define the structure of an application or website. If you press F12 or right-click > inspect on any website you will straight up see the HTML structure of the website. This structure consists of so called tags <html>, <body>, <svg> and are read by your browser or any mobile device to define what to show to you.

<!DOCTYPE html>
<html>
    <head>
        <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
        <link href="https://ipfs.io/ipfs/CID/1.webmanifest" rel="manifest" />
        <link href="https://ipfs.io/ipfs/CID/png256_assets/1.png" rel="icon" sizes="256x256" type="image/png" />
        <link href="https://ipfs.io/ipfs/CID/png512_assets/1.png" rel="icon" sizes="512x512" type="image/png" />
        <meta href="https://ipfs.io/ipfs/CID/png256_assets/1.png" rel="apple-touch-icon" sizes="256x256" type="image/png" />
        <meta href="https://ipfs.io/ipfs/CID/png512_assets/1.png" rel="apple-touch-icon" sizes="512x512" type="image/png" />
        <meta content="#1 of 2222 Pixel Wizards: a magical and wise collection of animated, and interactive SVG-based NFTs on Stargaze Zone." name="description" />
        <meta content="Pixel Wizards" name="author" />
        <meta content="Kelwor Twiststamp #1" property="og:title" />
        <meta content="#1 of 2222 Pixel Wizards: a magical and wise collection of animated, and interactive SVG-based NFTs on Stargaze Zone." property="og:description" />
        <meta content="https://ipfs.io/ipfs/CID/png512_assets/1.png" property="og:image" />
        <meta content="summary_large_image" name="twitter:card" />
        <meta content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, viewport-fit=cover" name="viewport" />
        <title>Kelwor Twiststamp</title>
    </head>
    <body>
        <svg>
            <style>
            </style>
            <script>
            </script>
        </svg>
    </body>
</html>

By adding these structures to a Pixel Wizards, each Pixel Wizards and his static assets are being called to provide a unique interactive experience on stargaze zone and on any mobile device. Example of the app experience:

How to save a Pixel Wizard as an app.

By wrapping the SVG + CSS + JS in a .HTML file it also ensures the interactivity of it on Stargaze. This is done through adding the .HTML file as the “animation_url” value as part of the JSON metadata structure of your Pixel Wizard. Stargaze reads this “animation_url” and display the .HTML file on the NFT detail page. This is where the .JSON files come into play.

JSON

A human readable data file. This where all the metadata files are written with. It’s the starting point for any NFT, pointing towards the right image, traits and collection information. A typical Pixel Wizard metadata file contains the following structure:
Notice the unique animation_url pointing towards the .html file.

{
    "name": "Merlin the Wizard",
    "image": "2222.svg",
    "attributes": [
        {
            "trait_type": "backdrop",
            "value": "A2BAFF"
        },
        // and more trait's
    ],
    "collectionName": "Pixel Wizards",
    "description": "#2222 of 2222 Pixel Wizards also known as Merlin the Wizard. Made from scalable vector graphics, animated with CSS and made interactive with JavaScript. Merlin the Wizard comes with a particular interest in the STARS crypto token on which he can share his wisdom to you.",
    "animation_url": "https://ipfs.io/ipfs/CID/2222.html"
}

Each Pixel Wizard also contains a .manifest file that is also written in JSON-style language. It defines the information to be used as app logo, background image, open in fullscreen mode, what the name is etc.

{
    "name": "Kelwor Twiststamp",
    "short_name": "PW#1",
    "background_color": "#E3B2FF",
    "theme_color": "#E3B2FF",
    "display": "fullscreen",
    "description": "#1 of 2222 Pixel Wizards: a magical and wise collection of animated, and interactive SVG-based NFTs on Stargaze Zone.",
    "icons": [
        {
            "sizes": "256x256",
            "src": "https://ipfs.io/ipfs/CID/png256_assets/1.png",
            "type": "image/png"
        },
        {
            "sizes": "512x512",
            "src": "https://ipfs.io/ipfs/CID/png512_assets/1.png",
            "type": "image/png"
        }
    ]
}

The complex structure of all the files for a single Pixel Wizard.

So we discoverd that a Pixel Wizard consists of multiple files as mentioned in previous paragraphs. They are served via IPFS, to accomplish a Decentralized Animated, Interactive, Scalable Vector Graphics NFT. To clarify the complex file structure, the overview below will tell you how a single Pixel Wizard is composed out of multiple files:
This example uses wizard #2222 as an example

2222.json
├── 2222.svg
└── 2222.html
│   ├── 2222.webmanifest
│   ├── static_assets/
│   │   ├── png256/
│   │   │   └── 2222.png
│   │   ├── png256/
│   │   │   └── 2222.png
│   │   ├── sounds/
│   │   │   └── q.wav
│   │   │   └── w1.wav
│   │   │   └── w2.wav
│   │   │   └── e.wav
│   │   │   └── r.wav
│   │   │   └── err.wav

The main file is the metadata.json file pointing towards the .SVG and .HTML file of a pixel wizard. The .HTML file is pointing towards .webmanifest and a statics folders that contains .PNG versions (image) of your wizard in a 256x246px and 512x512px size. It also points to a subfolder that contains all the sounds the wizards are using.

Wrapping it all up

A Pixel Wizard is a complex piece of artwork that allows animations, interactivity and infinite scalability in a single NFT. Combining SVG + CSS + JS + HTML and a bit of JSON to create a new and unique web3 experience on the blockchain in the form a NFT.

Save your wizard as an app, interact with it to retrieve knowledge from the wizard “Book of knowledge” and most of all, have fun!

Discord: https://discord.gg/pixelwizards
Twitter: https://twitter.com/PixlWizardsNFT
Website: https://pixelwizards.art
Mint: https://stargaze.zone (20/01/2023)

Nft
Code
Nft Collectibles
Stargaze Zone
Pixel Art

--

--

Pixel Wizards

Written by Pixel Wizards

28 Followers

A magical and wise collection of 2222 interactive animated wizards. Born on Terra, moved to the Cosmos to provide wise council to their inhabitants!

Help

Status

About

Careers

Press

Blog

Privacy

Terms

Text to speech

Teams