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

              
                <div class="link"></div>
              
            
!

CSS

              
                @green:#339a00;
@brown:#cd6600;
@peach:#ffcd66;
@dimension:15px;


.link{
-webkit-animation: swing 0.6s linear infinite;
-moz-animation: swing 0.6s linear infinite;
animation: swing 0.6s linear infinite;
  width:@dimension;
  height:@dimension;
}


@sword:
 @dimension*7px @dimension @green,
 @dimension*8x @dimension @green,
 @dimension*9px @dimension @green,
 @dimension*10px @dimension @green,
 @dimension*5px @dimension*2px @green,
 @dimension*6px @dimension*2px @green,
 @dimension*7px @dimension*2px @green,
 @dimension*8px @dimension*2px @green,
 @dimension*9px @dimension*2px @green,
 @dimension*10px @dimension*2px @brown,
 @dimension*11px @dimension*2px @brown,
 @dimension*12px @dimension*2px @brown,
 @dimension*13px @dimension*2px @brown,
 @dimension*4px @dimension*3px @green,
 @dimension*5px @dimension*3px @green,
 @dimension*6px @dimension*3px @peach,
 @dimension*7px @dimension*3px @green,
 @dimension*8px @dimension*3px @green,
 @dimension*9px @dimension*3px @brown,
 @dimension*10px @dimension*3px @brown,
 @dimension*11px @dimension*3px @brown,
 @dimension*12px @dimension*3px @brown,
 @dimension*13px @dimension*3px @brown,
 @dimension*14px @dimension*3px @brown,
 @dimension*4px @dimension*4px @green,
 @dimension*5px @dimension*4px @green,
 @dimension*6px @dimension*4px @peach,
 @dimension*7px @dimension*4px @peach,
 @dimension*8px @dimension*4px @brown,
 @dimension*9px @dimension*4px @brown,
 @dimension*10px @dimension*4px @brown,
 @dimension*11px @dimension*4px @brown,
 @dimension*12px @dimension*4px @brown,
 @dimension*13px @dimension*4px @brown,
 @dimension*3px @dimension*5px @green,
