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. 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

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

              
                    <div class="control">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40" height="40" width="20" onclick="prev()"
        class="button">
        <path d="M16 37L4 20 16 3" fill="none" stroke="#e9eef2" stroke-width="5" stroke-linecap="round"
          stroke-linejoin="round" />
      </svg>
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 40" height="40" width="20" onclick="next()"
        class="button">
        <path d="M4 37l12-17L4 3" fill="none" stroke="#e9eef2" stroke-width="5" stroke-linecap="round"
          stroke-linejoin="round" />
      </svg>
    </div>
    <svg width="245" height="30" viewBox="0 0 196 24">
      <rect class="pagination" x="0" y="0" width="200" height="20" fill="#0b051d" />
      <circle class="c1" r="12" cy="12" cx="12" id="circle2672"
        style="stroke:none;stroke-linecap:round;stroke-linejoin:round" />
      <circle class="c2" style="stroke:none;stroke-linecap:round;stroke-linejoin:round" id="circle2656" cx="70" cy="12"
        r="12" />
      <circle class="c3" style="stroke:none;stroke-linecap:round;stroke-linejoin:round" id="circle2656" cx="128" cy="12"
        r="12" />
      <circle class="c4" style="stroke:none;stroke-linecap:round;stroke-linejoin:round" id="circle2656" cx="184" cy="12"
        r="12" />
      <g class="cut">
        <rect class="pagination" x="0" y="0" width="200" height="20" fill="#335" />
      </g>
    </svg>
              
            
!

