Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ 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

Auto Save

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="bg">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="260.752px" height="249.247px" viewBox="0 0 260.752 249.247" enable-background="new 0 0 260.752 249.247"
	 xml:space="preserve">
<g>
	<polygon class="none" fill="none" points="45.763,67.337 47.307,69.966 48.79,67.633 	"/>
	<path class="none" fill="none" d="M187.771,36.234c1.698,0.993,3.375,0.579,4.137-0.724c0.762-1.302,0.287-2.975-1.396-3.959
		c-1.668-0.976-3.35-0.585-4.121,0.732C185.62,33.6,186.103,35.258,187.771,36.234z"/>
	<path fill="none" d="M83.28,36.957c1.684-1.016,2.121-2.686,1.341-3.978c-0.779-1.292-2.475-1.673-4.144-0.666
		c-1.654,0.999-2.115,2.662-1.327,3.968C79.939,37.588,81.625,37.956,83.28,36.957z"/>
	<polygon fill="none" points="137.317,17.65 135.883,20.34 138.646,20.385 	"/>
	<path fill="none" d="M203.017,41.544c0.371-0.485,0.254-1.001-0.352-1.465l-2.987-2.29l-1.165,1.521l2.987,2.29
		C202.104,42.063,202.634,42.042,203.017,41.544z"/>
	<path fill="none" d="M56.953,57.563c-0.554-0.447-1.164-0.394-1.664,0.226l-2.248,2.785l1.808,1.459l2.248-2.785
		C57.587,58.641,57.521,58.021,56.953,57.563z"/>
	<path fill="none" d="M54.284,56.063c-0.436-0.351-0.87-0.245-1.328,0.323l-2.013,2.494l1.293,1.044l2.024-2.508
		C54.708,56.862,54.707,56.404,54.284,56.063z"/>
	<polygon class="text text-top" fill="#FFF200" points="44.882,79.996 41.985,78.517 43.58,75.393 42.675,74.93 41.08,78.054 39.51,77.253 41.976,72.424 
		41.055,71.954 38.089,77.764 44.381,80.977 	"/>
	<path class="text text-top" fill="#FFF200" d="M48.866,72.604l-1.026-1.737l2.001-3.149l2.008,0.191l0.636-1.002l-7.915-0.729l-0.373,0.587l4.04,6.827
		L48.866,72.604z M45.763,67.337l3.026,0.296l-1.482,2.333L45.763,67.337z"/>
	<path class="text text-top" fill="#FFF200" d="M57.814,59.979c1.001-1.241,0.895-2.459-0.095-3.258c-0.621-0.5-1.377-0.588-2.211-0.258
		c0.066-0.514-0.141-0.986-0.59-1.348c-0.885-0.713-1.818-0.529-2.734,0.606L49.458,59.1l5.491,4.431L57.814,59.979z M50.943,58.88
		l2.013-2.494c0.458-0.568,0.893-0.674,1.328-0.323c0.422,0.341,0.423,0.799-0.024,1.354l-2.024,2.508L50.943,58.88z M53.042,60.574
		l2.248-2.785c0.5-0.62,1.11-0.673,1.664-0.226c0.568,0.458,0.634,1.078,0.144,1.685l-2.248,2.785L53.042,60.574z"/>
	<path class="text text-top" fill="#FFF200" d="M65.586,51.898c1.766-1.712,2.024-2.956,0.808-4.21L63.04,44.23l-0.792,0.768l3.153,3.251
		c0.968,0.999,0.827,1.608-0.512,2.907c-1.339,1.299-1.953,1.421-2.921,0.423l-3.154-3.251l-0.792,0.768l3.354,3.458
		C62.594,53.808,63.796,53.635,65.586,51.898z"/>
	<polygon class="text text-top" fill="#FFF200" points="77.197,41.842 76.577,41.037 72.414,44.244 68.721,39.45 67.848,40.123 72.162,45.722 	"/>
	<path class="text text-top" fill="#FFF200" d="M83.814,37.842c2.234-1.349,2.865-3.649,1.779-5.449c-1.095-1.814-3.407-2.299-5.642-0.95
		c-2.22,1.34-2.859,3.626-1.773,5.426C79.255,38.653,81.594,39.182,83.814,37.842z M80.477,32.313
		c1.669-1.007,3.365-0.625,4.144,0.666c0.78,1.292,0.342,2.961-1.341,3.978c-1.654,0.999-3.341,0.631-4.129-0.675
		C78.362,34.976,78.823,33.312,80.477,32.313z"/>
	<path class="text text-top" fill="#FFF200" d="M95.049,31.979c2.246-0.998,2.917-2.075,2.208-3.67l-1.955-4.398l-1.007,0.447l1.837,4.135
		c0.564,1.27,0.222,1.793-1.482,2.55s-2.321,0.661-2.885-0.609l-1.838-4.135l-1.006,0.447l1.954,4.398
		C91.585,32.739,92.772,32.99,95.049,31.979z"/>
	<path class="text text-top" fill="#FFF200" d="M105.272,24.307c1.419-0.401,2.221-0.276,2.466,0.518c0.224,0.729-0.341,1.542-1.605,1.932
		c-0.956,0.294-2.228,0.313-3.399-0.036l-0.244,1.051c1.316,0.358,2.776,0.316,4.057-0.078c1.879-0.579,2.683-1.944,2.314-3.143
		c-0.439-1.426-1.754-1.837-3.926-1.168c-1.41,0.434-2.162,0.471-2.361-0.178c-0.17-0.551,0.333-1.167,1.402-1.496
		c0.859-0.265,1.975-0.271,3.029,0.043l0.266-1.04c-1.221-0.334-2.406-0.324-3.573,0.036c-1.75,0.539-2.538,1.668-2.194,2.786
		C101.947,24.976,103.188,24.914,105.272,24.307z"/>
	<polygon class="text text-top" fill="#FFF200" points="129.974,23.198 129.875,22.186 124.07,22.752 123.852,20.525 127.464,20.172 127.365,19.16 
		123.753,19.512 123.582,17.757 129.083,17.22 128.983,16.19 122.385,16.835 123.072,23.872 	"/>
	<path class="text text-top" fill="#FFF200" d="M135.394,21.265l3.729,0.061l0.886,1.812l1.187,0.02l-3.512-7.128l-0.695-0.012l-3.709,7.011l1.17,0.019
		L135.394,21.265z M137.317,17.65l1.328,2.735l-2.763-0.045L137.317,17.65z"/>
	<polygon class="text text-top" fill="#FFF200" points="146.442,23.601 147.539,23.717 148.181,17.664 151.147,17.978 151.251,17 144.22,16.256 
		144.116,17.233 147.084,17.548 	"/>
	<path class="text text-top" fill="#FFF200" d="M161.396,24.028c0.314-1.458-0.631-2.459-2.853-2.938c-1.44-0.311-2.115-0.646-1.972-1.31
		c0.121-0.563,0.859-0.855,1.953-0.619c0.879,0.189,1.854,0.729,2.621,1.519l0.74-0.777c-0.9-0.888-1.939-1.458-3.133-1.715
		c-1.79-0.386-3.029,0.214-3.275,1.358c-0.317,1.475,0.795,2.026,2.91,2.517c1.435,0.344,2.071,0.845,1.896,1.657
		c-0.161,0.746-1.051,1.178-2.344,0.9c-0.979-0.211-2.097-0.816-2.947-1.693l-0.727,0.797c0.974,0.956,2.267,1.633,3.575,1.915
		C159.763,26.052,161.131,25.255,161.396,24.028z"/>
	<polygon class="text text-top" fill="#FFF200" points="176.444,27.854 179.659,29.256 180.065,28.324 176.851,26.921 177.556,25.306 182.524,27.474 
		182.938,26.526 176.958,23.918 174.133,30.396 175.144,30.836 	"/>
	<path class="text text-top" fill="#FFF200" d="M187.249,37.126c2.253,1.318,4.577,0.772,5.638-1.042c1.07-1.83,0.392-4.093-1.862-5.411
		c-2.239-1.31-4.553-0.778-5.615,1.037C184.356,33.509,185.01,35.816,187.249,37.126z M186.39,32.283
		c0.771-1.317,2.453-1.708,4.121-0.732c1.684,0.984,2.158,2.657,1.396,3.959c-0.762,1.302-2.438,1.716-4.137,0.724
		C186.103,35.258,185.62,33.6,186.39,32.283z"/>
	<path class="text text-top" fill="#FFF200" d="M197.882,40.13l2.449,1.877l-0.289,3.667l0.956,0.732l0.326-3.66c0.95,0.515,1.995,0.269,2.593-0.512
		c0.753-0.982,0.51-2.087-0.634-2.964l-3.862-2.96l-4.291,5.599l0.875,0.67L197.882,40.13z M199.677,37.789l2.987,2.29
		c0.606,0.464,0.724,0.98,0.351,1.465c-0.381,0.498-0.91,0.52-1.517,0.055l-2.988-2.29L199.677,37.789z"/>
	<polygon class="text text-top" fill="#FFF200" points="212.718,57.958 217.287,53.937 219.258,56.177 219.996,55.527 215.326,50.221 214.588,50.87 
		216.56,53.11 211.99,57.131 	"/>
	<polygon class="text text-top" fill="#FFF200" points="217.926,64.403 220.62,62.518 223.468,66.586 220.774,68.472 221.406,69.374 227.196,65.321 
		226.563,64.418 224.313,65.993 221.467,61.924 223.716,60.35 223.084,59.447 217.294,63.5 	"/>
	<polygon class="text text-top" fill="#FFF200" points="227.532,80.184 228.429,79.705 225.678,74.565 227.649,73.51 229.36,76.707 230.257,76.227 
		228.546,73.03 230.101,72.199 232.707,77.069 233.618,76.581 230.491,70.74 224.262,74.074 	"/>
	<polygon fill="none" points="35.256,158.273 37.426,156.144 34.42,155.64 	"/>
	<path fill="none" d="M59.451,193.631l-1.402,1.308l2.568,2.754c0.52,0.558,1.046,0.625,1.505,0.197
		c0.447-0.417,0.417-0.946-0.104-1.504L59.451,193.631z"/>
	<path fill="none" d="M229.119,173.924c-0.515-0.293-1.019-0.133-1.38,0.5l-2.03,3.546l1.662,0.952l2.004-3.502
		C229.755,174.759,229.647,174.229,229.119,173.924z"/>
  </g>
  <g>
	<path class="text text-bottom" fill="#FFF200" d="M38.87,155.313l-7.825-1.288l0.354,1.115l1.99,0.329l1.128,3.555l-1.436,1.416l0.359,1.131l5.641-5.596
		L38.87,155.313z M35.256,158.273l-0.836-2.634l3.006,0.504L35.256,158.273z"/>
	<polygon class="text text-bottom" fill="#FFF200" points="42.229,164.512 41.786,163.502 35.315,166.348 37.873,172.167 38.804,171.758 36.689,166.947 	"/>
	<polygon class="text text-bottom" fill="#FFF200" points="47.021,174.358 46.473,173.403 40.346,176.922 43.51,182.432 44.392,181.926 41.776,177.372 	"/>
	<polygon class="text text-bottom" fill="#FFF200" points="51.999,184.24 55.267,188.697 56.101,188.084 52.181,182.74 46.48,186.92 50.58,192.512 
		51.4,191.911 47.952,187.208 49.756,185.884 51.902,188.81 52.722,188.208 50.577,185.284 	"/>
	<path class="text text-bottom" fill="#FFF200" d="M59.444,192.131l-5.161,4.812l0.752,0.807l2.258-2.104l2.105,2.257l-0.893,3.569l0.821,0.88l0.929-3.557
		c0.853,0.666,1.923,0.597,2.643-0.074c0.906-0.844,0.849-1.975-0.134-3.029L59.444,192.131z M62.122,197.89
		c-0.459,0.428-0.985,0.36-1.505-0.197l-2.568-2.754l1.402-1.308l2.567,2.755C62.539,196.944,62.569,197.474,62.122,197.89z"/>
	<path class="text text-bottom" fill="#FFF200" d="M71.289,203.353c-2.041-1.708-4.461-1.589-5.811,0.022c-1.349,1.611-1.042,3.992,1.013,5.711
		c1.339,1.121,2.767,1.475,4.163,1.074l1.371-1.639l-2.236-1.871l-0.653,0.78l1.378,1.153l-0.49,0.584
		c-0.712,0.244-1.895-0.06-2.87-0.875c-1.547-1.295-1.763-3.045-0.794-4.203c0.968-1.156,2.742-1.242,4.276,0.043
		c0.949,0.794,1.463,1.843,1.418,2.822l1.042,0.075C73.155,205.667,72.55,204.409,71.289,203.353z"/>
	
		<rect class="text text-bottom" x="76.427" y="208.768" transform="matrix(0.8257 0.5641 -0.5641 0.8257 133.1968 -6.4197)" fill="#FFF200" width="1.118" height="7.102"/>
	<path class="text text-bottom" fill="#FFF200" d="M87.6,214.471c-2.198-1.21-4.519-0.65-5.549,1.22c-1.03,1.871-0.255,4.117,1.942,5.328
		c1.47,0.81,2.978,0.847,4.281,0.133l-0.478-0.96c-1.137,0.555-2.191,0.535-3.304-0.079c-1.589-0.875-2.183-2.538-1.438-3.889
		c0.745-1.351,2.452-1.746,4.056-0.862c1.039,0.572,1.679,1.448,1.8,2.424l1.066-0.109C89.814,216.388,88.966,215.223,87.6,214.471z
		"/>
	<polygon class="text text-bottom" fill="#FFF200" points="104.179,221.788 103.014,221.388 101.989,224.377 99.055,223.372 98.655,224.538 101.59,225.543 
		100.566,228.532 101.731,228.931 102.755,225.942 105.68,226.944 106.079,225.779 103.155,224.777 	"/>
	<path class="text text-bottom" fill="#FFF200" d="M119.355,226.581c0.886,0.146,1.887,0.64,2.69,1.392l0.702-0.812c-0.943-0.844-2.007-1.365-3.211-1.563
		c-1.807-0.3-3.016,0.358-3.207,1.512c-0.247,1.488,0.89,1.987,3.025,2.375c1.449,0.274,2.11,0.746,1.974,1.565
		c-0.125,0.752-0.994,1.227-2.298,1.01c-0.987-0.164-2.132-0.715-3.025-1.551l-0.688,0.83c1.018,0.908,2.342,1.523,3.663,1.742
		c1.94,0.322,3.269-0.539,3.475-1.776c0.244-1.472-0.749-2.427-2.989-2.8c-1.455-0.241-2.144-0.545-2.033-1.213
		C117.527,226.723,118.251,226.396,119.355,226.581z"/>
	<polygon class="text text-bottom" fill="#FFF200" points="129.465,230.811 133.09,230.991 133.14,229.974 129.516,229.793 129.603,228.034 135.125,228.307 
		135.175,227.273 128.553,226.945 128.203,234.008 135.13,234.352 135.181,233.334 129.354,233.045 	"/>
	<polygon class="text text-bottom" fill="#FFF200" points="145.431,226.89 145.749,231.848 140.947,227.177 140.372,227.213 140.823,234.27 141.906,234.202 
		141.59,229.26 146.392,233.915 146.966,233.877 146.515,226.82 	"/>
	<path class="text text-bottom" fill="#FFF200" d="M155.697,228.236c-1.451,0.263-2.202,0.209-2.322-0.458c-0.103-0.566,0.469-1.117,1.569-1.318
		c0.885-0.16,1.992-0.032,3.002,0.404l0.387-1c-1.172-0.477-2.35-0.607-3.55-0.39c-1.802,0.326-2.718,1.354-2.509,2.504
		c0.269,1.483,1.508,1.569,3.647,1.216c1.457-0.229,2.237-0.009,2.386,0.809c0.137,0.75-0.521,1.49-1.822,1.726
		c-0.984,0.178-2.25,0.046-3.37-0.44l-0.367,1.015c1.265,0.512,2.718,0.645,4.035,0.405c1.935-0.35,2.895-1.608,2.671-2.844
		C159.188,228.396,157.933,227.831,155.697,228.236z"/>
	
		<rect class="text text-bottom" x="161.675" y="226.372" transform="matrix(0.2672 0.9637 -0.9637 0.2672 339.7676 7.082)" fill="#FFF200" width="7.106" height="1.119"/>
	<polygon class="text text-bottom" fill="#FFF200" points="175.75,219.648 169.12,222.104 169.461,223.026 172.259,221.989 174.374,227.697 175.407,227.314 
		173.293,221.606 176.091,220.57 	"/>
	
		<rect class="text text-bottom" x="178.268" y="220.201" transform="matrix(0.4248 0.9053 -0.9053 0.4248 304.4482 -37.6112)" fill="#FFF200" width="7.104" height="1.118"/>
	<polygon class="text text-bottom" fill="#FFF200" points="190.665,212.011 191.075,217.897 186.108,214.668 185.099,215.258 191.724,219.581 192.222,219.29 
		191.719,211.396 	"/>
	<polygon class="text text-bottom" fill="#FFF200" points="200.142,212.946 198.804,211.152 201.713,208.984 201.104,208.168 198.196,210.336 
		197.142,208.922 201.574,205.62 200.956,204.79 195.64,208.75 199.865,214.42 205.426,210.277 204.817,209.461 	"/>
	<polygon class="text text-bottom" fill="#FFF200" points="215.979,191.525 215.252,190.865 210.505,196.102 211.233,196.762 213.237,194.552 
		217.745,198.639 218.485,197.822 213.978,193.736 	"/>
	<polygon class="text text-bottom" fill="#FFF200" points="221.798,182.258 220.924,183.446 221.58,186.79 218.173,187.188 217.33,188.334 222.022,187.79 
		224.933,189.927 225.575,189.053 222.651,186.905 	"/>
	<path class="text text-bottom" fill="#FFF200" d="M230.332,175.833c0.683-1.191,0.308-2.345-0.664-2.9c-1.074-0.615-2.127-0.242-2.853,1.023l-2.551,4.457
		l6.133,3.512l0.547-0.956l-2.676-1.533L230.332,175.833z M225.709,177.97l2.03-3.546c0.361-0.633,0.865-0.793,1.38-0.5
		c0.528,0.305,0.636,0.834,0.257,1.496l-2.004,3.5L225.709,177.97z"/>
	<polygon class="text text-bottom" fill="#FFF200" points="236.084,168.902 234.026,168.026 235.446,164.689 234.511,164.292 233.09,167.627 231.468,166.938 
		233.632,161.854 232.681,161.449 230.085,167.545 236.588,170.314 239.303,163.936 238.368,163.538 	"/>
	<path class="text text-bottom" fill="#FFF200" d="M240.989,151.752c-1.432-0.422-2.5,0.449-3.143,2.627c-0.418,1.416-0.803,2.062-1.453,1.871
		c-0.554-0.164-0.789-0.922-0.474-1.996c0.254-0.862,0.865-1.797,1.709-2.502l-0.72-0.795c-0.953,0.834-1.6,1.828-1.944,2.998
		c-0.519,1.758-0.011,3.037,1.111,3.368c1.448,0.427,2.081-0.642,2.727-2.714c0.45-1.406,0.997-2.004,1.794-1.77
		c0.732,0.215,1.098,1.136,0.725,2.404c-0.283,0.961-0.969,2.03-1.907,2.814l0.741,0.783c1.025-0.899,1.797-2.139,2.175-3.424
		C242.887,153.532,242.192,152.107,240.989,151.752z"/>
