gitmyhub

pixel-art-react

JavaScript ★ 5.9k updated 4mo ago

Pixel art animation and drawing web app powered by React

A browser-based pixel art editor where you draw on a grid and export your artwork as pure CSS code, an animated GIF, or a PNG image, with no server or image hosting required.

JavaScriptReactReduxImmutableJSPostCSSJestsetup: easycomplexity 2/5

Pixel Art to CSS is a browser-based drawing and animation tool that lets you create pixel art and export it as working CSS code. You draw on a grid, color individual pixels, and the app generates the CSS needed to reproduce that artwork directly in a webpage, without any images.

The CSS it produces uses two standard properties: box-shadow (to place colored squares) and keyframes (to animate them in sequence). This means the resulting code can be dropped into any website and will run in the browser with no extra dependencies. You can also export your work as a static image or an animated GIF if you prefer a file over code.

The editor includes several tools for working on a piece: a customizable color palette, an undo and redo history, animation settings for controlling timing and frame order, and the ability to save projects and load them back later. There is also an import and export feature for sharing project files as plain text.

On the technical side, the app is built with React for the interface, Redux for managing state, ImmutableJS for keeping data consistent, and PostCSS for styles. The repository includes linting and formatting tools that run automatically on commits. The test suite uses Jest.

The project is currently in an idle state while a refactor and tech upgrade is in progress. The maintainer is not accepting new pull requests or issues at this time. The code is released under the MIT license.

Where it fits