@dimension*4px @dimension*5px @green,
 @dimension*5px @dimension*5px @green,
 @dimension*6px @dimension*5px @peach,
 @dimension*7px @dimension*5px @peach,
 @dimension*8px @dimension*5px @peach,
 @dimension*9px @dimension*5px @brown,
 @dimension*10px @dimension*5px @peach,
 @dimension*11px @dimension*5px @peach,
 @dimension*12px @dimension*5px @green,
 @dimension*13px @dimension*5px @peach,
 @dimension*2px @dimension*6px @green,
 @dimension*3px @dimension*6px @green,
 @dimension*4px @dimension*6px @green,
 @dimension*5px @dimension*6px @brown,
 @dimension*6px @dimension*6px @brown,
 @dimension*7px @dimension*6px @peach,
 @dimension*8px @dimension*6px @peach,
 @dimension*9px @dimension*6px @brown,
 @dimension*10px @dimension*6px @peach,
 @dimension*11px @dimension*6px @peach,
 @dimension*12px @dimension*6px @brown,
 @dimension*13px @dimension*6px @peach,
 @dimension*14px @dimension*6px @peach,
 @dimension*15px @dimension*6px @peach,
 @dimension*16px @dimension*6px @green,
 @dimension*2px @dimension*7px @green,
 @dimension*5px @dimension*7px @brown,
 @dimension*6px @dimension*7px @brown,
 @dimension*7px @dimension*7px @brown,
 @dimension*8px @dimension*7px @peach,
 @dimension*9px @dimension*7px @peach,
 @dimension*10px @dimension*7px @peach,
 @dimension*11px @dimension*7px @peach,
 @dimension*12px @dimension*7px @peach,
 @dimension*13px @dimension*7px @peach,
 @dimension*16px @dimension*7px @green,
 @dimension*5px @dimension*8px @green,
 @dimension*6px @dimension*8px @green,
 @dimension*7px @dimension*8px @green, 
 @dimension*8px @dimension*8px @green,
 @dimension*9px @dimension*8px @green,
 @dimension*10px @dimension*8px @peach,
 @dimension*11px @dimension*8px @peach,
 @dimension*12px @dimension*8px @peach,
 @dimension*13px @dimension*8px @peach,
 @dimension*14px @dimension*8px @peach,
 @dimension*15px @dimension*8px @peach,
 @dimension*16px @dimension*8px @green,
 @dimension*17px @dimension*8px @brown,
 @dimension*18px @dimension*8px @brown,
 @dimension*19px @dimension*8px @brown,
 @dimension*20px @dimension*8px @brown,
 @dimension*21px @dimension*8px @brown,
 @dimension*22px @dimension*8px @brown,
 @dimension*23px @dimension*8px @brown,
 @dimension*24px @dimension*8px @brown,
 @dimension*25px @dimension*8px @brown,
 @dimension*26px @dimension*8px @brown,
 @dimension*4px @dimension*9px @green,
 @dimension*5px @dimension*9px @green,
 @dimension*6px @dimension*9px @brown,
 @dimension*7px @dimension*9px @brown, 
 @dimension*8px @dimension*9px @brown,
 @dimension*9px @dimension*9px @brown,
 @dimension*10px @dimension*9px @brown,
 @dimension*11px @dimension*9px @brown,
 @dimension*12px @dimension*9px @peach,
 @dimension*13px @dimension*9px @peach,
 @dimension*14px @dimension*9px @peach,
 @dimension*15px @dimension*9px @peach,
 @dimension*16px @dimension*9px @green,
 @dimension*17px @dimension*9px @brown,
 @dimension*18px @dimension*9px @brown,
 @dimension*19px @dimension*9px @brown,
 @dimension*20px @dimension*9px @brown,
 @dimension*21px @dimension*9px @brown,
 @dimension*22px @dimension*9px @brown,
 @dimension*23px @dimension*9px @brown,
 @dimension*24px @dimension*9px @brown,
 @dimension*25px @dimension*9px @brown,
 @dimension*26px @dimension*9px @brown,
 @dimension*27px @dimension*9px @brown,
 @dimension*4px @dimension*10px @green,
 @dimension*5px @dimension*10px @brown,
 @dimension*6px @dimension*10px @brown,
 @dimension*7px @dimension*10px @brown, 
 @dimension*8px @dimension*10px @brown,
 @dimension*9px @dimension*10px @brown,
 @dimension*10px @dimension*10px @brown,
 @dimension*11px @dimension*10px @brown,
 @dimension*12px @dimension*10px @peach,
 @dimension*13px @dimension*10px @peach,
 @dimension*14px @dimension*10px @green,
 @dimension*15px @dimension*10px @peach,
 @dimension*16px @dimension*10px @green,
 @dimension*17px @dimension*10px @brown,
 @dimension*18px @dimension*10px @brown,
 @dimension*19px @dimension*10px @brown,
 @dimension*20px @dimension*10px @brown,
 @dimension*21px @dimension*10px @brown,
 @dimension*22px @dimension*10px @brown,
 @dimension*23px @dimension*10px @brown,
 @dimension*24px @dimension*10px @brown,
 @dimension*25px @dimension*10px @brown,
 @dimension*26px @dimension*10px @brown,
 @dimension*3px @dimension*11px @green,
 @dimension*4px @dimension*11px @green,
 @dimension*5px @dimension*11px @brown,
 @dimension*6px @dimension*11px @brown,
 @dimension*7px @dimension*11px @brown, 
 @dimension*8px @dimension*11px @brown,
 @dimension*9px @dimension*11px @brown,
 @dimension*10px @dimension*11px @brown,
 @dimension*11px @dimension*11px @brown, 
 @dimension*16px @dimension*11px @green,
 @dimension*2px @dimension*12px @green,
 @dimension*3px @dimension*12px @green,
 @dimension*4px @dimension*12px @green,
 @dimension*5px @dimension*12px @green,
 @dimension*6px @dimension*12px @brown,
 @dimension*7px @dimension*12px @brown, 
 @dimension*8px @dimension*12px @brown,
 @dimension*9px @dimension*12px @green,
 @dimension*10px @dimension*12px @green,
 @dimension*11px @dimension*12px @green, 
 @dimension*12px @dimension*12px @brown,
 @dimension*13px @dimension*12px @brown, 
 @dimension*15px @dimension*12px @green,
 @dimension*16px @dimension*12px @green,
 @dimension*1px @dimension*13px @brown,
 @dimension*2px @dimension*13px @brown,
 @dimension*3px @dimension*13px @green,
 @dimension*4px @dimension*13px @green,
 @dimension*5px @dimension*13px @green,
 @dimension*6px @dimension*13px @green,
 @dimension*7px @dimension*13px @green, 
 @dimension*8px @dimension*13px @green,
 @dimension*9px @dimension*13px @brown,
 @dimension*10px @dimension*13px @brown,
 @dimension*11px @dimension*13px @brown, 
 @dimension*12px @dimension*13px @brown,
 @dimension*13px @dimension*13px @brown, 
 @dimension*1px @dimension*14px @brown,
 @dimension*2px @dimension*14px @brown,
 @dimension*3px @dimension*14px @brown,
 @dimension*4px @dimension*14px @green,
 @dimension*5px @dimension*14px @green,
 @dimension*6px @dimension*14px @green,
 @dimension*7px @dimension*14px @green, 
 @dimension*8px @dimension*14px @green,
 @dimension*9px @dimension*14px @green,
 @dimension*10px @dimension*14px @green,
 @dimension*11px @dimension*14px @green, 
 @dimension*12px @dimension*14px @green,
 @dimension*13px @dimension*14px @brown, 
 @dimension*14px @dimension*14px @brown, 
 @dimension*2px @dimension*15px @brown,
 @dimension*3px @dimension*15px @brown,
 @dimension*4px @dimension*15px @brown,
 @dimension*12px @dimension*15px @brown, 
 @dimension*13px @dimension*15px @brown, 
 @dimension*14px @dimension*15px @brown, 
 @dimension*15px @dimension*15px @brown;