</g>
<path class="shield" fill="#FFF200" d="M156.843,41.355v-4.471c0.033,0.008,0.066,0.018,0.101,0.026c-0.047-0.368-0.083-0.74-0.106-1.12
	c-0.006-0.101,0.009-0.198,0.01-0.297c-6.68-1.557-13.635-2.386-20.782-2.386c-7.144,0-14.094,0.835-20.77,2.392
	c0,0.009,0.003,0.017,0.003,0.026c0.021,0.462-0.023,1.366-0.009,1.363v5.46h0.025c-0.014,0.847-0.025,2.829-0.031,5.938h14.424
	v1.76H115.28c-0.004,0.563-0.004,1.143-0.004,1.765h14.43v1.763h-14.431c0,0.565,0,1.154-0.002,1.761h14.434v1.763h-14.434v0.605
	c0,0.406,0.029,0.772,0.045,1.16h14.389v1.761h-14.259c1.035,9.247,7.086,12.058,14.311,14.669V60.563h1.758v15.355
	c0.575,0.205,1.164,0.413,1.767,0.63V60.563h1.764v16.636c0.062,0.024,0.119,0.046,0.183,0.066l0.874,0.329l0.704-0.267V60.563
	h1.762V76.68c0.601-0.215,1.188-0.428,1.765-0.631V60.563h1.766v14.859c7.373-2.626,13.629-5.316,14.645-14.803h-14.639v-1.761
	h14.757c0.011-0.347,0.039-0.678,0.039-1.043v-0.721h-14.796v-1.763h14.803c0-0.613,0.002-1.203,0.002-1.761h-14.805v-1.763h14.805
	c0.002-0.628,0.004-1.214,0.004-1.765h-14.809v-1.76h14.811c0.004-4.965-0.015-6.063-0.031-6.309L156.843,41.355z M131.518,48.278
	h-1.758v-13.59c0.585-0.041,1.17-0.081,1.758-0.11V48.278z M135.048,48.278h-1.764V34.511c0.586-0.018,1.174-0.028,1.764-0.034
	V48.278z M138.569,48.277h-1.762V34.473c0.588,0.005,1.176,0.011,1.762,0.027V48.277z M142.099,48.277h-1.766v-13.71
	c0.59,0.028,1.179,0.064,1.766,0.103V48.277z"/>
