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 class="space"></span><span class="space"></span><span class="space"></span><span class="space"></span>
      <span class="AD57FF"></span><span class="AD57FF"></span><span class="AD57FF"></span><span class="AD57FF"></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

---