123

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.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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.

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.

            
              <div class="spider-man"></div>
            
          
!
            
              $r : #EA443C;
$w : #fff;
$b : #000;
$bb: #2D88C7;

* {
	box-sizing: border-box;
	padding: 0;
	margin: 0;
}

body {
	height: 100vh;
	background: #E4DD61;
	display: flex;
	justify-content: center;
}


/*

*/

.spider-man {
	width: 8px;
	height: 8px;
	background: $w;
	transform: translateY(-400px);
	animation: move 3s ease forwards;
	
	box-shadow: 
		0 8px    0 $w, 0 16px   0 $w,  0 24px    0 $w, 0 32px    0 $w,
		0 40px   0 $w, 0 48px   0 $w,  0 56px    0 $w, 0 64px    0 $w,
		0 72px   0 $w, 0 80px   0 $w,  0 80px    0 $w, -8px 80px 0 $w, 
		-8px 72px 0 $w, 8px 80px 0 $w, 0 88px    0 $w, -16px 184px   0 $w,
		-24px 184px 0 $w, -24px 192px 0 $w, 16px 184px   0 $w,
		24px 184px 0 $w, 24px 192px 0 $w,
		
		-8px 24px  0 $b, -16px 32px 0 $b, -24px 40px 0 $b, -32px 48px 0 $b,
		-40px 56px 0 $b, -48px 56px 0 $b, -56px 64px 0 $b, -64px 72px 0 $b,
		-72px 80px 0 $b, -72px 88px 0 $b, -64px 96px 0 $b, -56px 96px 0 $b,
		-48px 96px 0 $b, -40px 88px 0 $b, -32px 80px 0 $b, -24px 80px 0 $b,
		-16px 80px 0 $b, -24px 72px 0 $b, -16px 64px 0 $b, -8px 64px  0 $b,
		-8px 88px  0 $b, -8px 96px  0 $b, -16px 104px 0 $b, -24px 112px 0 $b,
		-32px 120px 0 $b, -32px 120px 0 $b, -48px 104px 0 $b, -56px 112px 0 $b,
		-56px 120px 0 $b, -48px 128px 0 $b, -40px 136px 0 $b, -32px 136px 0 $b,
		-24px 144px 0 $b, -16px 144px 0 $b, -8px 136px 0 $b, 0 136px 0 $b,
		-32px 152px 0 $b, -40px 160px 0 $b, -48px 168px 0 $b, -48px 176px 0 $b,
		-48px 184px 0 $b, -48px 192px 0 $b, -48px 200px 0 $b, -48px 208px 0 $b,
		-48px 216px 0 $b, -48px 224px 0 $b, -48px 232px 0 $b, -40px 240px 0 $b,
		-32px 248px 0 $b, -24px 248px 0 $b, -16px 256px 0 $b, -8px 256px 0 $b,
		 0px 256px 0 $b, 	-24px 176px 0 $b, -16px 176px 0 $b, -32px 184px 0 $b,
		-32px 192px 0 $b,	-32px 200px 0 $b, -32px 208px 0 $b, -24px 200px 0 $b,
		-16px 192px 0 $b,  -8px 184px 0 $b,
		
		8px 24px  0 $b, 16px 32px 0 $b, 24px 40px 0 $b, 32px 48px 0 $b,
		40px 56px 0 $b, 48px 56px 0 $b, 56px 64px 0 $b, 64px 72px 0 $b,
		72px 80px 0 $b, 72px 88px 0 $b, 64px 96px 0 $b, 56px 96px 0 $b,
		48px 96px 0 $b, 40px 88px 0 $b, 32px 80px 0 $b, 24px 80px 0 $b,
		16px 80px 0 $b, 24px 72px 0 $b, 16px 64px 0 $b, 8px 64px  0 $b,
		8px 88px  0 $b, 8px 96px  0 $b, 16px 104px 0 $b, 24px 112px 0 $b,
		32px 120px 0 $b, 32px 120px 0 $b, 48px 104px 0 $b, 56px 112px 0 $b,
		56px 120px 0 $b, 48px 128px 0 $b, 40px 136px 0 $b, 32px 136px 0 $b,
		24px 144px 0 $b, 16px 144px 0 $b, 8px 136px 0 $b,  0 136px 0 $b,
		32px 152px 0 $b, 40px 160px 0 $b, 48px 168px 0 $b, 48px 176px 0 $b,
		48px 184px 0 $b, 48px 192px 0 $b, 48px 200px 0 $b, 48px 208px 0 $b,
		48px 216px 0 $b, 48px 224px 0 $b, 48px 232px 0 $b, 40px 240px 0 $b,
		32px 248px 0 $b, 24px 248px 0 $b, 16px 256px 0 $b, 8px 256px 0 $b,
		0px 256px 0 $b,  24px 176px 0 $b, 16px 176px 0 $b, 32px 184px 0 $b,
		32px 192px 0 $b, 32px 200px 0 $b, 32px 208px 0 $b, 24px 200px 0 $b,
		16px 192px 0 $b, 8px 184px 0 $b,
		

		-8px 32px 0 $r,  -8px 40px 0 $r,  -8px 48px 0 $r,  -8px 56px 0 $r,
		-16px 40px 0 $r, -16px 48px 0 $r, -16px 56px 0 $r, -24px 48px 0 $r,
		-32px 56px 0 $r, -24px 56px 0 $r, -24px 64px 0 $r, -32px 64px 0 $r,
		-40px 64px 0 $r, -32px 72px 0 $r, -32px 88px 0 $r, -24px 88px 0 $r,
		-16px 88px 0 $r, -16px 96px 0 $r, -24px 96px 0 $r, -32px 96px 0 $r,
		-40px 96px 0 $r, -32px 104px 0 $r, -40px 104px 0 $r, -40px 112px 0 $r,
		-48px 112px 0 $r, -40px 120px 0 $r, -48px 120px 0 $r, -40px 128px 0 $r,
		-32px 128px 0 $r, -24px 128px 0 $r, -16px 128px 0 $r, -16px 120px 0 $r,
		-24px 136px 0 $r, -16px 136px 0 $r, -8px 128px 0 $r, -8px 120px 0 $r,
		-8px 112px 0 $r, -8px 104px 0 $r, -8px 144px 0 $r, -8px 152px 0 $r,
		-8px 160px 0 $r, -8px 168px 0 $r, -8px 176px 0 $r, -8px 192px 0 $r,
		-8px 200px 0 $r, -8px 208px 0 $r, -8px 216px 0 $r, -8px 224px 0 $r,
		-8px 232px 0 $r, -8px 240px 0 $r, -8px 248px 0 $r, -16px 152px 0 $r,
		-16px 160px 0 $r, -16px 168px 0 $r, -16px 176px 0 $r, -16px 192px 0 $r,
		-16px 200px 0 $r, -16px 208px 0 $r,  -16px 216px 0 $r, -16px 224px 0 $r,
		-16px 232px 0 $r, -16px 240px 0 $r, -16px 248px 0 $r, -24px 152px 0 $r,
		 -24px 160px 0 $r,  -24px 168px 0 $r,  -24px 176px 0 $r,  -24px 208px 0 $r,
		 -24px 216px 0 $r,  -24px 224px 0 $r,  -24px 232px 0 $r,  -24px 240px 0 $r,
		 -32px 160px 0 $r, -32px 168px 0 $r, -32px 176px 0 $r, -32px 216px 0 $r,
		-32px 224px 0 $r, -32px 232px 0 $r, -32px 240px 0 $r, -40px 168px 0 $r,
		-40px 172px 0 $r, -40px 180px 0 $r, -40px 188px 0 $r, -40px 196px 0 $r,
		-40px 204px 0 $r, -40px 212px 0 $r, -40px 220px 0 $r, -40px 228px 0 $r,
		-40px 236px 0 $r, 0 248px 0 $r, 0 240px 0 $r, 0 232px 0 $r, 0 224px 0 $r,
		0 216px 0 $r, 0 208px 0 $r, 0 200px 0 $r, 0 192px 0 $r, 0 184px 0 $r,
		0 176px 0 $r, 0 168px 0 $r, 0 160px 0 $r, 0 152px 0 $r, 0 144px 0 $r,
		0 128px 0 $r, 0 120px 0 $r, 0 112px 0 $r, 0 104px 0 $r, 0 96px 0 $r,
		
		8px 32px 0 $r,   8px 40px 0 $r,   8px 48px 0 $r,   8px 56px 0 $r,
		16px 40px 0 $r,  16px 48px 0 $r,  16px 56px 0 $r,  24px 48px 0 $r,
		32px 56px 0 $r,  24px 56px 0 $r,  24px 64px 0 $r,  32px 64px 0 $r,
		40px 64px 0 $r,  32px 72px 0 $r,  32px 88px 0 $r,  24px 88px 0 $r,
		16px 88px 0 $r,  16px 96px 0 $r,  24px 96px 0 $r,  32px 96px 0 $r,
		40px 96px 0 $r,  32px 104px 0 $r, 40px 104px 0 $r, 40px 112px 0 $r,
		48px 112px 0 $r, 40px 120px 0 $r, 48px 120px 0 $r, 40px 128px 0 $r,
		32px 128px 0 $r, 24px 128px 0 $r, 16px 128px 0 $r, 16px 120px 0 $r,
		24px 136px 0 $r, 16px 136px 0 $r, 8px 128px 0 $r,  8px 120px 0 $r,
		8px 112px 0 $r,  8px 104px 0 $r,  8px 144px 0 $r,  8px 152px 0 $r,
		8px 160px 0 $r,  8px 168px 0 $r,  8px 176px 0 $r,  8px 192px 0 $r,
		8px 200px 0 $r,  8px 208px 0 $r,  8px 216px 0 $r,  8px 224px 0 $r,
		8px 232px 0 $r,  8px 240px 0 $r,  8px 248px 0 $r,  16px 152px 0 $r,
		16px 160px 0 $r, 16px 168px 0 $r, 16px 176px 0 $r, 16px 192px 0 $r,
		16px 200px 0 $r, 16px 208px 0 $r, 16px 216px 0 $r, 16px 224px 0 $r,
		16px 232px 0 $r, 16px 240px 0 $r, 16px 248px 0 $r, 24px 152px 0 $r,
		24px 160px 0 $r, 24px 168px 0 $r, 24px 176px 0 $r, 24px 208px 0 $r,
		24px 216px 0 $r, 24px 224px 0 $r, 24px 232px 0 $r, 24px 240px 0 $r,
		32px 160px 0 $r, 32px 168px 0 $r, 32px 176px 0 $r, 32px 216px 0 $r,
		32px 224px 0 $r, 32px 232px 0 $r, 32px 240px 0 $r, 40px 168px 0 $r,
		40px 172px 0 $r, 40px 180px 0 $r, 40px 188px 0 $r, 40px 196px 0 $r,
		40px 204px 0 $r, 40px 212px 0 $r, 40px 220px 0 $r, 40px 228px 0 $r,
		40px 236px 0 $r, 
		
		
		-48px 64px 0 $bb, -40px 72px 0 $bb, -48px 72px 0 $bb, -56px 72px 0 $bb, 
		-16px 72px 0 $bb, -64px 80px 0 $bb, -56px 80px 0 $bb, -48px 80px 0 $bb,
		-40px 80px 0 $bb, -48px 88px 0 $bb, -56px 88px 0 $bb, -64px 88px 0 $bb,
		-24px 104px 0 $bb, -32px 112px 0 $bb, -24px 120px 0 $bb, -16px 112px 0 $bb,
		
		48px 64px 0 $bb, 40px 72px 0 $bb, 48px 72px 0 $bb, 56px 72px 0 $bb, 
		16px 72px 0 $bb, 64px 80px 0 $bb, 56px 80px 0 $bb, 48px 80px 0 $bb,
		40px 80px 0 $bb, 48px 88px 0 $bb, 56px 88px 0 $bb, 64px 88px 0 $bb,
		24px 104px 0 $bb, 32px 112px 0 $bb, 24px 120px 0 $bb, 16px 112px 0 $bb,
		8px 72px 0 $bb,
}
 
@keyframes move {
	80% { transform: translateY(0); }
	85% { transform: translateY(0) rotate(4deg); }
	90% { transform: translateY(0) rotate(-4deg); }
	95% { transform: translateY(0) rotate(4deg); }
	100%{ transform: translateY(0) rotate(0); }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console