cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="sam walking" data-direction="right"></div>
            
          
!
            
              $hair: #785c2c;
$boots: #7d5f4f;
$shirt: #f2efe2;
$trousers: #525f7c;
$skin: #d7bcaa;

$columns: 18;
$rows: 58;
$cell-size: .5em;

html{
  background-size: 100%;
  background: radial-gradient(ellipse at center, #333 20%,#222 100%);
  height: 100%;
}

body{
  background: radial-gradient(ellipse at center, rgba(#333,0) 0%,#222 100%);
  height: 100%;
  background-size: 100% $cell-size;
}

.sam{
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: 0 - $rows * $cell-size * 0.5 0 0 0 - $columns * $cell-size * 0.5;
  width: $cell-size;
  height: $cell-size;
  box-shadow: 
    $cell-size * 6 0 0 0 darken($hair, 12%),
    $cell-size * 8 0 0 0 darken($hair, 7%),
    $cell-size * 9 0 0 0 darken($hair, 10%),
    $cell-size * 10 0 0 0 darken($hair, 7%),
    $cell-size * 11 0 0 0 darken($hair, 10%),
    
    $cell-size * 5 $cell-size 0 0 darken($hair, 15%),
    $cell-size * 6 $cell-size 0 0 darken($hair, 10%),
    $cell-size * 7 $cell-size 0 0 $hair,
    $cell-size * 8 $cell-size 0 0 $hair,
    $cell-size * 9 $cell-size 0 0 $hair,
    $cell-size * 10 $cell-size 0 0 $hair,
    $cell-size * 11 $cell-size 0 0 darken($hair, 10%),
    $cell-size * 12 $cell-size 0 0 darken($hair, 3%),
    
    $cell-size * 4 $cell-size * 2 0 0 darken($hair, 3%),
    $cell-size * 5 $cell-size * 2 0 0 darken($hair, 10%),
    $cell-size * 6 $cell-size * 2 0 0 $hair,
    $cell-size * 7 $cell-size * 2 0 0 darken($hair, 7%),
    $cell-size * 8 $cell-size * 2 0 0 darken($hair, 7%),
    $cell-size * 9 $cell-size * 2 0 0 $hair,
    $cell-size * 10 $cell-size * 2 0 0 $hair,
    $cell-size * 11 $cell-size * 2 0 0 $hair,
    $cell-size * 12 $cell-size * 2 0 0 darken($hair, 10%),
    
    $cell-size * 5 $cell-size * 3 0 0 darken($hair, 10%),
    $cell-size * 6 $cell-size * 3 0 0 $hair,
    $cell-size * 7 $cell-size * 3 0 0 $hair,
    $cell-size * 8 $cell-size * 3 0 0 darken($skin, 5%),
    $cell-size * 9 $cell-size * 3 0 0 darken($skin, 5%),
    $cell-size * 10 $cell-size * 3 0 0 $skin,
    $cell-size * 11 $cell-size * 3 0 0 $skin,
    $cell-size * 12 $cell-size * 3 0 0 darken($skin, 5%),
    
    $cell-size * 6 $cell-size * 4 0 0 $hair,
    $cell-size * 7 $cell-size * 4 0 0 darken($skin, 10%),
    $cell-size * 8 $cell-size * 4 0 0 darken($skin, 5%),
    $cell-size * 9 $cell-size * 4 0 0 $skin,
    $cell-size * 10 $cell-size * 4 0 0 $skin,
    $cell-size * 11 $cell-size * 4 0 0 $skin,
    $cell-size * 12 $cell-size * 4 0 0 darken($skin, 5%),
    
    $cell-size * 6 $cell-size * 5 0 0 darken($hair, 5%),
    $cell-size * 7 $cell-size * 5 0 0 $hair,
    $cell-size * 8 $cell-size * 5 0 0 darken($skin, 5%),
    $cell-size * 9 $cell-size * 5 0 0 $skin,
    $cell-size * 10 $cell-size * 5 0 0 darken($skin, 15%),
    $cell-size * 11 $cell-size * 5 0 0 $skin,
    $cell-size * 12 $cell-size * 5 0 0 darken($skin, 20%),
    
    $cell-size * 6 $cell-size * 6 0 0 $skin,
    $cell-size * 7 $cell-size * 6 0 0 darken($hair, 5%),
    $cell-size * 8 $cell-size * 6 0 0 $hair,
    $cell-size * 9 $cell-size * 6 0 0 $skin,
    $cell-size * 10 $cell-size * 6 0 0 $skin,
    $cell-size * 11 $cell-size * 6 0 0 darken($skin, 5%),
    $cell-size * 12 $cell-size * 6 0 0 darken($skin, 15%),
    
    $cell-size * 6 $cell-size * 7 0 0 darken($skin, 5%),
    $cell-size * 7 $cell-size * 7 0 0 $skin,
    $cell-size * 8 $cell-size * 7 0 0 $hair,
    $cell-size * 9 $cell-size * 7 0 0 $skin,
    $cell-size * 10 $cell-size * 7 0 0 $skin,
    $cell-size * 11 $cell-size * 7 0 0 darken($skin, 5%),
    $cell-size * 12 $cell-size * 7 0 0 darken($skin, 15%),
    
    $cell-size * 7 $cell-size * 8 0 0 $skin,
    $cell-size * 8 $cell-size * 8 0 0 $hair,
    $cell-size * 9 $cell-size * 8 0 0 $skin,
    $cell-size * 10 $cell-size * 8 0 0 $hair,
    $cell-size * 11 $cell-size * 8 0 0 $hair,
    $cell-size * 12 $cell-size * 8 0 0 $hair,
    
    $cell-size * 7 $cell-size * 9 0 0 $skin,
    $cell-size * 8 $cell-size * 9 0 0 darken($hair, 5%),
    $cell-size * 9 $cell-size * 9 0 0 $hair,
    $cell-size * 10 $cell-size * 9 0 0 darken($skin, 5%),
    $cell-size * 11 $cell-size * 9 0 0 darken($skin, 5%),
    $cell-size * 12 $cell-size * 9 0 0 darken($skin, 5%),
    $cell-size * 13 $cell-size * 9 0 0 darken($hair, 15%),
    
    $cell-size * 7 $cell-size * 10 0 0 darken($skin, 5%),
    $cell-size * 8 $cell-size * 10 0 0 $hair,
    $cell-size * 9 $cell-size * 10 0 0 $hair,
    $cell-size * 10 $cell-size * 10 0 0 $hair,
    $cell-size * 11 $cell-size * 10 0 0 darken($hair, 5%),
    $cell-size * 12 $cell-size * 10 0 0 $hair,
    $cell-size * 13 $cell-size * 10 0 0 darken($hair, 10%),
    
    $cell-size * 7 $cell-size * 11 0 0 darken($skin, 10%),
    $cell-size * 8 $cell-size * 11 0 0 darken($skin, 10%),
    $cell-size * 9 $cell-size * 11 0 0 darken($hair, 5%),
    $cell-size * 10 $cell-size * 11 0 0 $hair,
    $cell-size * 11 $cell-size * 11 0 0 darken($hair, 5%),
    $cell-size * 12 $cell-size * 11 0 0 darken($hair, 10%),
    $cell-size * 13 $cell-size * 11 0 0 darken($hair, 15%),
    
    $cell-size * 6 $cell-size * 12 0 0 darken($shirt, 5%),
    $cell-size * 7 $cell-size * 12 0 0 darken($shirt, 5%),
    $cell-size * 8 $cell-size * 12 0 0 darken($shirt, 10%),
    $cell-size * 9 $cell-size * 12 0 0 darken($shirt, 10%),
    $cell-size * 10 $cell-size * 12 0 0 darken($hair, 10%),
    $cell-size * 11 $cell-size * 12 0 0 darken($hair, 15%),
    $cell-size * 12 $cell-size * 12 0 0 darken($hair, 15%),
    
    $cell-size * 4 $cell-size * 13 0 0 $shirt,
    $cell-size * 5 $cell-size * 13 0 0 $shirt,
    $cell-size * 6 $cell-size * 13 0 0 $shirt,
    $cell-size * 7 $cell-size * 13 0 0 $shirt,
    $cell-size * 8 $cell-size * 13 0 0 darken($shirt, 10%),
    $cell-size * 9 $cell-size * 13 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 13 0 0 darken($shirt, 10%),
    $cell-size * 11 $cell-size * 13 0 0 darken($shirt, 10%),
    
    $cell-size * 3 $cell-size * 14 0 0 $shirt,
    $cell-size * 4 $cell-size * 14 0 0 $shirt,
    $cell-size * 5 $cell-size * 14 0 0 $shirt,
    $cell-size * 6 $cell-size * 14 0 0 $shirt,
    $cell-size * 7 $cell-size * 14 0 0 $shirt,
    $cell-size * 8 $cell-size * 14 0 0 darken($shirt, 5%),
    $cell-size * 9 $cell-size * 14 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 14 0 0 $shirt,
    $cell-size * 11 $cell-size * 14 0 0 $shirt,
    $cell-size * 12 $cell-size * 14 0 0 darken($shirt, 5%),
    
    $cell-size * 3 $cell-size * 15 0 0 $shirt,
    $cell-size * 4 $cell-size * 15 0 0 $shirt,
    $cell-size * 5 $cell-size * 15 0 0 $shirt,
    $cell-size * 6 $cell-size * 15 0 0 $shirt,
    $cell-size * 7 $cell-size * 15 0 0 $shirt,
    $cell-size * 8 $cell-size * 15 0 0 $shirt,
    $cell-size * 9 $cell-size * 15 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 15 0 0 $shirt,
    $cell-size * 11 $cell-size * 15 0 0 $shirt,
    $cell-size * 12 $cell-size * 15 0 0 darken($shirt, 5%),
    
    $cell-size * 2 $cell-size * 16 0 0 $shirt,
    $cell-size * 3 $cell-size * 16 0 0 $shirt,
    $cell-size * 4 $cell-size * 16 0 0 $shirt,
    $cell-size * 5 $cell-size * 16 0 0 $shirt,
    $cell-size * 6 $cell-size * 16 0 0 $shirt,
    $cell-size * 7 $cell-size * 16 0 0 $shirt,
    $cell-size * 8 $cell-size * 16 0 0 $shirt,
    $cell-size * 9 $cell-size * 16 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 16 0 0 $shirt,
    $cell-size * 11 $cell-size * 16 0 0 $shirt,
    $cell-size * 12 $cell-size * 16 0 0 $shirt,
    
    $cell-size * 2 $cell-size * 17 0 0 $shirt,
    $cell-size * 3 $cell-size * 17 0 0 $shirt,
    $cell-size * 4 $cell-size * 17 0 0 darken($shirt, 5%),
    $cell-size * 5 $cell-size * 17 0 0 $shirt,
    $cell-size * 6 $cell-size * 17 0 0 darken($shirt, 5%),
    $cell-size * 7 $cell-size * 17 0 0 darken($shirt, 5%),
    $cell-size * 8 $cell-size * 17 0 0 $shirt,
    $cell-size * 9 $cell-size * 17 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 17 0 0 $shirt,
    $cell-size * 11 $cell-size * 17 0 0 $shirt,
    $cell-size * 12 $cell-size * 17 0 0 darken($shirt, 5%),
    
    $cell-size * 2 $cell-size * 18 0 0 $shirt,
    $cell-size * 3 $cell-size * 18 0 0 $shirt,
    $cell-size * 4 $cell-size * 18 0 0 darken($shirt, 5%),
    $cell-size * 5 $cell-size * 18 0 0 $shirt,
    $cell-size * 6 $cell-size * 18 0 0 $shirt,
    $cell-size * 7 $cell-size * 18 0 0 $shirt,
    $cell-size * 8 $cell-size * 18 0 0 $shirt,
    $cell-size * 9 $cell-size * 18 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 18 0 0 $shirt,
    $cell-size * 11 $cell-size * 18 0 0 $shirt,
    $cell-size * 12 $cell-size * 18 0 0 darken($shirt, 5%),
    
    $cell-size $cell-size * 19 0 0 $shirt,
    $cell-size * 2 $cell-size * 19 0 0 $shirt,
    $cell-size * 3 $cell-size * 19 0 0 $shirt,
    $cell-size * 5 $cell-size * 19 0 0 $shirt,
    $cell-size * 6 $cell-size * 19 0 0 $shirt,
    $cell-size * 7 $cell-size * 19 0 0 $shirt,
    $cell-size * 8 $cell-size * 19 0 0 $shirt,
    $cell-size * 9 $cell-size * 19 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 19 0 0 $shirt,
    $cell-size * 11 $cell-size * 19 0 0 $shirt,
    $cell-size * 12 $cell-size * 19 0 0 darken($shirt, 5%),
    
    $cell-size $cell-size * 20 0 0 $shirt,
    $cell-size * 2 $cell-size * 20 0 0 $shirt,
    $cell-size * 3 $cell-size * 20 0 0 darken($shirt, 5%),
    $cell-size * 5 $cell-size * 20 0 0 $shirt,
    $cell-size * 6 $cell-size * 20 0 0 $shirt,
    $cell-size * 7 $cell-size * 20 0 0 $shirt,
    $cell-size * 8 $cell-size * 20 0 0 $shirt,
    $cell-size * 9 $cell-size * 20 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 20 0 0 $shirt,
    $cell-size * 11 $cell-size * 20 0 0 $shirt,
    $cell-size * 12 $cell-size * 20 0 0 darken($shirt, 5%),
    
    $cell-size $cell-size * 21 0 0 $shirt,
    $cell-size * 2 $cell-size * 21 0 0 $shirt,
    $cell-size * 3 $cell-size * 21 0 0 darken($shirt, 10%),
    $cell-size * 5 $cell-size * 21 0 0 $shirt,
    $cell-size * 6 $cell-size * 21 0 0 $shirt,
    $cell-size * 7 $cell-size * 21 0 0 $shirt,
    $cell-size * 8 $cell-size * 21 0 0 $shirt,
    $cell-size * 9 $cell-size * 21 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 21 0 0 $shirt,
    $cell-size * 11 $cell-size * 21 0 0 $shirt,
    $cell-size * 12 $cell-size * 21 0 0 darken($shirt, 5%),
    
    $cell-size $cell-size * 22 0 0 $shirt,
    $cell-size * 2 $cell-size * 22 0 0 $shirt,
    $cell-size * 5 $cell-size * 22 0 0 $shirt,
    $cell-size * 6 $cell-size * 22 0 0 $shirt,
    $cell-size * 7 $cell-size * 22 0 0 $shirt,
    $cell-size * 8 $cell-size * 22 0 0 $shirt,
    $cell-size * 9 $cell-size * 22 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 22 0 0 $shirt,
    $cell-size * 11 $cell-size * 22 0 0 $shirt,
    $cell-size * 12 $cell-size * 22 0 0 darken($shirt, 5%),
    $cell-size * 13 $cell-size * 22 0 0 darken($shirt, 15%),
    
    $cell-size $cell-size * 23 0 0 $shirt,
    $cell-size * 2 $cell-size * 23 0 0 darken($shirt, 5%),
    $cell-size * 5 $cell-size * 23 0 0 $shirt,
    $cell-size * 6 $cell-size * 23 0 0 $shirt,
    $cell-size * 7 $cell-size * 23 0 0 $shirt,
    $cell-size * 8 $cell-size * 23 0 0 $shirt,
    $cell-size * 9 $cell-size * 23 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 23 0 0 $shirt,
    $cell-size * 11 $cell-size * 23 0 0 $shirt,
    $cell-size * 12 $cell-size * 23 0 0 darken($shirt, 5%),
    $cell-size * 13 $cell-size * 23 0 0 darken($shirt, 15%),
    
    $cell-size $cell-size * 24 0 0 $shirt,
    $cell-size * 2 $cell-size * 24 0 0 darken($shirt, 5%),
    $cell-size * 5 $cell-size * 24 0 0 $shirt,
    $cell-size * 6 $cell-size * 24 0 0 $shirt,
    $cell-size * 7 $cell-size * 24 0 0 $shirt,
    $cell-size * 8 $cell-size * 24 0 0 $shirt,
    $cell-size * 9 $cell-size * 24 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 24 0 0 $shirt,
    $cell-size * 11 $cell-size * 24 0 0 $shirt,
    $cell-size * 12 $cell-size * 24 0 0 darken($shirt, 5%),
    $cell-size * 13 $cell-size * 24 0 0 darken($shirt, 15%),
    
    $cell-size $cell-size * 25 0 0 darken($shirt, 5%),
    $cell-size * 2 $cell-size * 25 0 0 darken($shirt, 5%),
    $cell-size * 5 $cell-size * 25 0 0 $shirt,
    $cell-size * 6 $cell-size * 25 0 0 $shirt,
    $cell-size * 7 $cell-size * 25 0 0 $shirt,
    $cell-size * 8 $cell-size * 25 0 0 $shirt,
    $cell-size * 9 $cell-size * 25 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 25 0 0 $shirt,
    $cell-size * 11 $cell-size * 25 0 0 $shirt,
    $cell-size * 12 $cell-size * 25 0 0 darken($shirt, 5%),
    $cell-size * 13 $cell-size * 25 0 0 darken($shirt, 15%),
    
    0 $cell-size * 26 0 0 $shirt,
    $cell-size $cell-size * 26 0 0 $shirt,
    $cell-size * 2 $cell-size * 26 0 0 darken($shirt, 10%),
    $cell-size * 5 $cell-size * 26 0 0 $shirt,
    $cell-size * 6 $cell-size * 26 0 0 $shirt,
    $cell-size * 7 $cell-size * 26 0 0 $shirt,
    $cell-size * 8 $cell-size * 26 0 0 $shirt,
    $cell-size * 9 $cell-size * 26 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 26 0 0 $shirt,
    $cell-size * 11 $cell-size * 26 0 0 $shirt,
    $cell-size * 12 $cell-size * 26 0 0 darken($shirt, 5%),
    $cell-size * 13 $cell-size * 26 0 0 darken($shirt, 15%),
    $cell-size * 14 $cell-size * 26 0 0 darken($shirt, 10%),
    
    0 $cell-size * 27 0 0 darken($shirt, 10%),
    $cell-size $cell-size * 27 0 0 darken($shirt, 10%),
    $cell-size * 2 $cell-size * 27 0 0 darken($shirt, 10%),
    $cell-size * 5 $cell-size * 27 0 0 $shirt,
    $cell-size * 6 $cell-size * 27 0 0 $shirt,
    $cell-size * 7 $cell-size * 27 0 0 $shirt,
    $cell-size * 8 $cell-size * 27 0 0 $shirt,
    $cell-size * 9 $cell-size * 27 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 27 0 0 $shirt,
    $cell-size * 11 $cell-size * 27 0 0 darken($shirt, 5%),
    $cell-size * 12 $cell-size * 27 0 0 darken($shirt, 5%),
    $cell-size * 13 $cell-size * 27 0 0 darken($shirt, 15%),
    $cell-size * 14 $cell-size * 27 0 0 darken($shirt, 10%),
    
    $cell-size $cell-size * 28 0 0 darken($skin, 15%),
    $cell-size * 2 $cell-size * 28 0 0 darken($skin, 15%),
    $cell-size * 5 $cell-size * 28 0 0 $shirt,
    $cell-size * 6 $cell-size * 28 0 0 $shirt,
    $cell-size * 7 $cell-size * 28 0 0 $shirt,
    $cell-size * 8 $cell-size * 28 0 0 $shirt,
    $cell-size * 9 $cell-size * 28 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 28 0 0 darken($shirt, 5%),
    $cell-size * 11 $cell-size * 28 0 0 darken($shirt, 10%),
    $cell-size * 12 $cell-size * 28 0 0 darken($shirt, 10%),
    $cell-size * 13 $cell-size * 28 0 0 darken($skin, 15%),
    
    $cell-size $cell-size * 29 0 0 darken($skin, 10%),
    $cell-size * 2 $cell-size * 29 0 0 darken($skin, 10%),
    $cell-size * 5 $cell-size * 29 0 0 darken($trousers, 10%),
    $cell-size * 6 $cell-size * 29 0 0 darken($trousers, 10%),
    $cell-size * 7 $cell-size * 29 0 0 darken($shirt, 5%),
    $cell-size * 8 $cell-size * 29 0 0 darken($shirt, 5%),
    $cell-size * 9 $cell-size * 29 0 0 darken($shirt, 5%),
    $cell-size * 10 $cell-size * 29 0 0 darken($shirt, 10%),
    $cell-size * 11 $cell-size * 29 0 0 darken($shirt, 10%),
    $cell-size * 12 $cell-size * 29 0 0 darken($trousers, 10%),
    $cell-size * 13 $cell-size * 29 0 0 darken($skin, 15%),
    
    $cell-size $cell-size * 30 0 0 darken($skin, 5%),
    $cell-size * 2 $cell-size * 30 0 0 darken($skin, 10%),
    $cell-size * 5 $cell-size * 30 0 0 $trousers,
    $cell-size * 6 $cell-size * 30 0 0 darken($trousers, 10%),
    $cell-size * 7 $cell-size * 30 0 0 darken($trousers, 5%),
    $cell-size * 8 $cell-size * 30 0 0 darken($trousers, 5%),
    $cell-size * 9 $cell-size * 30 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 30 0 0 darken($trousers, 15%),
    $cell-size * 11 $cell-size * 30 0 0 darken($trousers, 10%),
    $cell-size * 12 $cell-size * 30 0 0 darken($trousers, 5%),
    $cell-size * 13 $cell-size * 30 0 0 darken($skin, 10%),
    
    $cell-size $cell-size * 31 0 0 $skin,
    $cell-size * 2 $cell-size * 31 0 0 darken($skin, 5%),
    $cell-size * 5 $cell-size * 31 0 0 $trousers,
    $cell-size * 6 $cell-size * 31 0 0 $trousers,
    $cell-size * 7 $cell-size * 31 0 0 $trousers,
    $cell-size * 8 $cell-size * 31 0 0 $trousers,
    $cell-size * 9 $cell-size * 31 0 0 $trousers,
    $cell-size * 10 $cell-size * 31 0 0 darken($trousers, 10%),
    $cell-size * 11 $cell-size * 31 0 0 $trousers,
    $cell-size * 12 $cell-size * 31 0 0 $trousers,
    $cell-size * 13 $cell-size * 31 0 0 darken($skin, 10%),
    
    $cell-size * 2 $cell-size * 32 0 0 darken($skin, 5%),
    $cell-size * 5 $cell-size * 32 0 0 darken($trousers, 5%),
    $cell-size * 6 $cell-size * 32 0 0 $trousers,
    $cell-size * 7 $cell-size * 32 0 0 $trousers,
    $cell-size * 8 $cell-size * 32 0 0 $trousers,
    $cell-size * 9 $cell-size * 32 0 0 $trousers,
    $cell-size * 10 $cell-size * 32 0 0 darken($trousers, 5%),
    $cell-size * 11 $cell-size * 32 0 0 $trousers,
    $cell-size * 12 $cell-size * 32 0 0 darken($trousers, 5%),
    $cell-size * 13 $cell-size * 32 0 0 darken($skin, 5%),
    
    $cell-size * 2 $cell-size * 33 0 0 darken($skin, 5%),
    $cell-size * 5 $cell-size * 33 0 0 darken($trousers, 5%),
    $cell-size * 6 $cell-size * 33 0 0 $trousers,
    $cell-size * 7 $cell-size * 33 0 0 $trousers,
    $cell-size * 8 $cell-size * 33 0 0 $trousers,
    $cell-size * 9 $cell-size * 33 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 33 0 0 $trousers,
    $cell-size * 11 $cell-size * 33 0 0 $trousers,
    $cell-size * 12 $cell-size * 33 0 0 darken($trousers, 5%),
    $cell-size * 13 $cell-size * 33 0 0 darken($skin, 5%),
    
    $cell-size * 2 $cell-size * 34 0 0 $skin,
    $cell-size * 5 $cell-size * 34 0 0 $trousers,
    $cell-size * 6 $cell-size * 34 0 0 $trousers,
    $cell-size * 7 $cell-size * 34 0 0 $trousers,
    $cell-size * 8 $cell-size * 34 0 0 $trousers,
    $cell-size * 10 $cell-size * 34 0 0 $trousers,
    $cell-size * 11 $cell-size * 34 0 0 $trousers,
    $cell-size * 12 $cell-size * 34 0 0 darken($trousers, 5%),
    $cell-size * 13 $cell-size * 34 0 0 darken($skin, 5%),
    
    $cell-size * 2 $cell-size * 35 0 0 $skin,
    $cell-size * 5 $cell-size * 35 0 0 $trousers,
    $cell-size * 6 $cell-size * 35 0 0 $trousers,
    $cell-size * 7 $cell-size * 35 0 0 $trousers,
    $cell-size * 8 $cell-size * 35 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 35 0 0 $trousers,
    $cell-size * 11 $cell-size * 35 0 0 $trousers,
    $cell-size * 12 $cell-size * 35 0 0 $trousers,
    $cell-size * 13 $cell-size * 35 0 0 darken($skin, 5%),
    
    $cell-size * 2 $cell-size * 36 0 0 $skin,
    $cell-size * 5 $cell-size * 36 0 0 $trousers,
    $cell-size * 6 $cell-size * 36 0 0 $trousers,
    $cell-size * 7 $cell-size * 36 0 0 $trousers,
    $cell-size * 8 $cell-size * 36 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 36 0 0 $trousers,
    $cell-size * 11 $cell-size * 36 0 0 $trousers,
    $cell-size * 12 $cell-size * 36 0 0 $trousers,
    $cell-size * 13 $cell-size * 36 0 0 darken($skin, 5%),
    
    $cell-size * 2 $cell-size * 37 0 0 $skin,
    $cell-size * 3 $cell-size * 37 0 0 $skin,
    $cell-size * 4 $cell-size * 37 0 0 darken($skin, 5%),
    $cell-size * 5 $cell-size * 37 0 0 $trousers,
    $cell-size * 6 $cell-size * 37 0 0 $trousers,
    $cell-size * 7 $cell-size * 37 0 0 $trousers,
    $cell-size * 8 $cell-size * 37 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 37 0 0 $trousers,
    $cell-size * 11 $cell-size * 37 0 0 $trousers,
    $cell-size * 12 $cell-size * 37 0 0 $trousers,
    $cell-size * 13 $cell-size * 37 0 0 darken($skin, 10%),
    $cell-size * 14 $cell-size * 37 0 0 darken($skin, 5%),
    
    $cell-size * 2 $cell-size * 38 0 0 $skin,
    $cell-size * 3 $cell-size * 38 0 0 darken($skin, 5%),
    $cell-size * 5 $cell-size * 38 0 0 $trousers,
    $cell-size * 6 $cell-size * 38 0 0 $trousers,
    $cell-size * 7 $cell-size * 38 0 0 $trousers,
    $cell-size * 10 $cell-size * 38 0 0 $trousers,
    $cell-size * 11 $cell-size * 38 0 0 $trousers,
    $cell-size * 12 $cell-size * 38 0 0 $trousers,
    $cell-size * 13 $cell-size * 38 0 0 darken($skin, 5%),
    $cell-size * 14 $cell-size * 38 0 0 darken($skin, 5%),
    
    $cell-size * 2 $cell-size * 39 0 0 $skin,
    $cell-size * 3 $cell-size * 39 0 0 darken($skin, 5%),
    $cell-size * 5 $cell-size * 39 0 0 $trousers,
    $cell-size * 6 $cell-size * 39 0 0 $trousers,
    $cell-size * 7 $cell-size * 39 0 0 $trousers,
    $cell-size * 10 $cell-size * 39 0 0 $trousers,
    $cell-size * 11 $cell-size * 39 0 0 $trousers,
    $cell-size * 12 $cell-size * 39 0 0 $trousers,
    $cell-size * 13 $cell-size * 39 0 0 darken($skin, 5%),
    $cell-size * 14 $cell-size * 39 0 0 $skin,
    
    $cell-size * 3 $cell-size * 40 0 0 $skin,
    $cell-size * 5 $cell-size * 40 0 0 $trousers,
    $cell-size * 6 $cell-size * 40 0 0 $trousers,
    $cell-size * 7 $cell-size * 40 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 40 0 0 $trousers,
    $cell-size * 11 $cell-size * 40 0 0 $trousers,
    $cell-size * 12 $cell-size * 40 0 0 darken($trousers, 5%),
    $cell-size * 13 $cell-size * 40 0 0 darken($skin, 5%),
    
    $cell-size * 4 $cell-size * 41 0 0 darken($skin, 5%),
    $cell-size * 5 $cell-size * 41 0 0 $trousers,
    $cell-size * 6 $cell-size * 41 0 0 $trousers,
    $cell-size * 7 $cell-size * 41 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 41 0 0 $trousers,
    $cell-size * 11 $cell-size * 41 0 0 $trousers,
    $cell-size * 12 $cell-size * 41 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 42 0 0 $trousers,
    $cell-size * 6 $cell-size * 42 0 0 $trousers,
    $cell-size * 7 $cell-size * 42 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 42 0 0 $trousers,
    $cell-size * 11 $cell-size * 42 0 0 $trousers,
    $cell-size * 12 $cell-size * 42 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 43 0 0 $trousers,
    $cell-size * 6 $cell-size * 43 0 0 $trousers,
    $cell-size * 7 $cell-size * 43 0 0 darken($trousers, 10%),
    $cell-size * 10 $cell-size * 43 0 0 $trousers,
    $cell-size * 11 $cell-size * 43 0 0 $trousers,
    $cell-size * 12 $cell-size * 43 0 0 darken($trousers, 10%),
    
    $cell-size * 5 $cell-size * 44 0 0 $trousers,
    $cell-size * 6 $cell-size * 44 0 0 darken($trousers, 5%),
    $cell-size * 7 $cell-size * 44 0 0 darken($trousers, 10%),
    $cell-size * 10 $cell-size * 44 0 0 $trousers,
    $cell-size * 11 $cell-size * 44 0 0 darken($trousers, 5%),
    $cell-size * 12 $cell-size * 44 0 0 darken($trousers, 10%),
    
    $cell-size * 5 $cell-size * 45 0 0 darken($trousers, 5%),
    $cell-size * 6 $cell-size * 45 0 0 darken($trousers, 10%),
    $cell-size * 7 $cell-size * 45 0 0 darken($trousers, 10%),
    $cell-size * 10 $cell-size * 45 0 0 darken($trousers, 5%),
    $cell-size * 11 $cell-size * 45 0 0 darken($trousers, 10%),
    $cell-size * 12 $cell-size * 45 0 0 darken($trousers, 10%),
    
    $cell-size * 5 $cell-size * 46 0 0 $trousers,
    $cell-size * 6 $cell-size * 46 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 46 0 0 $trousers,
    $cell-size * 11 $cell-size * 46 0 0 darken($trousers, 10%),
    
    $cell-size * 5 $cell-size * 47 0 0 $trousers,
    $cell-size * 6 $cell-size * 47 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 47 0 0 $trousers,
    $cell-size * 11 $cell-size * 47 0 0 darken($trousers, 10%),
    
    $cell-size * 5 $cell-size * 48 0 0 $trousers,
    $cell-size * 6 $cell-size * 48 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 48 0 0 $trousers,
    $cell-size * 11 $cell-size * 48 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 49 0 0 $trousers,
    $cell-size * 6 $cell-size * 49 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 49 0 0 $trousers,
    $cell-size * 11 $cell-size * 49 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 50 0 0 $trousers,
    $cell-size * 6 $cell-size * 50 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 50 0 0 $trousers,
    $cell-size * 11 $cell-size * 50 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 51 0 0 $trousers,
    $cell-size * 6 $cell-size * 51 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 51 0 0 $trousers,
    $cell-size * 11 $cell-size * 51 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 52 0 0 $trousers,
    $cell-size * 6 $cell-size * 52 0 0 darken($trousers, 5%),
    $cell-size * 10 $cell-size * 52 0 0 $trousers,
    $cell-size * 11 $cell-size * 52 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 53 0 0 $trousers,
    $cell-size * 6 $cell-size * 53 0 0 darken($trousers, 5%),
    $cell-size * 7 $cell-size * 53 0 0 darken($boots, 5%),
    $cell-size * 10 $cell-size * 53 0 0 $trousers,
    $cell-size * 11 $cell-size * 53 0 0 darken($trousers, 5%),
    
    $cell-size * 5 $cell-size * 54 0 0 $boots,
    $cell-size * 6 $cell-size * 54 0 0 darken($boots, 5%),
    $cell-size * 10 $cell-size * 54 0 0 $boots,
    $cell-size * 11 $cell-size * 54 0 0 $boots,
    $cell-size * 12 $cell-size * 54 0 0 darken($boots, 10%),
    
    $cell-size * 5 $cell-size * 55 0 0 $boots,
    $cell-size * 6 $cell-size * 55 0 0 darken($boots, 10%),
    $cell-size * 10 $cell-size * 55 0 0 $boots,
    $cell-size * 11 $cell-size * 55 0 0 darken($boots, 10%),
    
    $cell-size * 5 $cell-size * 56 0 0 $boots,
    $cell-size * 6 $cell-size * 56 0 0 darken($boots, 5%),
    $cell-size * 7 $cell-size * 56 0 0 darken($boots, 10%),
    $cell-size * 10 $cell-size * 56 0 0 $boots,
    $cell-size * 11 $cell-size * 56 0 0 darken($boots, 10%),
    $cell-size * 12 $cell-size * 56 0 0 darken($boots, 10%),
    
    $cell-size * 5 $cell-size * 57 0 0 darken($boots, 5%),
    $cell-size * 6 $cell-size * 57 0 0 darken($boots, 5%),
    $cell-size * 7 $cell-size * 57 0 0 darken($boots, 15%),
    $cell-size * 8 $cell-size * 57 0 0 darken($boots, 15%),
    $cell-size * 10 $cell-size * 57 0 0 darken($boots, 10%),
    $cell-size * 11 $cell-size * 57 0 0 darken($boots, 10%),
    $cell-size * 12 $cell-size * 57 0 0 darken($boots, 15%),
    $cell-size * 13 $cell-size * 57 0 0 darken($boots, 15%),
}
            
          
!
999px
Loading ..................

Console