<commit_before><h1 align="center">Pixel Art to CSS</h1>
<p align="center">
  <img width="200" src="screenshots/tree-pixelartcss.png">
</p>
<h2 align="center">Online Pixel Art editor</h2>
<p align="center">
  <h3 align="center">
    Web application that allow us to animate pixel art and export the results to CSS.
  </h3>
</p>
<p align="center">
  <a target='_blank' href='http://www.recurse.com' title='Made at the Recurse Center'><img src='https://cloud.githubusercontent.com/assets/2883345/11325206/336ea5f4-9150-11e5-9e90-d86ad31993d8.png' height='20px'/></a>
  <a href="https://travis-ci.com/jvalen/pixel-art-react"><img src="https://travis-ci.com/jvalen/pixel-art-react.svg?branch=master" alt="travis ci"></a>
</p>

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

[Try to draw](https://www.pixelartcss.com/) some pixels on the screen, it will generate the CSS code using **box-shadow** property. Create as much drawings as you want adding new frames and then check them in motion. It uses CSS **keyframes** to get the animation done.

<p align="center">
  <img src="screenshots/screenshot-cat.png">
</p>

You will be able to **load**, **save**, **import**, **export** projects, **undo** **redo** your actions, change grid properties, **share** your work and **download** it, everything in a very easy and fast way.

<p align="center">
  By default, you will find the following project within the <b>LOAD</b> section:<commit_msg>README updated<commit_after><h1 align="center">Pixel Art to CSS</h1>
<p align="center">
  <img width="200" src="screenshots/tree-pixelartcss.png">
</p>
<h2 align="center">Online Pixel Art editor</h2>
<p align="center">
  <h3 align="center">
    Web application that allow us to animate pixel art and export the results to CSS.
  </h3>
</p>
<p align="center">
  <a target='_blank' href='http://www.recurse.com' title='Made at the Recurse Center'><img src='https://cloud.githubusercontent.com/assets/2883345/11325206/336ea5f4-9150-11e5-9e90-d86ad31993d8.png' height='20px'/></a>
  <a href="https://travis-ci.com/jvalen/pixel-art-react"><img src="https://travis-ci.com/jvalen/pixel-art-react.svg?branch=master" alt="travis ci"></a>
</p>

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

[Try to draw](https://www.pixelartcss.com/) some pixels on the screen, it will generate the CSS code using **box-shadow** property. Create as much drawings as you want adding new frames and then check them in motion. It uses CSS **keyframes** to get the animation done.

<p align="center">
  <img src="screenshots/screenshot-potion.png">
</p>

You will be able to **load**, **save**, **import**, **export** projects, **undo** **redo** your actions, change grid properties, **share** your work and **download** it, everything in a very easy and fast way.

<p align="center">
  By default, you will find the following project within the <b>LOAD</b> section:
{'fraction_non_alphanumeric': 0.1632088520055325, 'fraction_numerical': 0.0338865836791148, 'mean_word_length': 4.92827868852459, 'pattern_counts': {'":': 0, '<': 53, '<?xml version=': 0, '>': 53, 'https://': 8, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3415069', 'n_tokens_mistral': 1010, 'n_tokens_neox': 955, 'n_words': 316}