Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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.

+ add another resource

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                .sonic
              
            
!

CSS

              
                $s: 5px;

$sblue0: #202080;
$sblue1: #4040a0;
$sblue2: #6060c0;
$sblue3: #8080e0;
$sblack: #010101;
$sredoutline: #400000;
$sred0: #800000;
$sred1: #e00000;
$soutline: #e00000;
$stan0: #a06040;
$stan1: #e0a080;
$sgray0: #404040;
$sgray1: #808080;
$sgray2: #a0a0a0;
$swhite: #FFF;

body {
  padding: 0;
  margin: 0;
  height: 100vh;
  background: #00bcd4;
}

.sonic {
  width: $s;
  height: $s;
  margin: 50px auto;
  position: relative;

    &:after {
      position: absolute;
      width: $s;
      height: $s;
      content: '';
      box-shadow: 
        $s*8 0 $sblue1,
        $s*9 0 $sblue1,
        $s*10 0 $sblue1,
        $s*11 0 $sblue1,
        $s*12 0 $sblue1,
        
        $s*4 $s $sblue1,
        $s*5 $s $sblue1,
        $s*6 $s $sblue1,
        $s*7 $s $sblue1,
        $s*8 $s $sblue1,
        $s*9 $s $sblue1,
        $s*10 $s $sblue1,
        $s*11 $s $sblue2,
        $s*12 $s $sblue2,
        $s*13 $s $sblue1,
        $s*14 $s $sblue1,
        $s*15 $s $sblue1,
        
        $s*2 $s*2 $sblue0,
        $s*3 $s*2 $sblue0,
        $s*4 $s*2 $sblue0,
        $s*5 $s*2 $sblue0,
        $s*6 $s*2 $sblue1,
        $s*7 $s*2 $sblue1,
        $s*8 $s*2 $sblue1,
        $s*9 $s*2 $sblue1,
        $s*10 $s*2 $sblue1,
        $s*11 $s*2 $sblue0,
        $s*12 $s*2 $sblue0,
        $s*13 $s*2 $sblue2,
        $s*14 $s*2 $sblue2,
        $s*15 $s*2 $sblue2,
        $s*16 $s*2 $sblue1,
        $s*17 $s*2 $sblue1,
        $s*22 $s*2 $sblue0,

        $s*4 $s*3 $sblue0,
        $s*5 $s*3 $sblue0,
        $s*6 $s*3 $sblue0,
        $s*7 $s*3 $sblue0,
        $s*8 $s*3 $sblue0,
        $s*9 $s*3 $sblue1,
        $s*10 $s*3 $sblue1,
        $s*11 $s*3 $sblue0,
        $s*12 $s*3 $stan1,
        $s*13 $s*3 $sblue0,
        $s*14 $s*3 $sblue2,
        $s*15 $s*3 $sblue2,
        $s*16 $s*3 $sblue2,
        $s*17 $s*3 $sblue2,
        $s*18 $s*3 $sblue1,
        $s*19 $s*3 $sblue1,
        $s*21 $s*3 $sblue0,
        $s*22 $s*3 $sblue0,
        
        $s*7 $s*4 $sblue0,
        $s*8 $s*4 $sblue0,
        $s*9 $s*4 $sblue0,
        $s*10 $s*4 $sblue0,
        $s*11 $s*4 $stan0,
        $s*12 $s*4 $stan1,
        $s*13 $s*4 $stan1,
        $s*14 $s*4 $sblue0,
        $s*15 $s*4 $sblue2,
        $s*16 $s*4 $sblue3,
        $s*17 $s*4 $sblue2,
        $s*18 $s*4 $sblue2,
        $s*19 $s*4 $sblue2,
        $s*20 $s*4 $sblue1,
        $s*21 $s*4 $sblue0,
        $s*22 $s*4 $sblue0,
        
        $s*8 $s*5 $sblue0,
        $s*9 $s*5 $sblue1,
        $s*10 $s*5 $sblue0,
        $s*11 $s*5 $stan0,
        $s*12 $s*5 $stan1,
        $s*13 $s*5 $stan1,
        $s*14 $s*5 $stan1,
        $s*15 $s*5 $sblue1,
        $s*16 $s*5 $sblue3,
        $s*17 $s*5 $sblue3,
        $s*18 $s*5 $sblue3,
        $s*19 $s*5 $sblue2,
        $s*20 $s*5 $sblue2,
        $s*21 $s*5 $sblue1,
        $s*22 $s*5 $sblue0,
        
        $s*7 $s*6 $sblue1,
        $s*8 $s*6 $sblue1,
        $s*9 $s*6 $sblue1,
        $s*10 $s*6 $sblue0,
        $s*11 $s*6 $stan0,
        $s*12 $s*6 $stan0,
        $s*13 $s*6 $sblue2,
        $s*14 $s*6 $sblue2,
        $s*15 $s*6 $sblue3,
        $s*16 $s*6 $sblue3,
        $s*17 $s*6 $sblue3,
        $s*18 $s*6 $sblue3,
        $s*19 $s*6 $sblue3,
        $s*20 $s*6 $sblue2,
        $s*21 $s*6 $sblue2,
        $s*22 $s*6 $sblue1,
        
        $s*5 $s*7 $sblue1,
        $s*6 $s*7 $sblue1,
        $s*7 $s*7 $sblue1,
        $s*8 $s*7 $sblue0,
        $s*9 $s*7 $sblue1,
        $s*10 $s*7 $sblue1,
        $s*11 $s*7 $sblue1,
        $s*12 $s*7 $sblue2,
        $s*13 $s*7 $sblue2,
        $s*14 $s*7 $sblue3,
        $s*15 $s*7 $sblue2,
        $s*16 $s*7 $sblue2,
        $s*17 $s*7 $sblue2,
        $s*18 $s*7 $sblue2,
        $s*19 $s*7 $sblue3,
        $s*20 $s*7 $sblue2,
        $s*21 $s*7 $sblue2,
        $s*22 $s*7 $sblue1,
        
        $s*3 $s*8 $sblue1,
        $s*4 $s*8 $sblue1,
        $s*5 $s*8 $sblue1,
        $s*6 $s*8 $sblue1,
        $s*7 $s*8 $sblue0,
        $s*8 $s*8 $sblue0,
        $s*9 $s*8 $sblue1,
        $s*10 $s*8 $sblue1,
        $s*11 $s*8 $sblue2,
        $s*12 $s*8 $sblue2,
        $s*13 $s*8 $sblue2,
        $s*14 $s*8 $sblue2,
        $s*15 $s*8 $sblue2,
        $s*16 $s*8 $swhite,
        $s*17 $s*8 $swhite,
        $s*18 $s*8 $sblue3,
        $s*19 $s*8 $sblue2,
        $s*20 $s*8 $sblue3,
        $s*21 $s*8 $sblue2,
        $s*22 $s*8 $sblue2,
        $s*23 $s*8 $sblue1,
        
        $s*2 $s*9 $sblue1,
        $s*3 $s*9 $sblue1,
        $s*4 $s*9 $sblue1,
        $s*5 $s*9 $sblue1,
        $s*6 $s*9 $sblue1,
        $s*7 $s*9 $sblue0,
        $s*8 $s*9 $sblue0,
        $s*9 $s*9 $sblue1,
        $s*10 $s*9 $sblue1,
        $s*11 $s*9 $sblue2,
        $s*12 $s*9 $sblue2,
        $s*13 $s*9 $sblue2,
        $s*14 $s*9 $sblue2,
        $s*15 $s*9 $sblue3,
        $s*16 $s*9 $swhite,
        $s*17 $s*9 $swhite,
        $s*18 $s*9 $swhite,
        $s*19 $s*9 $sblue3,
        $s*20 $s*9 $sblue2,
        $s*21 $s*9 $sblue2,
        $s*22 $s*9 $sblue2,
        $s*23 $s*9 $sblue3,
        
        $s $s*10 $sblue1,
        $s*2 $s*10 $sblue1,
        $s*3 $s*10 $sblue0,
        $s*4 $s*10 $sblue0,
        $s*5 $s*10 $sblue0,
        $s*6 $s*10 $sblue1,
        $s*7 $s*10 $sblue0,
        $s*8 $s*10 $sblue0,
        $s*9 $s*10 $sblue1,
        $s*10 $s*10 $sblue1,
        $s*11 $s*10 $sblue1,
        $s*12 $s*10 $sblue2,
        $s*13 $s*10 $sblue2,
        $s*14 $s*10 $sblue2,
        $s*15 $s*10 $sblue3,
        $s*16 $s*10 $swhite,
        $s*17 $s*10 $swhite,
        $s*18 $s*10 $swhite,
        $s*19 $s*10 $sblack,
        $s*20 $s*10 $sblue1,
        $s*21 $s*10 $sblue2,
        $s*22 $s*10 $sblue2,
        $s*23 $s*10 $sblack,
        
        0 $s*11 $sblue0,
        $s $s*11 $sblue0,
        $s*2 $s*11 $sblue0,
        $s*3 $s*11 $sblue0,
        $s*4 $s*11 $sblue0,
        $s*5 $s*11 $sblue0,
        $s*6 $s*11 $sblue0,
        $s*7 $s*11 $sblue0,
        $s*8 $s*11 $sblue0,
        $s*9 $s*11 $sblue0,
        $s*10 $s*11 $sblue1,
        $s*11 $s*11 $sblue1,
        $s*12 $s*11 $sblue2,
        $s*13 $s*11 $sblue2,
        $s*14 $s*11 $sblue2,
        $s*15 $s*11 $sblue3,
        $s*16 $s*11 $swhite,
        $s*17 $s*11 $swhite,
        $s*18 $s*11 $swhite,
        $s*19 $s*11 $sblack,
        $s*20 $s*11 $sblack,
        $s*21 $s*11 $sblue1,
        $s*22 $s*11 $sblue2,
        $s*23 $s*11 $sblack,
        
        $s*5 $s*12 $sblue0,
        $s*6 $s*12 $sblue0,
        $s*7 $s*12 $sblue0,
        $s*8 $s*12 $sblue0,
        $s*9 $s*12 $sblue0,
        $s*10 $s*12 $sblue1,
        $s*11 $s*12 $sblue1,
        $s*12 $s*12 $sblue1,
        $s*13 $s*12 $sblue1,
        $s*14 $s*12 $sblue2,
        $s*15 $s*12 $sblue2,
        $s*16 $s*12 $swhite,
        $s*17 $s*12 $swhite,
        $s*18 $s*12 $swhite,
        $s*19 $s*12 $sblack,
        $s*20 $s*12 $sblack,
        $s*21 $s*12 $sblue3,
        $s*22 $s*12 $sblack,
        $s*23 $s*12 $sblack,
        
        $s*7 $s*13 $sblue0,
        $s*8 $s*13 $sblue0,
        $s*9 $s*13 $sblue0,
        $s*10 $s*13 $sblue0,
        $s*11 $s*13 $sblue1,
        $s*12 $s*13 $sblue1,
        $s*13 $s*13 $sblue1,
        $s*14 $s*13 $sblue1,
        $s*15 $s*13 $sblue1,
        $s*16 $s*13 $sblue2,
        $s*17 $s*13 $swhite,
        $s*18 $s*13 $swhite,
        $s*19 $s*13 $sblack,
        $s*20 $s*13 $sblack,
        $s*21 $s*13 $swhite,
        $s*22 $s*13 $sblack,
        $s*23 $s*13 $sgray1,
        
        $s*6 $s*14 $sblue1,
        $s*7 $s*14 $sblue1,
        $s*8 $s*14 $sblue0,
        $s*9 $s*14 $sblue0,
        $s*10 $s*14 $sblue0,
        $s*11 $s*14 $sblue0,
        $s*12 $s*14 $sblue1,
        $s*13 $s*14 $stan0,
        $s*14 $s*14 $swhite,
        $s*15 $s*14 $swhite,
        $s*16 $s*14 $sblue1,
        $s*17 $s*14 $sblue2,
        $s*18 $s*14 $swhite,
        $s*19 $s*14 $swhite,
        $s*20 $s*14 $swhite,
        $s*21 $s*14 $stan0,
        $s*22 $s*14 $sgray1,
        $s*23 $s*14 $sblack,
        $s*24 $s*14 $sgray1,
        
        $s*4 $s*15 $sblue1,
        $s*5 $s*15 $sblue1,
        $s*6 $s*15 $sblue1,
        $s*7 $s*15 $sblue1,
        $s*8 $s*15 $sblue0,
        $s*9 $s*15 $sblue0,
        $s*10 $s*15 $sblue0,
        $s*11 $s*15 $sblue0,
        $s*12 $s*15 $stan0,
        $s*13 $s*15 $stan1,
        $s*14 $s*15 $stan1,
        $s*15 $s*15 $stan1,
        $s*16 $s*15 $swhite,
        $s*17 $s*15 $swhite,
        $s*18 $s*15 $swhite,
        $s*19 $s*15 $swhite,
        $s*20 $s*15 $stan1,
        $s*21 $s*15 $stan1,
        $s*22 $s*15 $sblack,
        $s*23 $s*15 $sblack,
        $s*24 $s*15 $sblack,
        
        $s*3 $s*16 $sblue1,
        $s*4 $s*16 $sblue1,
        $s*5 $s*16 $sblue1,
        $s*6 $s*16 $sblue0,
        $s*7 $s*16 $sblue0,
        $s*8 $s*16 $sblue0,
        $s*9 $s*16 $sblue0,
        $s*10 $s*16 $sblue0,
        $s*11 $s*16 $sblue0,
        $s*12 $s*16 $stan0,
        $s*13 $s*16 $stan1,
        $s*14 $s*16 $stan1,
        $s*15 $s*16 $stan1,
        $s*16 $s*16 $stan1,
        $s*17 $s*16 $stan1,
        $s*18 $s*16 $stan1,
        $s*19 $s*16 $stan1,
        $s*20 $s*16 $stan1,
        $s*21 $s*16 $stan1,
        
        $s*3 $s*17 $sblue1,
        $s*4 $s*17 $sblue0,
        $s*5 $s*17 $sblue0,
        $s*6 $s*17 $sblue0,
        $s*7 $s*17 $sblue0,
        $s*8 $s*17 $sblue0,
        $s*9 $s*17 $sblue0,
        $s*10 $s*17 $sblue0,
        $s*11 $s*17 $sblue0,
        $s*12 $s*17 $sblue0,
        $s*13 $s*17 $stan0,
        $s*14 $s*17 $stan1,
        $s*15 $s*17 $stan1,
        $s*16 $s*17 $stan1,
        $s*17 $s*17 $stan1,
        $s*18 $s*17 $stan1,
        $s*19 $s*17 $stan0,
        $s*20 $s*17 $stan0,
        $s*21 $s*17 $sred0,
        
        $s*2 $s*18 $sblue1,
        $s*3 $s*18 $sblue0,
        $s*4 $s*18 $sblue0,
        $s*5 $s*18 $sblue0,
        $s*6 $s*18 $sblue0,
        $s*7 $s*18 $sblue0,
        $s*8 $s*18 $sblue0,
        $s*9 $s*18 $sblue0,
        $s*10 $s*18 $sblue0,
        $s*11 $s*18 $sblack,
        $s*12 $s*18 $sblue0,
        $s*13 $s*18 $sblue0,
        $s*14 $s*18 $stan0,
        $s*15 $s*18 $stan0,
        $s*16 $s*18 $stan0,
        $s*17 $s*18 $stan0,
        $s*18 $s*18 $stan0,
        $s*19 $s*18 $sred0,
        $s*20 $s*18 $sred0,
        
        $s*7 $s*19 $sblue0,
        $s*8 $s*19 $sblue0,
        $s*9 $s*19 $sblue0,
        $s*10 $s*19 $sblue0,
        $s*11 $s*19 $sblue0,
        $s*12 $s*19 $sblack,
        $s*13 $s*19 $sblack,
        $s*14 $s*19 $sblue0,
        $s*15 $s*19 $sblue0,
        $s*16 $s*19 $sblue1,
        $s*17 $s*19 $sred0,
        $s*18 $s*19 $sred0,
        $s*19 $s*19 $sred0,
        
        $s*9 $s*20 $sblue0,
        $s*10 $s*20 $sblue0,
        $s*11 $s*20 $stan1,
        $s*12 $s*20 $stan1,
        $s*13 $s*20 $stan1,
        $s*14 $s*20 $stan1,
        $s*15 $s*20 $sblue1,
        $s*16 $s*20 $stan0,
        $s*17 $s*20 $stan1,
        $s*18 $s*20 $stan1,
        $s*19 $s*20 $stan0,
        $s*20 $s*20 $sred0,
        
        $s*8 $s*21 $sblue0,
        $s*9 $s*21 $stan1,
        $s*10 $s*21 $stan1,
        $s*11 $s*21 $stan0,
        $s*12 $s*21 $stan0,
        $s*13 $s*21 $stan0,
        $s*14 $s*21 $sblue1,
        $s*15 $s*21 $stan0,
        $s*16 $s*21 $stan1,
        $s*17 $s*21 $stan1,
        $s*18 $s*21 $stan1,
        $s*19 $s*21 $stan1,
        $s*20 $s*21 $stan0,
        
        $s*7 $s*22 $sblue0,
        $s*8 $s*22 $stan1,
        $s*9 $s*22 $stan0,
        $s*10 $s*22 $stan0,
        $s*11 $s*22 $sblue0,
        $s*12 $s*22 $sblue0,
        $s*13 $s*22 $sblue0,
        $s*14 $s*22 $sblue1,
        $s*15 $s*22 $stan0,
        $s*16 $s*22 $stan1,
        $s*17 $s*22 $stan1,
        $s*18 $s*22 $stan1,
        $s*19 $s*22 $stan1,
        $s*20 $s*22 $stan0,
        
        $s*7 $s*23 $sblue0,
        $s*8 $s*23 $stan1,
        $s*9 $s*23 $stan0,
        $s*10 $s*23 $sblue0,
        $s*11 $s*23 $sblue0,
        $s*12 $s*23 $sblue0,
        $s*13 $s*23 $sblue0,
        $s*14 $s*23 $sblue1,
        $s*15 $s*23 $stan0,
        $s*16 $s*23 $stan0,
        $s*17 $s*23 $stan1,
        $s*18 $s*23 $stan1,
        $s*19 $s*23 $stan0,
        $s*20 $s*23 $sred0,
        
        $s*6 $s*24 $sblue0,
        $s*7 $s*24 $sblue0,
        $s*8 $s*24 $stan0,
        $s*9 $s*24 $swhite,
        $s*10 $s*24 $swhite,
        $s*11 $s*24 $sgray1,
        $s*12 $s*24 $swhite,
        $s*13 $s*24 $sgray1,
        $s*14 $s*24 $sblue1,
        $s*15 $s*24 $sblue1,
        $s*16 $s*24 $stan0,
        $s*17 $s*24 $stan0,
        $s*18 $s*24 $stan0,
        $s*19 $s*24 $sred0,
        $s*20 $s*24 $sblack,
        $s*21 $s*24 $sgray0,
        
        $s*6 $s*25 $sblue0,
        $s*7 $s*25 $sblue0,
        $s*8 $s*25 $sred0,
        $s*9 $s*25 $swhite,
        $s*10 $s*25 $sgray1,
        $s*11 $s*25 $swhite,
        $s*12 $s*25 $swhite,
        $s*13 $s*25 $swhite,
        $s*14 $s*25 $sblue0,
        $s*15 $s*25 $sblue1,
        $s*16 $s*25 $sblue1,
        $s*17 $s*25 $sblue1,
        $s*18 $s*25 $sblue1,
        $s*19 $s*25 $sblue0,
        $s*20 $s*25 $sgray0,
        $s*21 $s*25 $sgray1,
        $s*22 $s*25 $sgray1,
        
        $s*6 $s*26 $sblue0,
        $s*7 $s*26 $sblue0,
        $s*8 $s*26 $sblue0,
        $s*9 $s*26 $sgray1,
        $s*10 $s*26 $sgray0,
        $s*11 $s*26 $sgray1,
        $s*12 $s*26 $sgray1,
        $s*13 $s*26 $sgray1,
        $s*14 $s*26 $sblue0,
        $s*15 $s*26 $sblue1,
        $s*16 $s*26 $sblue0,
        $s*17 $s*26 $sblack,
        $s*18 $s*26 $sblue0,
        $s*19 $s*26 $sblack,
        $s*20 $s*26 $sgray0,
        $s*21 $s*26 $sgray1,
        $s*22 $s*26 $sgray1,
        
        $s*6 $s*27 $sblue0,
        $s*10 $s*27 $sgray1,
        $s*11 $s*27 $sgray1,
        $s*12 $s*27 $sgray1,
        $s*13 $s*27 $sgray1,
        $s*14 $s*27 $sblue2,
        $s*15 $s*27 $sblue1,
        $s*17 $s*27 $sblue0,
        $s*18 $s*27 $sblue0,
        $s*19 $s*27 $sblack,
        $s*20 $s*27 $sblack,
        $s*21 $s*27 $sgray0,
        
        $s*10 $s*28 $sblack,
        $s*11 $s*28 $sgray1,
        $s*12 $s*28 $sgray1,
        $s*13 $s*28 $sblue0,
        $s*14 $s*28 $sblue2,
        $s*17 $s*28 $sblue0,
        $s*18 $s*28 $sblue0,
        
        $s*13 $s*29 $sblue0,
        $s*14 $s*29 $sblue2,
        $s*17 $s*29 $sblue0,
        $s*18 $s*29 $sblue0,
        
        $s*12 $s*30 $sblue0,
        $s*13 $s*30 $sblue2,
        $s*17 $s*30 $sblue0,
        $s*18 $s*30 $sblue0,
        
        $s*12 $s*31 $sblue0,
        $s*13 $s*31 $sblue2,
        $s*17 $s*31 $sblue0,
        $s*18 $s*31 $sblue0,
        
        $s*10 $s*32 $sgray1,
        $s*11 $s*32 $sgray2,
        $s*16 $s*32 $sgray0,
        $s*17 $s*32 $sgray1,
        $s*18 $s*32 $sgray1,
        $s*19 $s*32 $sgray1,
        
        $s*10 $s*33 $sgray1,
        $s*11 $s*33 $sgray1,
        $s*12 $s*33 $sgray1,
        $s*13 $s*33 $sgray2,
        $s*14 $s*33 $sgray2,
        $s*16 $s*33 $sgray0,
        $s*17 $s*33 $sgray0,
        $s*18 $s*33 $sgray0,
        $s*19 $s*33 $sgray1,
        $s*20 $s*33 $sgray1,
        
        $s*9 $s*34 $sblack,
        $s*10 $s*34 $sred0,
        $s*11 $s*34 $sgray1,
        $s*12 $s*34 $sgray1,
        $s*13 $s*34 $sred0,
        $s*14 $s*34 $sred0,
        $s*16 $s*34 $sgray1,
        $s*17 $s*34 $sgray0,
        $s*18 $s*34 $sgray0,
        $s*19 $s*34 $sgray1,
        $s*20 $s*34 $sred0,
        
        $s*9 $s*35 $sblack,
        $s*10 $s*35 $sred0,
        $s*11 $s*35 $sred0,
        $s*12 $s*35 $sred0,
        $s*13 $s*35 $sgray2,
        $s*15 $s*35 $sgray1,
        $s*16 $s*35 $sgray1,
        $s*17 $s*35 $sred1,
        $s*18 $s*35 $sredoutline,
        $s*19 $s*35 $sredoutline,
        $s*20 $s*35 $sgray0,
        $s*21 $s*35 $sgray1,
        $s*22 $s*35 $sgray1,
        
        $s*8 $s*36 $sblack,
        $s*9 $s*36 $sred0,
        $s*10 $s*36 $sred0,
        $s*11 $s*36 $sred0,
        $s*12 $s*36 $sgray1,
        $s*13 $s*36 $sgray2,
        $s*14 $s*36 $sred1,
        $s*15 $s*36 $sred1,
        $s*16 $s*36 $sred1,
        $s*17 $s*36 $sred1,
        $s*18 $s*36 $sred1,
        $s*19 $s*36 $sred1,
        $s*20 $s*36 $sredoutline,
        $s*21 $s*36 $sredoutline,
        $s*22 $s*36 $sredoutline,
        $s*23 $s*36 $sred0,
        $s*24 $s*36 $sred0,
        $s*25 $s*36 $sred0,
        
        $s*8 $s*37 $sblack,
        $s*9 $s*37 $sred0,
        $s*10 $s*37 $sred0,
        $s*11 $s*37 $sred0,
        $s*12 $s*37 $sgray1,
        $s*13 $s*37 $sred1,
        $s*14 $s*37 $sred1,
        $s*15 $s*37 $sred1,
        $s*16 $s*37 $sred1,
        $s*17 $s*37 $sred1,
        $s*18 $s*37 $sred1,
        $s*19 $s*37 $sred1,
        $s*20 $s*37 $sred1,
        $s*21 $s*37 $sred1,
        $s*22 $s*37 $sred1,
        $s*23 $s*37 $sredoutline,
        $s*24 $s*37 $sredoutline,
        $s*25 $s*37 $sred0,
        $s*26 $s*37 $sred0,
        $s*27 $s*37 $sred0,
        
        $s*8 $s*38 $sblack,
        $s*9 $s*38 $sblack,
        $s*10 $s*38 $sblack,
        $s*11 $s*38 $sblack,
        $s*12 $s*38 $sblack,
        $s*13 $s*38 $sblack,
        $s*14 $s*38 $sblack,
        $s*15 $s*38 $sblack,
        $s*16 $s*38 $sblack,
        $s*17 $s*38 $sblack,
        $s*18 $s*38 $sblack,
        $s*19 $s*38 $sblack,
        $s*20 $s*38 $sblack,
        $s*21 $s*38 $sblack,
        $s*22 $s*38 $sblack,
        $s*23 $s*38 $sblack,
        $s*24 $s*38 $sblack,
        $s*25 $s*38 $sblack,
        $s*26 $s*38 $sblack,
        $s*27 $s*38 $sblack,
      ;
      //animation: sprite 400ms steps(1) infinite;
    }
}
              
            
!

JS

              
                
              
            
!
999px

Console