Skip to content
Pixel art animation and drawing web app powered by React
Branch: master
Clone or download
Latest commit e54d07e Dec 29, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
build Switch domain from jvrpath to jvalen May 1, 2017
examples/import-export
images/tmp Twitter share image feature added: included new component 'TwitterBut… Jan 2, 2016
screenshots README updated Dec 29, 2018
src
test
.babelrc
.eslintignore
.eslintrc Setup prettier, eslint and stylelint Dec 28, 2018
.gitignore
.lintstagedrc
.prettierignore
.prettierrc
.stylelintrc
.travis.yml
Aptfile
LICENSE.md
Procfile
README.md
package-lock.json Added lintstaged hooks Dec 29, 2018
package.json
postcss.config.js
webpack.config.js
webpack.production.config.js

README.md

Pixel Art to CSS

Animate pixel art and get CSS

travis ci

Did you know that you can create pixel art using CSS?

Pixel Art to CSS is an online editor that helps you with that task.

Combining the power of both box-shadow and keyframes CSS properties, you will get CSS code ready to use in your site.

Furthermore, you can download or share your work in different formats such as a static image, animated GIF or sprite like image.

✏️ Try it out

Pixel Art to CSS aims to be an intuitive tool by its simplicity, however it is equipped with a wide range of features: customize your color palette, go back and forth in time, modify animation settings, save or load your projects, among others.

Example

By default, you will find the following project within the LOAD section:

Cat animation example

See it live at pixelartcss

You can also import it directly submitting this code.

Technical overview

This application has been built with the following technologies:

  • React: Library to build the UI.
  • Redux: Implements a Flux like architecture.
  • ImmutableJS Helps to keep the data immutable aiming to avoid side effects.
  • PostCSS Handle the app CSS.
  • NodeJS + Express (Server side to build an universal application, create and serve the generated drawings).

Installation

npm install

Development

If you just want to develop the interface with no need of the back-end side.

npm run development

Deploy

Create the final build and run the generated React HTML on the server using SSR.

npm run deploy

npm run server

A config.json is needed for deployment with the Twitter and express keys.

Lint

There are several libraries used in the project that help us to keep our codebase healthy:

Every time we commit something it will execute the linters and format the staged files if needed.

If you want to check them individually you could execute the following scripts:

npm run lint
npm run csslint
npm run format

Testing

We are using Jest as the testing platform.

npm run test

Contributing

Help me to improve it 🌱

Please create a GitHub issue if there is something wrong or to be improved. Pull requests are also welcome, they should be created to the develop branch.

License

MIT Copyright © 2016 Javier Valencia Romero (@jvalen)

You can’t perform that action at this time.