cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              // This is a part of my blog post
// https://codepen.io/ThiemelJiri/post/mapping-polygonal-shapes-to-3d-css-mesh
   ‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾


- var meshSegmentsX = 14; // must be kept in sync with SCSS
- var meshSegmentsY = 7; // must be kept in sync with SCSS



h1.sr-only Earth
p.motto Cherish our precious diamond!

.scene
  .scene-x
    .scene-y
      .scene-z

        .sphere
          .mesh
            - for (var x = 1; x <= meshSegmentsX; x++)
              .column
                - for (var y = 1; y <= meshSegmentsY; y++)
                  .segment
            
          
!
            
              // Tested in:
//   Chrome :)
//   Opera :)
//   Firefox :/
//   Safari :(  (hopefully not a sad future of Earth)



////////////////
//  Settings  //
////////////////

$meshRadius: 35vmin;
$meshSegmentsX: 14; // must be kept in sync with Pug
$meshSegmentsY: 7; // must be kept in sync with Pug
$meshWidth: $meshRadius * sin( pi() / $meshSegmentsX ) * $meshSegmentsX * 2;  // full sphere
$meshSegmentWidth: $meshWidth / $meshSegmentsX;
$meshTransformOriginX: sqrt( pow($meshRadius, 2) - pow($meshSegmentWidth/2, 2) );
$meshHeight: 2 * $meshTransformOriginX * tan( pi() / ($meshSegmentsY * 2) ) * $meshSegmentsY;  // full sphere

$oceanColor: DarkTurquoise;
$mainlandColor: GoldenRod;
$rotationDuration: 20s;