@nosword:
 @dimension*7px @dimension @green,
 @dimension*8x @dimension @green,
 @dimension*9px @dimension @green,
 @dimension*10px @dimension @green,
 @dimension*5px @dimension*2px @green,
 @dimension*6px @dimension*2px @green,
 @dimension*7px @dimension*2px @green,
 @dimension*8px @dimension*2px @green,
 @dimension*9px @dimension*2px @green,
 @dimension*10px @dimension*2px @brown,
 @dimension*11px @dimension*2px @brown,
 @dimension*12px @dimension*2px @brown,
 @dimension*13px @dimension*2px @brown,
 @dimension*4px @dimension*3px @green,
 @dimension*5px @dimension*3px @green,
 @dimension*6px @dimension*3px @peach,
 @dimension*7px @dimension*3px @green,
 @dimension*8px @dimension*3px @green,
 @dimension*9px @dimension*3px @brown,
 @dimension*10px @dimension*3px @brown,
 @dimension*11px @dimension*3px @brown,
 @dimension*12px @dimension*3px @brown,
 @dimension*13px @dimension*3px @brown,
 @dimension*14px @dimension*3px @brown,
 @dimension*4px @dimension*4px @green,
 @dimension*5px @dimension*4px @green,
 @dimension*6px @dimension*4px @peach,
 @dimension*7px @dimension*4px @peach,
 @dimension*8px @dimension*4px @brown,
 @dimension*9px @dimension*4px @brown,
 @dimension*10px @dimension*4px @brown,
 @dimension*11px @dimension*4px @brown,
 @dimension*12px @dimension*4px @brown,
 @dimension*13px @dimension*4px @brown,
 @dimension*3px @dimension*5px @green,
 @dimension*4px @dimension*5px @green,
 @dimension*5px @dimension*5px @green,
 @dimension*6px @dimension*5px @peach,
 @dimension*7px @dimension*5px @peach,
 @dimension*8px @dimension*5px @peach,
 @dimension*9px @dimension*5px @brown,
 @dimension*10px @dimension*5px @peach,
 @dimension*11px @dimension*5px @peach,
 @dimension*12px @dimension*5px @green,
 @dimension*13px @dimension*5px @peach,
 @dimension*2px @dimension*6px @green,
 @dimension*3px @dimension*6px @green,
 @dimension*4px @dimension*6px @green,
 @dimension*5px @dimension*6px @brown,
 @dimension*6px @dimension*6px @brown,
 @dimension*7px @dimension*6px @peach,
 @dimension*8px @dimension*6px @peach,
 @dimension*9px @dimension*6px @brown,
 @dimension*10px @dimension*6px @peach,
 @dimension*11px @dimension*6px @peach,
 @dimension*12px @dimension*6px @brown,
 @dimension*13px @dimension*6px @peach,
 @dimension*14px @dimension*6px @peach,
 @dimension*15px @dimension*6px @peach,
 @dimension*2px @dimension*7px @green,
 @dimension*5px @dimension*7px @brown,
 @dimension*6px @dimension*7px @brown,
 @dimension*7px @dimension*7px @brown,
 @dimension*8px @dimension*7px @peach,
 @dimension*9px @dimension*7px @peach,
 @dimension*10px @dimension*7px @peach,
 @dimension*11px @dimension*7px @peach,
 @dimension*12px @dimension*7px @peach,
 @dimension*13px @dimension*7px @peach,
 @dimension*5px @dimension*8px @green,
 @dimension*6px @dimension*8px @green,
 @dimension*7px @dimension*8px @green, 
 @dimension*8px @dimension*8px @green,
 @dimension*9px @dimension*8px @green,
 @dimension*10px @dimension*8px @peach,
 @dimension*11px @dimension*8px @peach,
 @dimension*12px @dimension*8px @peach,
 @dimension*13px @dimension*8px @peach,
 @dimension*14px @dimension*8px @peach,
 @dimension*4px @dimension*9px @green,
 @dimension*5px @dimension*9px @green,
 @dimension*6px @dimension*9px @brown,
 @dimension*7px @dimension*9px @brown, 
 @dimension*8px @dimension*9px @brown,
 @dimension*9px @dimension*9px @brown,
 @dimension*10px @dimension*9px @brown,
 @dimension*11px @dimension*9px @brown,
 @dimension*12px @dimension*9px @peach,
 @dimension*13px @dimension*9px @peach,
 @dimension*14px @dimension*9px @peach,
 @dimension*4px @dimension*10px @green,
 @dimension*5px @dimension*10px @brown,
 @dimension*6px @dimension*10px @brown,
 @dimension*7px @dimension*10px @brown, 
 @dimension*8px @dimension*10px @brown,
 @dimension*9px @dimension*10px @brown,
 @dimension*10px @dimension*10px @brown,
 @dimension*11px @dimension*10px @brown,
 @dimension*12px @dimension*10px @peach,
 @dimension*13px @dimension*10px @peach,
 @dimension*3px @dimension*11px @green,
 @dimension*4px @dimension*11px @green,
 @dimension*5px @dimension*11px @brown,
 @dimension*6px @dimension*11px @brown,
 @dimension*7px @dimension*11px @brown, 
 @dimension*8px @dimension*11px @brown,
 @dimension*9px @dimension*11px @brown,
 @dimension*10px @dimension*11px @brown,
 @dimension*11px @dimension*11px @brown, 
 @dimension*2px @dimension*12px @green,
 @dimension*3px @dimension*12px @green,
 @dimension*4px @dimension*12px @green,
 @dimension*5px @dimension*12px @green,
 @dimension*6px @dimension*12px @brown,
 @dimension*7px @dimension*12px @brown, 
 @dimension*8px @dimension*12px @brown,
 @dimension*9px @dimension*12px @green,
 @dimension*10px @dimension*12px @green,
 @dimension*11px @dimension*12px @green, 
 @dimension*12px @dimension*12px @brown,
 @dimension*13px @dimension*12px @brown, 
 @dimension*1px @dimension*13px @brown,
 @dimension*2px @dimension*13px @brown,
 @dimension*3px @dimension*13px @green,
 @dimension*4px @dimension*13px @green,
 @dimension*5px @dimension*13px @green,
 @dimension*6px @dimension*13px @green,
 @dimension*7px @dimension*13px @green, 
 @dimension*8px @dimension*13px @green,
 @dimension*9px @dimension*13px @brown,
 @dimension*10px @dimension*13px @brown,
 @dimension*11px @dimension*13px @brown, 
 @dimension*12px @dimension*13px @brown,
 @dimension*13px @dimension*13px @brown, 
 @dimension*1px @dimension*14px @brown,
 @dimension*2px @dimension*14px @brown,
 @dimension*3px @dimension*14px @brown,
 @dimension*4px @dimension*14px @green,
 @dimension*5px @dimension*14px @green,
 @dimension*6px @dimension*14px @green,
 @dimension*7px @dimension*14px @green, 
 @dimension*8px @dimension*14px @green,
 @dimension*9px @dimension*14px @green,
 @dimension*10px @dimension*14px @green,
 @dimension*11px @dimension*14px @green, 
 @dimension*12px @dimension*14px @green,
 @dimension*13px @dimension*14px @brown, 
 @dimension*14px @dimension*14px @brown, 
 @dimension*2px @dimension*15px @brown,
 @dimension*3px @dimension*15px @brown,
 @dimension*4px @dimension*15px @brown,
 @dimension*12px @dimension*15px @brown, 
 @dimension*13px @dimension*15px @brown, 
 @dimension*14px @dimension*15px @brown, 
 @dimension*15px @dimension*15px @brown;

