aseprite-css's Introduction

Aseprite CSS

Generated pixel art with CSS box shadow property based a svg image exported by Aseprite

Overview • Usage

🔥 Overview

CSS is awesome! Dot!

🚀 Usage

1. Export Aseprite SVG image

Save as "SVG" image file in your aseprite.

2. Install `aseprite-css` globally

npm install aseprite-css -g

3. Generate CSS pixel art

aseprite-css [source] <size>

Example

Default:

aseprite-css my-pixelart.svg

With custom pixel size:

aseprite-css my-pixelart.svg 10

Ouput

html {
  width: 1px;
  height: 1px;
  box-shadow: 5px 1px 0 #000000, 6px 1px 0 #000000, 4px 2px 0 #000000, 5px 2px 0
      #ffffff, 6px 2px 0 #ffffff, 7px 2px 0 #000000, 3px 3px 0 #000000, 4px 3px
      0 #5b6ee1, 5px 3px 0 #ffffff, 6px 3px 0 #ffffff, 7px 3px 0 #ffffff, 8px
      3px 0 #000000, 3px 4px 0 #000000, 4px 4px 0 #5b6ee1, 5px 4px 0 #ffffff, 6px
      4px 0 #bd9f81, 7px 4px 0 #ffffff, 8px 4px 0 #ffffff, 9px 4px 0 #000000, 3px
      5px 0 #000000, 4px 5px 0 #5b6ee1, 5px 5px 0 #ffffff, 6px 5px 0 #bd9f81, 7px
      5px 0 #bd9f81, 8px 5px 0 #ffffff, 9px 5px 0 #ffffff, 10px 5px 0 #000000, 3px
      6px 0 #000000, 4px 6px 0 #5b6ee1, 5px 6px 0 #ffffff, 6px 6px 0 #bd9f81, 7px
      6px 0 #e5bd94, 8px 6px 0 #bd9f81, 9px 6px 0 #ffffff, 10px 6px 0 #ffffff, 11px
      6px 0 #000000, 3px 7px 0 #000000, 4px 7px 0 #5b6ee1, 5px 7px 0 #ffffff, 6px
      7px 0 #e5bd94, 7px 7px 0 #ffffff, 8px 7px 0 #ffffff, 9px 7px 0 #bd9f81, 10px
      7px 0 #ffffff, 11px 7px 0 #ffffff, 12px 7px 0 #000000, 3px 8px 0 #000000, 4px
      8px 0 #5b6ee1, 5px 8px 0 #ffffff, 6px 8px 0 #e5bd94, 7px 8px 0 #ffffff, 8px
      8px 0 #ffffff, 9px 8px 0 #ffffff, 10px 8px 0 #bd9f81, 11px 8px 0 #ffffff, 12px
      8px 0 #ffffff, 13px 8px 0 #000000, 3px 9px 0 #000000, 4px 9px 0 #5b6ee1;
}