$clipMap: (
  "1-4": (100% 65.85%, 100% 98.18%, 96.13% 96.35%, 96.13% 89.96%, 89.31% 93.13%, 89.31% 100%, 78.02% 100%, 64.85% 93.13%, 58.45% 95.81%, 58.45% 100%, 100% 100%, 100% 86.48%, 96.13% 84.61%, 89.83% 88.27%, 82.94% 84.61%, 82.94% 73.34%, 100% 65.85%),
  "1-5": (100% 81.1%, 100% 69.24%, 95.78% 67.48%, 95.78% 62.36%, 100% 60.45%, 100% 100%, 12.06% 100%, 13.38% 99.21%, 8.54% 96.88%, 8.54% 90.75%, 20.55% 84.74%, 8.54% 79.25%, 8.54% 85.16%, 2.9% 87.84%, 0% 86.48%, 0% 98.18%, 3.95% 100%, 0% 100%, 0% 65.85%, 8.54% 62.36%, 14.99% 65.14%, 21.32% 61.52%, 27.18% 65.14%, 33.8% 61.52%, 39.66% 64.34%, 39.66% 70.68%, 46.34% 67.48%, 52.64% 70.68%, 52.64% 87.84%, 46.34% 90.75%, 46.34% 96.88%, 39.66% 100%, 65.02% 100%, 65.02% 92.94%, 70.51% 90.4%, 70.51% 84.28%, 77.19% 81.1%, 89.8% 87.84%, 89.8% 76.4%),
  "1-6": (100% 89.16%, 100% 100%, 0% 100%, 0% 81.1%, 8.5% 84.97%, 8.5% 78.7%, 3.11% 76.22%, 3.11% 70.67%, 0% 69.24%, 0% 60.45%, 5.31% 57.63%, 10.12% 57.63%, 15.64% 53.21%, 21.34% 56.77%, 33.62% 49.75%, 39.98% 53.72%, 46.48% 49.75%, 52.33% 53.21%, 59.05% 49.75%, 65.62% 53.21%, 65.62% 58.91%, 71.22% 62.18%, 71.22% 67.76%, 65.62% 64.61%, 59.05% 67.76%, 52.33% 64.61%, 39.98% 70.67%, 39.98% 76.22%, 52.33% 70.23%, 59.05% 73.47%, 65.62% 70.23%, 65.62% 76.22%, 59.05% 79.3%, 59.05% 84.97%, 65.62% 87.95%, 71.22% 84.97%, 71.22% 73.11%, 77.66% 76.22%, 77.66% 87.95%, 71.22% 91.34%, 71.22% 96.86%, 64% 100%, 75.98% 100%),
  "1-7": (9.62% 100%, 0% 100%, 0% 89.16%, 3.13% 87.73%, 3.13% 93.09%, 9.62% 96.28%, 9.62% 100%),
  "1-10": (85.54% 49.71%, 85.54% 61.92%, 66.19% 70.39%, 59.87% 67.24%, 47.72% 73.09%, 47.72% 79.03%, 29.54% 87.18%, 29.54% 93.9%, 23.07% 96.19%, 23.07% 100%, 10.2% 100%, 10.2% 84.47%, 23.07% 79.03%, 23.07% 73.09%, 47.72% 61.92%, 54.12% 64.67%, 66.19% 59.07%, 66.19% 53.26%, 79.13% 46.69%),
  "1-11": (0% 100%, 0% 94.98%, 6.01% 92.27%, 11.74% 94.98%, 11.74% 100%, 6.01% 97.76%, 0% 100%),
  "1-12": (3.6% 100%, 29.41% 87.15%, 36.1% 90.18%, 42.02% 87.15%, 42.02% 81.49%, 48.03% 78.8%, 48.03% 73.14%, 54.51% 70.93%, 54.51% 64.46%, 60.62% 61.48%, 60.62% 55.44%, 66.9% 52.22%, 80% 58.73%, 80% 75.76%, 73.36% 78.8%, 73.36% 84.35%, 100% 73.14%, 100% 95.6%, 91.2% 100%, 3.6% 100%),
  "1-13": (0% 73.26%, 10.7% 78.88%, 10.7% 85.11%, 0% 90.9%, 0% 100%, 9.86% 100%, 9.86% 96.13%, 16.6% 92.27%, 16.6% 87.03%, 23.48% 90.9%, 23.48% 100%, 0% 100%),
  "2-1": (100% 100%, 82.65% 91.56%, 67.15% 100%),
  "2-2": (100% 95.88%, 95.9% 100%, 95.9% 93.14%, 88.14% 100%, 84.27% 100%, 77.92% 95.88%, 77.92% 90.48%, 70.92% 86.79%, 63.15% 90.48%, 63.15% 95.88%, 57.61% 100%, 51.74% 95.88%, 44.01% 100%, 100% 100%),
  "2-3": (95.48% 100%, 44.65% 100%, 0% 100%, 0% 95.88%, 9% 100%, 44.65% 100%, 52.14% 95.88%, 52.14% 91.01%, 38.37% 85.25%, 38.37% 79.47%, 32.4% 76.97%, 32.4% 65.03%, 45.65% 58.44%, 52.14% 62.12%, 64.75% 55.57%, 64.75% 50.98%, 58.24% 54.28%, 51.35% 50.98%, 51.35% 44.66%, 64.75% 38.7%, 70.54% 42.03%, 83.4% 42.03%, 77.02% 39.16%, 83.4% 36.48%, 83.4% 24.16%, 90.3% 21.25%, 90.3% 39.16%, 90.3% 44.26%, 96.43% 41.46%, 96.43% 48.1%, 88.56% 51.2%, 88.56% 45.01%, 90.3% 44.26%, 90.3% 39.16%, 83.4% 42.03%, 70.54% 42.03%, 64.75% 45.13%, 64.75% 50.98%, 64.75% 68.14%, 52.14% 74.15%, 52.14% 85.25%, 57.62% 88.1%, 52.14% 91.01%, 52.14% 95.88%, 52.14% 100%, 63.53% 100%, 63.53% 96.62%, 69.81% 93.07%, 76.43% 95.88%, 76.43% 91.01%, 69.81% 88.1%, 69.81% 82.92%, 63.53% 86.17%, 57.62% 82.92%, 63.53% 79.47%, 63.53% 73.5%, 69.81% 70.26%, 69.81% 76.4%, 83.4% 70.26%, 83.4% 66.07%, 69.81% 59.12%, 75.17% 56.69%, 69.81% 53.46%, 77.02% 49.58%, 100% 60.97%, 100% 68.14%, 88.95% 62.62%, 83.4% 66.07%, 83.4% 70.26%, 89.78% 73.5%, 83.4% 76.97%, 83.4% 81.83%, 89.78% 85.25%, 89.78% 91.01%, 100% 96.62%),
  "2-4": (100% 0%, 100% 100%, 71.52% 100%, 26% 100%, 26% 91.03%, 33.05% 87.38%, 33.05% 76.47%, 27.06% 79.5%, 20.33% 76.47%, 33.05% 70.27%, 33.05% 65.65%, 27.06% 62.94%, 13.04% 68.27%, 13.04% 57.08%, 7.15% 59.58%, 7.15% 54.32%, 0% 51.22%, 0% 45.55%, 14.85% 39.08%, 27.7% 44.42%, 27.7% 34.63%, 20.33% 31.41%, 25.52% 28.33%, 20.33% 25.36%, 20.33% 20.04%, 8.2% 14.45%, 8.2% 7.67%, 14.85% 4.18%, 14.85% 10.51%, 27.7% 16.27%, 27.7% 44.42%, 27.7% 50.62%, 33.29% 53.36%, 33.29% 59.58%, 39.65% 56.15%, 39.65% 45.55%, 33.29% 42.4%, 39.65% 39.08%, 39.65% 16.7%, 33.05% 13.84%, 39.65% 10.51%, 39.65% 4.18%, 46.41% 7.67%, 46.41% 13.16%, 39.65% 16.7%, 39.65% 21.56%, 46.41% 18.51%, 46.41% 25.36%, 39.65% 28.33%, 39.65% 39.08%, 46.41% 41.87%, 46.41% 47.48%, 52.4% 44.89%, 58.45% 47.95%, 58.45% 59.35%, 52.19% 62.94%, 52.19% 57.08%, 39.65% 51.22%, 39.65% 56.15%, 45.91% 59.35%, 39.65% 62.94%, 39.65% 68.27%, 33.05% 65.65%, 33.05% 70.27%, 33.05% 87.38%, 46.41% 93.71%, 39.65% 97.55%, 39.65% 100%, 52.19% 100%, 52.19% 96.67%, 58.45% 93.36%, 58.45% 100%, 71.5% 100%, 63.97% 96.67%, 63.97% 79.5%, 71.14% 76.47%, 77.6% 79.5%, 90.6% 73.09%, 90.6% 90.63%, 100% 95.45%, 100% 90.63%, 95.45% 88.29%, 95.45% 82.07%, 100% 83.91%, 100% 67.7%, 83.67% 60.08%, 83.67% 54.32%, 63.97% 45.55%, 63.97% 50.62%, 77.6% 57.08%, 71.14% 60.08%, 71.14% 65.97%, 63.97% 62.4%, 63.97% 33.1%, 83.67% 41.87%, 83.67% 47.48%, 96.74% 53.36%, 100% 52.01%, 100% 44.42%, 83.67% 36.51%, 100% 28.73%, 100% 21.56%, 95.45% 19.36%, 95.45% 13.16%, 100% 15.14%, 100% 10.04%, 89.31% 5.28%, 89.31% 0%, 78.02% 0%, 78.02% 5.28%, 83.67% 7.67%, 83.67% 13.36%, 89.31% 16.27%, 83.67% 19.38%, 83.67% 25.54%, 71.14% 31.41%, 58.45% 25.54%, 58.45% 0%),
  "2-5": (100% 0%, 100% 100%, 84.38% 100%, 84.38% 88.75%, 77.04% 85.52%, 77.04% 79.8%, 70.41% 76.91%, 70.41% 70.59%, 77.04% 67.7%, 77.04% 73.63%, 84.38% 75.94%, 84.38% 93.38%, 95.07% 88.26%, 90.13% 85.99%, 90.13% 68.49%, 84.38% 65.55%, 84.38% 53.87%, 78.01% 51.19%, 78.01% 45.27%, 51.95% 33.53%, 51.95% 27.86%, 65.02% 22.22%, 71.14% 25.32%, 78.01% 22.22%, 78.01% 16.32%, 84.38% 13.9%, 84.38% 8.45%, 78.01% 5.67%, 78.01% 0%, 70.85% 2.54%, 65.02% 0%, 39.66% 0%, 39.66% 11.08%, 33.94% 13.18%, 33.94% 19.54%, 27.57% 22.22%, 27.57% 50.69%, 33.94% 53.87%, 27.57% 57.35%, 20.34% 53.87%, 20.34% 43.23%, 15.01% 45.27%, 8.69% 42.54%, 2.74% 45.27%, 0% 44.42%, 0% 52.01%, 2.17% 50.37%, 33.94% 64.58%, 33.94% 71.77%, 26.97% 68.33%, 21.23% 71.42%, 15.01% 68.49%, 8.28% 71.42%, 0% 67.7%, 0% 83.91%, 8.69% 87.78%, 2.17% 91.84%, 0% 90.63%, 0% 95.45%, 8.85% 100%, 0% 100%, 0% 28.73%, 8.69% 24.83%, 14.42% 27.37%, 14.42% 22.22%, 8.69% 19.54%, 1.6% 22.22%, 0% 21.56%, 0% 15.14%, 1.6% 15.81%, 1.6% 11.08%, 0% 10.04%, 0% 0%, 3.95% 0%, 8.69% 2.18%, 12.04% 0%),
  "2-6": (100% 0%, 100% 9.48%, 96.17% 7.99%, 84.52% 13.28%, 84.52% 47.79%, 84.52% 53.43%, 90.56% 56.43%, 84.52% 59.85%, 84.52% 65.09%, 90.56% 61.71%, 96.4% 65.09%, 90.56% 68.35%, 84.52% 65.09%, 84.52% 47.79%, 78.03% 50.74%, 78.03% 57.42%, 71.53% 53.43%, 71.53% 65.09%, 84.52% 71%, 84.52% 76.72%, 71.53% 83.04%, 71.53% 76.72%, 65.86% 73.95%, 65.86% 67.79%, 52.96% 73.95%, 52.96% 79.65%, 46.6% 83.04%, 46.6% 87.96%, 52.96% 90.77%, 65.06% 84.72%, 71.53% 87.96%, 45.44% 100%, 0% 100%, 0% 0%, 64% 0%, 59.62% 1.87%, 65.86% 4.96%, 75.98% 0%, 100% 0%),
  "2-7": (100% 64.08%, 100% 0%, 9.62% 0%, 9.62% 1.8%, 3.1% 4.65%, 3.1% 10.79%, 0% 9.48%, 0% 20.3%, 6.13% 22.62%, 6.13% 16.23%, 12.19% 13.7%, 12.19% 19.92%, 6.13% 22.62%, 6.13% 28.39%, 0% 25.7%, 0% 0%, 100% 0%, 100% 100%, 77.82% 100%, 77.82% 96.54%, 83.8% 93.81%, 83.8% 82.46%, 90.18% 79.19%, 90.18% 73.9%, 96.95% 70.75%, 96.95% 65.53%),
  "2-8": (100% 41.53%, 100% 66.49%, 85.01% 59.05%, 85.01% 65.08%, 97.52% 70.81%, 97.52% 82.19%, 91.05% 85.06%, 91.05% 91%, 100% 95.19%, 100% 100%, 46.4% 100%, 46.4% 93.79%, 52.15% 91%, 46.4% 87.95%, 46.4% 82.19%, 28.18% 74.4%, 28.18% 68.07%, 16.68% 73.25%, 22.25% 75.97%, 22.25% 82.19%, 9.84% 87.95%, 9.84% 93.79%, 3.22% 96.81%, 3.22% 100%, 0% 100%, 0% 64.08%, 16.68% 56.51%, 16.68% 50.69%, 40.98% 39.42%, 40.98% 22.01%, 47.2% 25.45%, 53.04% 22.01%, 53.04% 28.42%, 59.79% 24.32%, 72.7% 30.53%, 72.7% 42.31%, 78.55% 45.6%, 91.05% 38.29%, 95.94% 43.09%),
  "2-9": (0% 100%, 9.09% 100%, 9.09% 94.23%, 3.46% 90.91%, 9.09% 87.49%, 15.76% 90.91%, 15.76% 95.78%, 26.05% 90.91%, 15.76% 85.7%, 21.84% 81.95%, 28.42% 85.1%, 40.58% 79.09%, 40.58% 84.56%, 47.37% 87.49%, 53.92% 84.56%, 53.92% 79.09%, 47.37% 76.47%, 47.37% 65.08%, 59.54% 58.99%, 59.54% 65.08%, 53.92% 61.8%, 53.92% 68.06%, 59.54% 70.77%, 59.54% 76.47%, 65.82% 79.97%, 78.42% 73.56%, 71.35% 70.77%, 78.42% 67.29%, 78.42% 61.8%, 78.42% 61.8%, 78.42% 51.35%, 71.82% 47.77%, 78.42% 44.54%, 78.42% 39.2%, 84.7% 35.55%, 84.7% 47.77%, 78.42% 51.35%, 78.42% 61.8%, 100% 51.35%, 100% 57.7%, 91.35% 61.8%, 91.35% 67.29%, 86.05% 70.77%, 91.35% 73.56%, 100% 68.06%, 100% 100%, 0% 100%, 0% 41.53%, 4.25% 40.13%, 28.8% 51.35%, 28.8% 62.48%, 23.17% 65.42%, 23.17% 70.9%, 16.02% 74.24%, 0% 66.49%),
  "2-10": (100% 100%, 0% 100%, 0% 62.21%, 16.46% 52.83%, 26.93% 57.15%, 26.93% 62.21%, 34.9% 65.72%, 34.9% 54.07%, 26.93% 50.98%, 34.9% 46.71%, 67.29% 62.21%, 67.29% 68.62%, 85.75% 76.42%, 91.15% 72.76%, 96.64% 76.42%, 96.64% 70.99%, 78.97% 62.21%, 78.97% 33.45%, 85.75% 30.18%, 85.75% 24.04%, 91.15% 21.53%, 91.15% 15.46%, 100% 11.65%, 100% 0%, 23.07% 0%, 23.07% 19.21%, 19.79% 22%, 23.07% 23.95%, 18.06% 28.39%, 10.2% 24.63%, 1.74% 28.39%, 1.74% 5.71%, 10.2% 2.05%, 10.2% 0%, 100% 0%),
  "2-11": (100% 100%, 0% 100%, 0% 7.13%, 5.87% 4.79%, 16.76% 10.28%, 16.76% 17.09%, 11.74% 19.36%, 11.74% 47.57%, 5.87% 50.95%, 11.74% 53.39%, 11.74% 58.91%, 16.76% 61.66%, 16.76% 67.56%, 11.74% 70.42%, 11.74% 75.51%, 16.76% 73.14%, 21.82% 75.51%, 21.82% 53.39%, 16.76% 50.95%, 16.76% 44.33%, 21.82% 41.23%, 35.48% 47.57%, 35.48% 53.39%, 41.88% 56.83%, 41.88% 79.33%, 47.33% 82.19%, 47.33% 70.42%, 53.46% 73.14%, 53.46% 63.53%, 47.33% 66.02%, 47.33% 48.63%, 41.88% 45.82%, 41.88% 40.08%, 21.82% 30.74%, 28.51% 27.9%, 28.51% 22.2%, 35.48% 19.36%, 35.48% 12.89%, 41.88% 16.02%, 41.88% 22.2%, 60.19% 12.89%, 66.44% 16.02%, 66.44% 22.2%, 73.24% 25.01%, 73.24% 36.62%, 66.44% 40.08%, 66.44% 44.33%, 73.24% 47.57%, 78.98% 45.82%, 78.98% 40.08%, 85.35% 36.62%, 85.35% 25.01%, 78.98% 22.2%, 78.98% 4.79%, 85.35% 1.5%, 100% 7.13%),
  "2-12": (0% 7.09%, 3.6% 5.06%, 3.6% 0%, 91.19% 0%, 79.94% 5.06%, 79.94% 9.82%, 91.19% 5.06%, 100% 7.09%, 100% 100%, 0% 100%, 0% 7.09%),
  "2-13": (0% 6.67%, 9.86% 2.19%, 9.86% 0%, 23.47% 0%, 23.47% 8.02%, 29.71% 5.23%, 29.71% 0%, 80.17% 22.15%, 80.17% 39.27%, 85.2% 41.74%, 85.2% 31.19%, 100% 25.18%, 100% 100%, 0% 100%),
  "2-14": (0% 25.18%, 29.93% 38.94%, 29.93% 44.81%, 55.28% 56.15%, 55.28% 63.17%, 48.4% 59.36%, 44.5% 63.17%, 55.28% 67.53%, 55.28% 74.08%, 48.4% 77.05%, 17.97% 63.17%, 17.97% 67.53%, 24.31% 70.36%, 11.57% 75.56%, 11.57% 81.98%, 24.31% 87.92%, 24.31% 100%, 0% 100%),
  "3-1": (100% 0%, 100% 64.81%, 70.01% 79.62%, 64.38% 75.86%, 64.38% 82.41%, 44.79% 92.08%, 44.79% 84.98%, 52.2% 88.42%, 57.47% 85.82%, 57.47% 79.08%, 74.43% 71.18%, 69.87% 68.52%, 69.87% 62.61%, 57.68% 57.55%, 57.68% 51.49%, 52.2% 48.56%, 63.03% 42.63%, 44.79% 34.53%, 50.85% 30.51%, 57.68% 33.44%, 57.68% 27.98%, 50.85% 25.2%, 50.85% 13.85%, 44.79% 11.26%, 44.79% 5.27%, 50.85% 1.84%, 57.68% 5.27%, 67.15% 0%),
  "3-2": (100% 0%, 100% 100%, 95.06% 100%, 95.06% 96.82%, 89.1% 94.24%, 89.1% 88.54%, 84.27% 85.91%, 84.27% 91.52%, 76.33% 88.54%, 81.94% 85.91%, 81.94% 79.21%, 76.33% 77.33%, 76.33% 71.44%, 45.46% 56.55%, 39.55% 60.3%, 32.81% 56.55%, 26.88% 60.3%, 20.08% 56.55%, 8.39% 62.27%, 8.39% 68.89%, 0% 64.81%, 0% 0%, 26.88% 13.19%, 31.56% 11.1%, 31.56% 0%, 38.73% 2.33%, 44% 0%, 84.27% 0%, 88.14% 2.33%, 88.14% 0%, 100% 0%),
  "3-3": (100% 24.99%, 100% 100%, 0% 100%, 0% 0%, 9% 0%, 38.53% 13.66%, 33.24% 17.24%, 33.24% 22.58%, 38.53% 24.99%, 51.52% 19.11%, 51.52% 13.15%, 58.48% 17.24%, 58.48% 22.58%, 71.14% 28.39%, 77.19% 24.99%, 77.19% 20.11%, 71.14% 16.51%, 77.19% 13.15%, 89.88% 19.11%, 89.88% 24.99%, 95.48% 21.29%, 95.48% 6.15%, 89.88% 2.9%, 77.19% 8.41%, 71.14% 5.3%, 63.53% 8.41%, 58.48% 5.3%, 63.53% 2.02%, 63.53% 0%, 52.14% 0%, 52.14% 2.9%, 44.65% 5.3%, 44.65% 0%, 95.48% 0%, 95.48% 21.29%),
  "3-4": (100% 53.28%, 100% 47.94%, 77.28% 37.08%, 89.63% 31.28%, 89.63% 20.08%, 95.69% 16.58%, 95.69% 11%, 71.5% 0%, 100% 0%, 100% 100%, 0% 100%, 0% 24.99%, 2.26% 24.16%, 2.26% 13.58%, 14.41% 8.05%, 20.14% 11%, 14.41% 14.6%, 8.63% 10.68%, 8.63% 16.58%, 14.41% 20.08%, 26% 14.6%, 26% 8.05%, 32.19% 5.33%, 26% 2.32%, 26% 0%, 39.65% 0%, 39.65% 2.32%, 45.86% 5.33%, 52.19% 2.32%, 52.19% 0%, 58.45% 0%, 58.45% 23.05%, 53.05% 24.99%, 53.05% 31.28%, 45.86% 34.29%, 45.86% 39.95%, 20.14% 51.76%, 14.41% 47.94%, 8.63% 51.76%, 8.63% 62.17%, 14.41% 65.43%, 14.41% 70.86%, 45.86% 85.06%, 52.19% 81.58%, 58.45% 85.63%, 58.45% 91.15%, 64.6% 93.86%, 70.66% 91.15%, 70.66% 85.63%, 64.6% 83.13%, 64.6% 70.86%, 70.66% 67.76%, 70.66% 51.76%, 77.28% 47.94%, 89.63% 53.28%, 95.69% 50.25%),
  "3-5": (100% 0%, 100% 36.06%, 95.86% 33.82%, 95.86% 27.87%, 100% 29.98%, 100% 22.64%, 95.86% 22.64%, 90.41% 26.08%, 90.41% 19.46%, 95.86% 22.64%, 100% 22.64%, 100% 18.75%, 95.86% 16.58%, 95.86% 10.74%, 90.41% 7.56%, 90.41% 2.63%, 84.38% 0%, 8.85% 0%, 8.85% 5.21%, 13.77% 7.56%, 8.85% 10.79%, 14.65% 13.49%, 20.86% 10.74%, 20.86% 21.85%, 33.89% 27.87%, 33.89% 39.35%, 27.49% 36.7%, 20.12% 39.35%, 20.12% 33.65%, 14.65% 31.39%, 14.2% 25.46%, 8.85% 28.37%, 8.85% 39.35%, 21.48% 45.23%, 8.85% 51.6%, 0% 47.94%, 0% 53.28%, 8.85% 56.52%, 8.85% 62.21%, 13.87% 65.64%, 20.86% 62.21%, 28.43% 65.64%, 28.43% 75.61%, 33.89% 79.34%, 33.89% 85.56%, 47.23% 91.39%, 47.23% 98%, 52.44% 100%, 0% 100%, 0% 0%),
  "3-6": (100% 8.34%, 100% 72.62%, 90.72% 77.14%, 90.72% 82.49%, 83.9% 85.94%, 83.9% 67.52%, 77.14% 65.37%, 96.83% 56.2%, 100% 57.83%, 100% 19.81%, 94.19% 16.82%, 87.81% 19.81%, 82.3% 16.82%, 82.3% 10.86%, 76.35% 8.34%, 76.35% 0%, 45.44% 0%, 27.42% 8.34%, 27.42% 19.81%, 22.21% 23.06%, 22.21% 34.16%, 15.09% 37.02%, 15.09% 43.17%, 8.53% 40.19%, 8.53% 28.18%, 2.44% 25.66%, 2.44% 19.81%, 0% 18.75%, 0% 0%, 76.35% 0%, 76.35% 2.2%, 87.81% 8.34%, 94.19% 5.04%),
  "3-7": (0% 100%, 0% 57.83%, 3.04% 59.52%, 3.04% 71.28%, 0% 72.63%, 0% 100%, 8.77% 100%, 8.77% 96.81%, 10.51% 96.81%, 14.91% 99.06%, 28.06% 93.69%, 34.38% 96.81%, 41.32% 93.23%, 41.32% 88.14%, 35.02% 85.96%, 22.02% 91.55%, 15.2% 88.61%, 1.97% 94.6%, 1.97% 87.48%, 20.14% 79.58%, 10.25% 73.88%, 20.14% 61.33%, 27.68% 64.77%, 27.68% 59.38%, 33.61% 56.83%, 27.68% 54.63%, 27.68% 49.17%, 21.59% 45.19%, 21.59% 39.51%, 27.68% 36.79%, 27.68% 30.26%, 35.02% 34.1%, 35.02% 39.51%, 41.32% 42.53%, 41.32% 49.17%, 35.02% 51.41%, 41.32% 53.93%, 41.32% 76.43%, 47.18% 79.58%, 41.32% 82.91%, 41.32% 93.23%, 46.54% 90.53%, 53.02% 93.69%, 77.73% 82.47%, 77.73% 76.81%, 83.4% 74.33%, 83.4% 56.92%, 88.84% 54.39%, 83.4% 51.16%, 88.84% 48.33%, 91.45% 48.33%, 91.45% 58.34%, 95.9% 55.79%, 100% 59.76%, 91.45% 65.2%, 91.45% 70.88%, 100% 75.56%, 100% 46.97%, 90.35% 42.85%, 77.82% 48.33%, 77.82% 53.84%, 72.05% 56.68%, 72.05% 62.97%, 65.43% 59.85%, 59.48% 62.97%, 52.85% 59.85%, 52.85% 53.84%, 59.48% 56.68%, 59.48% 51.74%, 52.85% 48.33%, 52.85% 42.85%, 58.11% 39.83%, 52.85% 36.93%, 52.85% 30.97%, 59.48% 28.01%, 59.48% 22.31%, 65.43% 19.3%, 65.43% 13.78%, 72.05% 10.85%, 72.05% 5.06%, 77.82% 2.76%, 77.82% 0%, 100% 0%, 100% 3.85%, 97.19% 5.39%, 100% 6.54%, 100% 100%),
  "3-8": (100% 0%, 100% 100%, 0% 100%, 0% 0%, 3.22% 0%, 3.22% 2.19%, 0% 3.85%, 0% 6.54%, 3.22% 7.94%, 3.22% 13.91%, 9.91% 16.69%, 9.91% 27.59%, 15.71% 24.36%, 22.4% 28.3%, 22.4% 34.11%, 28.08% 36.38%, 28.08% 42.88%, 22.4% 45.03%, 22.4% 56.78%, 8.8% 62.57%, 8.8% 56.78%, 3.22% 54.33%, 3.22% 48.45%, 0% 46.97%, 0% 75.56%, 2.78% 77.12%, 2.78% 70.73%, 15.71% 77.12%, 22.4% 73.63%, 22.4% 67.73%, 33.6% 62.57%, 33.6% 50.67%, 39.8% 46.97%, 48.1% 50.67%, 53.68% 47.7%, 59.81% 50.67%, 59.81% 56.78%, 65.66% 59.51%, 65.66% 53.82%, 71.86% 50.67%, 71.86% 45.03%, 78.38% 42.09%, 78.38% 37.04%, 71.86% 40.02%, 65.66% 37.04%, 65.66% 31.15%, 78.38% 25.13%, 90.87% 31.15%, 96.87% 28.3%, 96.87% 17.34%, 90.87% 13.91%, 65.66% 25.88%, 59.81% 22.44%, 46.96% 28.3%, 46.96% 22.44%, 33.6% 16.69%, 33.6% 10.86%, 39.8% 7.94%, 39.8% 2.65%, 46.4% 0%),
  "3-9": (100% 0%, 100% 100%, 0% 100%, 0% 0%, 3.61% 0%, 3.61% 2.47%, 9.09% 0%, 100% 0%),
  "3-10": (0% 0%, 100% 0%, 100% 100%, 0% 100%),
  "3-11": (0% 0%, 100% 0%, 100% 100%, 0% 100%),
  "3-12": (29.7% 100%, 29.7% 94.61%, 36.51% 90.83%, 36.51% 79.78%, 42.02% 77%, 42.02% 71.64%, 48.23% 74.19%, 53.85% 71.64%, 60.49% 74.19%, 67.37% 71.64%, 67.37% 66.2%, 79.04% 71.64%, 79.04% 77%, 86.55% 79.78%, 86.55% 74.19%, 92.76% 71.64%, 92.76% 66.2%, 100% 62.47%, 100% 0%, 0% 0%, 0% 100%),
  "3-13": (0% 0%, 100% 0%, 100% 16.32%, 93.82% 19.75%, 100% 22.34%, 100% 40.43%, 93.82% 36.34%, 86.66% 40.43%, 86.66% 51.32%, 73.21% 45.33%, 73.21% 40.43%, 68.33% 36.34%, 68.33% 47.98%, 56.37% 53.99%, 56.37% 59.11%, 48.87% 62.87%, 48.87% 67.4%, 62.02% 74.6%, 62.02% 85.68%, 56.37% 88.6%, 62.02% 90.96%, 62.02% 100%, 30.3% 100%, 22.91% 96.93%, 22.91% 79.97%, 30.3% 77%, 30.3% 64.9%, 48.87% 56.78%, 48.87% 50%, 54.64% 47.98%, 54.64% 42.97%, 48.87% 40.43%, 43.11% 42.97%, 43.11% 47.98%, 35.23% 51.32%, 35.23% 46.54%, 0% 62.47%, 0% 0%),
  "3-14": (24.31% 12.27%, 11.57% 5.42%, 5.17% 8.62%, 5.17% 13.75%, 0% 16.48%, 0% 22.34%, 5.17% 24.66%, 5.17% 30.5%, 11.57% 33.77%, 0% 40.43%, 0% 0%, 24.31% 0%),
  "4-2": (100% 0%, 100% 16.82%, 89.1% 12.2%, 89.1% 5.63%, 95.06% 7.95%, 95.06% 14.72%, 100% 11.45%, 100% 5.22%, 95.06% 1.64%, 95.06% 0%),
  "4-3": (100% 0%, 100% 70.3%, 83.59% 77.29%, 83.59% 88.77%, 95.79% 94.08%, 95.79% 100%, 69.62% 100%, 40.12% 86.89%, 40.12% 92.19%, 25.95% 85.38%, 25.95% 68.63%, 19.97% 65.44%, 19.97% 59.98%, 13.6% 57.01%, 13.6% 51.39%, 7.73% 48.28%, 7.73% 43.31%, 1.49% 39.94%, 1.49% 22.63%, 7.73% 19.98%, 7.73% 14.31%, 2.42% 11.44%, 2.42% 18.05%, 0% 16.82%, 0% 11.44%, 1.09% 10.62%, 1.09% 6.08%, 0% 5.22%, 0% 0%, 100% 0%),
  "4-4": (71.48% 100%, 64.03% 100%, 64.03% 96.75%, 58.62% 94.21%, 52.06% 97.42%, 52.06% 91.77%, 58.62% 88.16%, 71.48% 94.21%, 71.48% 54.23%, 58.66% 60.36%, 58.66% 66.18%, 54.6% 69.5%, 58.66% 72.25%, 58.66% 82.01%, 51.87% 86.89%, 51.87% 82.01%, 39.21% 74.3%, 39.21% 69.5%, 33.52% 66.18%, 27% 69.5%, 21.16% 66.18%, 14.4% 69.5%, 8.5% 66.18%, 0% 70.3%, 0% 0%, 100% 0%, 100% 23.6%, 78.18% 34.04%, 78.18% 45.33%, 71.48% 47.85%),
  "4-5": (0% 0%, 52.44% 0%, 64.76% 4.87%, 64.76% 11.76%, 53.67% 16.65%, 53.67% 23.6%, 45.77% 19.18%, 45.77% 14.23%, 58.48% 8.72%, 58.48% 3.44%, 33.37% 14.23%, 33.37% 8.72%, 27.71% 4.87%, 21.65% 8.72%, 21.65% 20.33%, 14.46% 16.65%, 0% 23.6%),
  "4-6": (100% 100%, 100% 75.11%, 96.71% 77.4%, 96.71% 82.76%, 83.75% 88.51%, 83.75% 100%),
  "4-7": (100% 100%, 0% 100%, 0% 75.11%, 2.32% 74.2%, 2.32% 67.95%, 22.11% 59.87%, 22.11% 53.9%, 27.69% 56.77%, 40.01% 51.16%, 47.22% 53.9%, 59.39% 48.35%, 66.11% 51.16%, 66.11% 56.77%, 71.87% 59.35%, 71.87% 43.39%, 77.95% 40.27%, 77.95% 45.38%, 71.87% 48.35%, 71.87% 59.35%, 84.23% 64.86%, 84.22% 48.35%, 79.85% 45.32%, 84.22% 43.39%, 84.22% 64.86%, 91.15% 67.95%, 96.86% 65.43%, 96.86% 59.87%, 100% 58.36%, 100% 21.78%, 84.23% 13.65%, 74.49% 19.09%, 96.72% 31.5%, 90.91% 35.83%, 90.91% 45.35%, 84.23% 42.4%, 84.23% 31.5%, 65.58% 21.78%, 58.47% 25.5%, 58.47% 31.5%, 66.11% 27.7%, 66.11% 39.9%, 59.53% 43.39%, 52.67% 39.9%, 58.47% 36.42%, 58.47% 25.5%, 53.27% 28.23%, 47.62% 24.91%, 34.74% 31.5%, 34.74% 35.83%, 23.26% 42.4%, 23.26% 48.07%, 15.9% 52.15%, 3.04% 45.35%, 3.04% 28.23%, 15.9% 21.78%, 22.05% 26.04%, 27.58% 23.09%, 27.58% 16.79%, 20.84% 13.65%, 20.84% 8.27%, 8.73% 3.81%, 8.73% 0%, 100% 0%),
  "4-8": (100% 0%, 100% 100%, 84.02% 100%, 84.02% 94.42%, 71.95% 88.18%, 71.95% 76.91%, 60.71% 71.87%, 60.71% 76.91%, 54.59% 79.98%, 66.73% 86.89%, 66.73% 96.92%, 71.95% 100%, 0% 100%, 0% 58.37%, 3.4% 56.76%, 8.89% 59.4%, 8.89% 64.69%, 15.95% 68.24%, 22.06% 64.69%, 28.65% 68.24%, 34.48% 65.61%, 40.83% 68.24%, 47.61% 65.61%, 53.63% 68.24%, 58.83% 65.61%, 58.83% 59.4%, 65.48% 56.43%, 65.48% 51.75%, 71.14% 48.4%, 66.73% 45.64%, 47.61% 54.64%, 47.61% 49.15%, 28.65% 40.38%, 28.65% 34.08%, 65.48% 16.72%, 71.95% 19.57%, 78.63% 16.72%, 78.63% 11.55%, 60.71% 3.07%, 60.71% 8.22%, 53.63% 11.55%, 46.52% 8.22%, 46.52% 3.07%, 40.83% 0%, 34.48% 3.07%, 34.48% 14.43%, 28.65% 11.55%, 28.65% 16.72%, 22.06% 20.45%, 16.48% 16.72%, 16.48% 45.64%, 13.67% 45.64%, 8.89% 42.37%, 8.89% 31.35%, 3.29% 28.89%, 3.29% 23.45%, 0% 21.78%, 0% 0%),
  "4-9": (100% 0%, 100% 100%, 90.56% 100%, 90.56% 96.8%, 72.34% 88.62%, 66.42% 91.77%, 60.05% 88.62%, 60.05% 77.63%, 53.74% 74.3%, 41.32% 80.68%, 35.56% 77.63%, 28.62% 80.68%, 28.62% 85.46%, 46.57% 93.56%, 46.57% 88.62%, 53.74% 91.77%, 53.74% 96.8%, 48.48% 100%, 0% 100%, 0% 0%),
  "4-10": (100% 0%, 100% 100%, 70.95% 100%, 65.84% 97.23%, 60.36% 100%, 0% 100%, 0% 0%, 100% 0%),
  "4-11": (0% 0%, 100% 0%, 100% 93.81%, 85.64% 100%, 79.37% 96.85%, 73.19% 100%, 66.67% 96.85%, 61.17% 100%, 0% 100%, 0% 0%),
  "4-12": (47.91% 0%, 47.91% 3.43%, 54.51% 6.5%, 54.51% 12.01%, 47.91% 15.04%, 47.91% 19.54%, 54.51% 22.97%, 54.51% 28.53%, 47.91% 31.45%, 47.91% 43.47%, 36.14% 48.84%, 36.14% 60.69%, 23.63% 65.75%, 23.63% 77.32%, 5.07% 85.7%, 5.07% 91.51%, 0% 93.81%, 0% 0%, 29.7% 0%, 36.14% 2.39%, 41.49% 0%),
  "4-13": (62.02% -0.07%, 62.02% 3.34%, 55.26% 5.71%, 55.26% 10.87%, 62.02% 13.91%, 55.26% 17.33%, 55.26% 22.95%, 48.07% 25.94%, 48.07% 19.34%, 41.52% 17.33%, 41.52% 10.87%, 35.3% 8.52%, 35.3% 2.41%, 29.96% -0.07%),
  "5-3": (95.79% 0%, 95.79% 4.94%, 100% 7.61%, 100% 19.86%, 76.44% 8.92%, 76.44% 3.51%, 69.62% 0%),
  "5-4": (64.03% 100%, 64.03% 94.84%, 51.68% 88.69%, 51.68% 83.01%, 45.44% 79.74%, 45.44% 62.62%, 51.68% 60.25%, 51.68% 54.4%, 58.32% 51.32%, 58.32% 46.19%, 51.68% 43.35%, 51.68% 38.48%, 14.55% 20.37%, 8.42% 23.47%, 0% 19.86%, 0% 7.61%, 7.17% 5.36%, 14.55% 9.93%, 19.23% 7.87%, 19.23% 3.37%, 26.54% 0%, 33.08% 2.29%, 39.74% 0%, 39.74% 5.25%, 33.08% 7.73%, 33.08% 18.07%, 39.74% 20.86%, 39.74% 15.58%, 45.44% 18.07%, 45.44% 28.56%, 58.32% 34.92%, 70.75% 28.56%, 77.47% 32.16%, 89.59% 25.24%, 100% 31.83%, 100% 0%, 95.76% 0%, 95.76% 6.01%, 89.78% 9.58%, 83.41% 6.01%, 95.76% 0%, 71.48% 0%, 77.47% 3.09%, 71.48% 6.73%, 64.03% 3.09%, 64.03% 0%, 100% 0%, 100% 100%),
  "5-5": (0% 100%, 0% 31.83%, 14.45% 25.24%, 59.16% 45.89%, 59.16% 51.68%, 64.72% 54.54%, 59.16% 57.74%, 59.16% 69%, 64.72% 72.53%, 77.34% 65.41%, 100% 76.03%, 100% 100%),
  "5-6": (0% 76.03%, 21.91% 85.72%, 21.91% 97.39%, 16.04% 100%, 100% 100%, 100% 47.6%, 88.92% 42.57%, 88.92% 37.5%, 83.75% 34.14%, 83.75% 29.17%, 78.1% 25.88%, 78.1% 19.8%, 83.75% 17.07%, 83.75% 0%, 100% 0%, 100% 100%, 0% 100%),
  "5-7": (0% 0%, 100% 0%, 100% 100%, 90.83% 100%, 90.83% 95.1%, 83.96% 91.53%, 83.96% 85.85%, 77.63% 83.33%, 77.63% 60.84%, 60.14% 50.92%, 46.69% 57.92%, 41.33% 54.1%, 34.4% 57.92%, 27.9% 54.1%, 22.34% 57.92%, 0% 47.6%),
  "5-8": (91.69% 100%, 0% 100%, 0% 0%, 100% 0%, 100% 14.15%, 96.53% 11.89%, 96.53% 6.21%, 84.04% 0%, 71.95% 0%, 78.31% 2.66%, 78.31% 8.42%, 84.59% 11.33%, 84.59% 16.98%, 91.69% 20.13%, 91.69% 26.15%, 100% 30.02%, 100% 62.47%, 97.95% 63.43%, 97.95% 69.47%, 85.22% 75.58%, 85.22% 85.94%, 91.69% 89.18%),
  "5-9": (0% 30.02%, 17.5% 37.94%, 17.5% 43.05%, 10.85% 46.73%, 10.85% 57.22%, 0% 62.47%, 0% 100%, 0% 0%, 100% 0%, 100% 7.67%, 90.56% 3.02%, 90.56% 0%, 48.45% 0%, 48.45% 6.08%, 41.86% 9.15%, 41.86% 14.42%, 17.5% 25.48%, 17.5% 32.24%, 9.32% 29%, 9.32% 23.56%, 3.24% 20.48%, 3.24% 16.29%, 0% 14.15%),
  "5-10": (93.04% 14.97%, 100% 18.24%, 100% 39.74%, 93.04% 42.25%, 93.04% 49.73%, 100% 52.13%, 100% 62.11%, 93.04% 65.85%, 100% 69.55%, 100% 92.69%, 72.26% 79.9%, 72.26% 86.5%, 85.12% 92.69%, 85.12% 97.91%, 89.38% 100%, 100% 100%, 100% 0%, 0% 0%, 0% 7.67%, 3.01% 9.06%, 3.01% 14.97%, 9.98% 18.24%, 9.98% 23.84%, 15.56% 26.19%, 15.56% 32.13%, 21.66% 34.73%, 21.66% 40.55%, 35.09% 46.59%, 47.45% 46.59%, 40.9% 48.77%, 40.9% 55.63%, 47.45% 58.4%, 53.8% 54.69%, 47.45% 51.61%, 47.45% 46.59%, 35.09% 46.59%, 35.09% 18.24%, 60.37% 6.21%, 60.37% 0%, 70.95% 0%, 77.16% 3.34%, 77.16% 18.91%, 85.12% 24.32%, 85.12% 18.24%),
  "5-11": (61.17% 0%, 61.17% 6.24%, 53.38% 9.62%, 53.38% 3.64%, 48.1% 0%, 36.09% 5.44%, 36.09% 17.34%, 48.1% 23.45%, 48.1% 28.85%, 54.11% 31.51%, 54.11% 37.55%, 36.09% 45.77%, 36.09% 52.18%, 28.73% 48.86%, 28.73% 43.9%, 22.53% 46.9%, 16.78% 42.78%, 11.15% 46.9%, 11.15% 57.07%, 4.83% 60.79%, 4.83% 65.89%, 30.18% 77.8%, 30.18% 89.17%, 36.09% 92.16%, 36.09% 97.66%, 30.18% 100%, 30.18% 95.41%, 3.31% 83.44%, 9.43% 79.52%, 3.31% 77.8%, 3.31% 71.25%, 0% 69.55%, 0% 0%, 100% 0%, 100% 87.41%, 92.51% 83.4%, 79.48% 89.39%, 53.62% 77.51%, 53.62% 71.25%, 47.43% 68.97%, 47.43% 63.26%, 92.51% 42.58%, 92.51% 36.66%, 100% 33.51%, 100% 0%),
  "5-12": (100% 100%, 78.96% 100%, 78.96% 94.66%, 73.49% 97.3%, 73.49% 100%, 0% 100%, 0% 33.51%, 3.41% 32.04%, 3.41% 25.88%, 16.82% 19.71%, 16.82% 11.59%, 23.8% 7.06%, 23.8% 3.73%, 29.96% 0%, 29.96% 9.29%, 23.8% 13.41%, 23.8% 22.99%, 29.96% 25.88%, 23.8% 28.92%, 23.8% 34.49%, 36.8% 40%, 36.8% 46.25%, 23.8% 52.38%, 23.8% 68.44%, 17.67% 72.21%, 17.67% 83.39%, 11.48% 86.04%, 5.14% 84.24%, 0% 87.4%, 0% 100%, 66.26% 100%, 66.26% 95%, 48.16% 86.04%, 48.16% 80.89%, 41.91% 77.73%, 48.16% 74.14%, 54.51% 77.73%, 54.51% 83.39%, 48.16% 86.04%, 54.51% 89.19%, 66.26% 82.3%, 73.49% 86.04%, 73.49% 92.14%, 84.67% 97.3%, 84.67% 92.14%, 91.66% 88.09%, 100% 92.14%),
  "5-13": (0% 100%, 0% 92.14%, 16.27% 100%),
  "6-4": (64.09% 0%, 100% 0%, 100% 100%, 70.09% 100%, 77.72% 97.33%, 77.72% 57.79%, 83.42% 54.74%, 83.42% 37.62%, 89.8% 34.76%, 89.8% 17.17%, 77.72% 11.78%, 77.72% 6.17%, 64.09% 0%),
  "6-5": (100% 25%, 96.59% 26.45%, 96.59% 32.34%, 65.86% 46.09%, 65.86% 52.63%, 59.06% 55.6%, 59.06% 61.38%, 53.75% 63.51%, 53.75% 69.5%, 46.55% 66.31%, 34.25% 71.83%, 34.25% 83.97%, 15.88% 92.11%, 15.88% 96.92%, 9.43% 100%, 0% 100%, 0% 0%, 100% 0%),
  "6-6": (16.04% 0%, 9.53% 2.74%, 9.53% 21.18%, 0% 25%, 0% 0%, 16.04% 0%),
  "6-7": (100% 0%, 100% 56.8%, 96.24% 54.65%, 96.24% 49.29%, 90.37% 46.68%, 90.37% 40.6%, 83.59% 37.16%, 83.59% 14.84%, 90.83% 10.37%, 90.83% 0%),
  "6-8": (91.69% 0%, 91.69% 6.49%, 78.63% 11.75%, 78.63% 17.3%, 67.4% 22.73%, 67.4% 28.21%, 59.99% 31.69%, 59.99% 43.63%, 53.8% 46.15%, 53.8% 57.31%, 47.79% 60.46%, 47.79% 65.68%, 35.13% 71.28%, 35.13% 77.01%, 28.66% 80.77%, 16.11% 74.5%, 16.11% 68.76%, 3.42% 63.57%, 3.42% 58.66%, 0% 56.67%, 0% 0%, 91.69% 0%),
  "6-10": (100% 0%, 100% 10.22%, 92.81% 6.75%, 92.81% 1.45%, 89.41% 0%),
  "6-11": (100% 9.16%, 100% 100%, 60.11% 100%, 60.11% 83.58%, 53.83% 80.78%, 53.83% 63.51%, 77.86% 51.99%, 78.3% 47.12%, 86% 42.89%, 100% 50.11%, 100% 16.08%, 92.04% 11.78%, 66.38% 23.82%, 60.11% 20.69%, 42.02% 29.51%, 33.95% 26.15%, 46.86% 20.69%, 42.02% 17.93%, 28.79% 17.93%, 22.84% 14.47%, 16.57% 17.93%, 0% 10.21%, 0% 0%, 7.69% 2.53%, 15.02% 0%, 26.69% 6.1%, 33.28% 2.53%, 45.63% 7.58%, 28.79% 17.93%, 42.02% 17.93%, 46.86% 13.96%, 53.83% 17.06%, 78.3% 5.11%, 86% 8.47%, 92.04% 5.11%),
  "6-12": (100% 0%, 100% 100%, 0% 100%, 0% 50%, 4.68% 51.75%, 9.75% 50%, 9.75% 43.24%, 41.81% 29.42%, 48.66% 32.48%, 48.66% 49.04%, 60.7% 54.2%, 73.55% 49.04%, 73.55% 36.66%, 77.4% 34.68%, 73.55% 32.48%, 73.55% 25.78%, 80.83% 22.64%, 80.83% 29.42%, 87.22% 31.73%, 87.22% 37.85%, 80.83% 41.07%, 100% 49.04%, 100% 21.31%, 92% 17.25%, 85.79% 20.63%, 78.94% 17.25%, 85.07% 14.08%, 85.07% 9.29%, 78.94% 6.37%, 85.07% 3.32%, 78.96% 0%, 73.55% 0%, 73.55% 3.76%, 67.02% 7.16%, 59.98% 3.76%, 66.26% 0%, 28.51% 2.23%, 23.17% 5.6%, 16.89% 2.23%, 10.53% 0%, 10.53% 4.82%, 16.89% 7.85%, 10.53% 11.29%, 5.58% 9.16%, 5.58% 11.99%, 0% 16.08%, 0% 9.16%, 10.53% 4.82%, 10.53% 0%, 16.89% 2.23%, 23.15% 0%, 28.51% 2.23%, 66.26% 0%),
  "6-13": (0% 0%, 0% 100%, 12.02% 100%, 18.12% 96.83%, 18.12% 86.15%, 23.48% 84%, 23.48% 77.44%, 11.29% 72.11%, 11.29% 66.56%, 5.36% 63.93%, 5.36% 57.53%, 0% 55.08%, 0% 21.31%, 11.29% 27.16%, 18.12% 23.77%, 18.12% 12.91%, 30.81% 18.85%, 35.29% 16.1%, 35.29% 21.03%, 48.25% 27.16%, 55.6% 23.77%, 43.35% 17.62%, 43.35% 11.28%, 35.99% 13.96%, 35.99% 2.87%, 29.82% 5.77%, 16.27% 0%),
  "6-14": (5.2% 100%, 5.2% 98.33%, 0% 95.82%, 0% 89.12%, 5.2% 91.66%, 5.2% 98.33%, 13.06% 100%),
  "7-4": (100% 0%, 100% 22.01%, 95.53% 23.87%, 95.53% 28.97%, 100% 31.08%, 100% 49.27%, 95.53% 46.24%, 89.56% 49.27%, 89.56% 43.07%, 83.96% 41.02%, 83.96% 35.23%, 64.09% 26.61%, 70.44% 23.87%, 70.44% 0%),
  "7-5": (9.44% 0%, 9.44% 6.43%, 3.24% 9.49%, 3.24% 20.69%, 0% 22.02%, 0% 31.17%, 3.24% 32.55%, 3.24% 43.13%, 9.44% 40.25%, 15.1% 45.25%, 3.24% 51.65%, 0% 49.27%, 0% 0%),
  "7-12": (100% 0%, 100% 28.93%, 98.47% 29.66%, 98.47% 52.82%, 72.86% 41.12%, 79.04% 37.61%, 85.78% 40.76%, 92.19% 37.61%, 98.47% 40.39%, 98.47% 29.66%, 91.66% 32.92%, 91.66% 26.86%, 85.78% 23.59%, 67.02% 32.92%, 60.52% 28.93%, 60.52% 23.59%, 54.1% 20.99%, 54.1% 3.34%, 48.53% 0%, 48.53% 6.28%, 41.85% 9.68%, 35.4% 6.28%, 35.4% 0%, 29.14% 3.34%, 23.67% 0%, 11.47% 6.28%, 11.47% 11.93%, 0% 17.47%, 0% 0%),
  "7-13": (0% 0%, 0% 28.93%, 4.93% 26.59%, 4.93% 15.38%, 11.93% 11.77%, 12.02% 0%, 100% 0%, 100% 22.81%, 94.33% 19.95%, 80.3% 26.41%, 80.3% 32.19%, 73.24% 35.36%, 73.24% 40.11%, 67.33% 37.28%, 60.04% 40.11%, 60.04% 46.47%, 73.24% 53.34%, 87.93% 46.47%, 87.93% 36.33%, 100% 30.4%, 100% 0%, 11.93% 0%, 0% 0%),
  "7-14": (0% 11.25%, 0% 18.4%, 6.63% 21.63%, 13.06% 18.4%, 13.06% 7.41%, 19.4% 3.76%, 13.06% 0%, 5.2% 0%, 5.2% 9.24%),
);