@shield:
 @dimension*7px @dimension @green,
 @dimension*8x @dimension @green,
 @dimension*9px @dimension @green,
 @dimension*10px @dimension @green,
 @dimension*5px @dimension*2px @green,
 @dimension*6px @dimension*2px @green,
 @dimension*7px @dimension*2px @green,
 @dimension*8px @dimension*2px @green,
 @dimension*9px @dimension*2px @green,
 @dimension*10px @dimension*2px @brown,
 @dimension*11px @dimension*2px @brown,
 @dimension*12px @dimension*2px @brown,
 @dimension*13px @dimension*2px @brown,
 @dimension*3px @dimension*3px @green,
 @dimension*4px @dimension*3px @green,
 @dimension*5px @dimension*3px @green,
 @dimension*6px @dimension*3px @peach,
 @dimension*7px @dimension*3px @green,
 @dimension*8px @dimension*3px @green,
 @dimension*9px @dimension*3px @brown,
 @dimension*10px @dimension*3px @brown,
 @dimension*11px @dimension*3px @brown,
 @dimension*12px @dimension*3px @brown,
 @dimension*13px @dimension*3px @brown,
 @dimension*14px @dimension*3px @brown,
 @dimension*2px @dimension*4px @green,
 @dimension*3px @dimension*4px @green,
 @dimension*4px @dimension*4px @green,
 @dimension*5px @dimension*4px @green,
 @dimension*6px @dimension*4px @peach,
 @dimension*7px @dimension*4px @peach,
 @dimension*8px @dimension*4px @brown,
 @dimension*9px @dimension*4px @brown,
 @dimension*10px @dimension*4px @brown,
 @dimension*11px @dimension*4px @brown,
 @dimension*12px @dimension*4px @brown,
 @dimension*13px @dimension*4px @brown,
 @dimension*2px @dimension*5px @green,
 @dimension*4px @dimension*5px @green,
 @dimension*5px @dimension*5px @green,
 @dimension*6px @dimension*5px @peach,
 @dimension*7px @dimension*5px @peach,
 @dimension*8px @dimension*5px @peach,
 @dimension*9px @dimension*5px @brown,
 @dimension*10px @dimension*5px @peach,
 @dimension*11px @dimension*5px @peach,
 @dimension*12px @dimension*5px @green,
 @dimension*13px @dimension*5px @peach,
