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 includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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>
	<svg width="150px" height="150px" version="1.1" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
<g id="sparkles">
	<path d="m55.301 8.3008h0.19922c0.5 0 0.89844-0.30078 1-0.80078l0.60156-3.3984c0.10156-0.5-0.30078-1.1016-0.80078-1.1992-0.5-0.10156-1.1016 0.30078-1.1992 0.80078l-0.60156 3.3984c-0.10156 0.59766 0.30078 1.0977 0.80078 1.1992z"></path>    
	<path d="m78.5 10.5c-0.39844-0.39844-1-0.39844-1.3984 0l-0.30078 0.30078-0.30078-0.30078c-0.39844-0.39844-1-0.39844-1.3984 0-0.39844 0.39844-0.39844 1 0 1.3984l0.30078 0.30078-0.30078 0.30078c-0.39844 0.39844-0.39844 1 0 1.3984 0.19922 0.19922 0.5 0.30078 0.69922 0.30078s0.5-0.10156 0.69922-0.30078l0.30078-0.30078 0.30078 0.30078c0.19922 0.19922 0.5 0.30078 0.69922 0.30078s0.5-0.10156 0.69922-0.30078c0.39844-0.39844 0.39844-1 0-1.3984l-0.30078-0.30078 0.30078-0.30078c0.39844-0.39844 0.39844-1 0-1.3984z"></path>
	<path d="m76.602 26.699l-1.1992 1.1992c-0.39844 0.39844-0.39844 1 0 1.3984 0.19922 0.19922 0.5 0.30078 0.69922 0.30078 0.19922 0 0.5-0.10156 0.69922-0.30078l1.1992-1.1992c0.39844-0.39844 0.39844-1 0-1.3984-0.39844-0.39844-1-0.39844-1.3984 0z"></path>
	<path d="m89.5 22.5c0 1.6016-2.3984 1.6016-2.3984 0s2.3984-1.6016 2.3984 0"></path>
	<path d="m95.898 37.801l0.5-0.5c0.39844-0.39844 0.39844-1 0-1.3984-0.39844-0.39844-1-0.39844-1.3984 0l-0.5 0.5-0.5-0.50391c-0.39844-0.39844-1-0.39844-1.3984 0-0.39844 0.39844-0.39844 1 0 1.3984l0.5 0.5-0.5 0.5c-0.39844 0.39844-0.39844 1 0 1.3984 0.19922 0.19922 0.5 0.30078 0.69922 0.30078s0.5-0.10156 0.69922-0.30078l0.5-0.5 0.5 0.5c0.19922 0.19922 0.5 0.30078 0.69922 0.30078s0.5-0.10156 0.69922-0.30078c0.39844-0.39844 0.39844-1 0-1.3984z"></path>
	<path d="m82.082 40.375c1.3203 0.90234-0.03125 2.8867-1.3516 1.9844-1.3242-0.89844 0.027343-2.8828 1.3516-1.9844"></path>
	<path d="m74.957 49.684c0.80078 1.3828-1.2773 2.5859-2.0781 1.1992-0.80078-1.3867 1.2773-2.5859 2.0781-1.1992"></path>
	<path d="m86.199 56.898c0.5 0 0.89844-0.30078 1-0.80078 0.10156-0.5-0.30078-1.1016-0.80078-1.1992l-3.3984-0.60156c-0.5-0.10156-1.1016 0.30078-1.1992 0.80078-0.10156 0.5 0.30078 1.1016 0.80078 1.1992l3.3984 0.60156h0.19922z"></path>
	<path d="m92.465 65c1.5898 0.17578 1.3281 2.5586-0.26562 2.3828-1.5898-0.17578-1.3242-2.5586 0.26562-2.3828"></path>
	<path d="m77 69.398h-0.69922v-0.69922c0-0.60156-0.39844-1-1-1-0.60156 0-1 0.39844-1 1v0.69922h-0.69922c-0.60156 0-1 0.39844-1 1 0 0.60156 0.39844 1 1 1h0.69922v0.60156c0 0.60156 0.39844 1 1 1 0.60156 0 1-0.39844 1-1v-0.69922h0.69922c0.60156 0 1-0.39844 1-1 0-0.60156-0.5-0.90234-1-0.90234z"></path>
	<path d="m85.602 79.301c-1.3984 0-2.5 1.1016-2.5 2.5 0 1.3984 1.1016 2.5 2.5 2.5 1.3984 0 2.5-1.1016 2.5-2.5 0-1.3008-1.1016-2.5-2.5-2.5zm0 3c-0.30078 0-0.5-0.19922-0.5-0.5s0.19922-0.5 0.5-0.5c0.30078 0 0.5 0.19922 0.5 0.5s-0.20312 0.5-0.5 0.5z"></path>
	<path d="m73.352 86.312c1.5938 0.17578 1.3281 2.5586-0.26172 2.3828-1.5898-0.17578-1.3281-2.5586 0.26172-2.3828"></path>
	<path d="m59 88.699c-1.8008 0-3.3008 1.5-3.3008 3.3008s1.5 3.3008 3.3008 3.3008 3.3008-1.5 3.3008-3.3008-1.5-3.3008-3.3008-3.3008zm0 4.6992c-0.69922 0-1.3008-0.60156-1.3008-1.3008 0-0.69922 0.60156-1.3008 1.3008-1.3008s1.3008 0.60156 1.3008 1.3008c0 0.70312-0.60156 1.3008-1.3008 1.3008z"></path>
	<path d="m43.316 94.305c1.5938 0.17578 1.3281 2.5625-0.26172 2.3867-1.5898-0.17578-1.3281-2.5625 0.26172-2.3867"></path>
	<path d="m37.602 88.801c0 1.5977-2.4023 1.5977-2.4023 0 0-1.6016 2.4023-1.6016 2.4023 0"></path>
	<path d="m24.398 92.102c0 1.5977-2.3984 1.5977-2.3984 0 0-1.6016 2.3984-1.6016 2.3984 0"></path>
	<path d="m25.07 75.891c1.3242 0.89844-0.027343 2.8828-1.3477 1.9844-1.3242-0.90234 0.027344-2.8867 1.3477-1.9844"></path>
	<path d="m11.301 76.801c-0.39844-0.39844-1-0.39844-1.3984 0l-0.30078 0.30078-0.30078-0.30078c-0.39844-0.39844-1-0.39844-1.3984 0-0.39844 0.39844-0.39844 1 0 1.3984l0.30078 0.30078-0.30078 0.30078c-0.39844 0.39844-0.39844 1 0 1.3984 0.19922 0.19922 0.5 0.30078 0.69922 0.30078 0.19922 0 0.5-0.10156 0.69922-0.30078l0.30078-0.30078 0.30078 0.30078c0.19922 0.19922 0.5 0.30078 0.69922 0.30078 0.19922 0 0.5-0.10156 0.69922-0.30078 0.39844-0.39844 0.39844-1 0-1.3984l-0.30078-0.30078 0.30078-0.30078c0.39844-0.39844 0.39844-1 0-1.3984z"></path>
	<path d="m19.176 66.262c1.3203 0.90234-0.03125 2.8867-1.3516 1.9844-1.3242-0.90234 0.027343-2.8828 1.3516-1.9844"></path>
	<path d="m8.1758 65.156c1.3242 0.89844-0.027343 2.8828-1.3516 1.9844-1.3203-0.90234 0.03125-2.8867 1.3516-1.9844"></path>
	<path d="m21.898 54.898c0.60156 0 1-0.39844 1-1 0-0.60156-0.39844-1-1-1h-0.69922v-0.69922c0-0.60156-0.39844-1-1-1-0.60156 0-1 0.39844-1 1v0.69922h-0.69922c-0.60156 0-1 0.39844-1 1 0 0.60156 0.39844 1 1 1h0.69922v0.69922c0 0.60156 0.39844 1 1 1 0.60156 0 1-0.39844 1-1v-0.69922z"></path>
	<path d="m7.6016 48.699c-0.30078-0.5-0.89844-0.60156-1.3984-0.19922l-2.8008 2c-0.5 0.30078-0.60156 0.89844-0.19922 1.3984 0.19922 0.30078 0.5 0.39844 0.80078 0.39844 0.19922 0 0.39844-0.10156 0.60156-0.19922l2.8008-2c0.49219-0.29688 0.59375-0.99609 0.19531-1.3984z"></path>
	<path d="m12.801 31.801c-1.6016 0-3 1.3008-3 3s1.3008 3 3 3 3-1.3008 3-3-1.3008-3-3-3zm0 3.8984c-0.5 0-1-0.39844-1-1 0-0.60156 0.39844-1 1-1 0.60156 0 1 0.39844 1 1 0 0.60156-0.40234 1-1 1z"></path>
	<path d="m24.488 28.703c1.5938 0.17969 1.3281 2.5625-0.26172 2.3867-1.5898-0.17578-1.3281-2.5625 0.26172-2.3867"></path>
	<path d="m12.98 16.508c1.5938 0.17578 1.3281 2.5586-0.26172 2.3828s-1.3281-2.5625 0.26172-2.3828"></path>
	<path d="m28.102 18.199l-0.5-0.5 0.5-0.5c0.39844-0.39844 0.39844-1 0-1.3984-0.39844-0.39844-1-0.39844-1.3984 0l-0.5 0.5-0.5-0.5c-0.39844-0.39844-1-0.39844-1.3984 0-0.39844 0.39844-0.39844 1 0 1.3984l0.5 0.5-0.5 0.5c-0.39844 0.39844-0.39844 1 0 1.3984 0.19922 0.19922 0.5 0.30078 0.69922 0.30078 0.19922 0 0.5-0.10156 0.69922-0.30078l0.5-0.5 0.5 0.5c0.19922 0.19922 0.5 0.30078 0.69922 0.30078 0.19922 0 0.5-0.10156 0.69922-0.30078 0.29688-0.39844 0.29688-0.99609 0-1.3984z"></path>
	<path d="m37.699 5.6992c0 1.6016-2.3984 1.6016-2.3984 0 0-1.5977 2.3984-1.5977 2.3984 0"></path>
	<path d="m46.801 10.301c0 1.5977-2.4023 1.5977-2.4023 0 0-1.6016 2.4023-1.6016 2.4023 0"></path>