////////////////////
//  Calculations  //
////////////////////

$meshSegmentWidth: $meshWidth / $meshSegmentsX;
$meshSegmentHeight: $meshHeight / $meshSegmentsY;
$meshMiddleSegmentX: ceil($meshSegmentsX / 2);
$meshMiddleSegmentY: ceil($meshSegmentsY / 2);
$meshColumnRotation: asin($meshSegmentWidth / 2 / $meshRadius) * 2;
$meshRowRotation: asin($meshSegmentHeight / 2 / $meshRadius) * 2;
$meshTransformOriginX: sqrt( pow($meshRadius, 2) - pow($meshSegmentWidth/2, 2) );
$meshTransformOriginY: sqrt( pow($meshRadius, 2) - pow($meshSegmentHeight/2, 2) );

:root {
  --meshSegmentWidth: $meshSegmentWidth;
  --meshColumnRotation: $meshColumnRotation;
  --meshRowRotation: $meshRowRotation;
}



///////////////////////
//  Spheric 3D Mesh  //
///////////////////////

.sphere {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: auto;
  width: $meshWidth;
  height: $meshHeight;
  transform: translate3d(-50%, -50%, $meshRadius);
  transform-style: preserve-3d;
}

.mesh {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50% (-$meshTransformOriginX);
  transform-style: preserve-3d;
}

