HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
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.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
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.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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>
@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);
}
}
/*var path = document.querySelector('.path');
var length = path.getTotalLength();*/
Also see: Tab Triggers