@dimension*16px @dimension*5px @brown,
 @dimension*4px @dimension*6px @green,
 @dimension*5px @dimension*6px @brown,
 @dimension*6px @dimension*6px @brown,
 @dimension*7px @dimension*6px @peach,
 @dimension*8px @dimension*6px @peach,
 @dimension*9px @dimension*6px @brown,
 @dimension*10px @dimension*6px @peach,
 @dimension*11px @dimension*6px @peach,
 @dimension*12px @dimension*6px @brown,
 @dimension*13px @dimension*6px @peach,
 @dimension*14px @dimension*6px @peach,
 @dimension*15px @dimension*6px @peach,
@dimension*16px @dimension*6px @brown,
 @dimension*5px @dimension*7px @brown,
 @dimension*6px @dimension*7px @brown,
 @dimension*7px @dimension*7px @brown,
 @dimension*8px @dimension*7px @peach,
 @dimension*9px @dimension*7px @peach,
 @dimension*10px @dimension*7px @peach,
 @dimension*11px @dimension*7px @peach,
 @dimension*12px @dimension*7px @peach,
 @dimension*13px @dimension*7px @peach,
@dimension*16px @dimension*7px @brown,
 @dimension*6px @dimension*8px @green,
 @dimension*7px @dimension*8px @green, 
 @dimension*8px @dimension*8px @green,
 @dimension*9px @dimension*8px @green,
 @dimension*10px @dimension*8px @peach,
 @dimension*11px @dimension*8px @peach,
 @dimension*12px @dimension*8px @peach,
 @dimension*13px @dimension*8px @peach,