</g>
 <g id="burrito">
	<path d="m62.398 44.301l-3.0977 1.6992c-0.5 0.30078-0.69922 0.89844-0.39844 1.3984 0.19922 0.30078 0.5 0.5 0.89844 0.5 0.19922 0 0.30078 0 0.5-0.10156l3.1992-1.6992c0.5-0.30078 0.69922-0.89844 0.39844-1.3984-0.39844-0.39844-1-0.59766-1.5-0.39844z"/>
  	<path d="m37.602 59.801l14.301-7.6016c0.5-0.30078 0.69922-0.89844 0.39844-1.3984s-0.89844-0.69922-1.3984-0.39844l-14.301 7.6016c-0.5 0.30078-0.69922 0.89844-0.39844 1.3984 0.19922 0.30078 0.5 0.5 0.89844 0.5 0.097657-0.003906 0.29688-0.003906 0.5-0.10156z"/>
  	<path d="m62.398 55.301l-2.1992 1.1992c-0.5 0.30078-0.69922 0.89844-0.39844 1.3984 0.19922 0.30078 0.5 0.5 0.89844 0.5 0.19922 0 0.30078 0 0.5-0.10156l2.1992-1.1992c0.5-0.30078 0.69922-0.89844 0.39844-1.3984-0.29688-0.5-0.89844-0.69922-1.3984-0.39844z"/>
  	<path d="m52.398 61.699c-0.30078-0.5-0.89844-0.69922-1.3984-0.39844l-13.5 7.1992c-0.5 0.30078-0.69922 0.89844-0.39844 1.3984 0.19922 0.30078 0.5 0.5 0.89844 0.5 0.19922 0 0.30078 0 0.5-0.10156l13.5-7.1953c0.5-0.30078 0.69922-0.90234 0.39844-1.4023z"/>
  	<path d="m71.398 27.602c0-0.10156-0.10156-0.30078-0.10156-0.39844-0.39844-1-0.89844-2-1.5-2.8984-2.6016-3.8984-8.1016-8.5-19.801-8.5-11.699 0-17.199 4.6016-19.801 8.5-0.19922 0.30078-0.39844 0.69922-0.60156 1.1016-1.6016 2.8984-2.1992 6.3008-1.8984 9.8008l4.3047 41.395c0.39844 3.5 3 6.1992 6.3984 6.8008 1.1992 0.19922 2.5 0.39844 3.8008 0.5h0.10156 0.19922c2.5 0.19922 5 0.39844 7.6016 0.39844 4 0 7.8984-0.30078 11.602-0.89844 3.3984-0.5 6-3.3008 6.3984-6.8008l4.3008-41.398c0.097656-2.6016-0.20312-5.2031-1.0039-7.6016zm-21.398-9.9023c8.6992 0 14.801 2.6016 18.102 7.6016 0.60156 0.89844 1.1016 1.8984 1.3984 3 0.39844 1.3984 0.30078 2.6016-0.30078 3.8008-0.30078 0.5-0.69922 1-1.1992 1.3984-0.30078-3.3008-3-6-6.3984-6-0.30078 0-0.5 0-0.80078 0.10156-0.80078-2.3008-3-3.8008-5.5-3.6992-1.1992-1.8008-3.1992-2.8008-5.3008-2.8008-2.3984 0-4.5 1.3008-5.6016 3.3008-2.1016-0.39844-4.3008 0.5-5.5 2.1992h-0.19922c-3.3984 0-6.1992 2.6992-6.3984 6-0.60156-0.30078-1-0.69922-1.3008-1.3008-0.89844-1.8984 0.19922-4.5 0.39844-5 0.19922-0.30078 0.39844-0.60156 0.5-0.89844 3.3008-5.1016 9.4023-7.7031 18.102-7.7031zm0.39844 21c0.30078-0.69922 0.39844-1.5 0.39844-2.3008 0-1-0.19922-1.8984-0.60156-2.8008 1-0.69922 2.3008-1.1016 3.5-1.1016 2.8008 0 5.1016 1.8008 5.8984 4.3984-4 0.5-6.1992 2.1992-7.1992 3.3008-0.69531-0.59375-1.293-1.0938-1.9961-1.4961zm-1.5977-2.3008c0 0.39844-0.10156 0.80078-0.19922 1.1992-2.6016-1.3984-5.6016-2.3008-8.3984-3 0.69922-1.6016 2.3008-2.6016 4.1016-2.6016 2.4961-0.097656 4.4961 1.9023 4.4961 4.4023zm12.801 0.10156c-1-3.6016-4.1992-6.1016-7.8984-6.1016-1.7031 0.10156-3.3047 0.60156-4.7031 1.6016-1.1992-1.3008-2.8984-2-4.6992-2-2.6992 0-5.1016 1.6992-6.1016 4.1992-0.80078-0.19922-1.6016-0.39844-2.3984-0.5-0.60156-0.10156-1.1016-0.19922-1.6016-0.30078v-0.19922c0-2.5 2-4.5 4.5-4.5h0.30078 0.19922c0.39844 0 0.80078-0.10156 1-0.5 0.69922-1.1016 1.8008-1.8008 3.1016-1.8008 0.39844 0 0.80078 0.10156 1.1992 0.19922 0.5 0.19922 1.1016-0.10156 1.3008-0.60156 0.69922-1.6992 2.3008-2.8984 4.1016-2.8984 1.6016 0 3.1016 0.89844 3.8984 2.3984 0.19922 0.39844 0.60156 0.60156 1 0.5 1.8984-0.30078 3.6992 1 4.1016 2.8008v0.19922c0 0.30078 0.19922 0.5 0.5 0.69922 0.19922 0.19922 0.5 0.19922 0.80078 0.10156 0.5-0.10156 0.89844-0.19922 1.3008-0.19922 2.5 0 4.5 2 4.5 4.5v0.5 0.39844c-1.3047 0.60547-2.9023 1.2031-4.4023 1.5039zm-27.602 39.898l-4.3008-41.398c-0.10156-0.69922-0.10156-1.3984-0.10156-2.1016 0.80078 1.1016 2 1.8008 3.6016 2.1016 0.69922 0.19922 1.3984 0.30078 2.1992 0.5 6.1016 1.3008 14.398 3 17.699 8.8008 2.6016 4.5 4.6016 23.199-0.89844 32.199-2.1992 3.6992-5.5 5.3984-9.6992 5.3008-1.3008-0.10156-2.5-0.30078-3.6992-0.5-2.6016-0.30078-4.5-2.4023-4.8008-4.9023zm32 0c-0.30078 2.6016-2.1992 4.6016-4.6992 5-3.6016 0.60156-7.3984 0.89844-11.301 0.89844h-0.60156c1.8008-1 3.3008-2.6016 4.5-4.6016 6.1016-10 3.8008-29.199 1-34.199-0.39844-0.60156-0.80078-1.1992-1.1992-1.6992 0.80078-0.80078 2.6016-2.3008 6.1992-2.8008 3.6992-0.5 8.3008-2.1016 10.602-5 0 0.39844 0 0.69922-0.10156 1.1016z"/>
 </g>
</svg>
	<div id="message">Loading burrito...</div>
</div>
              
            
!

CSS

              
                #sparkles > path {
	animation: sparklyBits 1000ms infinite;
	position: absolute;
}

#message {
	margin-top: 20px;
	text-align: center;
}

@for $i from 1 through 29 {
	#sparkles > path:nth-child(#{$i}) {
		animation-delay: (35ms * $i);
	}
}

@keyframes sparklyBits {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

// Boring Bit
body {
	align-items: center;
	background-color: #FAFAFA;
	display: flex;
	height: 100vh;
	justify-content: center;
	width: 100vw;
}

              
            
!

JS

              
                /*
	The feeling you get when you're waiting
	in line at Chipotle. Burritos are magical.

	I'm working on some branding pieces for
	the next release of https://burrito.work
*/
              
            
!
999px

Console