An easy way to draw your Pixel Arts and get the CSS code generated from it

by Vue.js Examples

Vue Pixel Art

Vue Pixel Art is an easy way to draw your Pixel Arts and get the CSS code generated from it.

View Demo Download Source

Instructions

  • Click on a square to paint. If it is already painted, that square will be transparent again.
  • Hold mouse down and drag your mouse everywhere in the grid to paint. This will not erase any square, just paint.
  • Size can't be greater than 100.

Development

This project follow the Puzzle Pattern guidelines and uses Standard Code Style.

Fork the project and enter this commands in your terminal:

git clone https://github.com/YOUR_GITHUB_USERNAME/vue-pixel-art.git
cd vue-pixel-art
npm install
npm run serve

The default port is 8080.

TODO

  • [ ] Add E2E tests with Cypress.
  • [ ] Add Unit tests with Jest.
  • [ ] Add Redo/Undo.
  • [X] Add mouse drag and paint.
  • [X] Add Vuejs pixel logo on README and favicon.ico.
  • [X] Deploy.

GitHub