<g>
	<g class="feast">
		<polygon class="f" fill="#FFF200" points="60.802,137.767 65.167,137.767 65.167,126.567 74.577,126.567 74.577,122.423 65.167,122.423 
			65.167,116.986 80.716,116.986 80.716,112.84 60.802,112.84 		"/>
		<path class="a" fill="#FFF200" d="M139.651,112.84l-12.206,24.928h4.743l3.092-6.317h12.086l3.18,6.317h4.791l-12.348-24.928H139.651z
			 M145.339,127.256h-8.002l3.99-8.063L145.339,127.256z"/>
		<path class="s" fill="#FFF200" d="M175.919,122.427c-1.225-0.133-2.387-0.204-3.455-0.27c-2.564-0.156-4.594-0.276-5.855-1.237
			c-0.596-0.461-0.848-0.915-0.848-1.521c0-1.403,1.883-2.895,5.375-2.895c3.229,0,6.268,1.132,9.045,3.369l0.604,0.484l2.541-3.652
			l-0.564-0.419c-3.557-2.59-7.588-3.965-11.67-3.965c-5.783,0-9.824,2.967-9.824,7.209c0,2.375,1.332,4.323,3.775,5.489
			c2.219,1.018,4.963,1.206,8.135,1.421l1.773,0.128c3.031,0.248,4.83,1.547,4.83,3.464c0,2.474-2.713,4.2-6.592,4.2
			c-3.334,0-6.904-1.357-10.059-3.812l-0.615-0.475l-2.506,3.729l0.533,0.407c3.734,2.888,7.881,4.295,12.682,4.295
			c7.621,0,11.094-4.283,11.094-8.259C184.317,126.036,181.019,123.015,175.919,122.427z"/>
		<polygon class="t" fill="#FFF200" points="191.399,112.84 191.399,116.986 201.286,116.986 201.286,137.767 205.651,137.767 
			205.651,116.986 215.54,116.986 215.54,112.84 		"/>
	</g>
	<path class="fork" fill="#FFF200" d="M100.893,132.149c-0.853,0-1.547-0.693-1.547-1.55c0-0.857,0.694-1.55,1.547-1.55h22.786v-2.035v-0.361
		h-22.786c-0.853,0-1.547-0.698-1.547-1.548c0-0.859,0.694-1.556,1.547-1.556h22.786v-0.363v-2.036h-22.786
		c-0.853,0-1.547-0.693-1.547-1.548c0-0.857,0.694-1.553,1.547-1.553h22.786v-2.343l-22.307-2.407
		c-1.346-0.136-2.477-0.271-2.477-0.271c-6.174-0.903-11.078,4.17-11.078,4.17c-6.773,6.164-16.953,5.248-16.953,5.248l-7.486-0.048
		l-58.17-2.842c-4.014-0.102-5.164,4.094-5.152,5.117c0,0,0,0,0,0.004c-0.012,0.074-0.021,0.126-0.027,0.156
		c-0.064,0.509,0,0.963,0,0.963s0.32,5.311,5.18,5.303l62.066-3.318l3.59-0.024c0,0,10.274-0.905,16.279,5.241
		c0,0,4.083,4.514,10.221,4.106c0,0,1.31-0.066,2.556-0.136l23.759-2.504v-2.316H100.893z"/>