@dimension*16px @dimension*8px @brown,
 @dimension*4px @dimension*9px @brown,
 @dimension*5px @dimension*9px @green,
 @dimension*6px @dimension*9px @green,
 @dimension*7px @dimension*9px @green, 
 @dimension*8px @dimension*9px @green,
 @dimension*9px @dimension*9px @green,
 @dimension*10px @dimension*9px @green,
 @dimension*11px @dimension*9px @green,
 @dimension*12px @dimension*9px @brown,
 @dimension*13px @dimension*9px @brown,
 @dimension*14px @dimension*9px @brown,
 @dimension*15px @dimension*9px @peach,
 @dimension*16px @dimension*9px @brown,
 @dimension*3px @dimension*10px @brown,
 @dimension*4px @dimension*10px @brown,
 @dimension*5px @dimension*10px @brown,
 @dimension*6px @dimension*10px @green, 
 @dimension*7px @dimension*10px @peach,
 @dimension*8px @dimension*10px @peach,
 @dimension*9px @dimension*10px @peach,
 @dimension*10px @dimension*10px @green,
 @dimension*11px @dimension*10px @green,
 @dimension*12px @dimension*10px @green,
 @dimension*13px @dimension*10px @brown,
 @dimension*14px @dimension*10px @brown,
 @dimension*15px @dimension*10px @peach,
 @dimension*16px @dimension*10px @brown,
 @dimension*3px @dimension*11px @brown,
 @dimension*4px @dimension*11px @brown,
 @dimension*5px @dimension*11px @brown,
 @dimension*6px @dimension*11px @brown, 
 @dimension*7px @dimension*11px @peach,
 @dimension*8px @dimension*11px @peach,
 @dimension*9px @dimension*11px @peach,
 @dimension*10px @dimension*11px @green,
 @dimension*11px @dimension*11px @green,
 @dimension*12px @dimension*11px @green,
 @dimension*13px @dimension*11px @brown,
 @dimension*14px @dimension*11px @brown,
 @dimension*16px @dimension*11px @brown,
 @dimension*3px @dimension*12px @brown,
 @dimension*4px @dimension*12px @brown,
 @dimension*5px @dimension*12px @brown,
 @dimension*6px @dimension*12px @brown, 
 @dimension*7px @dimension*12px @peach,
 @dimension*8px @dimension*12px @peach,
 @dimension*9px @dimension*12px @green,
 @dimension*10px @dimension*12px @green,
 @dimension*11px @dimension*12px @green,
 @dimension*12px @dimension*12px @brown,
 @dimension*16px @dimension*12px @brown,
 @dimension*4px @dimension*13px @green,
 @dimension*5px @dimension*13px @brown,
 @dimension*6px @dimension*13px @brown, 
 @dimension*7px @dimension*13px @green,
 @dimension*8px @dimension*13px @green,
 @dimension*9px @dimension*13px @brown,
 @dimension*10px @dimension*13px @brown,
 @dimension*11px @dimension*13px @brown,
 @dimension*12px @dimension*13px @brown,
 @dimension*16px @dimension*13px @brown,
 @dimension*3px @dimension*14px @green,
 @dimension*4px @dimension*14px @green,
 @dimension*5px @dimension*14px @green,
 @dimension*6px @dimension*14px @green, 
 @dimension*7px @dimension*14px @green,
 @dimension*8px @dimension*14px @green,
 @dimension*9px @dimension*14px @green,
 @dimension*10px @dimension*14px @green,
 @dimension*11px @dimension*14px @green,
 @dimension*12px @dimension*14px @green,
 @dimension*6px @dimension*15px @brown,
 @dimension*7px @dimension*15px @brown,
 @dimension*8px @dimension*15px @brown,
 @dimension*9px @dimension*15px @brown, 
 @dimension*6px @dimension*16px @brown, 
 @dimension*7px @dimension*16px @brown, 
 @dimension*8px @dimension*16px @brown,
 @dimension*9px @dimension*16px @brown, 
 @dimension*10px @dimension*16px @brown;

@-webkit-keyframes swing{
  0%{box-shadow:@shield}
  32.99%{box-shadow:@shield}
  33%{box-shadow:@nosword}
  44.99%{box-shadow:@nosword}
  45%{box-shadow:@sword}
  99.99%{box-shadow:@sword}
  100%{box-shadow:@shield}
}

@-moz-keyframes swing{
  0%{box-shadow:@shield}
  32.99%{box-shadow:@shield}
  33%{box-shadow:@nosword}
  44.99%{box-shadow:@nosword}
  45%{box-shadow:@sword}
  99.99%{box-shadow:@sword}
  100%{box-shadow:@shield}
}

@keyframes swing{
  0%{box-shadow:@shield}
  32.99%{box-shadow:@shield}
  33%{box-shadow:@nosword}
  44.99%{box-shadow:@nosword}
  45%{box-shadow:@sword}
  99.99%{box-shadow:@sword}
  100%{box-shadow:@shield}
}
              
            
!

JS

              
                //Inspired by 
//https://codepen.io/nhatnamit/pen/aLyhr
              
            
!
999px

Console