A long ago I was so into making pixelart with beads, one of the designs I most enjoyed was the onigiri one. I'd had the idea of making a pixelart onigiri which could be modified with a few clicks, using only HTML + CSS + jQuery.

You can try it right now here: http://wearecodex.com/pixelin/

For this one I used Atom with Emmet to make the development faster.

This is exactly what it does right now:

How it was made

First I set all the base using spans in my HTML file, like this:

<span class="space"></span>span><span class="space"></span>span><span class="space"></span>
      <span class="AD57FF"></span>span><span class="AD57FF"></span>span>
      <div class="clear"></div>

Here, each span represents a pixel, the class gives them their color. For example:
span.AD57FF{background:#AD57FF;}

Then I added the buttons which control the form of each pixel with this code:

It will have more functions in the future. Stay in touch!

Merged pull requests:



I am a professional graphic designer.  You can find me here {  |  |  }

Posted on Utopian.io -  Rewarding Open Source Contributors