</g>
<g>
	<path class="path" fill="none" stroke="#FFF200" stroke-width="2" stroke-miterlimit="10" d="M227.167,124.61
		c0,50.289-40.768,91.055-91.056,91.055c-50.295,0-91.062-40.767-91.062-91.055c0-50.288,40.767-91.054,91.062-91.054
		C186.399,33.556,227.167,74.323,227.167,124.61z"/>
	<path class="path" fill="none" stroke="#FFF200" stroke-width="4" stroke-miterlimit="10" d="M258.625,124.61
		c0,67.662-54.852,122.512-122.513,122.512c-67.67,0-122.521-54.851-122.521-122.512c0-67.661,54.85-122.511,122.521-122.511
		C203.773,2.099,258.625,56.949,258.625,124.61z"/>
	
		<line class="path" fill="none" stroke="#FFF200" stroke-width="2" stroke-miterlimit="10" x1="227.112" y1="121.449" x2="258.593" y2="121.449"/>
	
		<line class="path" fill="none" stroke="#FFF200" stroke-width="2" stroke-miterlimit="10" x1="227.112" y1="125.833" x2="258.593" y2="125.833"/>
</g>
</svg>
</div>

              
            
!

CSS

              
                @import "compass/css3";

.bg {
  background: #333333;
  padding:50px;
  text-align:center;
}

