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

              
                <div class="cartoon">
  <div class="head">
    <div class="front-light"></div>
    <div class="back-light"></div>
    <div class="ear"></div>
    <div class="cheek"></div>
    <div class="nose"></div>
    <div class="bear-shadow"></div>
  </div>
  <div class="beard">
    <div class="bear-shadow"></div>
  </div>
  <div class="hair">
    <div class="hair-dark"></div>
  </div>
  <div class="body">
    <div class="body-light"></div>
    <div class="body-dark"></div>
    <div class="shorts">
      <div class="shorts-lines"></div>
      <div class="shorts-lines-dark"></div>
      <div class="shorts-red"></div>
    </div>
    <div class="body-line body-line-1"></div>
    <div class="body-line body-line-2"></div>
    <div class="body-line body-line-3"></div>
    <div class="body-line body-line-4"></div>
    <div class="body-line body-line-5"></div>
    <div class="body-dark-line body-dark-line-1"></div>
    <div class="body-dark-line body-dark-line-2"></div>
  </div>
  <div class="jersey">
    <div class="red red-1"></div>
    <div class="red red-2"></div>
    <div class="red red-3"></div>
    <div class="dark-blue"></div>
    <div class="bright-red"></div>
    <div class="yellow yellow-1"></div>
    <div class="yellow yellow-2"></div>
    <div class="yellow yellow-3"></div>
    <div class="zero"></div>
    <div class="light-top"></div>
    <div class="jersey-shadow"></div>
  </div>
  <div class="hand-1">
    <div class="hand-1-shadow"></div>
  </div>
  <div class="body-top">
    <div class="body">
      <div class="body-light"></div>
      <div class="body-dark"></div>
    </div>
  </div>
  <div class="hand-2">
    <div class="hand-2-shadow"></div>
  </div>
</div>
              
            
!

CSS

              
                html, body {
  background: #fabf54;
}

.cartoon {
  position: absolute;
  bottom: 0%;
  left: 50%;
  transform: translate(-50%, 0%);
  width: 90vmin;
  height: 90vmin;
}