CSS

              
                      body {
        align-items: center;
        background: #3775ac;
        display: flex;
        flex-direction: column;
        justify-content: center;
        height: 100vh;  
        margin: 0;
      }
      .control {
          display: flex;
      }
      .button {
        cursor: pointer;
          margin-bottom: 32px;
          padding: 20px;
      }
      .button:active {
        transform: scale(0.9);
      }
      .plus {
          margin-right: 20px;
      }
      .pagination {clip-path: polygon(6.11525% 95%, 6.32893% 95.005%, 6.54262% 95%, 6.75631% 95.005%, 6.97% 95%, 6.9705% 91.93676%, 6.97% 88.87353%, 6.9705% 85.8103%, 6.97% 82.74707%, 6.9705% 79.78413%, 6.97% 76.82119%, 6.9705% 73.85825%, 6.97% 70.89531%, 6.9705% 67.63515%, 6.97% 64.375%, 6.97025% 61.11485%, 6.9705% 57.85469%, 6.97% 54.89175%, 6.9705% 51.92881%, 6.97% 48.96587%, 6.9705% 46.00293%, 6.97% 42.9397%, 6.9705% 39.87647%, 6.97% 36.81323%, 6.9705% 33.75%, 6.97% 31.5625%, 6.9705% 29.375%, 6.97% 27.1875%, 6.9705% 25%, 6.62% 25.005%, 6.27% 25%, 5.92% 25.005%, 5.57% 25%, 5.2275% 26.15%, 4.885% 27.3%, 4.5425% 28.45%, 4.2% 29.6%, 4.3% 33.15%, 4.4% 36.7%, 4.5% 40.25%, 4.6% 43.8%, 4.77% 43.275%, 4.94% 42.75%, 5.11% 42.225%, 5.28% 41.7%, 5.2805% 45.03125%, 5.28% 48.3625%, 5.2805% 51.69375%, 5.28% 55.025%, 5.2805% 58.35625%, 5.28% 61.6875%, 5.2805% 65.01875%, 5.28% 68.35%, 5.2805% 71.68125%, 5.28% 75.0125%, 5.2805% 78.34375%, 5.28% 81.675%, 5.2805% 85.00625%, 5.28% 88.3375%, 5.2805% 91.66875%, 5.28% 95%, 5.48881% 95.005%, 5.69762% 95%, 5.90643% 95.005%);}
      .cut {clip-path: polygon(0% 120%, 0.0005% 0%, 12% 0.005%, 12.0005% 120%, 29% 120.005%, 29.0005% 0%, 41% 0.005%, 41.0005% 120%, 58% 120.005%, 58.0005% 0%, 70% 0.005%, 70.0005% 120%, 86% 120.005%, 86.0005% 0%, 98% 0.005%, 98.0005% 120.005%);}
      .c1, .c2, .c3, .c4 {
          fill: #a0b6ce;
          transform: scale(.5);
          transition: fill 360ms 40ms, transform 360ms 40ms;
      }
      .c1 {
        transform-origin: 5% 50%;
        fill: #fff;
        transform: scale(1);
      }
      .c2 {
        transform-origin: 35% 50%;
      }
      .c3 {
        transform-origin: 65% 50%;
      }
      .c4 {
        transform-origin: 95% 50%;
      }
      .go1to2 .pagination {
        animation: Go1to2 400ms linear both;
      }
      .go1to2 .c1 {
          fill: #a0b6ce;
          transform: scale(.5);
      }
      .go1to2 .c2 {
          fill: #fff;
          transform: scale(1);
      }
      .go2to1 .pagination {
        animation: Go2to1 400ms linear both;
      }
      .go2to1 .c1 {
          fill: #fff;
          transform: scale(1);
      }
      .go2to3 .pagination {
        animation: Go2to3 400ms linear both;
      }
      .go2to3 .c1 {
        fill: #a0b6ce;
          transform: scale(.5);
      }
      .go2to3 .c3 {
          fill: #fff;
          transform: scale(1);
      }
      .go3to2 .pagination {
        animation: Go3to2 400ms linear both;
      }
      .go3to2 .c1 {
        fill: #a0b6ce;
          transform: scale(.5);
      }
      .go3to2 .c2 {
          fill: #fff;
          transform: scale(1);
      }
      .go3to4 .pagination {
        animation: Go3to4 400ms linear both;
      }
      .go3to4 .c1 {
          fill: #a0b6ce;
          transform: scale(.5);
      }
      .go3to4 .c4 {
          fill: #fff;
          transform: scale(1);
      }
      .go4to3 .pagination {
        animation: Go4to3 400ms linear both;
      }
      .go4to3 .c1 {
          fill: #a0b6ce;
          transform: scale(.5);
      }
      .go4to3 .c3 {
        fill: #fff;
          transform: scale(1);
      }

      @keyframes Go1to2 {
        0% {clip-path: polygon(6.11525% 95%, 6.32893% 95.005%, 6.54262% 95%, 6.75631% 95.005%, 6.97% 95%, 6.9705% 91.93676%, 6.97% 88.87353%, 6.9705% 85.8103%, 6.97% 82.74707%, 6.9705% 79.78413%, 6.97% 76.82119%, 6.9705% 73.85825%, 6.97% 70.89531%, 6.9705% 67.63515%, 6.97% 64.375%, 6.97025% 61.11485%, 6.9705% 57.85469%, 6.97% 54.89175%, 6.9705% 51.92881%, 6.97% 48.96587%, 6.9705% 46.00293%, 6.97% 42.9397%, 6.9705% 39.87647%, 6.97% 36.81323%, 6.9705% 33.75%, 6.97% 31.5625%, 6.9705% 29.375%, 6.97% 27.1875%, 6.9705% 25%, 6.62% 25.005%, 6.27% 25%, 5.92% 25.005%, 5.57% 25%, 5.2275% 26.15%, 4.885% 27.3%, 4.5425% 28.45%, 4.2% 29.6%, 4.3% 33.15%, 4.4% 36.7%, 4.5% 40.25%, 4.6% 43.8%, 4.77% 43.275%, 4.94% 42.75%, 5.11% 42.225%, 5.28% 41.7%, 5.2805% 45.03125%, 5.28% 48.3625%, 5.2805% 51.69375%, 5.28% 55.025%, 5.2805% 58.35625%, 5.28% 61.6875%, 5.2805% 65.01875%, 5.28% 68.35%, 5.2805% 71.68125%, 5.28% 75.0125%, 5.2805% 78.34375%, 5.28% 81.675%, 5.2805% 85.00625%, 5.28% 88.3375%, 5.2805% 91.66875%, 5.28% 95%, 5.48881% 95.005%, 5.69762% 95%, 5.90643% 95.005%);}
        33.33% {clip-path: polygon(14.5% 75%, 14.65337% 74.92255%, 14.8023% 74.69525%, 14.94605% 74.32565%, 15.08387% 73.82124%, 15.21499% 73.1896%, 15.33866% 72.43825%, 15.45414% 71.57475%, 15.56066% 70.60662%, 15.65747% 69.54142%, 15.74382% 68.38666%, 15.81896% 67.14991%, 15.88212% 65.83869%, 15.93256% 64.46056%, 15.96952% 63.02304%, 15.99225% 61.53368%, 16% 60%, 15.99226% 58.46634%, 15.96953% 56.97698%, 15.93256% 55.53946%, 15.88212% 54.16132%, 15.81896% 52.85011%, 15.74382% 51.61336%, 15.65747% 50.4586%, 15.56066% 49.3934%, 15.45414% 48.42527%, 15.33866% 47.56176%, 15.21499% 46.81042%, 15.08387% 46.17877%, 14.94605% 45.67437%, 14.8023% 45.30475%, 14.65337% 45.07744%, 14.5% 45%, 14.34663% 45.07744%, 14.1977% 45.30475%, 14.05395% 45.67437%, 13.91613% 46.17878%, 13.78501% 46.81042%, 13.66134% 47.56177%, 13.54586% 48.42528%, 13.43934% 49.3934%, 13.34253% 50.45861%, 13.25618% 51.61336%, 13.18104% 52.85012%, 13.11788% 54.16133%, 13.06744% 55.53946%, 13.03048% 56.97698%, 13.00775% 58.46634%, 13% 60%, 13.00774% 61.53366%, 13.03047% 63.02302%, 13.06743% 64.46054%, 13.11788% 65.83867%, 13.18104% 67.14989%, 13.25617% 68.38665%, 13.34253% 69.54139%, 13.43934% 70.6066%, 13.54586% 71.57473%, 13.66133% 72.43824%, 13.78501% 73.18958%, 13.91613% 73.82122%, 14.05394% 74.32563%, 14.1977% 74.69523%, 14.34663% 74.92253%);}
        66.67% {clip-path: polygon(26.5% 75%, 26.65336% 74.92255%, 26.8023% 74.69525%, 26.94605% 74.32565%, 27.08387% 73.82124%, 27.21499% 73.1896%, 27.33866% 72.43825%, 27.45414% 71.57475%, 27.56066% 70.60662%, 27.65747% 69.54142%, 27.74382% 68.38666%, 27.81896% 67.14991%, 27.88212% 65.83869%, 27.93256% 64.46056%, 27.96952% 63.02304%, 27.99225% 61.53368%, 28% 60%, 27.99225% 58.46634%, 27.96952% 56.97698%, 27.93256% 55.53946%, 27.88212% 54.16132%, 27.81896% 52.85011%, 27.74382% 51.61336%, 27.65747% 50.4586%, 27.56066% 49.3934%, 27.45414% 48.42527%, 27.33866% 47.56176%, 27.21499% 46.81042%, 27.08387% 46.17877%, 26.94605% 45.67437%, 26.8023% 45.30475%, 26.65336% 45.07744%, 26.5% 45%, 26.34663% 45.07744%, 26.1977% 45.30475%, 26.05394% 45.67437%, 25.91613% 46.17878%, 25.78501% 46.81042%, 25.66133% 47.56177%, 25.54586% 48.42528%, 25.43934% 49.3934%, 25.34252% 50.45861%, 25.25617% 51.61336%, 25.18104% 52.85012%, 25.11788% 54.16133%, 25.06743% 55.53946%, 25.03047% 56.97698%, 25.00774% 58.46634%, 25% 60%, 25.00774% 61.53366%, 25.03047% 63.02302%, 25.06743% 64.46054%, 25.11788% 65.83867%, 25.18104% 67.14989%, 25.25617% 68.38665%, 25.34252% 69.54139%, 25.43934% 70.6066%, 25.54586% 71.57473%, 25.66133% 72.43824%, 25.78501% 73.18958%, 25.91613% 73.82122%, 26.05394% 74.32563%, 26.1977% 74.69523%, 26.34663% 74.92253%);}
        100% {clip-path: polygon(35.07765% 95%, 36.2561% 95.005%, 37.43454% 95%, 37.435% 88.04474%, 37.43454% 80.73058%, 36.08461% 80.735%, 34.73468% 80.73058%, 35.006% 76.95003%, 35.35765% 73.42469%, 35.73132% 70.28679%, 36.06869% 67.66858%, 36.38419% 65.08219%, 36.65302% 62.50857%, 36.87659% 59.90292%, 37.05632% 57.22046%, 37.19364% 54.41639%, 37.28997% 51.4459%, 37.34672% 48.26421%, 37.36533% 44.82651%, 37.33338% 41.97248%, 37.23536% 38.78674%, 37.06803% 35.48882%, 36.82812% 32.29826%, 36.51239% 29.43456%, 36.11756% 27.11726%, 35.6404% 25.5659%, 35.07765% 25%, 34.3811% 25.78319%, 33.83116% 27.84798%, 33.41126% 30.76715%, 33.10485% 34.11353%, 32.76622% 40.37908%, 32.68279% 43.22706%, 33.4093% 45.38694%, 34.13581% 47.54683%, 34.1744% 46.49038%, 34.31497% 44.1662%, 34.43513% 42.92487%, 34.59475% 41.84201%, 34.79846% 41.07608%, 35.05093% 40.78556%, 35.31947% 41.45641%, 35.51266% 43.08917%, 35.62939% 45.11415%, 35.66854% 46.96166%, 35.64011% 48.58472%, 35.55843% 50.33767%, 35.42892% 52.23002%, 35.25701% 54.2713%, 35.0481% 56.471%, 34.80763% 58.83865%, 34.541% 61.38376%, 34.25365% 64.11585%, 33.97762% 66.79837%, 33.73712% 69.23437%, 33.52973% 71.45581%, 33.35298% 73.49466%, 33.08163% 77.15255%, 32.90352% 80.46381%, 32.79907% 83.68428%, 32.74869% 87.06974%, 32.73282% 90.87601%, 32.73187% 95%, 34.01717% 95.005%);}
      }
      @keyframes Go2to1 {
        0% {clip-path: polygon(35.07765% 95%, 36.2561% 95.005%, 37.43454% 95%, 37.435% 88.04474%, 37.43454% 80.73058%, 36.08461% 80.735%, 34.73468% 80.73058%, 35.006% 76.95003%, 35.35765% 73.42469%, 35.73132% 70.28679%, 36.06869% 67.66858%, 36.38419% 65.08219%, 36.65302% 62.50857%, 36.87659% 59.90292%, 37.05632% 57.22046%, 37.19364% 54.41639%, 37.28997% 51.4459%, 37.34672% 48.26421%, 37.36533% 44.82651%, 37.33338% 41.97248%, 37.23536% 38.78674%, 37.06803% 35.48882%, 36.82812% 32.29826%, 36.51239% 29.43456%, 36.11756% 27.11726%, 35.6404% 25.5659%, 35.07765% 25%, 34.3811% 25.78319%, 33.83116% 27.84798%, 33.41126% 30.76715%, 33.10485% 34.11353%, 32.76622% 40.37908%, 32.68279% 43.22706%, 33.4093% 45.38694%, 34.13581% 47.54683%, 34.1744% 46.49038%, 34.31497% 44.1662%, 34.43513% 42.92487%, 34.59475% 41.84201%, 34.79846% 41.07608%, 35.05093% 40.78556%, 35.31947% 41.45641%, 35.51266% 43.08917%, 35.62939% 45.11415%, 35.66854% 46.96166%, 35.64011% 48.58472%, 35.55843% 50.33767%, 35.42892% 52.23002%, 35.25701% 54.2713%, 35.0481% 56.471%, 34.80763% 58.83865%, 34.541% 61.38376%, 34.25365% 64.11585%, 33.97762% 66.79837%, 33.73712% 69.23437%, 33.52973% 71.45581%, 33.35298% 73.49466%, 33.08163% 77.15255%, 32.90352% 80.46381%, 32.79907% 83.68428%, 32.74869% 87.06974%, 32.73282% 90.87601%, 32.73187% 95%, 34.01717% 95.005%);}
        33.33% {clip-path: polygon(26.5% 75%, 26.65336% 74.92255%, 26.8023% 74.69525%, 26.94605% 74.32565%, 27.08387% 73.82124%, 27.21499% 73.1896%, 27.33866% 72.43825%, 27.45414% 71.57475%, 27.56066% 70.60662%, 27.65747% 69.54142%, 27.74382% 68.38666%, 27.81896% 67.14991%, 27.88212% 65.83869%, 27.93256% 64.46056%, 27.96952% 63.02304%, 27.99225% 61.53368%, 28% 60%, 27.99225% 58.46634%, 27.96952% 56.97698%, 27.93256% 55.53946%, 27.88212% 54.16132%, 27.81896% 52.85011%, 27.74382% 51.61336%, 27.65747% 50.4586%, 27.56066% 49.3934%, 27.45414% 48.42527%, 27.33866% 47.56176%, 27.21499% 46.81042%, 27.08387% 46.17877%, 26.94605% 45.67437%, 26.8023% 45.30475%, 26.65336% 45.07744%, 26.5% 45%, 26.34663% 45.07744%, 26.1977% 45.30475%, 26.05394% 45.67437%, 25.91613% 46.17878%, 25.78501% 46.81042%, 25.66133% 47.56177%, 25.54586% 48.42528%, 25.43934% 49.3934%, 25.34252% 50.45861%, 25.25617% 51.61336%, 25.18104% 52.85012%, 25.11788% 54.16133%, 25.06743% 55.53946%, 25.03047% 56.97698%, 25.00774% 58.46634%, 25% 60%, 25.00774% 61.53366%, 25.03047% 63.02302%, 25.06743% 64.46054%, 25.11788% 65.83867%, 25.18104% 67.14989%, 25.25617% 68.38665%, 25.34252% 69.54139%, 25.43934% 70.6066%, 25.54586% 71.57473%, 25.66133% 72.43824%, 25.78501% 73.18958%, 25.91613% 73.82122%, 26.05394% 74.32563%, 26.1977% 74.69523%, 26.34663% 74.92253%);}
        66.67% {clip-path: polygon(14.5% 75%, 14.65337% 74.92255%, 14.8023% 74.69525%, 14.94605% 74.32565%, 15.08387% 73.82124%, 15.21499% 73.1896%, 15.33866% 72.43825%, 15.45414% 71.57475%, 15.56066% 70.60662%, 15.65747% 69.54142%, 15.74382% 68.38666%, 15.81896% 67.14991%, 15.88212% 65.83869%, 15.93256% 64.46056%, 15.96952% 63.02304%, 15.99225% 61.53368%, 16% 60%, 15.99226% 58.46634%, 15.96953% 56.97698%, 15.93256% 55.53946%, 15.88212% 54.16132%, 15.81896% 52.85011%, 15.74382% 51.61336%, 15.65747% 50.4586%, 15.56066% 49.3934%, 15.45414% 48.42527%, 15.33866% 47.56176%, 15.21499% 46.81042%, 15.08387% 46.17877%, 14.94605% 45.67437%, 14.8023% 45.30475%, 14.65337% 45.07744%, 14.5% 45%, 14.34663% 45.07744%, 14.1977% 45.30475%, 14.05395% 45.67437%, 13.91613% 46.17878%, 13.78501% 46.81042%, 13.66134% 47.56177%, 13.54586% 48.42528%, 13.43934% 49.3934%, 13.34253% 50.45861%, 13.25618% 51.61336%, 13.18104% 52.85012%, 13.11788% 54.16133%, 13.06744% 55.53946%, 13.03048% 56.97698%, 13.00775% 58.46634%, 13% 60%, 13.00774% 61.53366%, 13.03047% 63.02302%, 13.06743% 64.46054%, 13.11788% 65.83867%, 13.18104% 67.14989%, 13.25617% 68.38665%, 13.34253% 69.54139%, 13.43934% 70.6066%, 13.54586% 71.57473%, 13.66133% 72.43824%, 13.78501% 73.18958%, 13.91613% 73.82122%, 14.05394% 74.32563%, 14.1977% 74.69523%, 14.34663% 74.92253%);}
        100% {clip-path: polygon(6.11525% 95%, 6.32893% 95.005%, 6.54262% 95%, 6.75631% 95.005%, 6.97% 95%, 6.9705% 91.93676%, 6.97% 88.87353%, 6.9705% 85.8103%, 6.97% 82.74707%, 6.9705% 79.78413%, 6.97% 76.82119%, 6.9705% 73.85825%, 6.97% 70.89531%, 6.9705% 67.63515%, 6.97% 64.375%, 6.97025% 61.11485%, 6.9705% 57.85469%, 6.97% 54.89175%, 6.9705% 51.92881%, 6.97% 48.96587%, 6.9705% 46.00293%, 6.97% 42.9397%, 6.9705% 39.87647%, 6.97% 36.81323%, 6.9705% 33.75%, 6.97% 31.5625%, 6.9705% 29.375%, 6.97% 27.1875%, 6.9705% 25%, 6.62% 25.005%, 6.27% 25%, 5.92% 25.005%, 5.57% 25%, 5.2275% 26.15%, 4.885% 27.3%, 4.5425% 28.45%, 4.2% 29.6%, 4.3% 33.15%, 4.4% 36.7%, 4.5% 40.25%, 4.6% 43.8%, 4.77% 43.275%, 4.94% 42.75%, 5.11% 42.225%, 5.28% 41.7%, 5.2805% 45.03125%, 5.28% 48.3625%, 5.2805% 51.69375%, 5.28% 55.025%, 5.2805% 58.35625%, 5.28% 61.6875%, 5.2805% 65.01875%, 5.28% 68.35%, 5.2805% 71.68125%, 5.28% 75.0125%, 5.2805% 78.34375%, 5.28% 81.675%, 5.2805% 85.00625%, 5.28% 88.3375%, 5.2805% 91.66875%, 5.28% 95%, 5.48881% 95.005%, 5.69762% 95%, 5.90643% 95.005%);}
      }
      @keyframes Go2to3 {
        0% {clip-path: polygon(35.07765% 95%, 36.2561% 95.005%, 37.43454% 95%, 37.435% 88.04474%, 37.43454% 80.73058%, 36.08461% 80.735%, 34.73468% 80.73058%, 35.006% 76.95003%, 35.35765% 73.42469%, 35.73132% 70.28679%, 36.06869% 67.66858%, 36.38419% 65.08219%, 36.65302% 62.50857%, 36.87659% 59.90292%, 37.05632% 57.22046%, 37.19364% 54.41639%, 37.28997% 51.4459%, 37.34672% 48.26421%, 37.36533% 44.82651%, 37.33338% 41.97248%, 37.23536% 38.78674%, 37.06803% 35.48882%, 36.82812% 32.29826%, 36.51239% 29.43456%, 36.11756% 27.11726%, 35.6404% 25.5659%, 35.07765% 25%, 34.3811% 25.78319%, 33.83116% 27.84798%, 33.41126% 30.76715%, 33.10485% 34.11353%, 32.76622% 40.37908%, 32.68279% 43.22706%, 33.4093% 45.38694%, 34.13581% 47.54683%, 34.1744% 46.49038%, 34.31497% 44.1662%, 34.43513% 42.92487%, 34.59475% 41.84201%, 34.79846% 41.07608%, 35.05093% 40.78556%, 35.31947% 41.45641%, 35.51266% 43.08917%, 35.62939% 45.11415%, 35.66854% 46.96166%, 35.64011% 48.58472%, 35.55843% 50.33767%, 35.42892% 52.23002%, 35.25701% 54.2713%, 35.0481% 56.471%, 34.80763% 58.83865%, 34.541% 61.38376%, 34.25365% 64.11585%, 33.97762% 66.79837%, 33.73712% 69.23437%, 33.52973% 71.45581%, 33.35298% 73.49466%, 33.08163% 77.15255%, 32.90352% 80.46381%, 32.79907% 83.68428%, 32.74869% 87.06974%, 32.73282% 90.87601%, 32.73187% 95%, 34.01717% 95.005%);}
        33.33% {clip-path: polygon(43.5% 75%, 43.65336% 74.92255%, 43.8023% 74.69525%, 43.94605% 74.32565%, 44.08387% 73.82124%, 44.21499% 73.1896%, 44.33866% 72.43825%, 44.45414% 71.57475%, 44.56066% 70.60662%, 44.65747% 69.54142%, 44.74382% 68.38666%, 44.81896% 67.14991%, 44.88212% 65.83869%, 44.93256% 64.46056%, 44.96952% 63.02304%, 44.99225% 61.53368%, 45% 60%, 44.99225% 58.46634%, 44.96952% 56.97698%, 44.93256% 55.53946%, 44.88212% 54.16132%, 44.81896% 52.85011%, 44.74382% 51.61336%, 44.65747% 50.4586%, 44.56066% 49.3934%, 44.45414% 48.42527%, 44.33866% 47.56176%, 44.21499% 46.81042%, 44.08387% 46.17877%, 43.94605% 45.67437%, 43.8023% 45.30475%, 43.65336% 45.07744%, 43.5% 45%, 43.34663% 45.07744%, 43.1977% 45.30475%, 43.05394% 45.67437%, 42.91613% 46.17878%, 42.78501% 46.81042%, 42.66133% 47.56177%, 42.54586% 48.42528%, 42.43934% 49.3934%, 42.34253% 50.45861%, 42.25617% 51.61336%, 42.18104% 52.85012%, 42.11788% 54.16133%, 42.06744% 55.53946%, 42.03048% 56.97698%, 42.00774% 58.46634%, 42% 60%, 42.00774% 61.53366%, 42.03048% 63.02302%, 42.06744% 64.46054%, 42.11788% 65.83867%, 42.18104% 67.14989%, 42.25617% 68.38665%, 42.34253% 69.54139%, 42.43934% 70.6066%, 42.54586% 71.57473%, 42.66133% 72.43824%, 42.78501% 73.18958%, 42.91613% 73.82122%, 43.05394% 74.32563%, 43.1977% 74.69523%, 43.34663% 74.92253%);}
        66.67% {clip-path: polygon(55.49999% 75%, 55.65336% 74.92255%, 55.8023% 74.69525%, 55.94605% 74.32565%, 56.08387% 73.82124%, 56.21498% 73.1896%, 56.33866% 72.43825%, 56.45414% 71.57475%, 56.56065% 70.60662%, 56.65747% 69.54142%, 56.74382% 68.38666%, 56.81896% 67.14991%, 56.88212% 65.83869%, 56.93256% 64.46056%, 56.96952% 63.02304%, 56.99225% 61.53368%, 56.99999% 60%, 56.99225% 58.46634%, 56.96952% 56.97698%, 56.93256% 55.53946%, 56.88212% 54.16132%, 56.81896% 52.85011%, 56.74382% 51.61336%, 56.65747% 50.4586%, 56.56065% 49.3934%, 56.45414% 48.42527%, 56.33866% 47.56176%, 56.21498% 46.81042%, 56.08387% 46.17877%, 55.94605% 45.67437%, 55.8023% 45.30475%, 55.65336% 45.07744%, 55.49999% 45%, 55.34663% 45.07744%, 55.1977% 45.30475%, 55.05394% 45.67437%, 54.91613% 46.17878%, 54.785% 46.81042%, 54.66133% 47.56177%, 54.54586% 48.42528%, 54.43933% 49.3934%, 54.34253% 50.45861%, 54.25617% 51.61336%, 54.18104% 52.85012%, 54.11787% 54.16133%, 54.06744% 55.53946%, 54.03048% 56.97698%, 54.00774% 58.46634%, 54% 60%, 54.00774% 61.53366%, 54.03048% 63.02302%, 54.06744% 64.46054%, 54.11787% 65.83867%, 54.18104% 67.14989%, 54.25617% 68.38665%, 54.34253% 69.54139%, 54.43933% 70.6066%, 54.54586% 71.57473%, 54.66133% 72.43824%, 54.785% 73.18958%, 54.91613% 73.82122%, 55.05394% 74.32563%, 55.1977% 74.69523%, 55.34663% 74.92253%);}
        100% {clip-path: polygon(63.97513% 94.96222%, 64.33807% 94.75243%, 64.66357% 94.15485%, 64.9536% 93.21713%, 65.21007% 91.98692%, 65.63005% 88.83962%, 65.939% 85.09418%, 66.15238% 81.13179%, 66.28566% 77.33371%, 66.35428% 74.08111%, 66.37372% 71.75523%, 66.35595% 68.51652%, 66.30576% 65.63653%, 66.22778% 63.0946%, 66.12663% 60.87006%, 65.87337% 57.29048%, 65.58304% 54.73246%, 65.03946% 52.01985%, 64.79238% 51.40954%, 65.4158% 45.46985%, 66.03923% 39.53016%, 66.03963% 32.26508%, 66.03923% 25%, 64.99609% 25.005%, 63.95297% 25%, 62.90984% 25.005%, 61.86671% 25%, 61.86713% 32.31417%, 61.86671% 39.62833%, 62.99083% 39.635%, 64.11496% 39.62833%, 63.50135% 45.96073%, 62.88775% 52.29313%, 62.88813% 58.7237%, 62.88775% 65.15428%, 63.39581% 65.07498%, 63.90388% 64.99568%, 64.01674% 65.19158%, 64.26767% 66.10303%, 64.40382% 66.97885%, 64.52519% 68.21568%, 64.61534% 69.87423%, 64.65783% 72.01521%, 64.62305% 74.61534%, 64.49704% 77.04904%, 64.28893% 78.85069%, 64.00787% 79.55471%, 63.73745% 79.26498%, 63.51993% 78.50117%, 63.35012% 77.4213%, 63.22283% 76.18339%, 63.07505% 73.8656%, 63.03502% 72.81206%, 62.67177% 73.89201%, 62.30851% 74.97195%, 61.94526% 76.0519%, 61.582% 77.13184%, 61.65085% 79.91783%, 61.96505% 86.04703%, 62.26458% 89.32058%, 62.68599% 92.17622%, 62.9487% 93.31674%, 63.24945% 94.19607%, 63.59075% 94.76197%);}
      }
      @keyframes Go3to2 {
        0% {clip-path: polygon(63.97513% 94.96222%, 64.33807% 94.75243%, 64.66357% 94.15485%, 64.9536% 93.21713%, 65.21007% 91.98692%, 65.63005% 88.83962%, 65.939% 85.09418%, 66.15238% 81.13179%, 66.28566% 77.33371%, 66.35428% 74.08111%, 66.37372% 71.75523%, 66.35595% 68.51652%, 66.30576% 65.63653%, 66.22778% 63.0946%, 66.12663% 60.87006%, 65.87337% 57.29048%, 65.58304% 54.73246%, 65.03946% 52.01985%, 64.79238% 51.40954%, 65.4158% 45.46985%, 66.03923% 39.53016%, 66.03963% 32.26508%, 66.03923% 25%, 64.99609% 25.005%, 63.95297% 25%, 62.90984% 25.005%, 61.86671% 25%, 61.86713% 32.31417%, 61.86671% 39.62833%, 62.99083% 39.635%, 64.11496% 39.62833%, 63.50135% 45.96073%, 62.88775% 52.29313%, 62.88813% 58.7237%, 62.88775% 65.15428%, 63.39581% 65.07498%, 63.90388% 64.99568%, 64.01674% 65.19158%, 64.26767% 66.10303%, 64.40382% 66.97885%, 64.52519% 68.21568%, 64.61534% 69.87423%, 64.65783% 72.01521%, 64.62305% 74.61534%, 64.49704% 77.04904%, 64.28893% 78.85069%, 64.00787% 79.55471%, 63.73745% 79.26498%, 63.51993% 78.50117%, 63.35012% 77.4213%, 63.22283% 76.18339%, 63.07505% 73.8656%, 63.03502% 72.81206%, 62.67177% 73.89201%, 62.30851% 74.97195%, 61.94526% 76.0519%, 61.582% 77.13184%, 61.65085% 79.91783%, 61.96505% 86.04703%, 62.26458% 89.32058%, 62.68599% 92.17622%, 62.9487% 93.31674%, 63.24945% 94.19607%, 63.59075% 94.76197%);}
        33.33% {clip-path: polygon(55.49999% 75%, 55.65336% 74.92255%, 55.8023% 74.69525%, 55.94605% 74.32565%, 56.08387% 73.82124%, 56.21498% 73.1896%, 56.33866% 72.43825%, 56.45414% 71.57475%, 56.56065% 70.60662%, 56.65747% 69.54142%, 56.74382% 68.38666%, 56.81896% 67.14991%, 56.88212% 65.83869%, 56.93256% 64.46056%, 56.96952% 63.02304%, 56.99225% 61.53368%, 56.99999% 60%, 56.99225% 58.46634%, 56.96952% 56.97698%, 56.93256% 55.53946%, 56.88212% 54.16132%, 56.81896% 52.85011%, 56.74382% 51.61336%, 56.65747% 50.4586%, 56.56065% 49.3934%, 56.45414% 48.42527%, 56.33866% 47.56176%, 56.21498% 46.81042%, 56.08387% 46.17877%, 55.94605% 45.67437%, 55.8023% 45.30475%, 55.65336% 45.07744%, 55.49999% 45%, 55.34663% 45.07744%, 55.1977% 45.30475%, 55.05394% 45.67437%, 54.91613% 46.17878%, 54.785% 46.81042%, 54.66133% 47.56177%, 54.54586% 48.42528%, 54.43933% 49.3934%, 54.34253% 50.45861%, 54.25617% 51.61336%, 54.18104% 52.85012%, 54.11787% 54.16133%, 54.06744% 55.53946%, 54.03048% 56.97698%, 54.00774% 58.46634%, 54% 60%, 54.00774% 61.53366%, 54.03048% 63.02302%, 54.06744% 64.46054%, 54.11787% 65.83867%, 54.18104% 67.14989%, 54.25617% 68.38665%, 54.34253% 69.54139%, 54.43933% 70.6066%, 54.54586% 71.57473%, 54.66133% 72.43824%, 54.785% 73.18958%, 54.91613% 73.82122%, 55.05394% 74.32563%, 55.1977% 74.69523%, 55.34663% 74.92253%);}
        66.67% {clip-path: polygon(43.5% 75%, 43.65336% 74.92255%, 43.8023% 74.69525%, 43.94605% 74.32565%, 44.08387% 73.82124%, 44.21499% 73.1896%, 44.33866% 72.43825%, 44.45414% 71.57475%, 44.56066% 70.60662%, 44.65747% 69.54142%, 44.74382% 68.38666%, 44.81896% 67.14991%, 44.88212% 65.83869%, 44.93256% 64.46056%, 44.96952% 63.02304%, 44.99225% 61.53368%, 45% 60%, 44.99225% 58.46634%, 44.96952% 56.97698%, 44.93256% 55.53946%, 44.88212% 54.16132%, 44.81896% 52.85011%, 44.74382% 51.61336%, 44.65747% 50.4586%, 44.56066% 49.3934%, 44.45414% 48.42527%, 44.33866% 47.56176%, 44.21499% 46.81042%, 44.08387% 46.17877%, 43.94605% 45.67437%, 43.8023% 45.30475%, 43.65336% 45.07744%, 43.5% 45%, 43.34663% 45.07744%, 43.1977% 45.30475%, 43.05394% 45.67437%, 42.91613% 46.17878%, 42.78501% 46.81042%, 42.66133% 47.56177%, 42.54586% 48.42528%, 42.43934% 49.3934%, 42.34253% 50.45861%, 42.25617% 51.61336%, 42.18104% 52.85012%, 42.11788% 54.16133%, 42.06744% 55.53946%, 42.03048% 56.97698%, 42.00774% 58.46634%, 42% 60%, 42.00774% 61.53366%, 42.03048% 63.02302%, 42.06744% 64.46054%, 42.11788% 65.83867%, 42.18104% 67.14989%, 42.25617% 68.38665%, 42.34253% 69.54139%, 42.43934% 70.6066%, 42.54586% 71.57473%, 42.66133% 72.43824%, 42.78501% 73.18958%, 42.91613% 73.82122%, 43.05394% 74.32563%, 43.1977% 74.69523%, 43.34663% 74.92253%);}
        100% {clip-path: polygon(35.07765% 95%, 36.2561% 95.005%, 37.43454% 95%, 37.435% 88.04474%, 37.43454% 80.73058%, 36.08461% 80.735%, 34.73468% 80.73058%, 35.006% 76.95003%, 35.35765% 73.42469%, 35.73132% 70.28679%, 36.06869% 67.66858%, 36.38419% 65.08219%, 36.65302% 62.50857%, 36.87659% 59.90292%, 37.05632% 57.22046%, 37.19364% 54.41639%, 37.28997% 51.4459%, 37.34672% 48.26421%, 37.36533% 44.82651%, 37.33338% 41.97248%, 37.23536% 38.78674%, 37.06803% 35.48882%, 36.82812% 32.29826%, 36.51239% 29.43456%, 36.11756% 27.11726%, 35.6404% 25.5659%, 35.07765% 25%, 34.3811% 25.78319%, 33.83116% 27.84798%, 33.41126% 30.76715%, 33.10485% 34.11353%, 32.76622% 40.37908%, 32.68279% 43.22706%, 33.4093% 45.38694%, 34.13581% 47.54683%, 34.1744% 46.49038%, 34.31497% 44.1662%, 34.43513% 42.92487%, 34.59475% 41.84201%, 34.79846% 41.07608%, 35.05093% 40.78556%, 35.31947% 41.45641%, 35.51266% 43.08917%, 35.62939% 45.11415%, 35.66854% 46.96166%, 35.64011% 48.58472%, 35.55843% 50.33767%, 35.42892% 52.23002%, 35.25701% 54.2713%, 35.0481% 56.471%, 34.80763% 58.83865%, 34.541% 61.38376%, 34.25365% 64.11585%, 33.97762% 66.79837%, 33.73712% 69.23437%, 33.52973% 71.45581%, 33.35298% 73.49466%, 33.08163% 77.15255%, 32.90352% 80.46381%, 32.79907% 83.68428%, 32.74869% 87.06974%, 32.73282% 90.87601%, 32.73187% 95%, 34.01717% 95.005%);}
      }
      @keyframes Go3to4 {
        0% {clip-path: polygon(63.975% 94.96222%, 64.33794% 94.75243%, 64.66344% 94.15485%, 64.95347% 93.21713%, 65.20994% 91.98692%, 65.62993% 88.83962%, 65.93887% 85.09418%, 66.15225% 81.13179%, 66.28553% 77.33371%, 66.35415% 74.08111%, 66.37359% 71.75523%, 66.35582% 68.51652%, 66.30563% 65.63653%, 66.22765% 63.0946%, 66.1265% 60.87006%, 65.87324% 57.29048%, 65.58291% 54.73246%, 65.03933% 52.01985%, 64.79225% 51.40954%, 65.41567% 45.46985%, 66.0391% 39.53015%, 66.0395% 32.26508%, 66.0391% 25%, 64.99596% 25.005%, 63.95284% 25%, 62.90971% 25.005%, 61.86659% 25%, 61.867% 32.31416%, 61.86659% 39.62833%, 62.9907% 39.635%, 64.11483% 39.62833%, 63.50122% 45.96073%, 62.88762% 52.29313%, 62.888% 58.7237%, 62.88762% 65.15428%, 63.39569% 65.07498%, 63.90375% 64.99568%, 64.01661% 65.19158%, 64.26754% 66.10303%, 64.40369% 66.97885%, 64.52506% 68.21568%, 64.61521% 69.87423%, 64.6577% 72.01521%, 64.62292% 74.61534%, 64.49691% 77.04904%, 64.2888% 78.85069%, 64.00774% 79.55471%, 63.73732% 79.26498%, 63.5198% 78.50117%, 63.34999% 77.4213%, 63.2227% 76.18339%, 63.07491% 73.8656%, 63.03489% 72.81206%, 62.67164% 73.89201%, 62.30838% 74.97195%, 61.94512% 76.0519%, 61.58187% 77.13184%, 61.65073% 79.91783%, 61.96491% 86.04703%, 62.26445% 89.32058%, 62.68586% 92.17622%, 62.94857% 93.31674%, 63.24932% 94.19607%, 63.59062% 94.76197%);}
        33.33% {clip-path: polygon(72.49999% 75%, 72.65336% 74.92255%, 72.8023% 74.69525%, 72.94605% 74.32565%, 73.08387% 73.82124%, 73.21498% 73.1896%, 73.33866% 72.43825%, 73.45413% 71.57475%, 73.56065% 70.60662%, 73.65747% 69.54142%, 73.74382% 68.38666%, 73.81896% 67.14991%, 73.88212% 65.83869%, 73.93256% 64.46056%, 73.96952% 63.02304%, 73.99225% 61.53368%, 73.99999% 60%, 73.99225% 58.46634%, 73.96952% 56.97698%, 73.93256% 55.53946%, 73.88212% 54.16132%, 73.81896% 52.85011%, 73.74382% 51.61336%, 73.65747% 50.4586%, 73.56065% 49.3934%, 73.45413% 48.42527%, 73.33866% 47.56176%, 73.21498% 46.81042%, 73.08387% 46.17877%, 72.94605% 45.67437%, 72.8023% 45.30475%, 72.65336% 45.07744%, 72.49999% 45%, 72.34663% 45.07744%, 72.19769% 45.30475%, 72.05394% 45.67437%, 71.91613% 46.17878%, 71.785% 46.81042%, 71.66133% 47.56177%, 71.54586% 48.42528%, 71.43933% 49.3934%, 71.34252% 50.45861%, 71.25617% 51.61336%, 71.18104% 52.85012%, 71.11787% 54.16133%, 71.06744% 55.53946%, 71.03047% 56.97698%, 71.00774% 58.46634%, 71% 60%, 71.00774% 61.53366%, 71.03047% 63.02302%, 71.06744% 64.46054%, 71.11787% 65.83867%, 71.18104% 67.14989%, 71.25617% 68.38665%, 71.34252% 69.54139%, 71.43933% 70.6066%, 71.54586% 71.57473%, 71.66133% 72.43824%, 71.785% 73.18958%, 71.91613% 73.82122%, 72.05394% 74.32563%, 72.19769% 74.69523%, 72.34663% 74.92253%);}
        66.67% {clip-path: polygon(83.49999% 75%, 83.65336% 74.92255%, 83.8023% 74.69525%, 83.94605% 74.32565%, 84.08387% 73.82124%, 84.21498% 73.1896%, 84.33866% 72.43825%, 84.45413% 71.57475%, 84.56065% 70.60662%, 84.65747% 69.54142%, 84.74382% 68.38666%, 84.81896% 67.14991%, 84.88212% 65.83869%, 84.93256% 64.46056%, 84.96952% 63.02304%, 84.99225% 61.53368%, 84.99999% 60%, 84.99225% 58.46634%, 84.96952% 56.97698%, 84.93256% 55.53946%, 84.88212% 54.16132%, 84.81896% 52.85011%, 84.74382% 51.61336%, 84.65747% 50.4586%, 84.56065% 49.3934%, 84.45413% 48.42527%, 84.33866% 47.56176%, 84.21498% 46.81042%, 84.08387% 46.17877%, 83.94605% 45.67437%, 83.8023% 45.30475%, 83.65336% 45.07744%, 83.49999% 45%, 83.34663% 45.07744%, 83.19769% 45.30475%, 83.05394% 45.67437%, 82.91613% 46.17878%, 82.785% 46.81042%, 82.66133% 47.56177%, 82.54586% 48.42528%, 82.43933% 49.3934%, 82.34252% 50.45861%, 82.25617% 51.61336%, 82.18104% 52.85012%, 82.11787% 54.16133%, 82.06744% 55.53946%, 82.03047% 56.97698%, 82.00774% 58.46634%, 82% 60%, 82.00774% 61.53366%, 82.03047% 63.02302%, 82.06744% 64.46054%, 82.11787% 65.83867%, 82.18104% 67.14989%, 82.25617% 68.38665%, 82.34252% 69.54139%, 82.43933% 70.6066%, 82.54586% 71.57473%, 82.66133% 72.43824%, 82.785% 73.18958%, 82.91613% 73.82122%, 83.05394% 74.32563%, 83.19769% 74.69523%, 83.34663% 74.92253%);}
        100% {clip-path: polygon(92.10376% 95%, 92.52125% 95.005%, 92.93876% 95%, 93.35626% 95.005%, 93.77375% 95%, 93.7745% 91.1%, 93.77375% 87.2%, 93.7745% 83.3%, 93.77375% 79.4%, 93.96876% 79.405%, 94.16375% 79.4%, 94.35876% 79.405%, 94.55375% 79.4%, 94.5545% 75.8%, 94.55375% 72.2%, 94.5545% 68.6%, 94.55375% 65%, 94.35876% 65.005%, 94.16375% 65%, 93.96876% 65.005%, 93.77375% 65%, 93.7745% 55%, 93.77375% 45%, 93.7745% 35%, 93.77375% 25%, 93.27125% 25.005%, 92.76875% 25%, 92.26626% 25.005%, 91.76376% 25%, 91.84875% 29.575%, 91.93376% 34.15%, 92.01875% 38.725%, 92.10376% 43.3%, 92.1045% 48.725%, 92.10376% 54.15%, 92.1045% 59.575%, 92.10376% 65%, 91.77375% 65.005%, 91.44375% 65%, 91.11375% 65.005%, 90.78375% 65%, 91.11375% 59.575%, 91.44375% 54.15%, 91.77375% 48.725%, 92.10376% 43.3%, 92.01875% 38.725%, 91.93376% 34.15%, 91.84875% 29.575%, 91.76376% 25%, 91.08375% 35.575%, 90.40376% 46.15%, 89.72375% 56.725%, 89.04376% 67.3%, 89.0445% 70.325%, 89.04376% 73.35%, 89.0445% 76.375%, 89.04376% 79.4%, 89.80876% 79.405%, 90.57376% 79.4%, 91.33876% 79.405%, 92.10376% 79.4%, 92.1045% 83.3%, 92.10376% 87.2%, 92.1045% 91.1%);}
      }
      @keyframes Go4to3 {
        0% {clip-path: polygon(92.10376% 95%, 92.52125% 95.005%, 92.93876% 95%, 93.35626% 95.005%, 93.77375% 95%, 93.7745% 91.1%, 93.77375% 87.2%, 93.7745% 83.3%, 93.77375% 79.4%, 93.96876% 79.405%, 94.16375% 79.4%, 94.35876% 79.405%, 94.55375% 79.4%, 94.5545% 75.8%, 94.55375% 72.2%, 94.5545% 68.6%, 94.55375% 65%, 94.35876% 65.005%, 94.16375% 65%, 93.96876% 65.005%, 93.77375% 65%, 93.7745% 55%, 93.77375% 45%, 93.7745% 35%, 93.77375% 25%, 93.27125% 25.005%, 92.76875% 25%, 92.26626% 25.005%, 91.76376% 25%, 91.84875% 29.575%, 91.93376% 34.15%, 92.01875% 38.725%, 92.10376% 43.3%, 92.1045% 48.725%, 92.10376% 54.15%, 92.1045% 59.575%, 92.10376% 65%, 91.77375% 65.005%, 91.44375% 65%, 91.11375% 65.005%, 90.78375% 65%, 91.11375% 59.575%, 91.44375% 54.15%, 91.77375% 48.725%, 92.10376% 43.3%, 92.01875% 38.725%, 91.93376% 34.15%, 91.84875% 29.575%, 91.76376% 25%, 91.08375% 35.575%, 90.40376% 46.15%, 89.72375% 56.725%, 89.04376% 67.3%, 89.0445% 70.325%, 89.04376% 73.35%, 89.0445% 76.375%, 89.04376% 79.4%, 89.80876% 79.405%, 90.57376% 79.4%, 91.33876% 79.405%, 92.10376% 79.4%, 92.1045% 83.3%, 92.10376% 87.2%, 92.1045% 91.1%);}
        33.33% {clip-path: polygon(83.49999% 75%, 83.65336% 74.92255%, 83.8023% 74.69525%, 83.94605% 74.32565%, 84.08387% 73.82124%, 84.21498% 73.1896%, 84.33866% 72.43825%, 84.45413% 71.57475%, 84.56065% 70.60662%, 84.65747% 69.54142%, 84.74382% 68.38666%, 84.81896% 67.14991%, 84.88212% 65.83869%, 84.93256% 64.46056%, 84.96952% 63.02304%, 84.99225% 61.53368%, 84.99999% 60%, 84.99225% 58.46634%, 84.96952% 56.97698%, 84.93256% 55.53946%, 84.88212% 54.16132%, 84.81896% 52.85011%, 84.74382% 51.61336%, 84.65747% 50.4586%, 84.56065% 49.3934%, 84.45413% 48.42527%, 84.33866% 47.56176%, 84.21498% 46.81042%, 84.08387% 46.17877%, 83.94605% 45.67437%, 83.8023% 45.30475%, 83.65336% 45.07744%, 83.49999% 45%, 83.34663% 45.07744%, 83.19769% 45.30475%, 83.05394% 45.67437%, 82.91613% 46.17878%, 82.785% 46.81042%, 82.66133% 47.56177%, 82.54586% 48.42528%, 82.43933% 49.3934%, 82.34252% 50.45861%, 82.25617% 51.61336%, 82.18104% 52.85012%, 82.11787% 54.16133%, 82.06744% 55.53946%, 82.03047% 56.97698%, 82.00774% 58.46634%, 82% 60%, 82.00774% 61.53366%, 82.03047% 63.02302%, 82.06744% 64.46054%, 82.11787% 65.83867%, 82.18104% 67.14989%, 82.25617% 68.38665%, 82.34252% 69.54139%, 82.43933% 70.6066%, 82.54586% 71.57473%, 82.66133% 72.43824%, 82.785% 73.18958%, 82.91613% 73.82122%, 83.05394% 74.32563%, 83.19769% 74.69523%, 83.34663% 74.92253%);}
        66.67% {clip-path: polygon(72.49999% 75%, 72.65336% 74.92255%, 72.8023% 74.69525%, 72.94605% 74.32565%, 73.08387% 73.82124%, 73.21498% 73.1896%, 73.33866% 72.43825%, 73.45413% 71.57475%, 73.56065% 70.60662%, 73.65747% 69.54142%, 73.74382% 68.38666%, 73.81896% 67.14991%, 73.88212% 65.83869%, 73.93256% 64.46056%, 73.96952% 63.02304%, 73.99225% 61.53368%, 73.99999% 60%, 73.99225% 58.46634%, 73.96952% 56.97698%, 73.93256% 55.53946%, 73.88212% 54.16132%, 73.81896% 52.85011%, 73.74382% 51.61336%, 73.65747% 50.4586%, 73.56065% 49.3934%, 73.45413% 48.42527%, 73.33866% 47.56176%, 73.21498% 46.81042%, 73.08387% 46.17877%, 72.94605% 45.67437%, 72.8023% 45.30475%, 72.65336% 45.07744%, 72.49999% 45%, 72.34663% 45.07744%, 72.19769% 45.30475%, 72.05394% 45.67437%, 71.91613% 46.17878%, 71.785% 46.81042%, 71.66133% 47.56177%, 71.54586% 48.42528%, 71.43933% 49.3934%, 71.34252% 50.45861%, 71.25617% 51.61336%, 71.18104% 52.85012%, 71.11787% 54.16133%, 71.06744% 55.53946%, 71.03047% 56.97698%, 71.00774% 58.46634%, 71% 60%, 71.00774% 61.53366%, 71.03047% 63.02302%, 71.06744% 64.46054%, 71.11787% 65.83867%, 71.18104% 67.14989%, 71.25617% 68.38665%, 71.34252% 69.54139%, 71.43933% 70.6066%, 71.54586% 71.57473%, 71.66133% 72.43824%, 71.785% 73.18958%, 71.91613% 73.82122%, 72.05394% 74.32563%, 72.19769% 74.69523%, 72.34663% 74.92253%);}
        100% {clip-path: polygon(63.975% 94.96222%, 64.33794% 94.75243%, 64.66344% 94.15485%, 64.95347% 93.21713%, 65.20994% 91.98692%, 65.62993% 88.83962%, 65.93887% 85.09418%, 66.15225% 81.13179%, 66.28553% 77.33371%, 66.35415% 74.08111%, 66.37359% 71.75523%, 66.35582% 68.51652%, 66.30563% 65.63653%, 66.22765% 63.0946%, 66.1265% 60.87006%, 65.87324% 57.29048%, 65.58291% 54.73246%, 65.03933% 52.01985%, 64.79225% 51.40954%, 65.41567% 45.46985%, 66.0391% 39.53015%, 66.0395% 32.26508%, 66.0391% 25%, 64.99596% 25.005%, 63.95284% 25%, 62.90971% 25.005%, 61.86659% 25%, 61.867% 32.31416%, 61.86659% 39.62833%, 62.9907% 39.635%, 64.11483% 39.62833%, 63.50122% 45.96073%, 62.88762% 52.29313%, 62.888% 58.7237%, 62.88762% 65.15428%, 63.39569% 65.07498%, 63.90375% 64.99568%, 64.01661% 65.19158%, 64.26754% 66.10303%, 64.40369% 66.97885%, 64.52506% 68.21568%, 64.61521% 69.87423%, 64.6577% 72.01521%, 64.62292% 74.61534%, 64.49691% 77.04904%, 64.2888% 78.85069%, 64.00774% 79.55471%, 63.73732% 79.26498%, 63.5198% 78.50117%, 63.34999% 77.4213%, 63.2227% 76.18339%, 63.07491% 73.8656%, 63.03489% 72.81206%, 62.67164% 73.89201%, 62.30838% 74.97195%, 61.94512% 76.0519%, 61.58187% 77.13184%, 61.65073% 79.91783%, 61.96491% 86.04703%, 62.26445% 89.32058%, 62.68586% 92.17622%, 62.94857% 93.31674%, 63.24932% 94.19607%, 63.59062% 94.76197%);}
      }

              
            
!

JS

              
                let index = 0;
const next = () => {
  if (index === 3) return;
  index++;
  document.body.className = `go${index}to${index + 1}`;
};
const prev = () => {
  if (index === 0) return;
  document.body.className = `go${index + 1}to${index}`;
  index--;
};

              
            
!
999px

Console