.path {
  stroke-dasharray: 780;
  stroke-dashoffset: 780;
  animation: dash 2s linear alternate forwards;
  animation-delay: 1.5s;
}

@keyframes dash {
  from {
    stroke-dashoffset: 780;
  }
  to {
    stroke-dashoffset: 0;
  }
}

.f,.t,.a,.s {
  fill:rgba(255,242,0,0);
  animation: feast 2s linear alternate forwards;
}
@keyframes feast {
  from {
    fill:rgba(255,242,0,0);
  }
  to {
    fill:rgba(255,242,0,1);
  }
}

.shield {
  fill:rgba(255,242,0,0);
  animation: shield 6s ease alternate forwards;
  animation-delay: 2.5s;
}
@keyframes shield {
  from {
    fill:rgba(255,242,0,0);
  }
  to {
    fill:rgba(255,242,0,1);
  }
}

.fork {
  transform: translateX(-150px);
  animation: fork 0.25s ease alternate forwards;
}
@keyframes fork {
  from {
    transform: translateX(-150px);
  }
  to {
    transform: translateX(0px);
  }
}

.text-top {
  fill:rgba(255,242,0,0);
  animation: tagline 2s linear alternate forwards;
    
  /****** TOP TEXT ******/
  /* F */
  &:nth-child(4) {
    animation-delay: 2.01s;
  }
  /* A */
  &:nth-child(5) {
    animation-delay: 2.02s;
  }
  /* B */
  &:nth-child(6) {
    animation-delay: 2.03s;
  }
  /* U */
  &:nth-child(7) {
    animation-delay: 2.04s;
  }
  /* L */
  &:nth-child(8) {
    animation-delay: 2.05s;
  }
  /* O */
  &:nth-child(9) {
    animation-delay: 2.06s;
  }
  /* U */
  &:nth-child(10) {
    animation-delay: 2.07s;
  }
  /* S */
  &:nth-child(11) {
    animation-delay: 2.08s;
  }
  /* E */
  &:nth-child(12) {
    animation-delay: 2.09s;
  }
  /* A */
   &:nth-child(13) {
    animation-delay: 2.10s;
  }
  /* T */
   &:nth-child(14) {
    animation-delay: 2.11s;
  }
  /* S */
   &:nth-child(15) {
    animation-delay: 2.12s;
  }
  /* F */
   &:nth-child(16) {
    animation-delay: 2.13s;
  }
   /* O */
   &:nth-child(17) {
    animation-delay: 2.14s;
  }
   /* R */
   &:nth-child(18) {
    animation-delay: 2.15s;
  }
   /* S */
   &:nth-child(19) {
    animation-delay: 2.16s;
  }
  /* F */
  &:nth-child(20) {
    animation-delay: 2.17s;
  }
  /* O */
  &:nth-child(21) {
    animation-delay: 2.18s;
  }
  /* R */
  &:nth-child(22) {
    animation-delay: 2.19s;
  }
  /* T */
  &:nth-child(23) {
    animation-delay: 2.20s;
  }
  /* H */
  &:nth-child(24) {
    animation-delay: 2.21s;
  }
  /* E */
  &:nth-child(25) {
    animation-delay: 2.22s;
  }
}
@keyframes tagline {
  from {
    fill:rgba(255,242,0,0);
  }
  to {
    fill:rgba(255,242,0,1);
  }
}