.cartoon div {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.body {
  background: #4f79c1;
  clip-path: polygon(57.00% 100.78%,58.33% 96.00%,58.00% 93.06%,57.72% 92.19%,58.03% 91.50%,57.67% 89.89%,58.50% 88.69%,58.42% 85.36%,59.14% 84.50%,59.31% 82.19%,59.31% 75.31%,61.14% 69.61%,61.36% 61.39%,61.92% 58.69%,61.89% 57.25%,61.58% 56.44%,58.53% 55.75%,54.11% 55.11%,48.03% 53.39%,44.69% 53.08%,39.31% 51.94%,35.75% 50.92%,32.56% 49.67%,30.17% 48.89%,25.56% 46.69%,27.86% 40.17%,32.00% 41.75%,32.86% 42.25%,37.50% 42.61%,41.44% 43.25%,38.36% 41.03%,35.39% 39.39%,28.69% 35.90%,30.69% 32.30%,32.47% 29.89%,34.81% 31.97%,42.44% 36.00%,45.17% 37.31%,49.97% 38.72%,54.89% 40.17%,60.47% 42.56%,65.36% 43.06%,68.33% 41.97%,71.56% 41.83%,73.53% 42.11%,74.64% 41.25%,76.31% 40.94%,77.44% 41.17%,77.94% 40.67%,78.42% 41.78%,78.42% 42.44%,79.28% 43.31%,79.83% 43.56%,80.31% 44.28%,81.42% 45.53%,82.67% 48.39%,84.19% 53.08%,84.36% 55.14%,84.39% 63.78%,84.19% 65.58%,83.14% 69.69%,80.22% 77.92%,79.31% 81.75%,78.44% 84.19%,77.75% 85.22%,78.28% 86.11%,78.25% 87.06%,77.94% 87.50%,78.72% 89.06%,79.33% 91.25%,81.83% 95.22%,82.78% 97.19%,83.75% 101.42%)
}

.body-top {
  clip-path: polygon(20% 20%, 40% 20%, 40% 40%, 20% 40%);
}

.body-light {
  background: #6b8dcd;
  clip-path: polygon(92.00% 12.22%,89.44% 90.56%,74.44% 92.78%,63.78% 94.44%,69.78% 93.00%,78.78% 91.78%,78.78% 89.33%,80.11% 86.89%,78.33% 72.00%,77.11% 62.89%,79.33% 61.11%,82.67% 59.78%,83.78% 57.11%,83.56% 54.44%,81.22% 49.56%,83.22% 42.78%,72.97% 41.14%,75.58% 43.81%,76.64% 46.14%,74.78% 49.31%,74.64% 50.75%,73.14% 51.42%,68.97% 50.53%,67.03% 49.42%,60.11% 47.72%,57.47% 45.94%,56.83% 44.44%,57.17% 43.83%,60.61% 45.42%,61.42% 45.33%,57.89% 40.39%,43.33% 35.78%,38.31% 36.06%,27.78% 33.86%,33.72% 27.56%,24.25% 35.28%,30.11% 41.06%,32.25% 41.83%,32.86% 42.33%,38.25% 42.69%,41.53% 43.28%,42.67% 43.97%,36.19% 46.39%,33.58% 46.69%,32.72% 46.39%,31.72% 44.39%,27.44% 39.11%,21.75% 64.78%,57.67% 81.00%,62.11% 72.22%,62.42% 75.44%,61.67% 78.36%,60.58% 80.06%,61.33% 77.75%,60.69% 78.00%,61.86% 74.22%,61.36% 74.33%,60.44% 76.44%,55.11% 85.89%,7.78% 59.89%,33.22% 4.11%);
}

.body-dark {
  background: #2a4576;
  clip-path: polygon(20.31% 45.67%,56.97% 87.81%,58.28% 86.53%,59.00% 86.69%,60.22% 86.28%,60.81% 85.22%,62.67% 85.39%,63.89% 84.28%,65.86% 83.56%,67.92% 83.33%,69.36% 83.61%,71.42% 83.61%,72.92% 84.17%,72.64% 83.53%,70.78% 82.67%,63.11% 83.56%,60.53% 84.53%,57.00% 87.00%,49.78% 68.67%,61.89% 57.89%,61.44% 56.00%,61.42% 52.11%,65.33% 52.94%,68.19% 53.97%,69.58% 55.17%,70.56% 62.44%,72.56% 66.78%,75.56% 70.89%,76.00% 71.83%,76.53% 70.58%,75.64% 66.50%,73.14% 61.22%,72.67% 59.17%,74.75% 59.69%,75.92% 59.56%,75.67% 57.03%,75.89% 55.17%,78.89% 54.44%,73.19% 54.25%,68.53% 52.06%,62.78% 51.19%,58.67% 49.89%,51.53% 45.92%,43.64% 42.33%,45.00% 41.89%,40.61% 40.75%,37.42% 39.36%,39.25% 39.06%,38.22% 38.36%,39.83% 37.97%,32.61% 36.42%,29.47% 35.33%,27.44% 33.33%,25.78% 35.44%,34.00% 39.67%,41.22% 43.00%,43.94% 44.75%,47.50% 46.72%,50.83% 48.42%,55.89% 50.44%,49.31% 50.50%,42.67% 50.56%,39.97% 50.33%,32.22% 48.00%,24.44% 43.22%)
}

.hair {
  background: #4c4137;
  clip-path: polygon(77.78% 40.69%,77.14% 39.36%,76.47% 37.86%,76.22% 37.08%,76.19% 36.14%,77.08% 34.36%,77.92% 33.67%,78.33% 32.42%,78.44% 31.14%,77.36% 30.33%,76.42% 30.22%,74.19% 31.22%,73.36% 29.89%,73.25% 27.53%,72.92% 26.75%,72.94% 25.50%,73.92% 24.53%,74.83% 24.69%,74.42% 24.11%,75.58% 23.92%,75.17% 23.58%,74.28% 23.58%,75.28% 23.11%,74.25% 23.14%,75.36% 22.67%,74.17% 21.61%,72.64% 20.75%,71.25% 21.17%,70.00% 21.69%,69.31% 21.14%,70.03% 21.11%,69.06% 20.75%,69.64% 20.53%,70.42% 19.78%,69.75% 19.72%,70.67% 19.11%,69.75% 18.00%,70.86% 18.53%,69.92% 17.61%,70.33% 17.42%,71.36% 17.75%,71.39% 16.78%,71.78% 16.50%,71.78% 17.44%,72.44% 16.92%,73.39% 16.53%,74.00% 16.92%,75.17% 16.53%,74.83% 17.22%,75.42% 16.94%,76.33% 17.14%,77.19% 18.08%,80.50% 19.81%,80.50% 19.06%,81.14% 20.11%,81.36% 19.58%,82.97% 21.28%,82.97% 20.50%,83.47% 21.47%,84.19% 23.19%,85.39% 25.17%,85.42% 26.53%,86.97% 26.83%,85.36% 27.06%,85.56% 27.33%,86.50% 27.42%,88.19% 27.31%,86.56% 27.86%,87.36% 28.36%,86.42% 28.22%,87.03% 29.00%,85.94% 28.53%,86.67% 29.44%,86.75% 30.03%,86.11% 29.47%,85.08% 29.47%,85.22% 30.22%,86.50% 31.36%,86.56% 31.72%,85.36% 30.89%,85.31% 32.00%,84.92% 33.22%,83.83% 34.47%,83.03% 35.97%,81.36% 37.36%,80.19% 38.03%,79.53% 38.89%,78.39% 39.83%)
}

.hair-dark {
  background: #3f342a;
  clip-path: polygon(72.19% 15.06%,73.75% 20.39%,74.58% 21.47%,78.19% 24.14%,81.22% 25.19%,83.06% 27.00%,83.03% 25.31%,83.33% 24.72%,84.36% 24.89%,85.17% 23.17%,86.14% 25.14%,84.75% 27.61%,85.42% 30.14%,85.39% 34.06%,80.67% 39.78%,74.31% 42.31%,59.11% 24.69%,67.50% 11.33%);
}

.beard {
  background: #7b5131;
  clip-path: polygon(73.81% 29.92%,70.31% 31.53%,67.89% 32.11%,65.47% 32.50%,65.19% 30.86%,63.58% 28.83%,62.92% 29.17%,62.36% 29.83%,62.44% 30.67%,63.31% 30.78%,64.39% 31.61%,64.39% 32.28%,63.19% 32.08%,62.53% 31.64%,61.56% 32.19%,60.94% 33.36%,60.08% 34.14%,60.14% 35.78%,60.44% 37.61%,60.83% 38.19%,62.67% 38.28%,64.61% 39.92%,67.28% 39.50%,69.33% 38.69%,70.36% 37.75%,72.22% 32.58%,73.06% 31.08%,74.42% 30.03%);
}

.bear-shadow {
  background: rgba(0,0,0,0.2);
  clip-path: polygon(65.14% 33.8%,66.28% 34.33%,68.33% 34.56%,70.11% 34.86%,71.44% 34.33%,72.06% 33.14%,73.08% 32.39%,72.86% 33.08%,72.69% 34.06%,72.69% 34.58%,73.33% 34.92%,75.25% 34.86%,76.83% 34.42%,75.06% 35.67%,74.17% 37.42%,71.31% 38.47%,70.25% 39.42%,67.33% 43.61%,64.08% 45.25%,59.53% 36.56%,61.64% 34.25%,63.50% 34.19%);
}

.head {
  background: #e0a88f;
  clip-path: polygon(65.69% 43.61%,64.89% 41.92%,64.89% 38.39%,62.22% 31.75%,62.92% 31.31%,62.86% 30.39%,63.44% 29.03%,62.47% 27.67%,62.50% 26.89%,62.78% 26.56%,64.94% 25.50%,66.89% 24.56%,66.94% 23.67%,68.28% 22.42%,69.11% 22.19%,72.33% 20.78%,76.47% 20.06%,83.36% 31.69%,77.86% 39.78%,77.58% 43.44%);
}

.front-light {
  background: #efd3c4;
  clip-path: polygon(63.56% 29.06%,62.81% 27.67%,63.00% 26.83%,66.97% 24.83%,67.33% 24.25%,67.33% 23.61%,69.67% 22.75%,72.28% 21.83%,74.58% 19.28%,67.78% 18.56%,60.00% 25.14%,62.72% 29.06%);
}

.back-light {
  background: #e7baa5;
  clip-path: polygon(72.72% 42.92%,71.89% 41.17%,71.89% 40.56%,73.06% 39.61%,74.83% 37.69%,75.44% 37.14%,77.58% 36.86%,79.67% 42.50%);
}

.ear {
  background: #ad8676;
  clip-path: polygon(76.42% 33.94%,75.47% 34.61%,74.61% 34.44%,73.47% 33.86%,73.11% 33.06%,73.83% 33.08%,74.56% 32.39%,75.08% 32.86%,75.22% 31.64%,76.11% 30.81%,77.42% 30.75%,77.94% 31.19%,78.03% 32.31%,77.56% 32.81%,77.39% 31.94%,76.69% 31.72%,75.94% 32.06%,75.47% 31.97%,75.81% 32.53%,76.61% 32.78%,75.67% 33.72%,75.22% 33.44%,74.94% 33.89%,74.33% 33.44%,73.28% 33.28%,73.58% 33.78%,74.22% 33.89%,74.75% 34.22%,75.72% 34.22%);
}

.cheek {
  background: #c0957d;
  clip-path: polygon(67.08% 33.14%,67.03% 31.39%,66.39% 30.22%,66.47% 29.31%,68.61% 29.31%,73.89% 30.11%,67.75% 33.47%);
}

.nose {
  background: #ad8676;
  clip-path: polygon(64.78% 28.75%,64.94% 29.25%,65.44% 29.28%,65.50% 28.81%,64.86% 28.69%,64.25% 27.94%,63.53% 27.47%,63.08% 27.92%,63.47% 28.33%,64.19% 28.67%,64.58% 28.67%);
}

.hand-1 {
  background: #e0a88f;
  clip-path: polygon(32.61% 30.17%,31.53% 29.08%,30.64% 28.17%,28.61% 27.83%,26.28% 27.19%,25.25% 28.19%,24.53% 28.67%,24.28% 29.47%,24.22% 30.39%,24.08% 31.36%,24.58% 32.33%,24.83% 32.67%,24.83% 33.47%,25.36% 34.83%,25.78% 34.97%,26.14% 34.33%,27.11% 34.72%,31.53% 37.5%);
}

.hand-1-shadow {
  background: #826655;
  clip-path: polygon(23.44% 29.33%,24.53% 29.31%,25.28% 29.67%,28.06% 30.50%,27.00% 30.64%,25.47% 30.33%,24.64% 30.31%,23.72% 30.86%,23.94% 31.44%,24.61% 31.17%,25.08% 31.39%,27.94% 32.28%,27.33% 32.58%,25.83% 32.31%,25.11% 32.14%,24.22% 33.28%,24.67% 33.42%,25.19% 33.08%,26.14% 33.61%,28.00% 34.36%,31.69% 34.6%,30.22% 36.36%,25.36% 35.22%);
}

.jersey {
  background: #20387a;
  clip-path: polygon(13.17% 94.72%,19.39% 95.11%,19.61% 94.72%,24.17% 94.83%,24.33% 94.39%,27.06% 94.28%,26.39% 84.33%,27.11% 79.61%,26.61% 72.33%,27.06% 63.11%,27.72% 59.33%,28.11% 48.06%,28.56% 44.83%,29.72% 43.39%,30.22% 40.94%,28.94% 33.28%,25.89% 27.39%,25.00% 27.39%,23.00% 28.83%,19.17% 30.22%,16.94% 32.11%,14.67% 34.67%,15.28% 38.78%,15.00% 43.50%,13.50% 47.06%,12.17% 50.89%,11.50% 52.06%,12.83% 53.94%,13.78% 55.33%,15.78% 56.89%,16.39% 56.11%,16.89% 60.06%,16.72% 65.94%,15.67% 75.83%,14.89% 82.83%,14.17% 88.61%);
}

.hand-2 {
  background: #e2a892;
  clip-path: polygon(17.17% 32.0%,15.89% 33.42%,15.67% 34.64%,15.53% 35.53%,15.97% 36.72%,16.50% 37.58%,16.50% 38.61%,16.06% 38.64%,15.22% 39.50%,13.75% 38.14%,13.33% 37.72%,13.53% 36.83%,13.47% 36.22%,13.89% 35.39%,13.94% 34.11%,14.56% 33.53%,15.14% 33.53%,16.14% 31.97%,17.00% 31.97%);
}

.hand-2-shadow {
  background: #856557;
  clip-path: polygon(12.06% 36.8%,14.06% 36.28%,14.36% 36.56%,14.39% 37.53%,15.33% 36.97%,14.94% 36.03%,14.81% 35.22%,16.19% 34.03%,18.14% 40.14%,10.67% 40.61%);
}

.red {
  background: #83000f;
}

.red-1 {
  clip-path: polygon(13.28% 55.72%,14.72% 54.61%,16.17% 52.83%,16.50% 54.17%,16.44% 59.83%,10.94% 97.56%,19.50% 95.44%,19.06% 93.44%,19.89% 83.39%,20.00% 73.61%,19.50% 71.33%,20.28% 67.17%,22.61% 58.67%,23.28% 50.50%,22.94% 42.39%,22.39% 41.22%,23.83% 40.61%,23.67% 43.22%,24.06% 44.67%,24.39% 46.89%,23.78% 53.67%,23.61% 59.94%,23.28% 71.89%,23.11% 80.33%,22.67% 85.56%,22.11% 98.44%,9.06% 98.78%);
}

.red-2 {
  clip-path: polygon(21.11% 32.7%,23.44% 31.94%,23.22% 34.17%,25.39% 34.28%,25.39% 37.17%,24.28% 39.33%,24.06% 37.94%,24.06% 35.78%,23.33% 34.89%,21.94% 34.89%,20.94% 34.28%);
}

.red-3 {
  clip-path: polygon(16.94% 34.2%,18.83% 33.56%,18.83% 34.56%,19.83% 35.67%,20.72% 36.44%,20.78% 37.22%,21.33% 37.89%,21.72% 41.94%,21.28% 42.22%,20.72% 44.50%,21.17% 50.11%,20.44% 54.72%,20.44% 58.83%,19.89% 62.56%,19.39% 68.17%,19.28% 70.44%,18.06% 74.94%,18.44% 68.50%,18.72% 64.33%,19.11% 59.44%,19.78% 47.06%,19.67% 42.28%,20.33% 41.67%,20.22% 40.17%,19.33% 38.17%,19.17% 36.61%,18.44% 35.94%,17.44% 35.78%,16.89% 34.89%);
}

.yellow {
  background: #fcbf54;
}

.yellow-1 {
  clip-path: polygon(19.94% 29.6%,18.61% 31.17%,18.61% 32.28%,19.22% 33.00%,20.17% 33.28%,20.83% 32.94%,19.89% 32.83%,19.22% 32.33%,19.00% 31.06%,21.67% 28.28%);
}

.yellow-2 {
  clip-path: polygon(19.67% 35.5%,20.50% 35.72%,20.94% 35.50%,22.06% 36.39%,22.56% 37.11%,22.56% 38.06%,22.72% 38.33%,22.94% 37.83%,22.67% 36.67%,21.11% 35.39%,21.56% 35.17%,22.67% 36.11%,23.33% 38.17%,23.61% 37.94%,23.22% 36.61%,21.94% 35.17%,22.50% 35.00%,23.67% 36.56%,23.50% 36.28%,22.61% 35.00%,23.17% 35.00%,23.94% 35.89%,24.11% 38.11%,24.61% 38.94%,23.67% 38.94%,22.89% 38.94%,22.44% 39.33%,21.44% 39.33%,21.44% 38.11%,20.78% 37.06%,20.78% 36.50%);
}

.yellow-3 {
  clip-path: polygon(20.75% 54.0%,21.19% 52.17%,21.47% 49.42%,21.39% 47.92%,21.61% 45.61%,21.44% 44.22%,21.00% 43.94%,20.33% 44.00%,20.67% 45.28%,20.56% 46.67%,20.83% 46.67%,20.61% 47.83%,21.00% 50.33%,20.50% 52.11%,20.50% 53.17%,20.06% 54.83%,20.28% 58.50%,19.61% 60.67%,19.61% 64.00%,19.17% 65.94%,18.33% 68.28%,19.67% 68.67%,20.06% 66.11%,20.06% 62.67%,20.06% 61.39%,20.44% 60.44%,20.83% 58.44%,20.67% 55.53%,20.81% 55.53%,21.00% 54.42%,21.28% 52.78%,21.69% 49.78%,21.69% 47.72%,22.08% 46.14%,22.39% 44.83%,22.33% 43.36%,22.78% 43.31%,23.50% 43.61%,23.64% 44.67%,23.44% 51.83%,23.14% 54.19%,23.03% 57.28%,22.44% 60.33%,21.97% 63.17%,21.08% 65.89%,20.31% 67.53%,20.50% 65.28%,20.78% 61.56%,21.08% 57.25%,20.83% 55.61%,20.64% 55.47%);
}

.zero {
  background: #20387a;
  clip-path: polygon(23.03% 46.2%,23.06% 47.47%,22.89% 48.67%,23.00% 51.64%,22.47% 53.58%,22.50% 55.81%,22.39% 58.03%,21.78% 61.11%,21.25% 63.61%,21.53% 60.97%,21.50% 59.14%,21.86% 57.25%,21.47% 55.61%,21.69% 54.25%,22.36% 52.00%,22.25% 50.17%,21.97% 49.14%,22.61% 47.97%,22.61% 46.72%);
}

.dark-blue {
  background: #162962;
  clip-path: polygon(12.69% 56.58%,13.72% 51.64%,14.44% 50.53%,15.19% 48.31%,15.39% 45.61%,15.72% 43.72%,16.17% 43.19%,16.31% 43.53%,16.72% 44.81%,16.94% 47.14%,16.08% 50.28%,15.31% 51.61%,14.83% 52.17%,14.56% 54.78%,13.56% 55.58%,15.78% 66.39%,17.06% 64.92%,17.72% 64.36%,18.19% 65.58%,18.44% 68.17%,18.14% 75.56%,17.39% 97.08%,10.17% 96.39%);
}

.bright-red {
  background: #ff003c;
  clip-path: polygon(23.89% 94.1%,25.50% 94.14%,25.39% 89.97%,25.58% 82.94%,26.25% 70.33%,26.75% 60.36%,26.72% 56.69%,28.33% 54.86%,28.89% 45.11%,28.11% 43.92%,27.14% 42.97%,26.39% 43.00%,26.28% 43.42%,26.69% 44.61%,26.81% 49.00%,26.75% 52.33%,26.94% 54.53%,26.47% 55.28%,25.75% 56.22%,25.47% 59.39%,24.86% 65.06%,24.11% 76.86%,23.89% 84.89%,23.81% 89.08%)
}

.light-top {
  background: rgba(255,255,255,0.4);
  clip-path: polygon(14.72% 33.8%,18.39% 31.56%,20.78% 30.50%,27.61% 28.33%,30.22% 24.00%,25.83% 23.17%,12.89% 30.89%);
}

.jersey-shadow {
  background: rgba(0,0,0,0.4);
  clip-path: polygon(29.53% 32.9%,24.56% 33.25%,23.50% 34.17%,23.28% 35.97%,23.72% 37.42%,24.50% 38.72%,23.89% 41.44%,24.03% 42.14%,25.36% 43.83%,25.92% 43.08%,27.17% 42.97%,27.92% 43.61%,29.22% 45.86%,28.53% 50.22%,27.83% 46.78%,27.61% 45.53%,26.92% 44.50%,25.89% 44.25%,25.08% 44.69%,23.64% 44.72%,23.61% 45.06%,25.03% 46.17%,25.67% 47.31%,25.97% 49.56%,26.08% 51.56%,25.39% 54.22%,24.58% 55.47%,24.19% 55.75%,25.06% 56.00%,26.61% 55.25%,28.92% 55.03%,27.92% 94.03%,23.89% 94.08%,22.69% 94.50%,19.83% 94.39%,19.03% 94.86%,14.17% 94.64%,12.92% 94.72%,4.47% 48.61%,14.56% 43.36%,15.61% 41.78%,16.39% 43.19%,17.42% 44.44%,17.58% 42.33%,17.92% 40.92%,18.36% 41.36%,18.89% 41.25%,18.44% 40.14%,17.42% 38.06%,17.72% 36.69%,16.64% 36.25%,15.72% 35.25%,15.06% 30.58%,2.11% 47.89%,7.17% 97.31%,31.67% 95.39%,32.61% 33.42%);
}

.shorts {
  background: #315bb1;
  clip-path: polygon(54.81% 94.00%,60.89% 92.17%,71.08% 90.00%,77.97% 88.86%,78.58% 89.61%,78.67% 90.69%,78.75% 91.25%,79.31% 91.94%,73.47% 92.53%,70.67% 92.97%,69.44% 92.94%,65.64% 93.97%,63.56% 94.58%,68.67% 93.53%,72.47% 92.97%,78.75% 92.28%,82.00% 92.36%,85.67% 100.4%,54.39% 100.3%);
}

.shorts-lines {
  background: #2a468f;
  clip-path: polygon(55.42% 91.67%,70.72% 89.81%,68.00% 90.97%,65.28% 92.58%,63.67% 93.75%,61.89% 94.97%,60.22% 95.78%,57.25% 96.22%,56.11% 100.89%,67.39% 100.81%,67.44% 97.42%,67.86% 95.22%,68.31% 93.94%,68.39% 95.78%,68.44% 98.08%,67.78% 100.50%,69.47% 100.67%,69.53% 96.06%,69.33% 93.78%,69.64% 94.11%,70.11% 95.36%,70.31% 97.17%,70.50% 98.92%,70.06% 100.92%,76.53% 100.81%,75.42% 97.22%,74.92% 95.61%,74.58% 93.28%,75.42% 94.56%,75.92% 96.28%,76.28% 98.00%,76.42% 98.97%,76.08% 99.22%,76.81% 101.86%,77.58% 100.39%,77.22% 96.97%,77.06% 94.97%,77.14% 92.97%,77.31% 94.22%,77.86% 95.86%,78.25% 97.61%,78.19% 98.72%,77.50% 102.92%,55.53% 102.06%);
}

.shorts-lines-dark {
  background: #19306a;
  clip-path: polygon(56.31% 100.75%,57.03% 95.67%,58.22% 96.25%,59.39% 96.17%,60.89% 95.83%,62.58% 95.25%,64.97% 94.39%,64.33% 94.78%,63.92% 95.53%,63.28% 97.81%,63.19% 101.4%,64.92% 101.1%,65.28% 97.56%,65.89% 95.61%,66.50% 94.50%,66.39% 95.97%,66.42% 97.69%,65.61% 102.4%);
}

.shorts-red {
  background: #ff033b;
  clip-path: polygon(72.89% 100.6%,72.75% 98.25%,71.86% 93.36%,73.75% 93.17%,74.14% 96.03%,74.72% 98.56%,75.19% 101.8%);
}

.body-line {
  background: #40609c;
}

.body-line-1 {
  clip-path: polygon(60.03% 74.7%,60.58% 74.31%,62.36% 70.69%,65.17% 67.56%,63.69% 68.08%,62.75% 68.72%,61.61% 70.58%,60.36% 73.50%);
}

.body-line-2 {
  clip-path: polygon(63.81% 81.0%,65.17% 80.81%,65.97% 80.56%,67.06% 80.56%,72.39% 79.39%,75.06% 79.19%,77.53% 79.39%,76.47% 79.00%,73.78% 78.81%,72.42% 78.92%,71.31% 79.22%,69.14% 79.47%,66.89% 79.58%,64.92% 80.22%,63.92% 80.94%,64.53% 80.11%,66.03% 79.28%,68.47% 78.56%,70.28% 78.17%,73.39% 78.17%,75.92% 77.83%,77.61% 77.69%,76.89% 77.31%,75.00% 77.28%,70.81% 77.25%,69.33% 77.44%,67.61% 77.89%,65.56% 78.17%,66.17% 78.81%,64.47% 80.14%,63.92% 81.00%);
}

.body-line-3 {
  clip-path: polygon(78.75% 85.6%,77.56% 85.17%,77.47% 84.39%,77.89% 83.31%,77.89% 82.44%,77.67% 82.06%,76.89% 82.03%,75.53% 82.19%,74.17% 82.08%,75.69% 81.86%,77.50% 81.58%,78.28% 81.36%,78.75% 81.81%,78.69% 84.56%);
}

.body-line-4 {
  clip-path: polygon(62.56% 88.1%,63.61% 87.67%,64.72% 87.36%,66.81% 87.42%,69.36% 87.56%,72.97% 87.39%,74.11% 87.19%,73.11% 86.89%,72.25% 86.94%,69.61% 86.97%,66.39% 86.89%,64.86% 86.81%,63.72% 87.28%,62.89% 87.75%);
}

.body-line-5 {
  clip-path: polygon(57.50% 91.5%,58.22% 90.75%,59.14% 90.39%,60.42% 90.39%,62.75% 90.47%,65.28% 90.00%,66.89% 89.58%,68.17% 89.03%,66.14% 89.64%,64.67% 89.72%,62.44% 89.64%,59.67% 89.56%,58.42% 89.86%,57.28% 90.83%);
}

.body-dark-line {
  background: #2a4576;
}

.body-dark-line-1 {
  clip-path: polygon(82.86% 50.5%,81.64% 49.72%,81.17% 49.53%,81.22% 49.92%,82.06% 50.28%);
}

.body-dark-line-2 {
  clip-path: polygon(82.89% 52.5%,81.19% 51.47%,80.75% 51.42%,80.83% 51.81%,82.03% 52.39%);
}
              
            
!

JS

              
                
              
            
!
999px

Console