Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

              
                <section class="planet">
  <svg id="orbit-part" width="1440" height="1117" viewBox="0 0 1440 1117" fill="none" xmlns="http://www.w3.org/2000/svg">
    <path d="M2225.09 186.287C2242.61 262.488 2220.79 343.99 2166.21 426.158C2111.63 508.327 2024.33 591.122 1910.98 669.867C1684.3 827.356 1353.55 968.587 972.465 1056.21C591.381 1143.83 232.162 1161.24 -40.5443 1118.58C-176.899 1097.25 -291.598 1060.9 -376.584 1010.82C-461.569 960.741 -516.801 896.958 -534.322 820.757C-551.842 744.556 -530.016 663.054 -475.438 580.886C-420.86 498.717 -333.555 415.922 -220.211 337.177C6.47345 179.688 337.223 38.4565 718.307 -49.1658C1099.39 -136.788 1458.61 -154.2 1731.32 -111.536C1867.67 -90.2036 1982.37 -53.8557 2067.36 -3.77615C2152.34 46.3026 2207.57 110.086 2225.09 186.287Z" stroke="url(#paint0_linear_901_13129)"/>
    <path id="bot-line" d="M-302.985 759.219C-252.496 978.807 186.777 1069.87 717.5 985.944" stroke="url(#paint1_linear_901_13129)"/>
    <path id="academy-line" d="M1057 793.071C1002.86 810.346 946.227 825.902 887.64 839.373C517.834 924.402 181.875 900.621 39.7627 793.071" stroke="url(#paint3_linear_901_13129)"/>
    <path id="shop-line" d="M230 869.662C87.304 840.222 -8.73499 780.79 -28.2206 696.043C-49.4473 603.725 24.1678 498.751 160.5 403.443" stroke="url(#paint3_linear_901_13129)"/>
    <path id="vds-line" d="M651.5 783.699C719.739 778.142 792.211 767.005 866.534 749.916C1029.04 712.551 1171.16 653.452 1272.18 587" stroke="url(#paint4_linear_901_13129)"/>
    <path id="cashback-line" d="M190.247 644.055C170.267 557.16 264.057 455.085 422.5 371.96" stroke="url(#paint5_linear_901_13129)"/>
    <path id="value-line" d="M323 432.647C387.287 386.565 471.477 343.362 569 307.605" stroke="url(#paint6_linear_901_13129)"/>
    <path id="parsing-line" d="M1214 335.882C1242.47 352.35 1260.97 373.426 1266.78 398.688C1289.84 499.002 1104 627.351 851.692 685.365C797.741 697.77 745.119 705.954 695.5 710.176" stroke="url(#paint7_linear_901_13129)"/>
    <path id="garant-line" d="M451.5 453.679C380.136 504.455 341.85 559.937 353.079 608.774C365.832 664.239 439.779 699.519 546 710.174" stroke="url(#paint8_linear_901_13129)"/>
    <path d="M1128.26 426.338C1132.33 444.024 1127.32 462.967 1114.67 482.111C1102.02 501.256 1081.75 520.561 1055.4 538.928C1002.72 575.662 925.796 608.587 837.13 628.973C748.465 649.36 664.888 653.338 601.447 643.306C569.725 638.29 543.064 629.775 523.321 618.078C503.58 606.382 490.796 591.531 486.729 573.845C482.663 556.158 487.676 537.215 500.327 518.071C512.978 498.926 533.243 479.622 559.588 461.254C612.276 424.521 689.197 391.596 777.863 371.209C866.528 350.822 950.105 346.844 1013.55 356.876C1045.27 361.892 1071.93 370.407 1091.67 382.104C1111.41 393.8 1124.2 408.651 1128.26 426.338Z" stroke="url(#paint9_linear_901_13129)"/>
    <defs>
    <linearGradient id="paint0_linear_901_13129" x1="766.129" y1="2.17776" x2="1165.42" y2="1782.19" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#A98740"/>
    </linearGradient>
    <linearGradient id="paint1_linear_901_13129" x1="743.614" y1="100.87" x2="1064.63" y2="1531.9" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#A98740"/>
    </linearGradient>
    <linearGradient id="paint2_linear_901_13129" x1="762.187" y1="198.586" x2="1004.82" y2="1280.22" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#906F43"/>
    </linearGradient>
    <linearGradient id="paint3_linear_901_13129" x1="762.187" y1="198.586" x2="1004.82" y2="1280.22" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#906F43"/>
    </linearGradient>
    <linearGradient id="paint4_linear_901_13129" x1="773.887" y1="276.704" x2="953.069" y2="1075.48" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#C69B64"/>
    </linearGradient>
    <linearGradient id="paint5_linear_901_13129" x1="773.887" y1="276.704" x2="953.069" y2="1075.48" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#C69B64"/>
    </linearGradient>
    <linearGradient id="paint6_linear_901_13129" x1="773.887" y1="276.704" x2="953.069" y2="1075.48" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#C69B64"/>
    </linearGradient>
    <linearGradient id="paint7_linear_901_13129" x1="783.996" y1="339.095" x2="915.129" y2="923.552" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#EEBD7C"/>
    </linearGradient>
    <linearGradient id="paint8_linear_901_13129" x1="783.996" y1="339.095" x2="915.129" y2="923.552" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.12"/>
    <stop offset="1" stop-color="#EEBD7C"/>
    </linearGradient>
    <linearGradient id="paint9_linear_901_13129" x1="777.75" y1="370.722" x2="882.496" y2="799.095" gradientUnits="userSpaceOnUse">
    <stop offset="0.0001" stop-color="#FFBB2C" stop-opacity="0.15"/>
    <stop offset="1" stop-color="#EEBD7C"/>
    </linearGradient>
    </defs>
  </svg>

  <div class="planet__item planet__garant">
  </div>
  <div class="planet__item planet__parsing">
  </div>
  <div class="planet__item planet__vds">
  </div>
  <div class="planet__item planet__value">
  </div>
  <div class="planet__item planet__cashback">
  </div>
  <div class="planet__item planet__shop">
  </div>
  <div class="planet__item planet__academy">
  </div>
  <div class="planet__item planet__bot">
  </div>