.text-bottom {
  fill:rgba(255,242,0,0);
  animation: tagline-bottom 2s linear alternate forwards;
  /* A */
  &:nth-child(1) {
    animation-delay: 3.01s;
  }
  /* L */
  &:nth-child(2) {
    animation-delay: 3.02s;
  }
  /* L */
  &:nth-child(3) {
    animation-delay: 3.03s;
  }
  /* E */
  &:nth-child(4) {
    animation-delay: 3.04s;
  }
  /* R */
  &:nth-child(5) {
    animation-delay: 3.05s;
  }
  /* G */
  &:nth-child(6) {
    animation-delay: 3.06s;
  }
  /* I */
  &:nth-child(7) {
    animation-delay: 3.07s;
  }
  /* C */
  &:nth-child(8) {
    animation-delay: 3.08s;
  }
  /* + */
  &:nth-child(9) {
    animation-delay: 3.09s;
  }
  /* S */
   &:nth-child(10) {
    animation-delay: 3.10s;
  }
  /* E */
   &:nth-child(11) {
    animation-delay: 3.11s;
  }
  /* N */
   &:nth-child(12) {
    animation-delay: 3.12s;
  }
  /* S */
   &:nth-child(13) {
    animation-delay: 3.13s;
  }
   /* I */
   &:nth-child(14) {
    animation-delay: 3.14s;
  }
   /* V */
   &:nth-child(15) {
    animation-delay: 3.15s;
  }
   
   &:nth-child(16) {
    animation-delay: 3.16s;
  }
   
   &:nth-child(17) {
    animation-delay: 3.17s;
  }
  /* E */
   &:nth-child(18) {
    animation-delay: 3.18s;
  }
   /* T */
   &:nth-child(19) {
    animation-delay: 3.19s;
  }
  /* Y */
   &:nth-child(20) {
    animation-delay: 3.20s;
  }
  /* P */
   &:nth-child(21) {
    animation-delay: 3.21s;
  }
  /* E */
   &:nth-child(22) {
    animation-delay: 3.22s;
  }
  /* S */
   &:nth-child(23) {
    animation-delay: 3.23s;
  }
}
@keyframes tagline-bottom {
  from {
    fill:rgba(255,242,0,0);
  }
  to {
    fill:rgba(255,242,0,1);
  }
}

              
            
!

JS

              
                /*var path = document.querySelector('.path');
var length = path.getTotalLength();*/
              
            
!
999px

Console