.mesh .column {
  position: absolute;
  width: 100% / $meshSegmentsX;
  height: 100%;
  left: 0;
  right: 0;
  margin: auto;
  transform-style: preserve-3d;
  transform-origin: 50% 50% (-$meshTransformOriginX);
  
  @for $x from 1 through $meshSegmentsX {
    &:nth-child(#{$x}) {
      transform: rotateY(#{ ($x - $meshMiddleSegmentX) * $meshColumnRotation });
    }
  }
}

.mesh .segment {
  position: absolute;
  width: 100%;
  height: 100% / $meshSegmentsY;
  top: 0;
  bottom: 0;
  margin: auto;
  transform-style: preserve-3d;
  transform-origin: 50% 50% (-$meshTransformOriginY);
    
  &:before, &:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
  
  @for $y from 1 through $meshSegmentsY {
    &:nth-child(#{$y}) {
      transform: rotateX(#{ ($meshMiddleSegmentY - $y) * $meshRowRotation });
    }
  }
}



////////////////////////
//  Cliping the mesh  //
////////////////////////

@function getSegmentWidth($rowIndex) {
  @if $rowIndex < 1 {
    @return $meshSegmentWidth;
  }
  
  $stepAngle: ((180 - $meshRowRotation) / 2) - ($meshRowRotation * (($rowIndex - 1) + 0.5));
  $stepOffset: $meshSegmentHeight * cos($stepAngle);
  $skewDistance: $stepOffset * tan($meshColumnRotation/2);
  @return getSegmentWidth($rowIndex - 1) - $skewDistance * 2;
}

@function mapPolygonToTrapezoid ($path, $topScale: 1, $bottomScale: 1) {
  $transformedPath: "";
  @each $point in $path {
    $xMin: 50% + (nth($point, 1) - 50%) * $topScale;
    $xMax: 50% + (nth($point, 1) - 50%) * $bottomScale;
    $xDiff: $xMax - $xMin;
    $yScale: nth($point, 2) / 100%;
    $newPosX: $xMin + $xDiff * $yScale;

    $transformedPath: if($transformedPath == "", "", $transformedPath + " ");
    $transformedPath: $transformedPath + $newPosX;
    $transformedPath: $transformedPath + " " + nth($point, 2) + ",";
  }
  $transformedPath: str-slice($transformedPath, 1, str-length($transformedPath) - 1);

  @return $transformedPath;
}

@for $x from 1 through $meshSegmentsX {
  .mesh .column:nth-child(#{$x}) {
    @for $y from 1 through $meshSegmentsY {
      .segment:nth-child(#{$y}) {
        $scaleTop: getSegmentWidth(abs($meshMiddleSegmentY - $y) - if(($meshMiddleSegmentY - $y) > 0, 0, 1)) / $meshSegmentWidth;
        $scaleBottom: getSegmentWidth(abs($meshMiddleSegmentY - $y) - if(($meshMiddleSegmentY - $y) > 0, 1, 0)) / $meshSegmentWidth;

        &:before {
          $topLeftCoordX: 100% * (1 - $scaleTop) / 2;
          $topRightCoordX: 100% - $topLeftCoordX;
          $bottomLeftCoordX: 100% * (1 - $scaleBottom) / 2;
          $bottomRightCoordX: 100% - $bottomLeftCoordX;

          $path: $topLeftCoordX 0%,
                 $topRightCoordX 0%,
                 $bottomRightCoordX 100%,
                 $bottomLeftCoordX 100%;
          clip-path: polygon(#{ $path });
        }
        
        &:after {
          $path: map-get($clipMap, "#{$y}-#{$x}");
          $scaleTop: getSegmentWidth(abs($meshMiddleSegmentY - $y) - if(($meshMiddleSegmentY - $y) > 0, 0, 1)) / $meshSegmentWidth;
          $scaleBottom: getSegmentWidth(abs($meshMiddleSegmentY - $y) - if(($meshMiddleSegmentY - $y) > 0, 1, 0)) / $meshSegmentWidth;

          @if $path != null {
            $transformedPath: mapPolygonToTrapezoid($path, $scaleTop, $scaleBottom);
            clip-path: polygon(#{ $transformedPath });
          } @else {
            display: none;
          }
        }
      }
    }
  }
}



/////////////
//  Scene  //
/////////////

body {
  position: absolute;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.scene {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 100vmin;
}

.scene-x,
.scene-y,
.scene-z {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}



//////////////////
//  Animations  //
//////////////////

.scene-x {
  animation: sceneRotateX ($rotationDuration * 2) infinite;
}

.scene-z {
  transform: rotateZ(23.5deg);
}

.mesh {
  animation: sphereRotateY $rotationDuration linear infinite;
}

@keyframes sceneRotateX {
  0%, 100% {
    transform: rotateX(-30deg);
  }
  50% {
    transform: rotateX(30deg);
  }
}

@keyframes sphereRotateY {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(360deg);
  }
}


///////////////
//  Shading  //
///////////////

.scene {
  background-image: linear-gradient(to bottom, rgba(#999,.97), rgba(#fff,.97) 60%, #fff 75%, #fff),
                    url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' preserveAspectRatio='none' viewBox='0 0 400 300' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cg id='Layer1'%3E%3Cg%3E%3Cpath d='M326.2,-0.928l0,111.932l40.109,0l0,-111.932l34.691,0l0,301.928l-34.691,0l0,-123.084l-40.109,0l0,123.084l-34.691,0l0,-235.223l-8.748,0l0,235.223l-66.508,0l-27.089,-109.867l-8.738,0l0,109.867l-45.448,0l-6.292,-56.368l-41.507,0l-6.466,56.368l-81.713,0l0,-301.928l75.849,0l0,65.466l-41.333,0l0,47.499l35.353,0l15.601,-113.037l46.051,0l15.389,110.111l0,-110.039l41.856,0c11.749,0 21.51,3.405 29.283,10.216l0,-10.216l109.151,0Zm-77.955,276.638l0,-209.933l-9.352,0c0.636,6.959 0.954,14.463 0.954,22.51c0,34.971 -7.224,62.024 -21.671,81.162l30.069,106.261Zm-214.729,-98.207l0,56.999l18.45,0l7.867,-56.999l-26.317,0Zm88.005,0.475l-5.506,-49.373c-1.281,-10.972 -2.839,-25.167 -4.675,-42.585c-1.835,-17.417 -3.043,-29.898 -3.626,-37.441c-0.524,6.995 -1.558,18.515 -3.102,34.561c-1.544,16.047 -4.966,47.659 -10.268,94.838l27.177,0Zm65.721,-117.157l-6.816,0l0,68.976l6.466,0c12.059,0 18.089,-12.597 18.089,-37.792c0,-20.789 -5.913,-31.184 -17.739,-31.184Z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  
  &::before {
    content: '';
    display: block;
    width: $meshRadius * 2 * 1.3;
    height: $meshRadius * .63;
    border-radius: 100%;
    position: absolute;
    left: calc(50% + #{$meshRadius * .1});
    top: calc(50% + #{$meshRadius * 1.08});
    transform: translate(-50%, -50%);
    background: radial-gradient(ellipse closest-side, rgba(0,0,0,.6), rgba(0,0,0,0)),
                radial-gradient(ellipse closest-side, rgba(lighten($oceanColor, 15%),.7), rgba(lighten($oceanColor, 30%),0) 50%);
    background-position: 50% 50%,
                         60% 50%;
    filter: blur($meshRadius * .1);
  }
  
  &::after {
    content: '';
    display: block;
    width: 100vw;
    height: 100vh;
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='100%25' height='100%25' preserveAspectRatio='none' viewBox='0 0 400 300' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xml:space='preserve' style='fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;'%3E%3Cg id='Layer1'%3E%3Cg%3E%3Cpath d='M326.2,-0.928l0,111.932l40.109,0l0,-111.932l34.691,0l0,301.928l-34.691,0l0,-123.084l-40.109,0l0,123.084l-34.691,0l0,-235.223l-8.748,0l0,235.223l-66.508,0l-27.089,-109.867l-8.738,0l0,109.867l-45.448,0l-6.292,-56.368l-41.507,0l-6.466,56.368l-81.713,0l0,-301.928l75.849,0l0,65.466l-41.333,0l0,47.499l35.353,0l15.601,-113.037l46.051,0l15.389,110.111l0,-110.039l41.856,0c11.749,0 21.51,3.405 29.283,10.216l0,-10.216l109.151,0Zm-77.955,276.638l0,-209.933l-9.352,0c0.636,6.959 0.954,14.463 0.954,22.51c0,34.971 -7.224,62.024 -21.671,81.162l30.069,106.261Zm-214.729,-98.207l0,56.999l18.45,0l7.867,-56.999l-26.317,0Zm88.005,0.475l-5.506,-49.373c-1.281,-10.972 -2.839,-25.167 -4.675,-42.585c-1.835,-17.417 -3.043,-29.898 -3.626,-37.441c-0.524,6.995 -1.558,18.515 -3.102,34.561c-1.544,16.047 -4.966,47.659 -10.268,94.838l27.177,0Zm65.721,-117.157l-6.816,0l0,68.976l6.466,0c12.059,0 18.089,-12.597 18.089,-37.792c0,-20.789 -5.913,-31.184 -17.739,-31.184Z' style='fill:none;stroke:GoldenRod;stroke-width:1px;vector-effect: non-scaling-stroke;'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    mix-blend-mode: hue;
    opacity: .5;
  }
}

.mesh {
  .column {
    .segment {
      &:before {
        background: rgba($oceanColor, .97);
      }

      &:after {
        background: $mainlandColor;
      }
    }
  }
}

@for $x from 1 through $meshSegmentsX {
  .mesh .column:nth-child(#{$x}) {
    @for $y from 1 through $meshSegmentsY {
      .segment:nth-child(#{$y}) {
        &:before {
          animation: sphereShadeOcean $rotationDuration linear ((-$x - $y*.5 + 1) * $rotationDuration/$meshSegmentsX) infinite both;
          --shadow-offset: pow($y, .8);
        }

        &:after {
          animation: sphereShadeContinents $rotationDuration linear ((-$x - $y*.5 + 1) * $rotationDuration/$meshSegmentsX) infinite both;
          --shadow-offset: pow($y, .8);
        }
      }
    }
  }
}

@keyframes sphereShadeOcean {
  0%, 20%, 50%, 83%, 100% {
    box-shadow: inset 0 0 0 50vmin rgba(#fff, calc(.033 * var(--shadow-offset)) );
  }
  38% {
    box-shadow: inset 0 0 0 50vmin rgba(#000, calc(.066 * var(--shadow-offset)) );
  }
  60% {
    box-shadow: inset 0 0 0 50vmin rgba(#fff, calc(.1 * var(--shadow-offset)) );
  }
}

@keyframes sphereShadeContinents {
  0%, 20%, 50%, 83%, 100% {
    box-shadow: inset 0 0 0 50vmin rgba(#000, calc(.033 * var(--shadow-offset)) );
  }
  38% {
    box-shadow: inset 0 0 0 50vmin rgba(#fff, calc(.066 * var(--shadow-offset)) );
  }
  60% {
    box-shadow: inset 0 0 0 50vmin rgba(#000, calc(.1 * var(--shadow-offset)) );
  }
}



/////////////
//  Texts  //
/////////////

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  border: 0;
}

.motto {
  position: absolute;
  z-index: 1;
  left: 0;
  top: 50%;
  width: 100%;
  margin: ($meshRadius * 1.2) 0 0;
  text-align: center;
  font-weight: 100;
  font-family: 'Yantramanav', sans-serif;
  font-size: 4vmin;
  opacity: 0.3;
  transform: perspective(100vmin) rotateX(50deg);
}
            
          
!
999px
Loading ..................

Console