Magic Burrito

index.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>

magic-burrito.markdown

Magic Burrito

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

A Pen by Cody Ogden on CodePen.

License.

script.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
*/

style.scss

#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;
}