Pen Settings

HTML

CSS

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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                      <svg
        width="907"
        height="109"
        viewBox="0 0 907 109"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
         
      >
        <mask id="path-1-inside-1_98:904" fill="white">
          <path d="M858.8 0.359092C882.126 2.65977 900.207 15.2607 905.472 19.3089C905.953 19.6812 906.337 20.1393 906.601 20.6525C906.864 21.1659 907 21.7226 907 22.2858V88.6717C907 89.2836 906.839 89.8872 906.529 90.4348C906.218 90.9825 905.767 91.4591 905.211 91.8271C904.655 92.195 904.009 92.4443 903.324 92.555C902.64 92.6657 901.935 92.635 901.266 92.4652C896.042 91.1304 887.23 89.0493 876.821 87.2403C851.657 82.8673 817.173 80.1188 801.529 93.5014C801.439 93.5715 801.359 93.6419 801.27 93.7208C792.438 101.492 780.8 104.083 769.222 104.083C749.482 104.083 729.873 96.5572 724.429 94.2917C724.411 94.2842 724.393 94.2766 724.376 94.2688C724.322 94.3076 724.267 94.3455 724.211 94.3822C723.655 94.7473 723.009 94.9945 722.324 95.1044C721.64 95.2143 720.935 95.1838 720.266 95.0153C715.042 93.691 706.231 91.6263 695.821 89.8316C670.657 85.493 636.173 82.7661 620.529 96.0433C620.439 96.113 620.359 96.1827 620.27 96.2611C611.438 103.971 599.8 106.541 588.222 106.541C568.482 106.541 548.873 99.0751 543.429 96.8274C543.002 96.6501 542.642 96.3712 542.389 96.0228C542.253 95.8363 542.152 95.6341 542.086 95.4231C541.872 95.399 541.659 95.3622 541.45 95.3127C541.065 95.221 540.661 95.1256 540.238 95.0268C539.581 95.1216 538.907 95.0865 538.266 94.9238C534.948 94.0762 530.185 92.9277 524.483 91.7389C522.104 91.2988 519.592 90.8596 516.98 90.4363C491.79 86.355 457.27 83.7898 441.61 96.2797C441.52 96.3453 441.44 96.4108 441.35 96.4846C434.205 102.347 425.225 105.05 415.925 105.871C412.728 106.337 409.473 106.541 406.222 106.541C386.482 106.541 366.873 99.0158 361.429 96.7503L361.376 96.7274C361.341 96.7527 361.305 96.7775 361.27 96.8019L361.211 96.8409C360.655 97.206 360.009 97.4532 359.324 97.5631C358.64 97.6729 357.935 97.6424 357.266 97.4739C352.042 96.1497 343.231 94.0849 332.821 92.2903C307.657 87.9516 273.173 85.2248 257.529 98.5019L257.495 98.5289L257.402 98.6051L257.293 98.6996L257.27 98.7197C248.438 106.43 236.8 109 225.222 109C205.483 109 185.873 101.534 180.429 99.2861C180.002 99.1087 179.642 98.8298 179.389 98.4814C179.254 98.295 179.152 98.0927 179.087 97.8818C178.872 97.8577 178.659 97.8208 178.45 97.7713C173.22 96.5256 164.4 94.5833 153.98 92.895C128.79 88.8136 94.2701 86.2485 78.61 98.7384C78.5201 98.8039 78.44 98.8695 78.3502 98.9433C69.5099 106.196 57.86 108.614 46.2701 108.614C26.5099 108.614 6.87999 101.59 1.43028 99.476C1.00303 99.3092 0.642195 99.0468 0.389265 98.7191C0.135847 98.3913 0.00108157 98.0116 0.000105003 97.6238V36.4363C-0.00477781 36.0021 0.160749 35.578 0.472273 35.2268C0.783796 34.8756 1.22471 34.6158 1.73009 34.4857C2.2252 34.3471 2.76182 34.3423 3.26036 34.4721C3.75889 34.6019 4.19346 34.8595 4.5001 35.2069C8.87022 40.0669 18.3199 48.3444 32.5304 49.2212C46.4503 50.0736 61.7101 43.7877 77.8902 30.5273C98.0602 13.9888 118.47 10.2107 135.94 11.8088C159.29 13.956 177.39 25.7165 182.66 29.4947C183.142 29.8421 183.527 30.2696 183.791 30.7487C183.96 31.0554 184.076 31.3787 184.138 31.7095C188.75 36.934 197.962 44.9749 211.497 45.8637C225.402 46.7698 240.647 40.0876 256.81 25.9915C276.959 8.41052 297.348 4.39426 314.8 6.09308C338.126 8.37566 356.207 20.8774 361.472 24.8937C361.531 24.9393 361.588 24.986 361.645 25.034C361.762 25.1341 361.873 25.2395 361.977 25.3498L362.038 25.4154C362.087 25.4708 362.136 25.5274 362.182 25.585C362.344 25.7864 362.484 26.0012 362.601 26.2268C362.734 26.484 362.835 26.7522 362.901 27.0266C362.976 27.0371 363.05 27.0506 363.124 27.0671C363.169 27.0772 363.213 27.0884 363.257 27.1007C363.755 27.2398 364.189 27.5158 364.496 27.8881C368.861 33.0953 378.301 41.9644 392.497 42.904C406.402 43.8172 421.647 37.082 437.81 22.874C457.959 5.15353 478.348 1.10541 495.8 2.81774C519.126 5.11842 537.207 17.7194 542.472 21.7676C542.953 22.1399 543.337 22.5979 543.601 23.1112C543.864 23.6245 544.001 24.1812 544 24.7444V25.8814C544.647 26.3189 545.202 26.7076 545.66 27.0361C546.142 27.3835 546.527 27.811 546.791 28.29C546.848 28.3947 546.899 28.5014 546.945 28.6096C547.032 28.8184 547.097 29.033 547.138 29.2509C551.75 34.4754 560.962 42.5162 574.497 43.405C588.402 44.3111 603.647 37.629 619.81 23.5328C639.959 5.95187 660.348 1.93561 677.8 3.63444C701.126 5.91701 719.207 18.4188 724.472 22.4351C724.953 22.8044 725.337 23.2588 725.601 23.7681C725.734 24.0253 725.835 24.2936 725.901 24.5681C726.022 24.5848 726.14 24.6095 726.257 24.6421C726.519 24.7154 726.764 24.8267 726.982 24.9701C727.177 25.0988 727.351 25.2533 727.496 25.4294C731.861 30.6367 741.301 39.5058 755.497 40.4453C769.402 41.3585 784.646 34.6234 800.81 20.4154C820.959 2.69489 841.348 -1.35324 858.8 0.359092Z" />
        </mask>
        <path
          ref={flag}
          d="M858.8 0.359092C882.126 2.65977 900.207 15.2607 905.472 19.3089C905.953 19.6812 906.337 20.1393 906.601 20.6525C906.864 21.1659 907 21.7226 907 22.2858V88.6717C907 89.2836 906.839 89.8872 906.529 90.4348C906.218 90.9825 905.767 91.4591 905.211 91.8271C904.655 92.195 904.009 92.4443 903.324 92.555C902.64 92.6657 901.935 92.635 901.266 92.4652C896.042 91.1304 887.23 89.0493 876.821 87.2403C851.657 82.8673 817.173 80.1188 801.529 93.5014C801.439 93.5715 801.359 93.6419 801.27 93.7208C792.438 101.492 780.8 104.083 769.222 104.083C749.482 104.083 729.873 96.5572 724.429 94.2917C724.411 94.2842 724.393 94.2766 724.376 94.2688C724.322 94.3076 724.267 94.3455 724.211 94.3822C723.655 94.7473 723.009 94.9945 722.324 95.1044C721.64 95.2143 720.935 95.1838 720.266 95.0153C715.042 93.691 706.231 91.6263 695.821 89.8316C670.657 85.493 636.173 82.7661 620.529 96.0433C620.439 96.113 620.359 96.1827 620.27 96.2611C611.438 103.971 599.8 106.541 588.222 106.541C568.482 106.541 548.873 99.0751 543.429 96.8274C543.002 96.6501 542.642 96.3712 542.389 96.0228C542.253 95.8363 542.152 95.6341 542.086 95.4231C541.872 95.399 541.659 95.3622 541.45 95.3127C541.065 95.221 540.661 95.1256 540.238 95.0268C539.581 95.1216 538.907 95.0865 538.266 94.9238C534.948 94.0762 530.185 92.9277 524.483 91.7389C522.104 91.2988 519.592 90.8596 516.98 90.4363C491.79 86.355 457.27 83.7898 441.61 96.2797C441.52 96.3453 441.44 96.4108 441.35 96.4846C434.205 102.347 425.225 105.05 415.925 105.871C412.728 106.337 409.473 106.541 406.222 106.541C386.482 106.541 366.873 99.0158 361.429 96.7503L361.376 96.7274C361.341 96.7527 361.305 96.7775 361.27 96.8019L361.211 96.8409C360.655 97.206 360.009 97.4532 359.324 97.5631C358.64 97.6729 357.935 97.6424 357.266 97.4739C352.042 96.1497 343.231 94.0849 332.821 92.2903C307.657 87.9516 273.173 85.2248 257.529 98.5019L257.495 98.5289L257.402 98.6051L257.293 98.6996L257.27 98.7197C248.438 106.43 236.8 109 225.222 109C205.483 109 185.873 101.534 180.429 99.2861C180.002 99.1087 179.642 98.8298 179.389 98.4814C179.254 98.295 179.152 98.0927 179.087 97.8818C178.872 97.8577 178.659 97.8208 178.45 97.7713C173.22 96.5256 164.4 94.5833 153.98 92.895C128.79 88.8136 94.2701 86.2485 78.61 98.7384C78.5201 98.8039 78.44 98.8695 78.3502 98.9433C69.5099 106.196 57.86 108.614 46.2701 108.614C26.5099 108.614 6.87999 101.59 1.43028 99.476C1.00303 99.3092 0.642195 99.0468 0.389265 98.7191C0.135847 98.3913 0.00108157 98.0116 0.000105003 97.6238V36.4363C-0.00477781 36.0021 0.160749 35.578 0.472273 35.2268C0.783796 34.8756 1.22471 34.6158 1.73009 34.4857C2.2252 34.3471 2.76182 34.3423 3.26036 34.4721C3.75889 34.6019 4.19346 34.8595 4.5001 35.2069C8.87022 40.0669 18.3199 48.3444 32.5304 49.2212C46.4503 50.0736 61.7101 43.7877 77.8902 30.5273C98.0602 13.9888 118.47 10.2107 135.94 11.8088C159.29 13.956 177.39 25.7165 182.66 29.4947C183.142 29.8421 183.527 30.2696 183.791 30.7487C183.96 31.0554 184.076 31.3787 184.138 31.7095C188.75 36.934 197.962 44.9749 211.497 45.8637C225.402 46.7698 240.647 40.0876 256.81 25.9915C276.959 8.41052 297.348 4.39426 314.8 6.09308C338.126 8.37566 356.207 20.8774 361.472 24.8937C361.531 24.9393 361.588 24.986 361.645 25.034C361.762 25.1341 361.873 25.2395 361.977 25.3498L362.038 25.4154C362.087 25.4708 362.136 25.5274 362.182 25.585C362.344 25.7864 362.484 26.0012 362.601 26.2268C362.734 26.484 362.835 26.7522 362.901 27.0266C362.976 27.0371 363.05 27.0506 363.124 27.0671C363.169 27.0772 363.213 27.0884 363.257 27.1007C363.755 27.2398 364.189 27.5158 364.496 27.8881C368.861 33.0953 378.301 41.9644 392.497 42.904C406.402 43.8172 421.647 37.082 437.81 22.874C457.959 5.15353 478.348 1.10541 495.8 2.81774C519.126 5.11842 537.207 17.7194 542.472 21.7676C542.953 22.1399 543.337 22.5979 543.601 23.1112C543.864 23.6245 544.001 24.1812 544 24.7444V25.8814C544.647 26.3189 545.202 26.7076 545.66 27.0361C546.142 27.3835 546.527 27.811 546.791 28.29C546.848 28.3947 546.899 28.5014 546.945 28.6096C547.032 28.8184 547.097 29.033 547.138 29.2509C551.75 34.4754 560.962 42.5162 574.497 43.405C588.402 44.3111 603.647 37.629 619.81 23.5328C639.959 5.95187 660.348 1.93561 677.8 3.63444C701.126 5.91701 719.207 18.4188 724.472 22.4351C724.953 22.8044 725.337 23.2588 725.601 23.7681C725.734 24.0253 725.835 24.2936 725.901 24.5681C726.022 24.5848 726.14 24.6095 726.257 24.6421C726.519 24.7154 726.764 24.8267 726.982 24.9701C727.177 25.0988 727.351 25.2533 727.496 25.4294C731.861 30.6367 741.301 39.5058 755.497 40.4453C769.402 41.3585 784.646 34.6234 800.81 20.4154C820.959 2.69489 841.348 -1.35324 858.8 0.359092Z"
          fill="white"
          stroke="black"
          stroke-width="2"
          mask="url(#path-1-inside-1_98:904)"
              class='flag'
        />
      </svg>
              
            
!

CSS

              
                body {
  background: #141414;
  text-align: center;
}
.loading {
  margin-top: 30px;
  width: 100px;
}
              
            
!

JS

              
                document.addEventListener("DOMContentLoaded",function(){
  var flag=document.querySelector(".flag");
  TweenMax.set(flag, {x: 65})
  TweenMax.to(flag, 2, {x: 0, repeat:-1,ease:Linear.easeNone});
});
              
            
!
999px

Console