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="container">
<div id="content">
<div class="neon">
<svg width="622px" height="484px" viewBox="-20 -140 722 684" preserveAspectRatio="xMinYMin" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Static neon filter for slight blur -->
<filter id="static_blur" x="-50%" y="-50%" width="200%" height="200%" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceGraphic" stdDeviation="1" />
</filter>
<!-- Filter for neon glow -->
<filter id="neon_glow" x="-50%" y="-50%" width="200%" height="200%" filterUnits="userSpaceOnUse">
<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
</filter>
<!-- Start of neon glow -->
<g id="Static_Neon" stroke="none" stroke-width="8" fill="none" fill-rule="evenodd">
<g id="Static_F1" transform="translate(1.000000, 1.000000)" stroke="#979797">
<g id="Yellow_Letters_Glow" filter="url(#neon_glow)" stroke="#F2D02B" transform="translate(0.000000, 28.000000)">
<path d="M203.121094,1.046875 L143.957031,1.046875 L143.957031,83.7460938 L105.65625,83.7460938 L105.65625,1.046875 L46.4375,1.046875 L46.4375,208.65625 L105.65625,208.65625 L105.65625,130.496094 L143.957031,130.496094 L143.957031,208.65625 L203.121094,208.65625 C203.121094,90.0117187 203.121094,27.3958333 203.121094,20.8085938" id="H"></path>
<path d="M233.667969,57.9804688 C221,81.484375 221,95.3669065 221,101.5 C221,161.97518 270.02482,211 330.5,211 C390.97518,211 440,161.97518 440,101.5 C440,88.2789135 440,76.8085938 429.4375,57.9804688" id="Oval"></path>
<path class="chicken_f1_glow off" d="M398.964844,22.8164062 C391.707031,10.3528646 382.364583,3.0625 370.9375,0.9453125" id="Path-3"></path>
<polyline id="T-ON" points="454.019531 4.9140625 451.212891 51.7949219 491.199219 51.7949219 491.199219 208.8125 549.246094 208.8125 549.246094 51.7949219 586.484375 51.7949219 589.960938 4.9140625"></polyline>
<path d="M92.9375,236.507812 C99.4348958,236.135417 107.050781,238 115.785156,242.101563 C124.519531,246.203125 132.763021,251.854818 140.515625,259.056641 C154.485677,270.98763 162.175781,296.94401 163.585938,336.925781 C165.701172,396.898438 155.929688,443.042969 92.9375,452.597656 C29.9453125,462.152344 10.1894531,408.404297 9.3828125,407.59375 C8.57617188,406.783203 -12.8359375,325.755859 12.921875,276.953125 C21.6457506,260.424199 29.5182402,254.506325 39.1367188,248.253906 C45.3462602,244.217441 55.5129269,241.156894 69.6367188,239.072266" id="OuterO-ON"></path>
<path d="M92.1992188,286.552734 C95.8619792,286.92513 99.016276,289.376953 101.662109,293.908203 C105.630859,300.705078 106.464844,354.259766 105.630859,367.476563 C104.796875,380.693359 102.8125,392.511719 92.1992188,396.591797 C81.5859375,400.671875 71.84375,396.591797 72.1035156,396.591797 C72.252724,396.591797 66.2174437,394.854273 62.5605469,388.222656 C59.8509356,383.308899 59.0805005,374.982696 58.2949219,367.476563 C55.6367188,342.07767 55.3476562,304.625 62.5605469,293.908203 C67.3691406,286.763672 70.5501302,284.311849 72.1035156,286.552734" id="InnerO-ON"></path>
<path d="M336.054688,241.466797 L285.445312,241.466797 C287.408854,306.582682 287.408854,339.200521 285.445312,339.320312 C283.481771,339.440104 268.791667,306.822266 241.375,241.466797 L184.630859,241.466797 L184.630859,445.029297 L234.804688,445.029297 C233.341146,384.929036 233.341146,354.732422 234.804688,354.439453 C236.268229,354.146484 251.53125,384.343099 280.59375,445.029297 L336.054688,445.029297 L336.054688,260.476562" id="N-ON"></path>
<polyline id="E-ON" points="473.964844 241.394531 357.222656 241.394531 357.222656 447.275391 470.15625 447.275391 473.964844 401.384766 415.59375 401.384766 415.59375 367.990234 463.0625 367.990234 463.0625 323.361328 415.59375 323.361328 415.59375 292.001953 470.15625 292.001953 473.964844 259.589844"></polyline>
<path d="M616.195313,244.326172 C577.346354,236.802734 551.402344,234.921875 538.363281,238.683594 C525.324219,242.445312 513.919922,248.759115 504.150391,257.625 C495.781901,266.393229 490.914714,279.397786 489.548828,296.638672 C487.5,322.5 506,341.294922 509,345.5 C512,349.705078 532.365234,367.761719 549.125,376.861328 C560.298177,382.927734 564.305339,389.707031 561.146484,397.199219 C556.705078,402.36849 549.811849,404.309245 540.466797,403.021484 C526.449219,401.089844 501,389 498.632813,392.410156 C496.265625,395.820312 491.484375,436.820312 495.058594,441.660156 C498.632813,446.5 525.316406,450.519531 540.466797,451.070313 C555.617188,451.621094 582.300781,452.912109 601.402344,437.589844 C614.136719,427.375 620.503906,411.406901 620.503906,389.685547 C620.210938,370.603516 616.005859,356.139974 607.888672,346.294922 C599.771484,336.44987 582.135927,324.920573 554.981999,311.707031 C547.172667,307.75 545.220334,302.727214 549.125,296.638672 C553.029666,290.55013 560.477583,288.451823 571.46875,290.34375 C592.00651,294.540365 604.146484,296.638672 607.888672,296.638672 C611.630859,296.638672 613.501953,285.283203 613.501953,262.572266" id="S-ON"></path>
</g>
<g id="White_Head_Glow" filter="url(#neon_glow)" stroke="#fefefe" transform="translate(269.000000, 40.000000)">
<path d="M128.724609,141.830078 C103.53125,114.599609 95.1334635,88.7395833 103.53125,64.25" id="Path-5"></path>
<path d="M12.3359375,162.675781 C14.6653646,139.789063 14.6653646,122.611979 12.3359375,111.144531 C10.0065104,99.6770833 6.6015625,87.8183594 2.12109375,75.5683594 C-1.60677083,51.9628906 1.79817708,33.5605469 12.3359375,20.3613281 C22.8736979,7.16210937 40.9095052,0.5625 66.4433594,0.5625 C76.9238281,1.76171875 84.8248698,6.74934896 90.1464844,15.5253906" id="Path-7"></path>
</g>
<g id="Gobbler_Glow" filter="url(#neon_glow)" stroke="#DC0000" transform="translate(262.000000, 0.000000)">
<path d="M131.685547,108.919922 C129.475911,111.621745 129.475911,114.89388 131.685547,118.736328 C135,124.5 139.250307,125.212377 137.5,130 C135.749693,134.787623 127.383855,139.517267 125.9375,134.458984" id="Path-9"></path>
<path d="M69.7988281,19.7285156 C64.2923177,9.76888021 57.7154948,3.57617187 50.0683594,1.15039062 C42.421224,-1.27539063 36.6686198,1.82096354 32.8105469,10.4394531 C31.2207031,14.000651 30.4466146,17.0970052 30.4882813,19.7285156 C30.5507812,23.6757813 18.3398437,11.9785156 8.14648437,19.7285156 C1.35091146,24.8951823 -0.916015625,30.9375 1.34570312,37.8554688 C1.35742187,43.3528646 3.62434896,47.7167969 8.14648437,50.9472656" id="Path-11"></path>
</g>
</g>
</g>
<!-- End of neon glow -->
<!-- Start of static neon -->
<g id="Static_Neon" stroke="none" stroke-width="6" fill="none" fill-rule="evenodd">
<g id="Static_F1" transform="translate(1.000000, 1.000000)" stroke="#979797">
<g id="Yellow_Letters" filter="url(#static_blur)" stroke="#FFF19B" transform="translate(0.000000, 28.000000)">
<path d="M203.121094,1.046875 L143.957031,1.046875 L143.957031,83.7460938 L105.65625,83.7460938 L105.65625,1.046875 L46.4375,1.046875 L46.4375,208.65625 L105.65625,208.65625 L105.65625,130.496094 L143.957031,130.496094 L143.957031,208.65625 L203.121094,208.65625 C203.121094,90.0117187 203.121094,27.3958333 203.121094,20.8085938" id="H"></path>
<path d="M233.667969,57.9804688 C221,81.484375 221,95.3669065 221,101.5 C221,161.97518 270.02482,211 330.5,211 C390.97518,211 440,161.97518 440,101.5 C440,88.2789135 440,76.8085938 429.4375,57.9804688" id="Oval"></path>
<path class="chicken_f1_static off" d="M398.964844,22.8164062 C391.707031,10.3528646 382.364583,3.0625 370.9375,0.9453125" id="Path-3"></path>
<polyline id="T-ON" points="454.019531 4.9140625 451.212891 51.7949219 491.199219 51.7949219 491.199219 208.8125 549.246094 208.8125 549.246094 51.7949219 586.484375 51.7949219 589.960938 4.9140625"></polyline>
<path d="M92.9375,236.507812 C99.4348958,236.135417 107.050781,238 115.785156,242.101563 C124.519531,246.203125 132.763021,251.854818 140.515625,259.056641 C154.485677,270.98763 162.175781,296.94401 163.585938,336.925781 C165.701172,396.898438 155.929688,443.042969 92.9375,452.597656 C29.9453125,462.152344 10.1894531,408.404297 9.3828125,407.59375 C8.57617188,406.783203 -12.8359375,325.755859 12.921875,276.953125 C21.6457506,260.424199 29.5182402,254.506325 39.1367188,248.253906 C45.3462602,244.217441 55.5129269,241.156894 69.6367188,239.072266" id="OuterO-ON"></path>
<path d="M92.1992188,286.552734 C95.8619792,286.92513 99.016276,289.376953 101.662109,293.908203 C105.630859,300.705078 106.464844,354.259766 105.630859,367.476563 C104.796875,380.693359 102.8125,392.511719 92.1992188,396.591797 C81.5859375,400.671875 71.84375,396.591797 72.1035156,396.591797 C72.252724,396.591797 66.2174437,394.854273 62.5605469,388.222656 C59.8509356,383.308899 59.0805005,374.982696 58.2949219,367.476563 C55.6367188,342.07767 55.3476562,304.625 62.5605469,293.908203 C67.3691406,286.763672 70.5501302,284.311849 72.1035156,286.552734" id="InnerO-ON"></path>
<path d="M336.054688,241.466797 L285.445312,241.466797 C287.408854,306.582682 287.408854,339.200521 285.445312,339.320312 C283.481771,339.440104 268.791667,306.822266 241.375,241.466797 L184.630859,241.466797 L184.630859,445.029297 L234.804688,445.029297 C233.341146,384.929036 233.341146,354.732422 234.804688,354.439453 C236.268229,354.146484 251.53125,384.343099 280.59375,445.029297 L336.054688,445.029297 L336.054688,260.476562" id="N-ON"></path>
<polyline id="E-ON" points="473.964844 241.394531 357.222656 241.394531 357.222656 447.275391 470.15625 447.275391 473.964844 401.384766 415.59375 401.384766 415.59375 367.990234 463.0625 367.990234 463.0625 323.361328 415.59375 323.361328 415.59375 292.001953 470.15625 292.001953 473.964844 259.589844"></polyline>
<path d="M616.195313,244.326172 C577.346354,236.802734 551.402344,234.921875 538.363281,238.683594 C525.324219,242.445312 513.919922,248.759115 504.150391,257.625 C495.781901,266.393229 490.914714,279.397786 489.548828,296.638672 C487.5,322.5 506,341.294922 509,345.5 C512,349.705078 532.365234,367.761719 549.125,376.861328 C560.298177,382.927734 564.305339,389.707031 561.146484,397.199219 C556.705078,402.36849 549.811849,404.309245 540.466797,403.021484 C526.449219,401.089844 501,389 498.632813,392.410156 C496.265625,395.820312 491.484375,436.820312 495.058594,441.660156 C498.632813,446.5 525.316406,450.519531 540.466797,451.070313 C555.617188,451.621094 582.300781,452.912109 601.402344,437.589844 C614.136719,427.375 620.503906,411.406901 620.503906,389.685547 C620.210938,370.603516 616.005859,356.139974 607.888672,346.294922 C599.771484,336.44987 582.135927,324.920573 554.981999,311.707031 C547.172667,307.75 545.220334,302.727214 549.125,296.638672 C553.029666,290.55013 560.477583,288.451823 571.46875,290.34375 C592.00651,294.540365 604.146484,296.638672 607.888672,296.638672 C611.630859,296.638672 613.501953,285.283203 613.501953,262.572266" id="S-ON"></path>
</g>
<g id="White_Head" filter="url(#static_blur)" stroke="#fefefe" transform="translate(269.000000, 40.000000)">
<path d="M128.724609,141.830078 C103.53125,114.599609 95.1334635,88.7395833 103.53125,64.25" id="Path-5"></path>
<path d="M12.3359375,162.675781 C14.6653646,139.789063 14.6653646,122.611979 12.3359375,111.144531 C10.0065104,99.6770833 6.6015625,87.8183594 2.12109375,75.5683594 C-1.60677083,51.9628906 1.79817708,33.5605469 12.3359375,20.3613281 C22.8736979,7.16210937 40.9095052,0.5625 66.4433594,0.5625 C76.9238281,1.76171875 84.8248698,6.74934896 90.1464844,15.5253906" id="Path-7"></path>
</g>
<g id="Gobbler" filter="url(#static_blur)" stroke="#FF6300" transform="translate(262.000000, 0.000000)">
<path d="M131.685547,108.919922 C129.475911,111.621745 129.475911,114.89388 131.685547,118.736328 C135,124.5 139.250307,125.212377 137.5,130 C135.749693,134.787623 127.383855,139.517267 125.9375,134.458984" id="Path-9"></path>
<path d="M69.7988281,19.7285156 C64.2923177,9.76888021 57.7154948,3.57617187 50.0683594,1.15039062 C42.421224,-1.27539063 36.6686198,1.82096354 32.8105469,10.4394531 C31.2207031,14.000651 30.4466146,17.0970052 30.4882813,19.7285156 C30.5507812,23.6757813 18.3398437,11.9785156 8.14648437,19.7285156 C1.35091146,24.8951823 -0.916015625,30.9375 1.34570312,37.8554688 C1.35742187,43.3528646 3.62434896,47.7167969 8.14648437,50.9472656" id="Path-11"></path>
</g>
</g>
</g>
<!-- End of static neon -->
<!-- Start of chicken f1 on -->
<!-- Neon glow -->
<g id="Chicken-F1-GLOW" class="chicken_f1_glow off" fill="none" filter="url(#neon_glow)" stroke="#F2D02B" stroke-width="5" transform="translate(316.000000, 0.000000)">
<path d="M55.2773438,66.6484375 C77.3864673,70.5517123 88.7940193,74.3355664 89.5,78 C90.558971,83.4966503 82.2109375,83.5195312 59.828125,90.2695312" id="Path-2"></path>
<path d="M58.03125,95.3789062 L88.8867188,90.5546875" id="Path-4"></path>
<circle id="Eye-ON" cx="15" cy="88" r="15"></circle>
<path d="M260.507812,35.796875 L153.59375,35.796875" id="TTop-ON" ></path>
<path stroke="#DC0000" class="chicken_f1_glow off" d="M38.3964844,27.25 C40.1191406,17.140625 40.1191406,10.156901 38.3964844,6.29882812 C36.6738281,2.44075521 31.671875,0.51171875 23.390625,0.51171875" id="Path-10" ></path>
</g>
<!-- Chicken on static neon -->
<g id="Chicken-F1-ON" class="chicken_f1_static off" filter="url(#static_blur)" fill="none" stroke="#FFF19B" stroke-width="5" transform="translate(316.000000, 0.000000)">
<path d="M55.2773438,66.6484375 C77.3864673,70.5517123 88.7940193,74.3355664 89.5,78 C90.558971,83.4966503 82.2109375,83.5195312 59.828125,90.2695312" id="Path-2"></path>
<path d="M58.03125,95.3789062 L88.8867188,90.5546875" id="Path-4"></path>
<circle id="Eye-ON" cx="15" cy="88" r="15"></circle>
<path d="M260.507812,35.796875 L153.59375,35.796875" id="TTop-ON" ></path>
<path class="chicken_f1_static off" stroke="#FF6300" d="M38.3964844,27.25 C40.1191406,17.140625 40.1191406,10.156901 38.3964844,6.29882812 C36.6738281,2.44075521 31.671875,0.51171875 23.390625,0.51171875" id="Path-10" ></path>
</g>
<!-- End of chicken f1 on -->
<!-- Start of chicken f2 -->
<!-- Chicken f2 glow -->
<g id="Chicken-F2-GLOW" filter="url(#neon_glow)" class="chicken_f2_glow" stroke="#DC0000" fill="none" transform="translate(239.000000, -128)" stroke-width="5" stroke="#979797">
<path d="M21.5,205 C11.8333333,205 5.33333333,201.333333 2,194 C-1.33333333,186.666667 1.91666667,181.166667 11.75,177.5" id="Path-6"></path>
<path d="M177,209 L195,201.5" id="Path-8"></path>
<path d="M167,194 C181.333333,180 190.166667,169.666667 193.5,163 C196.833333,156.333333 201.5,146.333333 207.5,133 C222.5,108 231.166667,92.6666667 233.5,87 C237,78.5 238.458395,63.3929098 241.5,66 C244.541605,68.6070902 243.5,91.5 244,96 C244.5,100.5 237.657261,114.211618 241.5,113.5 C245.342739,112.788382 255,100 257.5,93.5 C259.166667,89.1666667 267.666667,80.8333333 283,68.5 C305,55.8333333 316.833333,48.8333333 318.5,47.5 C321,45.5 337,29 340,25.5 C343,22 344.797307,9.37845449 345.5,15 C346.202693,20.6215455 344,35.5 342,41.5 C340,47.5 328.012447,60.5124469 331,63.5 C333.987553,66.4875531 350,57 355,54.5 C360,52 377,36 380,35 C383,34 399.5,20 401.5,14.5 C403.5,9 410.981242,-3.94275453 412,2 C413.018758,7.94275453 410.5,23.5 407.5,32.5 C405.5,38.5 399.166667,48.8333333 388.5,63.5 C382.166667,71.8333333 378.166667,77.3333333 376.5,80 C374.833333,82.6666667 384.166667,78.8333333 404.5,68.5 C415.5,59.8333333 422.5,54.1666667 425.5,51.5 C428.5,48.8333333 423.333333,60.6666667 410,87 C399,100.666667 392.666667,108.166667 391,109.5 C388.5,111.5 378.5,120 376.5,121.5 C375.166667,122.5 373.333333,127 371,135" id="Path-12"></path>
<path d="M215.5,148 C223.833333,137.666667 234.5,132 247.5,131 C267,129.5 270,132 276.5,129.5 C283,127 293.579955,110.424424 296,111.5 C298.420045,112.575576 285.5,130 285.5,133.5 C285.5,137 289.867584,137.677831 299.5,134 C305.921611,131.548112 310.254944,128.381446 312.5,124.5 L333,105 C344.930979,95.1634681 350.264312,91.9968014 349,95.5 C347.103532,100.754798 335,115.979167 328.5,121.739583 C322,127.5 324.164944,134.563552 326,137 C327.835056,139.436448 334,141 341.5,139 C349,137 358.788819,115.929606 362,117 C365.211181,118.070394 351.5,143.5 353.5,145.5" id="Path-13"></path>
<g id="Chicken_F2_GLOW" class="chicken_f2_glow" stroke="#FFF19B" transform="translate(123.000000, 175.000000)">
<path d="M21,46 L49,54" id="Path-16"></path>
<path d="M17,29 C30.5193679,13.9343256 35.8527012,5.10099232 33,2.5 C28.7209481,-1.40148847 16.5,-2 0,13.5" id="Path-17"></path>
</g>
<g id="X-EYE" class="chicken_f2_glow" stroke="#FFF19B" transform="translate(77.000000, 202.000000)">
<path d="M30,21 L0.5,6.5" id="Path-14"></path>
<path d="M22.5,0.5 L8,26" id="Path-15"></path>
</g>
</g>
<!-- End of f2 glow -->
<g id="Chicken-F2-STATIC" class="chicken_f2_static" filter="url(#static_blur)" stroke="#FF6300" fill="none" transform="translate(239.000000, -128)" stroke-width="5">
<path d="M21.5,205 C11.8333333,205 5.33333333,201.333333 2,194 C-1.33333333,186.666667 1.91666667,181.166667 11.75,177.5" id="Path-6"></path>
<path d="M177,209 L195,201.5" id="Path-8"></path>
<path d="M167,194 C181.333333,180 190.166667,169.666667 193.5,163 C196.833333,156.333333 201.5,146.333333 207.5,133 C222.5,108 231.166667,92.6666667 233.5,87 C237,78.5 238.458395,63.3929098 241.5,66 C244.541605,68.6070902 243.5,91.5 244,96 C244.5,100.5 237.657261,114.211618 241.5,113.5 C245.342739,112.788382 255,100 257.5,93.5 C259.166667,89.1666667 267.666667,80.8333333 283,68.5 C305,55.8333333 316.833333,48.8333333 318.5,47.5 C321,45.5 337,29 340,25.5 C343,22 344.797307,9.37845449 345.5,15 C346.202693,20.6215455 344,35.5 342,41.5 C340,47.5 328.012447,60.5124469 331,63.5 C333.987553,66.4875531 350,57 355,54.5 C360,52 377,36 380,35 C383,34 399.5,20 401.5,14.5 C403.5,9 410.981242,-3.94275453 412,2 C413.018758,7.94275453 410.5,23.5 407.5,32.5 C405.5,38.5 399.166667,48.8333333 388.5,63.5 C382.166667,71.8333333 378.166667,77.3333333 376.5,80 C374.833333,82.6666667 384.166667,78.8333333 404.5,68.5 C415.5,59.8333333 422.5,54.1666667 425.5,51.5 C428.5,48.8333333 423.333333,60.6666667 410,87 C399,100.666667 392.666667,108.166667 391,109.5 C388.5,111.5 378.5,120 376.5,121.5 C375.166667,122.5 373.333333,127 371,135" id="Path-12"></path>
<path d="M215.5,148 C223.833333,137.666667 234.5,132 247.5,131 C267,129.5 270,132 276.5,129.5 C283,127 293.579955,110.424424 296,111.5 C298.420045,112.575576 285.5,130 285.5,133.5 C285.5,137 289.867584,137.677831 299.5,134 C305.921611,131.548112 310.254944,128.381446 312.5,124.5 L333,105 C344.930979,95.1634681 350.264312,91.9968014 349,95.5 C347.103532,100.754798 335,115.979167 328.5,121.739583 C322,127.5 324.164944,134.563552 326,137 C327.835056,139.436448 334,141 341.5,139 C349,137 358.788819,115.929606 362,117 C365.211181,118.070394 351.5,143.5 353.5,145.5" id="Path-13"></path>
<g id="Open-Mouth" class="chicken_f2_static hideonoff" stroke="#FFF19B" transform="translate(123.000000, 175.000000)">
<path d="M21,46 L49,54" id="Path-16"></path>
<path d="M17,29 C30.5193679,13.9343256 35.8527012,5.10099232 33,2.5 C28.7209481,-1.40148847 16.5,-2 0,13.5" id="Path-17"></path>
</g>
<g id="Chicken-F2-STATIC-EYE" class="chicken_f2_static hideonoff" stroke="#FFF19B" transform="translate(77.000000, 202.000000)">
<path d="M30,21 L0.5,6.5" id="Path-14"></path>
<path d="M22.5,0.5 L8,26" id="Path-15"></path>
</g>
</g>
<!-- End of chicken f2 -->
</svg>
</div>
</div>
</div>
body,
html {
position: relative;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
background: radial-gradient(ellipse at center, rgb(49, 44, 24) 0%, rgba(0, 0, 0, 0.73) 100%)
}
.container {
display: flex;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
}
.neon {
width: 100%;
height: auto;
animation: flicker 2s linear infinite;
}
.neon svg {
width: 100%;
height: auto;
}
.off.hideonoff{
opacity: 0;
}
.chicken_f2_static.off{
stroke: #222;
}
.chicken_f2_glow.off{
stroke: none;
}
.chicken_f1_static.off{
stroke: #222;
}
.chicken_f1_glow.off{
stroke: none;
}
@keyframes flicker {
from {
opacity: 1;
}
4% {
opacity: .9;
}
6% {
opacity: .85;
}
8% {
opacity: .95;
}
10% {
opacity: .90;
}
11% {
opacity: .922;
}
12% {
opacity: .9;
}
14% {
opacity: .95;
}
16% {
opacity: .98;
}
17% {
opacity: .9;
}
19% {
opacity: .93;
}
20% {
opacity: .99;
}
24% {
opacity: 1;
}
26% {
opacity: .94;
}
28% {
opacity: .98;
}
37% {
opacity: .93;
}
38% {
opacity: .5;
}
39% {
opacity: .96;
}
42% {
opacity: 1;
}
44% {
opacity: .97;
}
46% {
opacity: .94;
}
56% {
opacity: .9;
}
58% {
opacity: .9;
}
60% {
opacity: .99;
}
68% {
opacity: 1;
}
70% {
opacity: .9;
}
72% {
opacity: .95;
}
93% {
opacity: .93;
}
95% {
opacity: .95;
}
97% {
opacity: .93;
}
to {
opacity: 1;
}
}
setInterval(function() {
$('.chicken_f2_static').toggleClass('off');
$('.chicken_f2_glow').toggleClass('off');
$('.chicken_f1_static').toggleClass('off');
$('.chicken_f1_glow').toggleClass('off');
}, 2000);
Also see: Tab Triggers