</section>
              
            
!

CSS

              
                .planet {
  height: 1117px;
  position: relative;
  overflow: hidden;

  &__item {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: red;
  }

  &__bot

  {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 10;
    max-width: 268px;
    will-change: tranform;

    .card {
      left: 212px;
      top: -150px;
      display: none;

      .card__line {
        bottom: -72px;
        left: 0;
      }

      .card__border {
        background: linear-gradient(300deg,#DF1A1A, #393837);
      }

      .card__content {
        background: linear-gradient(67.89deg, rgba(223, 26, 26, 0.5) -43.55%, rgba(0, 0, 0, 0) 106.98%), #161616;
        border-radius: 20px;

        h3 {
          color: #DF1A1A;
        }

        a {
          color: #DF1A1A;

          svg {
            stroke: #DF1A1A;
          }
        }
      }
    }
  }
  &__shop
  {
    position: absolute;
    top: 170px;
    left: 0;
    z-index: 10;
    max-width: 242px;
    will-change: tranform;

    .card {
      left: 200px;
      top: -150px;
      display: none;

      .card__line {
        bottom: -72px;
        left: 0;
      }

      .card__border {
        background: linear-gradient(300deg,#43454D, #4C92F1);
      }

      .card__content {
        background: linear-gradient(81.42deg, rgba(88, 132, 192, 0.2) 1.88%, rgba(0, 0, 0, 0) 50.09%), linear-gradient(81.52deg, rgba(88, 132, 192, 0.3) -14.33%, rgba(0, 0, 0, 0) 66.4%), #161616;
        border-radius: 20px;

        h3 {
          color: #4785DD;
        }

        a {
          color: #4785DD;

          svg {
            stroke: #4785DD;
          }
        }
      }
    }
  }
  &__academy
  {
    position: absolute;
    top: 620px;
    left: -100px;
    z-index: 10;
    max-width: 263px;
    will-change: tranform;

    .card {
      left: -385px;
      bottom: 100px;
      display: none;

      .card__line {
        right: -152px;
        top: 58px;
      }

      .card__border {
        background: linear-gradient(360deg,#A78A3F, #393837);
      }

      .card__content {
        background: linear-gradient(210.69deg, rgba(203, 191, 136, 0.5) -2.2%, rgba(0, 0, 0, 0) 118.9%), #161616;
        border-radius: 20px;

        h3 {
          color: #CBBF88;
        }

        a {
          color: #CBBF88;

          svg {
            stroke: #CBBF88;
          }
        }
      }
    }
  }
  &__vds
  {
    position: absolute;
    top: 635px;
    left: 477px;
    z-index: 10;
    max-width: 263px;
    will-change: tranform;

    .card {
      left: -414px;
      bottom: 66px;
      display: none;

      .card__line {
        right: -152px;
        top: 58px;
      }

      .card__border {
        background: linear-gradient(300deg,#5D68DC, rgb(9, 12, 12));
      }

      .card__content {
        background: linear-gradient(260.49deg, rgba(54, 66, 201, 0.2) 2.25%, rgba(0, 0, 0, 0) 49.91%), linear-gradient(199.76deg, rgba(54, 66, 201, 0.3) -25.45%, rgba(0, 0, 0, 0) 90.4%), #161616;
        border-radius: 20px;

        h3 {
          color: #5D68DC;
        }

        a {
          color: #5D68DC;

          svg {
            stroke: #5D68DC;
          }
        }
      }
    }
  }
  &__cashback
  {
    position: absolute;
    top: 170px;
    left: 260px;
    z-index: 10;
    max-width: 311px;
    will-change: tranform;

    .card {
      left: 300px;
      top: -150px;
      display: none;

      .card__line {
        left: -152px;
        top: 140px;
      }

      .card__border {
        background: linear-gradient(300deg,#43454D, #C329C3);
      }

      .card__content {
        background: linear-gradient(81.42deg, rgba(195, 41, 195, 0.2) 1.88%, rgba(0, 0, 0, 0) 50.09%), linear-gradient(60.22deg, rgba(195, 41, 195, 0.3) -24.35%, rgba(0, 0, 0, 0) 71.65%), #161616;
        border-radius: 20px;

        h3 {
          color: #E64AE6;
        }

        a {
          color: #E64AE6;

          svg {
            stroke: #E64AE6;
          }
        }
      }
    }
  }
  &__value
  {
    position: absolute;
    top: 130px;
    left: 360px;
    z-index: 10;
    max-width: 191px;
    will-change: tranform;

    .card {
      left: 235px;
      top: -110px;
      display: none;

      .card__line {
        left: -152px;
        top: 90px;
      }

      .card__border {
        background: linear-gradient(100deg,#F77E06, #393837);
      }

      .card__content {
        background: linear-gradient(67.89deg, rgba(255, 138, 0, 0.5) -43.55%, rgba(0, 0, 0, 0) 106.98%), #161616;
        border-radius: 20px;

        h3 {
          color: #F77E06;
        }

        a {
          color: #F77E06;

          svg {
            stroke: #F77E06;
          }
        }
      }
    }
  }
  &__parsing
  {
    position: absolute;
    top: 560px;
    left: 510px;
    z-index: 10;
    max-width: 263px;
    will-change: tranform;

    .card {
      left: -385px;
      bottom: -78px;
      display: none;

      .card__line {
        right: -152px;
        top: 58px;
      }

      .card__border {
        background: linear-gradient(300deg,#42AB85, #373939);
      }

      .card__content {
        background: linear-gradient(260.49deg, rgba(53, 208, 151, 0.2) 2.25%, rgba(0, 0, 0, 0) 49.91%), linear-gradient(199.76deg, rgba(53, 208, 151, 0.3) -25.45%, rgba(0, 0, 0, 0) 90.4%), #161616;
        border-radius: 20px;

        h3 {
          color: #35D097;
        }

        a {
          color: #35D097;

          svg {
            stroke: #35D097;
          }
        }
      }
    }
  }
  &__garant
   {
    position: absolute;
    top: 240px;
    left: 200px;
    z-index: 10;
    max-width: 391px;
    will-change: tranform;

    .card {
      left: 240px;
      top: -190px;
      display: none;

      .card__line {
        bottom: -72px;
        left: 0;
      }

      .card__border {
        background: linear-gradient(300deg,#43454D, #E2E2E2);
      }

      .card__content {
        background: linear-gradient(81.42deg, rgba(240, 240, 240, 0.2) 1.88%, rgba(0, 0, 0, 0) 50.09%), linear-gradient(30.22deg, rgba(255, 255, 255, 0.3) -6.61%, rgba(0, 0, 0, 0) 77.65%), #161616;
        border-radius: 20px;

        h3 {
          color: #F4F4F4;
        }

        a {
          color: #F4F4F4;

          svg {
            stroke: #F4F4F4;
          }
        }
      }
    }
  }

}

#garant-line,
#parsing-line,
#value-line,
#cashback-line,
#vds-line,
#shop-line,
#academy-line,
#bot-line {
  width: 100%;
  height: 100%;
}

#orbits {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  opacity: 1;
}

#orbit-part {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  opacity: 1;
}

.komet-left {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}
.komet-bottom {
  position: absolute;
  bottom: 40px;
  left: 25%;
  z-index: 1;
}
.komet-right {
  position: absolute;
  right: 90px;
  bottom: 160px;
  z-index: 1;
}

.card {
  position: absolute;
  width: 352px;
  height: 195px;
  z-index: 300;

  .card__line {
    position: absolute;
  }

  &__border {
    height: 100%;
    border-radius: 20px;
    padding: 1px;
  }

  .card__content {
    padding: 24px 27px 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
  }

  h3 {
    font-weight: 700;
    font-size: 24px;
    line-height: 29px;
    margin-bottom: 12px;
  }

  p {
    font-weight: 500;
    font-size: 16px;
    line-height: 150%;
    color: #B8B8B8;
  }

  a {
    display: inline-flex;
    align-items: center;
    margin-top: auto;
    font-weight: 500;
    font-size: 14px;
    line-height: 160%;
    gap: 6px;
    transition: 0.3s ease;

    &:hover {
      gap: 10px;
      transition: 0.3s ease;
    }
  }
}

.planet__item {
  cursor: pointer;
}

.planet__item.active .card {
  display: block;
}




@media (max-width: 576px) {
  .planet {
    display: none;
  }
}

@media (max-width: 1024px) {
  .planet {
    height: 926px;
  }
  .planet__head h2 {
    font-size: 50px;
  }
  .planet__head p {
    font-size: 25px;
  }
  .planet__sun {
    width: 110%;
  }
  .planet__value {
    max-width: 140px;
  }
  .planet__cashback {
    max-width: 230px;
  }
  .planet__garant {
    max-width: 290px;
  }
  .planet__shop {
    max-width: 165px;
  }
  .planet__parsing {
    max-width: 200px;
  }
  .planet__vds {
    max-width: 220px;
  }
  .planet__academy {
    max-width: 200px;
  }
  .planet__bot {
    max-width: 210px;
  }
  .komet-left {
    top: 30%;
    max-width: 50px;
  }
  .komet-right {
    right: 45px;
    bottom: 40px;
    max-width: 120px;
  }

  // Cards
  .planet__cashback .card {
    left: 285px;
  }
  .planet__garant .card {
    left: 175px;
  }
  .planet__shop .card {
    left: 130px;
    top: -185px;
  }
  .planet__bot .card {
    left: 165px;
  }
  .planet__academy .card {
    left: -422px;
    bottom: 50px;
  }
  .planet__vds .card {
    left: -405px;
    bottom: 60px;
  }
  .planet__parsing .card {
    left: -425px;
  }
}

@media (max-width: 850px) {

  .planet__head {
    top: 25px;
  }

  .planet__head h2 {
    font-size: 40px;
    line-height: 130%;
  }
  .planet__head p {
    font-size: 20px;
    line-height: 130%;
  }

  .planet {
    height: 654px;
  }

  .planet__value {
    max-width: 120px;
  }
  .planet__cashback {
    max-width: 200px;
  }
  .planet__garant {
    max-width: 250px;
  }
  .planet__shop {
    max-width: 130px;
  }
  .planet__parsing {
    max-width: 180px;
  }
  .planet__vds {
    max-width: 190px;
  }
  .planet__academy {
    max-width: 160px;
  }
  .planet__bot {
    max-width: 170px;
  }

  .komet-left {
    max-width: 50px;
  }
  .komet-right {
    max-width: 90px;
  }

  // Cards

  .card h3 {
    font-size: 18px;
    margin-bottom: 8px;
  }
  .card p {
    font-size: 13px;
  }

  .card {
    width: 270px;
    height: 170px;
  }

  .card .card__content {
    padding: 12px 18px 14px;
  }

  .planet__value .card .card__line {
    max-width: 80px;
    left: -80px;
  }
  .planet__value .card {
    left: 140px;
    top: -100px;
  }

  .planet__cashback .card .card__line {
    max-width: 80px;
    left: -80px;
  }
  .planet__cashback .card {
    left: 180px;
    top: -140px;
  }

  .planet__garant .card .card__line {
    max-width: 80px;
    bottom: -35px;
  }
  .planet__garant .card {
    left: 155px;
    top: -150px;
  }

  .planet__shop .card .card__line {
    max-width: 80px;
    bottom: -35px;
  }
  .planet__shop .card {
    left: 110px;
    top: -130px;
  }

  .planet__bot .card .card__line {
    max-width: 80px;
    bottom: -35px;
  }
  .planet__bot .card {
    left: 129px;
  }

  .planet__academy .card .card__line {
    max-width: 80px;
    right: -80px;
    top: 93px;
  }
  .planet__academy .card {
    left: -275px;
    bottom: 65px;
  }

  .planet__vds .card .card__line {
    max-width: 80px;
    right: -80px;
  }
  .planet__vds .card {
    left: -286px;
    bottom: 35px;
  }

  .planet__parsing .card .card__line {
    max-width: 80px;
    right: -80px;
  }
  .planet__parsing .card {
    left: -290px;
    bottom: -60px;
  }
}

@media (max-width: 612px) {
  .planet {
    display: none;
  }
}

              
            
!

JS

              
                
gsap.registerPlugin(MotionPathPlugin)


 gsap.to('.planet__garant', 25, { motionPath: {path: '#garant-line',align: '#garant-line',alignOrigin: [0.5, 0.55]}})
  gsap.from('.planet__parsing', 25, { motionPath: {path: '#parsing-line',align: '#parsing-line',alignOrigin: [0.5, 0.5]}}, '<')
  gsap.from('.planet__value', 25, { motionPath: {path: '#value-line',align: '#value-line',alignOrigin: [0.5, 0.5]}}, '<')
  gsap.from('.planet__cashback', 25, { motionPath: {path: '#cashback-line',align: '#cashback-line',alignOrigin: [0.5, 0.5]}}, '<')
  gsap.to('.planet__vds', 25, { motionPath: {path: '#vds-line',align: '#vds-line',alignOrigin: [0.5, 0.5]}}, '<')
  gsap.from('.planet__academy', 25, { motionPath: {path: '#academy-line',align: '#academy-line',alignOrigin: [0.5, 0.5]}}, '<')
  gsap.from('.planet__shop', 25, { motionPath: {path: '#shop-line',align: '#shop-line',alignOrigin: [0.5, 0.5]}}, '<')
  gsap.to('.planet__bot', 25, { motionPath: {path: '#bot-line',align: '#bot-line',alignOrigin: [0.5, 0.5]}}, '<')
              
            
!
999px

Console