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="content-wrapper flash-outline">
<button id="replay_intro" class="hide"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15" />
</svg></button>
<svg id="main_svg" xmlns="http://www.w3.org/2000/svg" width="926" height="325" viewBox="0 0 926 325" fill="none">
<!-- Filters -->
<defs>
<!-- Screen lines -->
<filter id="screenLines" x="0vw" y="0vh" width="100vw" height="100vh">
<feFlood flood-color="#808080" result="neutral-gray" />
<feTurbulence in="neutral-gray" type="fractalNoise" baseFrequency="0.001 10" numOctaves="10" stitchTiles="stitch" result="noise" />
<feColorMatrix in="noise" type="saturate" values="0" result="destaturatedNoise"></feColorMatrix>
<feComponentTransfer in="desaturatedNoise" result="theNoise">
<feFuncA type="table" tableValues="0 0 0.2 0"></feFuncA>
</feComponentTransfer>
<feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image" />
</filter>
<!-- Screen noise -->
<filter id="noise" x="0vw" y="0vh" width="100vw" height="100vh">
<feFlood flood-color="#808080" result="neutral-gray" />
<feTurbulence in="neutral-gray" type="fractalNoise" baseFrequency="0.3" seed="1" numOctaves="10" stitchTiles="stitch" result="noise" />
<feColorMatrix in="noise" type="saturate" values="0" result="destaturatedNoise"></feColorMatrix>
<feComponentTransfer in="desaturatedNoise" result="theNoise">
<feFuncA type="table" tableValues="0 0 0.2 0"></feFuncA>
</feComponentTransfer>
<feBlend in="SourceGraphic" in2="theNoise" mode="soft-light" result="noisy-image" />
</filter>
<!-- Chromatic Abberation Filter -->
<filter id="Chromatic_aberration">
<feOffset in="SourceGraphic" result="pre-red" dx="-6" dy="-0"></feOffset>
<feOffset in="SourceGraphic" result="yellow" dx="-6" dy="-0"></feOffset>
<feOffset in="SourceGraphic" result="pre-blue" dx="4" dy="4"></feOffset>
<feColorMatrix in="pre-red" type="matrix" result="red" values="0 0 0 0 1
0 0 0 0 0
0 0 0 0 0
0 0 0 1 0"></feColorMatrix>
<feColorMatrix in="pre-blue" type="matrix" result="blue" values="0 0 0 0 0
0 0 0 0 0
0 0 0 0 1
0 0 0 1 0"></feColorMatrix>
<feBlend mode="lighten" in="red" in2="blue" result="main"></feBlend>
<feBlend mode="multiply" in="main" in2="SourceGraphic" result="main1"></feBlend>
<feComposite in="SourceGraphic" in2="main1" operator="xor" result="comp"></feComposite>
<feMerge>
<feMergeNode in="yellow"></feMergeNode>
<feMergeNode in="comp"></feMergeNode>
</feMerge>
</filter>
<!-- Analog noise filter -->
<filter id="Analog_noise">
<feTurbulence type="fractalNoise" baseFrequency="0.0001 0.0001" numOctaves="1" result="warp"></feTurbulence>
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
</filter>
</defs>
<!-- SVG -->
<g xmlns="http://www.w3.org/2000/svg" id="Cyberpunk_logo">
<g id="Bottom_Cyberpunk">
<path id="K" d="M767.5 125.522L786 125.022L773 149.022L878.5 98.5224C877.25 100.474 876.5 101.522 876 102.522C870.5 104.522 866 114.522 864 116.022C862 117.522 839.5 128.022 839.5 128.022C838.5 128.522 836.5 130.522 835.5 131.522L790 155.522C800.681 161.8 806.537 165.278 815.5 171.022C813.032 172.311 811.991 173.085 810.5 174.522C813.617 176.018 815.287 176.884 818 178.522H820C820.252 179.518 820.353 179.858 820.38 179.899C820.098 178.412 820.445 179.996 820.38 179.899C820.412 180.066 820.451 180.271 820.5 180.522L892 221.522L905 229.022C905.037 232.362 905.968 233.079 907.5 234.522C908 236.522 906 236.022 909.5 238.522C910 239.022 909 242.022 911.5 244.022L793 181.522C790.261 179.928 789.654 179.188 789.5 178.022C786.308 176.276 788.517 177.862 765 164.522L746 199.522C740.124 195.478 737.022 193 732 188.022C735 181.022 752.067 149.08 766 123.022L767.5 125.522Z" fill="#52BEDC" />
<path id="N" d="M704.5 133.522H699C699.5 132.522 699 131.522 698 131.022C698.339 130.804 699 129.022 699.5 129.022C699.5 128.522 699.938 127.345 699.5 127.522C698.924 127.85 698.597 128.149 698 129.022C698 129.022 669 181.522 664 193.022L683.5 190.522L698.5 164.522L705.5 193.522L719.5 193.022L753 132.522H735.5C733.5 135.522 714 169.522 714 169.522C710.906 155.65 708.871 147.781 704.5 133.522Z" fill="#52BEDC" />
<g id="U">
<path id="U_2" d="M629.5 161.522V155.022C627.177 156.085 625.865 156.545 623.5 157.022C623.388 156.632 623.384 156.413 623.5 156.022L614.5 160.022C608.207 173.362 605.147 180.912 600.5 194.522L612.5 203.522C618.5 198.022 619.5 197.522 624.268 194.522C632 190.022 639.819 183.613 643 182.022C641.5 185.522 637 194.022 636.5 196.022C639.5 196.022 644.5 201.022 650.5 203.522L674.5 159.022C679 152.522 680 147.022 682.431 145.702C684.221 142.092 686.868 138.087 689 134.522C687.595 132.649 685.313 127.266 684.618 124.948C684.537 124.678 684.589 124.388 684.746 124.154C685.512 123.018 685.634 122.978 687 122.522C685 119.522 687 117.522 687 113.022C685.5 113.022 684.485 115.885 683 116.022L654 163.022L620.5 185.022V184.022C621.195 183.511 621.948 183.022 622 182.522C622.052 182.022 621.788 181.725 621.5 181.522L629.5 161.522Z" fill="#52BEDC" />
<path id="tip" d="M690 107.022C690 107.435 689.66 108.188 689.541 108.719C689.497 108.914 689.437 109.109 689.334 109.281C689.015 109.814 689.178 109.852 689 110.522C689 110.522 689 111.691 689 112.018C689 112.02 689 112.021 689 112.022C689 112.14 689 112.119 689 112.018C688.997 111.525 688.499 112.021 688 111.522H686.5C687.339 109.508 688.179 108.762 688.722 107.687C688.917 107.303 689.29 107.022 689.721 107.022H690Z" fill="#52BEDC" />
</g>
<path id="P" fill-rule="evenodd" clip-rule="evenodd" d="M545.5 130.522L611 127.022C612.686 127.429 613.771 127.546 616 127.522L637 126.022C637.175 125.982 637.346 125.942 637.512 125.904C639.481 125.448 640.815 125.139 642 124.522L657 123.522L653 144.022C638.609 148.932 627.773 152.867 617.482 156.604C597.381 163.904 579.361 170.448 541 182.022L514 236.522C507.109 240.358 503.519 242.788 498 248.022C496.928 248.022 496.144 248.597 495.415 249.13C494.785 249.592 494.196 250.022 493.5 250.022C490.559 254.433 488.766 258.668 487.267 262.207C485.198 267.092 483.69 270.653 480.5 271.522C479.968 271.256 479.577 271.698 479.027 272.32C478.543 272.867 477.936 273.554 477 274.022L519 185.522L507 176.522L526.5 169.522L545.5 130.522ZM626.5 139.522L561 144.022L551.5 163.022C581.71 154.703 598.163 149.588 626.5 139.522Z" fill="#52BEDC" />
<path id="R" fill-rule="evenodd" clip-rule="evenodd" d="M392.5 201.022C403 176.522 422 133.522 427 127.022C458.604 127.444 476.532 128.83 502.491 130.837C507.334 131.211 512.457 131.607 518 132.022L525.5 143.022C522.827 147.272 504.054 152.544 478.142 159.82C472.865 161.301 467.293 162.866 461.5 164.522C468.801 167.404 477.356 170.655 485.465 173.736C498.459 178.674 510.305 183.175 514 185.022C512.971 187.423 509.614 190.528 505.494 194.339C503.606 196.085 501.558 197.98 499.5 200.022C473.61 193.949 456.097 185.833 442.913 179.723C435.473 176.275 429.411 173.465 424 172.022C418.179 186.174 413.896 195.047 407.783 207.71C406.747 209.857 405.658 212.113 404.5 214.522C400.814 210.94 398.512 208.534 392.5 201.022ZM436.5 140.022C434.075 144.918 432.945 147.651 431 152.522L438.5 155.522L491.5 141.522C482 140.522 457.58 139.721 436.5 140.022Z" fill="#52BEDC" />
<path id="E" d="M425.5 130.022L360 129.522L325.158 180.114C324.236 181.454 324.549 183.285 325.865 184.242L334.5 190.522C358.168 183.495 372.406 181.431 396 177.522C400.231 169.292 400.888 167.756 401.5 166.022L351.5 173.522L358.5 161.022L400.5 156.522L407 146.522L366 148.022L369.5 141.522L389 141.022C389 141.022 390 139.022 391.5 138.022H419L425.5 130.022Z" fill="#52BEDC" />
<path id="B" fill-rule="evenodd" clip-rule="evenodd" d="M313 132.522L346.5 133.022L352 143.022L266.5 206.022L244 190.522C275.566 149.144 294.17 126.227 329.5 86.0224H332.634C334.308 83.9189 335.157 83.2402 337 83.0224C336.564 83.4748 336.497 83.6829 336.5 84.0224C337.413 83.7942 338.535 82.2112 340.245 79.7968C342.281 76.9226 345.152 72.8702 349.5 68.5224C350.391 67.854 350.885 66.5897 351.381 65.3228C351.996 63.7467 352.614 62.1664 354 61.7235C354.626 61.5976 355.006 60.817 355.357 60.0966C355.566 59.6662 355.765 59.2572 356 59.0224L357 59.0224C357.895 57.934 359.266 56.4662 360.259 55.4024C360.99 54.6201 361.516 54.0563 361.5 54.0224C362.416 54.0224 360.165 56.8164 358.044 59.4485C356.69 61.1288 355.39 62.7431 355 63.5224C353.47 64.1345 352.876 65.6832 352.187 67.4806C351.751 68.6197 351.276 69.8587 350.5 71.0224C349.23 74.0707 349.637 75.6993 350.149 77.7442C350.645 79.7243 351.238 82.0948 350.5 86.5224C349.5 88.5224 313 132.522 313 132.522ZM303 144.522L324.5 145.522L273.5 180.022L303 144.522Z" fill="#52BEDC" />
<path id="Y" d="M283.5 130.522L260 130.522L230.5 154.022C230.5 154.022 232.5 129.022 232 128.522C232 128.522 231 125.022 229.5 125.022C229.5 125.022 220 130.022 216 134.022C216 134.022 214.5 153.522 218 157.522C221.5 161.522 228 166.022 228 166.022L239 159.022C224 173.522 156.67 262.183 156.5 262.522C156.33 262.861 156.118 262.662 155.5 263.522L160 261.522C161.208 260.222 175.407 242.151 177.5 240.022H178.5L181 237.522C181.5 237.022 183.5 236.522 185.5 236.022C187.5 235.522 193 231.022 198.5 230.022C199.649 229.787 199.5 230.522 200.5 231.022L283.5 130.522Z" fill="#52BEDC" />
<path id="C" d="M211 81.0224L220 86.5224V87.5224L225.5 91.5224C226.377 92.6919 227.03 93.3503 228.5 94.5224L211 103.022L197.5 101.022L100 155.022L187 152.022L197 149.522L199 149.022L210 157.522H217.5L219 159.522L220 164.022L211 173.522C209.899 174.903 209.018 174.774 207 173.022C207 173.022 168 175.022 161 175.522C154 176.022 114 178.522 109 178.522C104 178.522 95.5 178.022 87.5 178.522C81.5592 178.894 62.0459 180.714 52 181.022C49.4661 181.177 48.0439 180.995 45.5 180.022L20 168.522C20 168.522 20.5 167.522 24 166.522C27.5 165.522 22 169.022 40.5 160.522C50 157.022 56.5 155.022 56.5 155.022L55 153.522L74.5 145.022L168.5 100.522L200.5 83.5224L202 84.5224L210 81.0224H211Z" fill="#52BEDC" />
</g>
<g id="Top_Cyberpunk">
<path id="K_2" d="M786 122.022L767.5 122.522L766 120.022L739.5 169.522C743 176.022 741 176.522 742 176.522H743C740.161 181.379 738.796 184.268 736.5 189.522L746 196.522L765 161.522C788.517 174.862 786.308 173.276 789.5 175.022C789.654 176.188 790.261 176.928 793 178.522L911.5 241.022C909 239.022 910 236.022 909.5 235.522C906 233.022 908 233.522 907.5 231.522L896.5 225.522C894.951 225.916 894.076 226.136 892.5 226.522L822 187.522C821.331 184.092 820.916 182.144 820 178.522C819.5 176.522 819.755 176.582 818 175.522C815.287 173.884 813.617 173.018 810.5 171.522C811.991 170.085 813.032 169.311 815.5 168.022C806.537 162.278 800.681 158.8 790 152.522L835.5 128.522C836.5 127.522 838.5 125.522 839.5 125.022C839.5 125.022 862 114.522 864 113.022C866 111.522 870.5 101.522 876 99.5224C876.5 98.5224 877.75 96.4735 879 94.5224L773 146.022L786 122.022Z" fill="#FFF000" />
<path id="N_2" d="M704.5 130.522H699C699.5 129.522 699 128.522 698 128.022C698.339 127.804 699 126.022 699.5 126.022C699.5 125.522 699.938 124.345 699.5 124.522C698.924 124.85 698.597 125.149 698 126.022C698 126.022 669 178.522 664 190.022L683.5 187.522L698.5 161.522L705.5 190.522L719.5 190.022L752.5 129.022L735.5 129.522C733.5 132.522 714 166.522 714 166.522C710.906 152.65 708.871 144.781 704.5 130.522Z" fill="#FFF000" />
<path id="U_3" d="M629.5 158.522V152.022C627.177 153.085 625.865 153.545 623.5 154.022C623.388 153.632 623.384 153.413 623.5 153.022L614.5 157.022C608.207 170.362 605.147 177.912 600.5 191.522L612.5 200.522C618.5 195.022 619.5 194.522 624.268 191.522C632 187.022 639.819 180.613 643 179.022C641.5 182.522 637 191.022 636.5 193.022C639.5 193.022 644.5 198.022 650.5 200.522L674.5 156.022C679 149.522 680 144.022 682.431 142.702C684.221 139.092 685.368 137.087 687.5 133.522C686.221 131.935 685.331 129.991 683.5 125.022C685 121.022 686 122.522 685.5 121.022C683.5 118.022 686.5 116.522 686.5 112.022C685.254 112.666 684.485 112.885 683 113.022L654 160.022L620.5 182.022V181.022C621.195 180.511 621.948 180.022 622 179.522C622.052 179.022 621.788 178.725 621.5 178.522L629.5 158.522Z" fill="#FFF000" />
<path id="P_2" fill-rule="evenodd" clip-rule="evenodd" d="M545.5 127.522L611 124.022C612.686 124.429 613.771 124.546 616 124.522L637 123.022C637.175 122.982 637.346 122.942 637.512 122.904C639.481 122.448 640.815 122.139 642 121.522L657 120.522L653 141.022C638.609 145.932 627.773 149.867 617.482 153.604C597.381 160.904 579.361 167.448 541 179.022L514 233.522C507.109 237.358 503.519 239.788 498 245.022C496.928 245.022 496.144 245.597 495.415 246.13C494.785 246.592 494.196 247.022 493.5 247.022C490.559 251.433 488.766 255.668 487.267 259.207C485.198 264.092 483.69 267.653 480.5 268.522C479.968 268.256 479.577 268.698 479.027 269.32C478.543 269.867 477.936 270.554 477 271.022L519 182.522L507 173.522L526.5 166.522L545.5 127.522ZM626.5 136.522L561 141.022L551.5 160.022C581.71 151.703 598.163 146.588 626.5 136.522Z" fill="#FFF000" />
<path id="R_2" fill-rule="evenodd" clip-rule="evenodd" d="M392.5 198.022C403 173.522 422 130.522 427 124.022C458.604 124.444 476.532 125.83 502.491 127.837C507.334 128.211 512.457 128.607 518 129.022L525.5 140.022C522.827 144.272 504.054 149.544 478.142 156.82C472.865 158.301 467.293 159.866 461.5 161.522C468.801 164.404 477.356 167.655 485.465 170.736C498.459 175.674 510.305 180.175 514 182.022C512.971 184.423 509.614 187.528 505.494 191.339C503.606 193.085 501.558 194.98 499.5 197.022C473.61 190.949 456.097 182.833 442.913 176.723C435.473 173.275 429.411 170.465 424 169.022C418.179 183.174 413.896 192.047 407.783 204.71C406.747 206.857 405.658 209.113 404.5 211.522C400.814 207.94 398.512 205.534 392.5 198.022ZM436.5 137.022C434.075 141.918 432.945 144.651 431 149.522L438.5 152.522L491.5 138.522C482 137.522 457.58 136.721 436.5 137.022Z" fill="#FFF000" />
<path id="E_2" d="M425.5 127.022L360 126.522L323 179.022L335 188.022C358.286 182.02 372 179.522 396 174.522L401.5 162.022L351.5 170.522L358.5 158.022L400.5 153.522L407.5 143.522L366 145.022L369 138.522H388.5C388.5 138.522 390 136.022 391.5 135.022H419L425.5 127.022Z" fill="#FFF000" />
<path id="B_2" fill-rule="evenodd" clip-rule="evenodd" d="M313 129.522L346.5 130.022L352 140.022L266.5 203.022L244 187.522C275.566 146.144 294.17 123.227 329.5 83.0224H332.634C334.308 80.9189 335.157 80.2402 337 80.0224C336.564 80.4749 336.497 80.6829 336.5 81.0224C337.413 80.7942 338.535 79.2112 340.245 76.7968C342.281 73.9226 345.152 69.8702 349.5 65.5224C349.987 65.0357 350.105 64.5489 350.265 63.8913C350.597 62.5224 351.109 60.4132 355.5 56.0224H356.5C358 54.0224 360 52.0224 360 52.0224C360.569 51.7379 358.871 54.2069 357.117 56.756C355.79 58.6855 354.431 60.6608 354 61.5224C352.708 62.8139 351.834 64.314 350.838 66.0225C350.291 66.9597 349.708 67.9597 349 69.0224C348.496 71.0386 348.754 74.0709 349.006 77.031C349.254 79.9437 349.496 82.7866 349 84.5224C348.5 86.5224 313 129.522 313 129.522ZM302.5 141.522L324.5 142.522L273.5 177.022L302.5 141.522Z" fill="#FFF000" />
<path id="Y_2" d="M283 127.522H260L230.5 151.022C230.5 151.022 232.5 126.022 232 125.522C232 125.522 231 122.022 229.5 122.022C229.5 122.022 220 127.022 216 131.022C216 131.022 214.5 150.522 218 154.522C221.5 158.522 228 163.022 228 163.022L239 156.022C224 170.522 156.67 259.183 156.5 259.522C156.329 259.861 154.618 261.162 154 262.022L158.5 260.022C159.708 258.722 174.407 240.651 176.5 238.522H178C178 238.522 179.5 236.522 180 236.022C180.5 235.522 182.5 235.522 184.5 235.022C186.5 234.522 193.35 229.257 194.5 229.022C195.649 228.787 197 229.022 200 228.022L283 127.522Z" fill="#FFF000" />
<path id="C_2" d="M220 83.5225L211 78.0225H210L202 81.5225L200.5 80.5225L168.5 97.5225L74.5 142.022L55 150.522L56.5 152.022C56.5 152.022 50 154.022 40.5 157.522C22 166.022 24 160.522 20.5 161.522C17 162.522 15 165.022 15 165.022L45.5 178.522C45.5 178.522 79.5 176.022 87.5 175.522C95.5 175.022 104 175.522 109 175.522C114 175.522 154 173.022 161 172.522C168 172.022 208.5 170.022 208.5 170.022L216.5 161.522L215.5 155.522L214.5 154.522H210L199 146.022L197 146.522L187 149.022L97.5 152.022L195.5 99.0225L207 100.522L228.5 90.0225L226.5 88.0225L220 84.5225V83.5225Z" fill="#FFF000" />
</g>
</g>
</svg>
</div>
html {
height: 100%;
}
body {
background: rgb(60, 20, 21);
background: linear-gradient(
180deg,
rgba(60, 20, 21, 0.96) 0%,
rgba(6, 13, 19, 0.96) 78%
),
url(https://i.imgur.com/vCGkonp.jpeg);
/* background: linear-gradient(180deg, rgb(78 26 27 / 96%) 0%,
rgba(6,13,19,0.96) 78%),
url(https://i.imgur.com/vCGkonp.jpeg); */
display: flex;
justify-content: center;
/* align-items: stretch; */
align-items: center;
align-content: center;
height: 100%;
}
body.bright-screen {
background: linear-gradient(
180deg,
rgb(78 26 27 / 96%) 0%,
rgba(6, 13, 19, 0.96) 78%
),
url(https://i.imgur.com/vCGkonp.jpeg);
}
body:after {
animation: screenNoise 2s steps(10) infinite;
filter: url(#noise);
content: "";
height: 300%;
left: -50%;
opacity: 0.12;
position: fixed;
top: -110%;
width: 300%;
z-index: 0;
}
body.lines-background:after {
filter: url(#screenLines);
}
.content-wrapper {
width: 100%;
z-index: 1;
display: flex;
justify-content: center;
align-items: flex-start;
align-content: center;
overflow: hidden;
}
.content-wrapper:after {
content: "";
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
outline: 1px solid #ee4d45;
filter: drop-shadow(0px 0px 6px red);
outline-offset: -10px;
margin: 0;
box-sizing: border-box;
pointer-events: none;
}
.content-wrapper.flash-outline:after {
animation: dimOutline 0.2s infinite;
}
/* replay button */
#replay_intro {
position: absolute;
top: 20px;
left: 20px;
filter: drop-shadow(0px 0px 6px red);
border: none;
background: none;
color: #ee4d45;
transition: color 0.2s;
z-index: 1;
animation: fadeIn 1s forwards;
}
#replay_intro:hover {
color: #ff392f;
}
#replay_intro:focus {
outline: 1px solid #ff392f;
}
#replay_intro.hide {
display: none;
}
#replay_intro svg {
width: 20px;
height: 20px;
padding: 5px;
}
svg#main_svg {
max-width: 100%;
padding: 10px;
opacity: 0;
}
svg #Top_Cyberpunk.ca_filter {
filter: url("/#Chromatic_aberration");
-webkit-filter: url("#Chromatic_aberration");
}
svg #Cyberpunk_logo {
-webkit-filter: url("#Analog_noise");
}
/* Keyframes */
@keyframes screenNoise {
0%,
100% {
transform: translate(0, 0);
}
10% {
transform: translate(-5%, -10%);
}
20% {
transform: translate(-15%, 5%);
}
30% {
transform: translate(7%, -25%);
}
40% {
transform: translate(-5%, 25%);
}
50% {
transform: translate(-15%, 10%);
}
60% {
transform: translate(15%, 0%);
}
70% {
transform: translate(0%, 15%);
}
80% {
transform: translate(3%, 35%);
}
90% {
transform: translate(-10%, 10%);
}
}
@keyframes dimOutline {
to {
outline: 1px solid #b33e38;
filter: drop-shadow(0px 0px 3px red);
}
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
const logo = document.getElementById("Cyberpunk_logo");
const analogNoiseTl = analogNoise().pause();
const quickGlitchTl = quickGlitch().pause();
/* Functions that return timelines: */
//Analog noise effect
function analogNoise() {
let turbVal = { val: 0.000001 };
const turb = document.querySelector("#Analog_noise feTurbulence");
const tl = gsap.timeline({
onUpdate: function () {
turb.setAttribute("baseFrequency", "0 " + turbVal.val);
}
});
tl.to(turbVal, 0.2, { val: 0.9 });
tl.to(turbVal, 0.2, { val: 0.000001 });
return tl;
}
//Chromatic abberation effect
function chromaticAbb() {
const logoTop = document.getElementById("Top_Cyberpunk");
let tl = gsap.timeline();
tl.add(function () {
logoTop.classList.add("ca_filter");
}, 0);
tl.add(function () {
logoTop.classList.remove("ca_filter");
}, 0.8);
return tl;
}
//Chromatic abberation + analog noise (faster effect).
function quickGlitch() {
const tl = gsap
.timeline()
.add(analogNoise().timeScale(3))
.add(chromaticAbb().timeScale(3), "-=0.3");
return tl;
}
// flash animated lines background
function flashLinesBg() {
const tl = gsap.timeline()
.add(()=>{document.body.classList.add('lines-background')}, 0.1)
.add(()=>{document.body.classList.remove('lines-background')}, 0.2)
return tl
}
// flicker
function flicker() {
const wrapperEl = document.querySelector('.content-wrapper');
const tl = gsap.timeline();
tl
.add(()=>{wrapperEl.classList.add('flash-outline')}, 0)
.add(()=>{document.body.classList.remove('bright-screen'), 0})
.add(flashLinesBg(), 0.2)
.add(flashLinesBg(), 0.5)
.add(flashLinesBg(), 0.8)
.add(()=>{document.body.classList.add('bright-screen')}, 0.9)
.add(()=>{document.body.classList.remove('bright-screen'), 1})
.add(()=>{wrapperEl.classList.remove('flash-outline')}, 1.2)
.add(()=>{document.body.classList.add('bright-screen')})
return tl;
}
/* Zoom logo in */
function zoomIn() {
const tl = gsap.timeline();
tl.set('svg#main_svg', {transformOrigin: 'center'})
tl.fromTo('svg#main_svg', {scale: 2.5, opacity: 0} ,{scale:1, opacity:1, duration: 0.7})
return tl;
}
/* Intro timeline */
function intro() {
const tl = gsap.timeline();
tl.addLabel('intro');
tl.add(flicker(), '#intro');
tl.add(zoomIn(), '#intro+=1.3');
return tl;
}
/* Main timeline: */
const master = gsap.timeline();
master
.add(intro())
.add(analogNoise(), "+=1")
.add(chromaticAbb(), "-=0.1")
.add(quickGlitch, "+=0.6");
/* Helper Functions: */
//randomly play animation with or without chromatic abberation
function playRandomLogoGlitch() {
const randomBoolean = Math.random() < 0.5;
// analogNoiseTl.restart().pause();
// quickGlitchTl.restart().pause();
randomBoolean ? quickGlitchTl.restart() : analogNoiseTl.restart();
}
/* Event Listeners: */
logo.addEventListener("mouseover", playRandomLogoGlitch);
logo.addEventListener("mousedown", playRandomLogoGlitch);
document.body.addEventListener("mousedown", ()=>{
document.body.classList.add('lines-background')
})
document.body.addEventListener("mouseup", ()=>{
document.body.classList.remove('lines-background')
})
/* Add replay button funtionality */
//replay animation
const replayBtn = document.getElementById('replay_intro')
replayBtn.addEventListener('click', ()=> {
master.restart();
})
//stop button getting focus on click
replayBtn.addEventListener('mousedown', e => {
e.preventDefault();
})
//fade in replay button after main animation (but only once).
setTimeout(()=>{replayBtn.classList.remove('hide')}, 5500)
Also see: Tab Triggers