.sword
View Compiled
/* Colors */
/* darkest blue/green: #123c30 */
/* darker blue: #2fa78b */
/* medium blue: #2bc4a8 */
/* lightest blue: #41e4c5 */
/* dark brown: #27140E */
/* medium brown:	#483514 */
/* light brown: #6B5019 */
/* lightest brown: #8D6422 */
.sword {
	margin-left: 5em;
	width: 1em;
	height: 1em;
	background: #123c30;

	box-shadow: 1em   0   0 0 #123c30, 
				2em   0   0 0 #123c30,
				  
				0     1em 0 0 #123c30,
				1em   1em 0 0 #2bc4a8,
				2em   1em 0 0 #41e4c5,
				3em   1em 0 0 #123c30,
				  
				0     2em 0 0 #123c30,
				1em   2em 0 0 #41e4c5,
				2em   2em 0 0 #2bc4a8,
				3em   2em 0 0 #41e4c5,
				4em   2em 0 0 #123c30,
				  
				1em   3em 0 0 #123c30,
				2em   3em 0 0 #41e4c5,
				3em   3em 0 0 #2bc4a8,
				4em   3em 0 0 #41e4c5,
				5em   3em 0 0 #123c30,
				  
				2em   4em 0 0 #123c30,
				3em   4em 0 0 #41e4c5,
				4em   4em 0 0 #2bc4a8,
				5em   4em 0 0 #41e4c5,
				6em   4em 0 0 #123c30,
				  
				3em   5em 0 0 #123c30,
				4em   5em 0 0 #41e4c5,
				5em   5em 0 0 #2bc4a8,
				6em   5em 0 0 #41e4c5,
				7em   5em 0 0 #123c30,
				  
				4em   6em 0 0 #123c30,
				5em   6em 0 0 #41e4c5,
				6em   6em 0 0 #2bc4a8,
				7em   6em 0 0 #41e4c5,
				8em   6em 0 0 #123c30,
				12em  6em 0 0 #123c30,
				13em  6em 0 0 #123c30,
				  
				5em   7em 0 0 #123c30,
				6em   7em 0 0 #41e4c5,
				7em   7em 0 0 #2bc4a8,
				8em   7em 0 0 #41e4c5,
				9em   7em 0 0 #123c30,
				11em  7em 0 0 #123c30,
				12em  7em 0 0 #2fa78b,
				13em  7em 0 0 #123c30,
				  
				6em   8em 0 0 #123c30,
				7em   8em 0 0 #41e4c5,
				8em   8em 0 0 #2bc4a8,
				9em   8em 0 0 #41e4c5,
				10em  8em 0 0 #123c30,
				11em  8em 0 0 #2fa78b,
				12em  8em 0 0 #123c30,
				12em  8em 0 0 #2fa78b,
				
				7em   9em 0 0 #123c30,
				8em   9em 0 0 #41e4c5,
				9em   9em 0 0 #2bc4a8,
				10em  9em 0 0 #123c30,
				11em  9em 0 0 #2fa78b,
				12em  9em 0 0 #123c30,
 
				8em  10em 0 0 #123c30,
				9em  10em 0 0 #123c30,
				10em 10em 0 0 #2fa78b,
				11em 10em 0 0 #123c30,

				7em  11em 0 0 #123c30,
				8em  11em 0 0 #2fa78b,
				9em  11em 0 0 #2fa78b,
				10em 11em 0 0 #123c30,
				11em 11em 0 0 #6B5019,
				12em 11em 0 0 #483514,

				6em  12em 0 0 #123c30,
				7em  12em 0 0 #2fa78b,
				8em  12em 0 0 #123c30,  
				9em  12em 0 0 #123c30,
				11em 12em 0 0 #27140e,
				12em 12em 0 0 #8d6422,
				13em 12em 0 0 #483514,

				6em  13em 0 0 #123c30,
				7em  13em 0 0 #123c30,
				12em 13em 0 0 #27140e,
				13em 13em 0 0 #6B5019,
				14em 13em 0 0 #123c30,
				15em 13em 0 0 #123c30,

				13em 14em 0 0 #123c30,
				14em 14em 0 0 #2fa78b,
				15em 14em 0 0 #123c30,

				13em 15em 0 0 #123c30,
				14em 15em 0 0 #123c30,
				15em 15em 0 0 #123c30;
				
				
			    /* @todo: 3dify */
			    /* @todo: rotate 3d */

				
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js