Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              svg.platform__graphic-wave.platform__graphic-wave--top(xmlns='http://www.w3.org/2000/svg' width='649' height='139' viewBox='0 0 649 139')
            g#wave-g__top(fill='none' fill-rule='evenodd')
              g#wave-g__top--1(opacity='.013')
                path(fill='#02DFEC' d='M59.656 84.78l61.544 27.402 14.052-31.561L73.708 53.22z' opacity='.198')
                path(fill='#6E95FA' d='M.219 52.645l61.544 27.402 6.324-14.203L6.542 38.442z' opacity='.198')
                path(fill='#02DFEC' d='M59.656 84.78l61.544 27.402 2.108-4.734-61.545-27.401z')
                path(fill='#6E95FA' d='M.219 52.645l61.544 27.402 2.108-4.734L2.327 47.91z')
              g#wave-g__top--2(opacity='.025')
                path(fill='#02DFEC' d='M66.019 84.526l60.55 29.533 15.146-31.052-60.551-29.533z' opacity='.198')
                path(fill='#6E95FA' d='M7.74 50.336l60.55 29.532 6.816-13.973-60.55-29.533z' opacity='.198')
                path(fill='#02DFEC' d='M66.019 84.526l60.55 29.533 2.272-4.658-60.55-29.533z')
                path(fill='#6E95FA' d='M7.74 50.336l60.55 29.532 2.272-4.657-60.55-29.533z')
              g#wave-g__top--3(opacity='.037')
                path(fill='#02DFEC' d='M72.391 84.252l59.484 31.628 16.219-30.504L88.61 53.748z' opacity='.198')
                path(fill='#6E95FA' d='M15.34 48.049l59.484 31.628 7.299-13.727L22.64 34.322z' opacity='.198')
                path(fill='#02DFEC' d='M72.391 84.252l59.484 31.628 2.432-4.575-59.483-31.628z')
                path(fill='#6E95FA' d='M15.34 48.049l59.484 31.628 2.433-4.576-59.483-31.628z')
              g#wave-g__top--4(opacity='.05')
                path(fill='#02DFEC' d='M78.774 83.96l58.343 33.684 17.274-29.92L96.048 54.04z' opacity='.198')
                path(fill='#6E95FA' d='M23.021 45.788l58.344 33.684 7.773-13.464-58.343-33.684z' opacity='.198')
                path(fill='#02DFEC' d='M78.774 83.96l58.343 33.684 2.59-4.487-58.342-33.685z')
                path(fill='#6E95FA' d='M23.021 45.788l58.344 33.684 2.59-4.488L25.613 41.3z')
              g#wave-g__top--5(opacity='.063')
                path(fill='#02DFEC' d='M85.166 83.65l57.132 35.7 18.308-29.299-57.132-35.7z' opacity='.198')
                path(fill='#6E95FA' d='M30.78 43.555l57.132 35.7 8.239-13.185-57.132-35.7z' opacity='.198')
                path(fill='#02DFEC' d='M85.166 83.65l57.132 35.7 2.747-4.395-57.133-35.7z')
                path(fill='#6E95FA' d='M30.78 43.555l57.132 35.7 2.746-4.395-57.132-35.7z')
              g#wave-g__top--6(opacity='.075')
                path(fill='#02DFEC' d='M91.57 83.321l55.852 37.672 19.319-28.641-55.852-37.673z' opacity='.198')
                path(fill='#6E95FA' d='M38.617 41.353l55.851 37.672 8.694-12.89L47.31 28.465z' opacity='.198')
                path(fill='#02DFEC' d='M91.57 83.321l55.852 37.672 2.897-4.296-55.851-37.672z')
                path(fill='#6E95FA' d='M38.617 41.353l55.851 37.672 2.898-4.296-55.852-37.672z')
              g#wave-g__top--7(opacity='.087')
                path(fill='#02DFEC' d='M97.986 82.975l54.503 39.599 20.306-27.95-54.502-39.599z' opacity='.198')
                path(fill='#6E95FA' d='M46.53 39.184l54.502 39.599 9.138-12.578-54.502-39.598z' opacity='.198')
                path(fill='#02DFEC' d='M97.986 82.975l54.503 39.599 3.046-4.193-54.503-39.598z')
                path(fill='#6E95FA' d='M46.53 39.184l54.502 39.599 3.046-4.193-54.503-39.598z')
              g#wave-g__top--8(opacity='.1')
                path(fill='#02DFEC' d='M104.414 82.612l53.088 41.477 21.27-27.224-53.088-41.477z' opacity='.198')
                path(fill='#6E95FA' d='M54.517 37.052l53.087 41.477 9.572-12.251L64.09 24.8z' opacity='.198')
                path(fill='#02DFEC' d='M104.414 82.612l53.088 41.477 3.19-4.084-53.088-41.476z')
                path(fill='#6E95FA' d='M54.517 37.052l53.087 41.477 3.19-4.084L57.708 32.97z')
              g#wave-g__top--9(opacity='.113')
                path(fill='#02DFEC' d='M110.855 82.233l51.608 43.304 22.207-26.465-51.608-43.304z' opacity='.198')
                path(fill='#6E95FA' d='M62.578 34.96l51.608 43.303 9.993-11.91L72.572 23.05z' opacity='.198')
                path(fill='#02DFEC' d='M110.855 82.233l51.608 43.304 3.33-3.97-51.607-43.304z')
                path(fill='#6E95FA' d='M62.578 34.96l51.608 43.303 3.33-3.97L65.91 30.99z')
              g#wave-g__top--10(opacity='.125')
                path(fill='#02DFEC' d='M117.31 81.837l50.065 45.079 23.117-25.674-50.065-45.079z' opacity='.198')
                path(fill='#6E95FA' d='M70.712 32.908l50.065 45.078 10.403-11.553-50.065-45.079z' opacity='.198')
                path(fill='#02DFEC' d='M117.31 81.837l50.065 45.079 3.467-3.851-50.065-45.079z')
                path(fill='#6E95FA' d='M70.712 32.908l50.065 45.078 3.467-3.85-50.064-45.08z')
              g#wave-g__top--11(opacity='.138')
                path(fill='#02DFEC' d='M123.778 81.426l48.461 46.799 24-24.852-48.462-46.799z' opacity='.198')
                path(fill='#6E95FA' d='M78.917 30.9l48.461 46.798 10.8-11.183-48.461-46.799z' opacity='.198')
                path(fill='#02DFEC' d='M123.778 81.426l48.461 46.799 3.6-3.728-48.461-46.799z')
                path(fill='#6E95FA' d='M78.917 30.9l48.461 46.798 3.6-3.727-48.461-46.799z')
              g#wave-g__top--12(opacity='.15')
                path(fill='#02DFEC' d='M130.262 81l46.798 48.461 24.852-24-46.799-48.46z' opacity='.198')
                path(fill='#6E95FA' d='M87.19 28.939l46.8 48.461 11.183-10.8L98.374 18.14z' opacity='.198')
                path(fill='#02DFEC' d='M130.262 81l46.798 48.461 3.728-3.6L133.989 77.4z')
                path(fill='#6E95FA' d='M87.19 28.939l46.8 48.461 3.727-3.6-46.799-48.46z')
              g#wave-g__top--13(opacity='.163')
                path(fill='#02DFEC' d='M136.76 80.559l45.079 50.065 25.674-23.117-45.079-50.065z' opacity='.198')
                path(fill='#6E95FA' d='M95.532 27.026l45.079 50.065 11.554-10.403-45.08-50.065z' opacity='.198')
                path(fill='#02DFEC' d='M136.76 80.559l45.079 50.065 3.85-3.468-45.078-50.065z')
                path(fill='#6E95FA' d='M95.532 27.026l45.079 50.065 3.85-3.467-45.078-50.065z')
              g#wave-g__top--14(opacity='.175')
                path(fill='#02DFEC' d='M143.274 80.104l43.304 51.607 26.465-22.207-43.304-51.607z' opacity='.198')
                path(fill='#6E95FA' d='M103.94 25.165l43.304 51.608 11.91-9.994-43.305-51.607z' opacity='.198')
                path(fill='#02DFEC' d='M143.274 80.104l43.304 51.607 3.97-3.33-43.304-51.608z')
                path(fill='#6E95FA' d='M103.94 25.165l43.304 51.608 3.97-3.331-43.305-51.608z')
              g#wave-g__top--15(opacity='.188')
                path(fill='#02DFEC' d='M149.804 79.635l41.477 53.088 27.224-21.27-41.477-53.088z' opacity='.198')
                path(fill='#6E95FA' d='M112.411 23.357l41.477 53.088 12.25-9.572-41.476-53.087z' opacity='.198')
                path(fill='#02DFEC' d='M149.804 79.635l41.477 53.088 4.083-3.19-41.476-53.088z')
                path(fill='#6E95FA' d='M112.411 23.357l41.477 53.088 4.083-3.19-41.476-53.088z')
              g#wave-g__top--16(opacity='.2')
                path(fill='#02DFEC' d='M156.35 79.154l39.6 54.502 27.95-20.306-39.6-54.503z' opacity='.198')
                path(fill='#6E95FA' d='M120.945 21.605l39.598 54.503 12.578-9.139-39.599-54.502z' opacity='.198')
                path(fill='#02DFEC' d='M156.35 79.154l39.6 54.502 4.192-3.046-39.599-54.502z')
                path(fill='#6E95FA' d='M120.945 21.605l39.598 54.503 4.193-3.046-39.599-54.503z')
              g#wave-g__top--17(opacity='.212')
                path(fill='#02DFEC' d='M162.915 78.66l37.672 55.851 28.641-19.319-37.672-55.851z' opacity='.198')
                path(fill='#6E95FA' d='M129.538 19.91l37.673 55.852 12.889-8.694-37.673-55.851z' opacity='.198')
                path(fill='#02DFEC' d='M162.915 78.66l37.672 55.851 4.296-2.898-37.672-55.851z')
                path(fill='#6E95FA' d='M129.538 19.91l37.673 55.852 4.296-2.898-37.672-55.851z')
              g#wave-g__top--18(opacity='.225')
                path(fill='#02DFEC' d='M169.496 78.154l35.7 57.132 29.298-18.307-35.7-57.133z' opacity='.198')
                path(fill='#6E95FA' d='M138.19 18.276l35.7 57.132 13.185-8.239-35.7-57.132z' opacity='.198')
                path(fill='#02DFEC' d='M169.496 78.154l35.7 57.132 4.395-2.746-35.7-57.132z')
                path(fill='#6E95FA' d='M138.19 18.276l35.7 57.132 4.395-2.746-35.7-57.132z')
              g#wave-g__top--19(opacity='.237')
                path(fill='#02DFEC' d='M176.095 77.637l33.684 58.344 29.92-17.274-33.685-58.344z' opacity='.198')
                path(fill='#6E95FA' d='M146.898 16.703l33.685 58.343 13.464-7.773-33.685-58.344z' opacity='.198')
                path(fill='#02DFEC' d='M176.095 77.637l33.684 58.344 4.488-2.591-33.684-58.344z')
                path(fill='#6E95FA' d='M146.898 16.703l33.685 58.343 4.487-2.59-33.684-58.344z')
              g#wave-g__top--20(opacity='.25')
                path(fill='#02DFEC' d='M182.712 77.11l31.628 59.483 30.504-16.22-31.628-59.482z' opacity='.198')
                path(fill='#6E95FA' d='M155.66 15.194l31.628 59.483 13.727-7.299-31.628-59.483z' opacity='.198')
                path(fill='#02DFEC' d='M182.712 77.11l31.628 59.483 4.575-2.433-31.627-59.483z')
                path(fill='#6E95FA' d='M155.66 15.194l31.628 59.483 4.575-2.433-31.628-59.483z')
              g#wave-g__top--21(opacity='.263')
                path(fill='#02DFEC' d='M189.348 76.573l29.533 60.55 31.051-15.144L220.4 61.428z' opacity='.198')
                path(fill='#6E95FA' d='M164.473 13.75l29.533 60.551 13.973-6.815-29.532-60.551z' opacity='.198')
                path(fill='#02DFEC' d='M189.348 76.573l29.533 60.55 4.657-2.271L194.006 74.3z')
                path(fill='#6E95FA' d='M164.473 13.75l29.533 60.551 4.657-2.272-29.532-60.55z')
              g#wave-g__top--22(opacity='.275')
                path(fill='#02DFEC' d='M196.003 76.026l27.401 61.545 31.561-14.052-27.401-61.545z' opacity='.198')
                path(fill='#6E95FA' d='M173.335 12.374l27.402 61.545 14.203-6.324L187.538 6.05z' opacity='.198')
                path(fill='#02DFEC' d='M196.003 76.026l27.401 61.545 4.734-2.108-27.401-61.544z')
                path(fill='#6E95FA' d='M173.335 12.374l27.402 61.545 4.734-2.108-27.402-61.545z')
              g#wave-g__top--23(opacity='.287')
                path(fill='#02DFEC' d='M202.677 75.471l25.237 62.464 32.032-12.942-25.237-62.464z' opacity='.198')
                path(fill='#6E95FA' d='M182.245 11.067l25.237 62.463 14.414-5.824L196.66 5.243z' opacity='.198')
                path(fill='#02DFEC' d='M202.677 75.471l25.237 62.464 4.804-1.942-25.236-62.463z')
                path(fill='#6E95FA' d='M182.245 11.067l25.237 62.463 4.804-1.941L187.05 9.125z')
              g#wave-g__top--24(opacity='.3')
                path(fill='#02DFEC' d='M209.37 74.908l23.042 63.306 32.464-11.816-23.041-63.306z' opacity='.198')
                path(fill='#6E95FA' d='M191.198 9.83l23.042 63.306 14.61-5.317-23.042-63.307z' opacity='.198')
                path(fill='#02DFEC' d='M209.37 74.908l23.042 63.306 4.87-1.772-23.042-63.306z')
                path(fill='#6E95FA' d='M191.198 9.83l23.042 63.306 4.87-1.772-23.042-63.307z')
              g#wave-g__top--25(opacity='.313')
                path(fill='#02DFEC' d='M216.084 74.338l20.818 64.072 32.857-10.676-20.818-64.072z' opacity='.198')
                path(fill='#6E95FA' d='M200.194 8.665l20.818 64.072 14.786-4.804L214.98 3.86z' opacity='.198')
                path(fill='#02DFEC' d='M216.084 74.338l20.818 64.072 4.928-1.601-20.818-64.072z')
                path(fill='#6E95FA' d='M200.194 8.665l20.818 64.072 4.928-1.601-20.818-64.072z')
              g#wave-g__top--26(opacity='.325')
                path(fill='#02DFEC' d='M222.817 73.762l18.57 64.759 33.21-9.523-18.57-64.76z' opacity='.198')
                path(fill='#6E95FA' d='M209.229 7.574l18.57 64.76 14.944-4.286-18.57-64.76z' opacity='.198')
                path(fill='#02DFEC' d='M222.817 73.762l18.57 64.759 4.98-1.428-18.569-64.76z')
                path(fill='#6E95FA' d='M209.229 7.574l18.57 64.76 4.98-1.43L214.21 6.147z')
              g#wave-g__top--27(opacity='.338')
                path(fill='#02DFEC' d='M229.57 73.18l16.299 65.367 33.521-8.358-16.298-65.368z' opacity='.198')
                path(fill='#6E95FA' d='M218.3 6.558L234.6 71.926l15.085-3.762-16.298-65.367z' opacity='.198')
                path(fill='#02DFEC' d='M229.57 73.18l16.299 65.367 5.028-1.254-16.298-65.367z')
                path(fill='#6E95FA' d='M218.3 6.558L234.6 71.926l5.028-1.254-16.298-65.368z')
              g#wave-g__top--28(opacity='.35')
                path(fill='#02DFEC' d='M236.345 72.592l14.006 65.897 33.793-7.183-14.006-65.897z' opacity='.198')
                path(fill='#6E95FA' d='M227.406 5.618l14.007 65.896 15.208-3.232-14.007-65.897z' opacity='.198')
                path(fill='#02DFEC' d='M236.345 72.592l14.006 65.897 5.07-1.078-14.008-65.897z')
                path(fill='#6E95FA' d='M227.406 5.618l14.007 65.896 5.07-1.077L232.474 4.54z')
              g#wave-g__top--29(opacity='.362')
                path(fill='#02DFEC' d='M243.14 72l11.698 66.345 34.023-5.999-11.699-66.345z' opacity='.198')
                path(fill='#6E95FA' d='M236.544 4.755L248.242 71.1l15.311-2.7-11.698-66.345z' opacity='.198')
                path(fill='#02DFEC' d='M243.14 72l11.698 66.345 5.103-.9L248.242 71.1z')
                path(fill='#6E95FA' d='M236.544 4.755L248.242 71.1l5.104-.9-11.699-66.345z')
              g#wave-g__top--30(opacity='.375')
                path(fill='#02DFEC' d='M249.954 71.404l9.376 66.714 34.212-4.808-9.376-66.714z' opacity='.198')
                path(fill='#6E95FA' d='M245.71 3.97l9.376 66.713 15.396-2.164-9.376-66.713z' opacity='.198')
                path(fill='#02DFEC' d='M249.954 71.404l9.376 66.714 5.132-.721-9.376-66.714z')
                path(fill='#6E95FA' d='M245.71 3.97l9.376 66.713 5.132-.721-9.376-66.713z')
              g#wave-g__top--31(opacity='.388')
                path(fill='#02DFEC' d='M256.79 70.806l7.042 67 34.36-3.611-7.043-67z' opacity='.198')
                path(fill='#6E95FA' d='M254.902 3.264l7.042 67 15.462-1.625-7.042-67z' opacity='.198')
                path(fill='#02DFEC' d='M256.79 70.806l7.042 67 5.154-.542-7.042-67z')
                path(fill='#6E95FA' d='M254.902 3.264l7.042 67 5.154-.541-7.042-67z')
              g#wave-g__top--32(opacity='.4')
                path(fill='#02DFEC' d='M263.648 70.205l4.699 67.205 34.464-2.41-4.7-67.205z' opacity='.198')
                path(fill='#6E95FA' d='M264.118 2.639l4.699 67.205 15.51-1.085-4.7-67.205z' opacity='.198')
                path(fill='#02DFEC' d='M263.648 70.205l4.699 67.205 5.17-.361-4.7-67.205z')
                path(fill='#6E95FA' d='M264.118 2.639l4.699 67.205 5.17-.362-4.7-67.205z')
              g#wave-g__top--33(opacity='.412')
                path(fill='#02DFEC' d='M270.526 69.603l2.35 67.328 34.528-1.206-2.351-67.328z' opacity='.198')
                path(fill='#6E95FA' d='M273.353 2.094l2.351 67.328 15.538-.542-2.351-67.328z' opacity='.198')
                path(fill='#02DFEC' d='M270.526 69.603l2.35 67.328 5.18-.18-2.352-67.329z')
                path(fill='#6E95FA' d='M273.353 2.094l2.351 67.328 5.18-.18-2.352-67.329z')
              g#wave-g__top--34(opacity='.425')
                path(fill='#02DFEC' d='M277.425 69v67.37h34.548V69z' opacity='.198')
                path(fill='#6E95FA' d='M282.607 1.631v67.37h15.547V1.63z' opacity='.198')
                path(fill='#02DFEC' d='M277.425 69v67.37h5.182V69z')
                path(fill='#6E95FA' d='M282.607 1.631v67.37h5.182V1.63z')
              g#wave-g__top--35(opacity='.438')
                path(fill='#02DFEC' d='M284.345 68.397l-2.351 67.328 34.527 1.206 2.35-67.328z' opacity='.198')
                path(fill='#6E95FA' d='M291.875 1.25l-2.351 67.328 15.537.543 2.351-67.328z' opacity='.198')
                path(fill='#02DFEC' d='M284.345 68.397l-2.351 67.328 5.179.181 2.35-67.328z')
                path(fill='#6E95FA' d='M291.875 1.25l-2.351 67.328 5.178.181 2.352-67.328z')
              g#wave-g__top--36(opacity='.45')
                path(fill='#02DFEC' d='M291.286 67.795l-4.7 67.205 34.464 2.41 4.7-67.205z' opacity='.198')
                path(fill='#6E95FA' d='M301.155.952l-4.7 67.205 15.51 1.084 4.699-67.205z' opacity='.198')
                path(fill='#02DFEC' d='M291.286 67.795l-4.7 67.205 5.17.362 4.7-67.205z')
                path(fill='#6E95FA' d='M301.155.952l-4.7 67.205 5.17.361 4.7-67.205z')
              g#wave-g__top--37(opacity='.463')
                path(fill='#02DFEC' d='M298.248 67.195l-7.042 67 34.359 3.61 7.042-67z' opacity='.198')
                path(fill='#6E95FA' d='M310.444.736l-7.042 67 15.462 1.625 7.042-67z' opacity='.198')
                path(fill='#02DFEC' d='M298.248 67.195l-7.042 67 5.154.541 7.042-67z')
                path(fill='#6E95FA' d='M310.444.736l-7.042 67 5.153.542 7.042-67z')
              g#wave-g__top--38(opacity='.475')
                path(fill='#02DFEC' d='M305.231 66.596l-9.376 66.714 34.212 4.808 9.376-66.714z' opacity='.198')
                path(fill='#6E95FA' d='M319.739.604l-9.376 66.713 15.395 2.164 9.376-66.713z' opacity='.198')
                path(fill='#02DFEC' d='M305.231 66.596l-9.376 66.714 5.132.72 9.376-66.713z')
                path(fill='#6E95FA' d='M319.739.604l-9.376 66.713 5.131.722 9.376-66.714z')
              g#wave-g__top--39(opacity='.487')
                path(fill='#02DFEC' d='M312.235 66l-11.698 66.346 34.023 6L346.258 72z' opacity='.198')
                path(fill='#6E95FA' d='M329.037.555l-11.699 66.346 15.311 2.7 11.699-66.346z' opacity='.198')
                path(fill='#02DFEC' d='M312.235 66l-11.698 66.346 5.103.9 11.698-66.345z')
                path(fill='#6E95FA' d='M329.037.555l-11.699 66.346 5.104.9L334.14 1.454z')
              g#wave-g__top--40(opacity='.5')
                path(fill='#02DFEC' d='M319.26 65.409l-14.007 65.897 33.793 7.183 14.007-65.897z' opacity='.198')
                path(fill='#6E95FA' d='M338.335.59L324.33 66.485l15.207 3.233 14.007-65.897z' opacity='.198')
                path(fill='#02DFEC' d='M319.26 65.409l-14.007 65.897 5.069 1.077 14.007-65.897z')
                path(fill='#6E95FA' d='M338.335.59L324.33 66.485l5.068 1.078 14.007-65.897z')
              g#wave-g__top--41(opacity='.512')
                path(fill='#02DFEC' d='M326.305 64.821l-16.298 65.368 33.522 8.358 16.298-65.368z' opacity='.198')
                path(fill='#6E95FA' d='M347.631.707l-16.298 65.368 15.085 3.761 16.298-65.368z' opacity='.198')
                path(fill='#02DFEC' d='M326.305 64.821l-16.298 65.368 5.028 1.254 16.298-65.368z')
                path(fill='#6E95FA' d='M347.631.707l-16.298 65.368 5.028 1.254L352.66 1.96z')
              g#wave-g__top--42(opacity='.525')
                path(fill='#02DFEC' d='M333.37 64.239l-18.569 64.76 33.21 9.522 18.57-64.76z' opacity='.198')
                path(fill='#6E95FA' d='M356.921.908l-18.57 64.76 14.946 4.285 18.57-64.76z' opacity='.198')
                path(fill='#02DFEC' d='M333.37 64.239l-18.569 64.76 4.982 1.427 18.569-64.759z')
                path(fill='#6E95FA' d='M356.921.908l-18.57 64.76 4.982 1.428 18.57-64.76z')
              g#wave-g__top--43(opacity='.537')
                path(fill='#02DFEC' d='M340.457 63.662l-20.819 64.072 32.857 10.676 20.819-64.072z' opacity='.198')
                path(fill='#6E95FA' d='M366.203 1.192l-20.818 64.072 14.786 4.804 20.818-64.072z' opacity='.198')
                path(fill='#02DFEC' d='M340.457 63.662l-20.819 64.072 4.929 1.601 20.818-64.071z')
                path(fill='#6E95FA' d='M366.203 1.192l-20.818 64.072 4.928 1.6 20.818-64.07z')
              g#wave-g__top--44(opacity='.55')
                path(fill='#02DFEC' d='M347.562 63.092l-23.041 63.306 32.464 11.816 23.042-63.306z' opacity='.198')
                path(fill='#6E95FA' d='M375.474 1.558l-23.042 63.307 14.61 5.317 23.04-63.306z' opacity='.198')
                path(fill='#02DFEC' d='M347.562 63.092l-23.041 63.306 4.87 1.773 23.04-63.306z')
                path(fill='#6E95FA' d='M375.474 1.558l-23.042 63.307 4.87 1.772L380.342 3.33z')
              g#wave-g__top--45(opacity='.563')
                path(fill='#02DFEC' d='M354.688 62.53l-25.237 62.463 32.033 12.942L386.72 75.47z' opacity='.198')
                path(fill='#6E95FA' d='M384.73 2.007l-25.237 62.464 14.415 5.824L399.145 7.83z' opacity='.198')
                path(fill='#02DFEC' d='M354.688 62.53l-25.237 62.463 4.805 1.941 25.237-62.463z')
                path(fill='#6E95FA' d='M384.73 2.007l-25.237 62.464 4.804 1.94 25.237-62.463z')
              g#wave-g__top--46(opacity='.575')
                path(fill='#02DFEC' d='M361.833 61.974l-27.401 61.545 31.561 14.052 27.402-61.545z' opacity='.198')
                path(fill='#6E95FA' d='M393.969 2.537l-27.402 61.545 14.203 6.324L408.172 8.86z' opacity='.198')
                path(fill='#02DFEC' d='M361.833 61.974l-27.401 61.545 4.734 2.108 27.401-61.545z')
                path(fill='#6E95FA' d='M393.969 2.537l-27.402 61.545 4.734 2.108 27.402-61.545z')
              g#wave-g__top--47(opacity='.588')
                path(fill='#02DFEC' d='M368.998 61.428l-29.533 60.55 31.052 15.146 29.532-60.551z' opacity='.198')
                path(fill='#6E95FA' d='M403.188 3.149l-29.533 60.55 13.974 6.816L417.16 9.964z' opacity='.198')
                path(fill='#02DFEC' d='M368.998 61.428l-29.533 60.55 4.658 2.272 29.532-60.55z')
                path(fill='#6E95FA' d='M403.188 3.149l-29.533 60.55 4.658 2.272 29.532-60.55z')
              g#wave-g__top--48(opacity='.6')
                path(fill='#02DFEC' d='M376.181 60.89l-31.628 59.484 30.504 16.22 31.628-59.484z' opacity='.198')
                path(fill='#6E95FA' d='M412.384 3.84l-31.627 59.483 13.727 7.3 31.628-59.484z' opacity='.198')
                path(fill='#02DFEC' d='M376.181 60.89l-31.628 59.484 4.576 2.433 31.628-59.484z')
                path(fill='#6E95FA' d='M412.384 3.84l-31.627 59.483 4.575 2.433L416.96 6.273z')
              g#wave-g__top--49(opacity='.613')
                path(fill='#02DFEC' d='M383.383 60.363l-33.684 58.343 29.919 17.274 33.684-58.343z' opacity='.198')
                path(fill='#6E95FA' d='M421.555 4.611l-33.684 58.343 13.464 7.774 33.684-58.344z' opacity='.198')
                path(fill='#02DFEC' d='M383.383 60.363l-33.684 58.343 4.487 2.591 33.685-58.343z')
                path(fill='#6E95FA' d='M421.555 4.611l-33.684 58.343 4.487 2.591 33.685-58.343z')
              g#wave-g__top--50(opacity='.625')
                path(fill='#02DFEC' d='M390.603 59.846l-35.7 57.133 29.298 18.307 35.7-57.132z' opacity='.198')
                path(fill='#6E95FA' d='M430.698 5.46l-35.7 57.132 13.184 8.24 35.7-57.133z' opacity='.198')
                path(fill='#02DFEC' d='M390.603 59.846l-35.7 57.133 4.395 2.746 35.7-57.133z')
                path(fill='#6E95FA' d='M430.698 5.46l-35.7 57.132 4.394 2.746 35.7-57.132z')
              g#wave-g__top--51(opacity='.637')
                path(fill='#02DFEC' d='M397.841 59.34l-37.672 55.852 28.641 19.32 37.673-55.852z' opacity='.198')
                path(fill='#6E95FA' d='M439.81 6.387l-37.673 55.851 12.89 8.694 37.672-55.851z' opacity='.198')
                path(fill='#02DFEC' d='M397.841 59.34l-37.672 55.852 4.296 2.898 37.672-55.852z')
                path(fill='#6E95FA' d='M439.81 6.387l-37.673 55.851 4.296 2.898 37.673-55.851z')
              g#wave-g__top--52(opacity='.65')
                path(fill='#02DFEC' d='M405.097 58.847l-39.599 54.502 27.95 20.307 39.599-54.502z' opacity='.198')
                path(fill='#6E95FA' d='M448.887 7.39L409.29 61.893l12.578 9.138 39.598-54.503z' opacity='.198')
                path(fill='#02DFEC' d='M405.097 58.847l-39.599 54.502 4.192 3.046 39.599-54.502z')
                path(fill='#6E95FA' d='M448.887 7.39L409.29 61.893l4.192 3.046 39.599-54.503z')
              g#wave-g__top--53(opacity='.662')
                path(fill='#02DFEC' d='M412.37 58.365l-41.477 53.088 27.224 21.27 41.476-53.088z' opacity='.198')
                path(fill='#6E95FA' d='M457.929 8.468l-41.476 53.088 12.25 9.571L470.18 18.04z' opacity='.198')
                path(fill='#02DFEC' d='M412.37 58.365l-41.477 53.088 4.083 3.19 41.477-53.087z')
                path(fill='#6E95FA' d='M457.929 8.468l-41.476 53.088 4.083 3.19 41.476-53.088z')
              g#wave-g__top--54(opacity='.675')
                path(fill='#02DFEC' d='M419.658 57.897l-43.304 51.607 26.465 22.207 43.304-51.607z' opacity='.198')
                path(fill='#6E95FA' d='M466.932 9.62l-43.304 51.608 11.91 9.993 43.303-51.608z' opacity='.198')
                path(fill='#02DFEC' d='M419.658 57.897l-43.304 51.607 3.97 3.331 43.304-51.607z')
                path(fill='#6E95FA' d='M466.932 9.62l-43.304 51.608 3.97 3.33L470.9 12.952z')
              g#wave-g__top--55(opacity='.688')
                path(fill='#02DFEC' d='M426.963 57.442l-45.078 50.065 25.674 23.117 45.078-50.065z' opacity='.198')
                path(fill='#6E95FA' d='M475.893 10.844L430.814 60.91l11.554 10.403 45.079-50.065z' opacity='.198')
                path(fill='#02DFEC' d='M426.963 57.442l-45.078 50.065 3.85 3.467 45.08-50.065z')
                path(fill='#6E95FA' d='M475.893 10.844L430.814 60.91l3.851 3.467 45.079-50.064z')
              g#wave-g__top--56(opacity='.7')
                path(fill='#02DFEC' d='M434.284 57l-46.798 48.462 24.851 23.999L459.136 81z' opacity='.198')
                path(fill='#6E95FA' d='M484.81 12.14L438.012 60.6l11.183 10.8 46.799-48.461z' opacity='.198')
                path(fill='#02DFEC' d='M434.284 57l-46.798 48.462 3.727 3.6L438.012 60.6z')
                path(fill='#6E95FA' d='M484.81 12.14L438.012 60.6l3.727 3.6 46.799-48.461z')
              g#wave-g__top--57(opacity='.713')
                path(fill='#02DFEC' d='M441.62 56.574l-48.461 46.799 23.999 24.851 48.461-46.798z' opacity='.198')
                path(fill='#6E95FA' d='M493.681 13.503L445.22 60.302l10.8 11.183 48.46-46.798z' opacity='.198')
                path(fill='#02DFEC' d='M441.62 56.574l-48.461 46.799 3.6 3.727 48.46-46.798z')
                path(fill='#6E95FA' d='M493.681 13.503L445.22 60.302l3.6 3.728 48.46-46.799z')
              g#wave-g__top--58(opacity='.725')
                path(fill='#02DFEC' d='M448.97 56.163l-50.064 45.079 23.117 25.674 50.065-45.079z' opacity='.198')
                path(fill='#6E95FA' d='M502.503 14.935l-50.065 45.08 10.403 11.553 50.065-45.079z' opacity='.198')
                path(fill='#02DFEC' d='M448.97 56.163l-50.064 45.079 3.467 3.85 50.065-45.078z')
                path(fill='#6E95FA' d='M502.503 14.935l-50.065 45.08 3.467 3.85 50.065-45.079z')
              g#wave-g__top--59(opacity='.738')
                path(fill='#02DFEC' d='M456.335 55.768L404.728 99.07l22.207 26.466 51.607-43.304z' opacity='.198')
                path(fill='#6E95FA' d='M511.274 16.433l-51.608 43.304 9.994 11.91 51.607-43.304z' opacity='.198')
                path(fill='#02DFEC' d='M456.335 55.768L404.728 99.07l3.33 3.97 51.608-43.304z')
                path(fill='#6E95FA' d='M511.274 16.433l-51.608 43.304 3.331 3.97 51.608-43.304z')
              g#wave-g__top--60(opacity='.75')
                path(fill='#02DFEC' d='M463.713 55.388l-53.087 41.477 21.27 27.224 53.087-41.477z' opacity='.198')
                path(fill='#6E95FA' d='M519.991 17.995l-53.087 41.477 9.572 12.25 53.087-41.476z' opacity='.198')
                path(fill='#02DFEC' d='M463.713 55.388l-53.087 41.477 3.19 4.083 53.088-41.476z')
                path(fill='#6E95FA' d='M519.991 17.995l-53.087 41.477 3.19 4.083 53.088-41.477z')
              g#wave-g__top--61(opacity='.762')
                path(fill='#02DFEC' d='M471.105 55.025l-54.503 39.599 20.307 27.95 54.502-39.599z' opacity='.198')
                path(fill='#6E95FA' d='M528.653 19.619l-54.502 39.599 9.138 12.577 54.502-39.598z' opacity='.198')
                path(fill='#02DFEC' d='M471.105 55.025l-54.503 39.599 3.046 4.192 54.503-39.598z')
                path(fill='#6E95FA' d='M528.653 19.619l-54.502 39.599 3.045 4.192L531.7 23.81z')
              g#wave-g__top--62(opacity='.775')
                path(fill='#02DFEC' d='M478.508 54.68l-55.851 37.672 19.319 28.641 55.851-37.672z' opacity='.198')
                path(fill='#6E95FA' d='M537.257 21.303l-55.851 37.672 8.694 12.89 55.851-37.673z' opacity='.198')
                path(fill='#02DFEC' d='M478.508 54.68l-55.851 37.672 2.897 4.296 55.852-37.673z')
                path(fill='#6E95FA' d='M537.257 21.303l-55.851 37.672 2.898 4.296L540.155 25.6z')
              g#wave-g__top--63(opacity='.787')
                path(fill='#02DFEC' d='M485.923 54.35l-57.132 35.701L447.1 119.35l57.132-35.7z' opacity='.198')
                path(fill='#6E95FA' d='M545.802 23.045l-57.133 35.7 8.24 13.185 57.131-35.7z' opacity='.198')
                path(fill='#02DFEC' d='M485.923 54.35l-57.132 35.701 2.746 4.395 57.132-35.7z')
                path(fill='#6E95FA' d='M545.802 23.045l-57.133 35.7 2.746 4.395 57.133-35.7z')
              g#wave-g__top--64(opacity='.8')
                path(fill='#02DFEC' d='M493.35 54.04l-58.343 33.685 17.274 29.92 58.343-33.685z' opacity='.198')
                path(fill='#6E95FA' d='M554.284 24.844l-58.343 33.684 7.773 13.464 58.344-33.684z' opacity='.198')
                path(fill='#02DFEC' d='M493.35 54.04l-58.343 33.685 2.59 4.488 58.344-33.685z')
                path(fill='#6E95FA' d='M554.284 24.844l-58.343 33.684 2.59 4.488 58.344-33.685z')
              g#wave-g__top--65(opacity='.813')
                path(fill='#02DFEC' d='M500.787 53.748l-59.484 31.628 16.22 30.504 59.483-31.628z' opacity='.198')
                path(fill='#6E95FA' d='M562.703 26.696L503.22 58.323l7.298 13.728 59.484-31.628z' opacity='.198')
                path(fill='#02DFEC' d='M500.787 53.748l-59.484 31.628 2.433 4.575 59.484-31.628z')
                path(fill='#6E95FA' d='M562.703 26.696L503.22 58.323l2.432 4.576 59.484-31.628z')
              g#wave-g__top--66(opacity='.825')
                path(fill='#02DFEC' d='M508.234 53.474l-60.551 29.533 15.145 31.051 60.55-29.532z' opacity='.198')
                path(fill='#6E95FA' d='M571.056 28.6l-60.55 29.532 6.815 13.973 60.55-29.532z' opacity='.198')
                path(fill='#02DFEC' d='M508.234 53.474l-60.551 29.533 2.271 4.658 60.551-29.533z')
                path(fill='#6E95FA' d='M571.056 28.6l-60.55 29.532 2.27 4.657 60.552-29.532z')
              g#wave-g__top--67(opacity='.838')
                path(fill='#02DFEC' d='M515.69 53.22l-61.545 27.4 14.052 31.562 61.545-27.401z' opacity='.198')
                path(fill='#6E95FA' d='M579.342 30.552l-61.545 27.401 6.324 14.203 61.545-27.401z' opacity='.198')
                path(fill='#02DFEC' d='M515.69 53.22l-61.545 27.4 2.108 4.735 61.544-27.402z')
                path(fill='#6E95FA' d='M579.342 30.552l-61.545 27.401 2.108 4.734 61.545-27.401z')
              g#wave-g__top--68(opacity='.85')
                path(fill='#02DFEC' d='M523.154 52.984L460.691 78.22l12.942 32.032 62.463-25.237z' opacity='.198')
                path(fill='#6E95FA' d='M587.559 32.552l-62.463 25.237 5.824 14.414 62.463-25.236z' opacity='.198')
                path(fill='#02DFEC' d='M523.154 52.984L460.691 78.22l1.941 4.804 62.464-25.236z')
                path(fill='#6E95FA' d='M587.559 32.552l-62.463 25.237 1.94 4.804L589.5 37.356z')
              g#wave-g__top--69(opacity='.863')
                path(fill='#02DFEC' d='M530.627 52.768L467.32 75.809l11.816 32.465 63.306-23.042z' opacity='.198')
                path(fill='#6E95FA' d='M595.705 34.596L532.4 57.637l5.318 14.61 63.306-23.042z' opacity='.198')
                path(fill='#02DFEC' d='M530.627 52.768L467.32 75.809l1.772 4.87 63.306-23.042z')
                path(fill='#6E95FA' d='M595.705 34.596L532.4 57.637l1.773 4.87 63.306-23.042z')
              g#wave-g__top--70(opacity='.875')
                path(fill='#02DFEC' d='M538.107 52.572L474.035 73.39l10.676 32.857 64.071-20.818z' opacity='.198')
                path(fill='#6E95FA' d='M603.78 36.682L539.708 57.5l4.804 14.786 64.072-20.818z' opacity='.198')
                path(fill='#02DFEC' d='M538.107 52.572L474.035 73.39l1.601 4.928L539.708 57.5z')
                path(fill='#6E95FA' d='M603.78 36.682L539.708 57.5l1.601 4.928 64.072-20.818z')
              g#wave-g__top--71(opacity='.887')
                path(fill='#02DFEC' d='M545.593 52.395l-64.76 18.57 9.523 33.21 64.76-18.57z' opacity='.198')
                path(fill='#6E95FA' d='M611.78 38.807l-64.759 18.57 4.285 14.944 64.76-18.57z' opacity='.198')
                path(fill='#02DFEC' d='M545.593 52.395l-64.76 18.57 1.429 4.98 64.76-18.569z')
                path(fill='#6E95FA' d='M611.78 38.807l-64.759 18.57 1.428 4.98 64.76-18.569z')
              g#wave-g__top--72(opacity='.9')
                path(fill='#02DFEC' d='M553.085 52.24l-65.368 16.297 8.358 33.522 65.368-16.298z' opacity='.198')
                path(fill='#6E95FA' d='M619.706 40.97l-65.368 16.297 3.762 15.085 65.367-16.298z' opacity='.198')
                path(fill='#02DFEC' d='M553.085 52.24l-65.368 16.297 1.254 5.028 65.367-16.298z')
                path(fill='#6E95FA' d='M619.706 40.97l-65.368 16.297 1.254 5.028 65.368-16.298z')
              g#wave-g__top--73(opacity='.912')
                path(fill='#02DFEC' d='M560.582 52.104L494.685 66.11l7.183 33.793 65.897-14.006z' opacity='.198')
                path(fill='#6E95FA' d='M627.556 43.165L561.66 57.172l3.233 15.208 65.896-14.007z' opacity='.198')
                path(fill='#02DFEC' d='M560.582 52.104L494.685 66.11l1.077 5.07 65.897-14.008z')
                path(fill='#6E95FA' d='M627.556 43.165L561.66 57.172l1.078 5.069 65.896-14.007z')
              g#wave-g__top--74(opacity='.925')
                path(fill='#02DFEC' d='M568.083 51.988l-66.345 11.699 5.999 34.023 66.346-11.698z' opacity='.198')
                path(fill='#6E95FA' d='M635.329 45.393l-66.346 11.699 2.7 15.31 66.345-11.698z' opacity='.198')
                path(fill='#02DFEC' d='M568.083 51.988l-66.345 11.699.9 5.103 66.345-11.698z')
                path(fill='#6E95FA' d='M635.329 45.393l-66.346 11.699.9 5.103 66.346-11.699z')
              g#wave-g__top--75(opacity='.938')
                path(fill='#02DFEC' d='M575.588 51.894l-66.713 9.376 4.808 34.212 66.714-9.376z' opacity='.198')
                path(fill='#6E95FA' d='M643.023 47.65l-66.713 9.376 2.163 15.395 66.714-9.376z' opacity='.198')
                path(fill='#02DFEC' d='M575.588 51.894l-66.713 9.376.721 5.132 66.714-9.376z')
                path(fill='#6E95FA' d='M643.023 47.65l-66.713 9.376.72 5.131 66.714-9.376z')
              g#wave-g__top--76(opacity='.95')
                path(fill='#02DFEC' d='M583.097 51.82l-67 7.043 3.61 34.358 67-7.042z' opacity='.198')
                path(fill='#6E95FA' d='M650.638 49.932l-67 7.042 1.625 15.462 67-7.042z' opacity='.198')
                path(fill='#02DFEC' d='M583.097 51.82l-67 7.043.541 5.153 67-7.042z')
                path(fill='#6E95FA' d='M650.638 49.932l-67 7.042.542 5.154 67-7.042z')
              g#wave-g__top--77(opacity='.963')
                path(fill='#02DFEC' d='M590.607 51.768l-67.205 4.7 2.41 34.463 67.205-4.7z' opacity='.198')
                path(fill='#6E95FA' d='M658.173 52.238l-67.205 4.7 1.085 15.509 67.205-4.7z' opacity='.198')
                path(fill='#02DFEC' d='M590.607 51.768l-67.205 4.7.361 5.169 67.205-4.7z')
                path(fill='#6E95FA' d='M658.173 52.238l-67.205 4.7.362 5.169 67.205-4.7z')
              g#wave-g__top--78(opacity='.975')
                path(fill='#02DFEC' d='M598.119 51.737l-67.328 2.35 1.205 34.528 67.328-2.352z' opacity='.198')
                path(fill='#6E95FA' d='M665.627 54.564L598.3 56.915l.543 15.538 67.328-2.351z' opacity='.198')
                path(fill='#02DFEC' d='M598.119 51.737l-67.328 2.35.18 5.18 67.328-2.352z')
                path(fill='#6E95FA' d='M665.627 54.564L598.3 56.915l.181 5.18 67.328-2.352z')
              g#wave-g__top--79(opacity='.988')
            
          
!
            
              body {
  background: #000713;
  margin-top: 100px;
}

// @for $i from 80 through 1 {
//   #wave-g__top--#{80 - $i} {
//     animation-name: barOpacity;
//     animation-iteration-count: infinite;
//     animation-duration: 5s;
//     animation-delay: $i * 0.065 + 0.25s;
//     transform: translateZ(0);
//   }
// }

// @keyframes barOpacity {
//   from {
//     opacity: 1;
//   }
//   to {
//     opacity: 0.2;
//   }
// }
            
          
!
            
              console.clear();
const bars = document.querySelectorAll('#wave-g__top g');
const barsReverse = [].slice.call(bars).reverse();
barsReverse.forEach((b, index) => {
  const delay = index * 0.065 + 0.25;
  TweenMax.from(b, 5, { opacity: 1, immediateRender: false, delay:delay, repeat:-1 });
})


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console