Planet Cube

index.html

<svg xmlns="http://www.w3.org/2000/svg" class="spiralSVG" viewBox="0 0 800 600">
<defs>
 <clipPath id="mask1">
 <polygon class="mask1" fill="red" points="483.25 194.06 316.75 194.06 296.43 237.17 304.65 421.98 495.35 421.98 503.57 237.17 483.25 194.06" />  
 </clipPath>
 <clipPath id="mask2">
 <polygon class="mask2" fill="red" points="483.25 194.06 316.75 194.06 296.43 237.17 304.65 421.98 495.35 421.98 503.57 237.17 483.25 194.06" />  
 </clipPath>
 
  <!-- PINK -->
    <radialGradient id="pinkPlanetGrad1" cx="74.71" cy="73.44" fx="-22.336210373572413" fy="33.011867337990516" r="105.13" gradientTransform="translate(0 -21.53) scale(1 1.29)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fc007d"/>
      <stop offset="1" stop-color="#181743" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="pinkPlanetGrad1-2" cx="74.12" cy="82.73" fx="-91.34242452313865" fy="13.807560848246027" r="179.25" gradientTransform="translate(25.68 -29.64) rotate(13.96) scale(1 1.18)" gradientUnits="userSpaceOnUse">
      <stop offset="0.05" stop-color="#ea0074" stop-opacity="0.5"/>
      <stop offset="0.25" stop-color="#e10172" stop-opacity="0.52"/>
      <stop offset="0.45" stop-color="#c7046c" stop-opacity="0.58"/>
      <stop offset="0.64" stop-color="#9b0962" stop-opacity="0.69"/>
      <stop offset="0.83" stop-color="#5e0f53" stop-opacity="0.83"/>
      <stop offset="1" stop-color="#181743"/>
    </radialGradient>
    <radialGradient id="pinkPlanetGrad1-3" cx="-23.91" cy="145.7" r="220.58" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fc007d"/>
      <stop offset="0.13" stop-color="#fc037e"/>
      <stop offset="0.21" stop-color="#fb0c83"/>
      <stop offset="0.28" stop-color="#f91b8b"/>
      <stop offset="0.35" stop-color="#f73196"/>
      <stop offset="0.41" stop-color="#f54da4"/>
      <stop offset="0.47" stop-color="#f26fb6"/>
      <stop offset="0.53" stop-color="#ee98ca"/>
      <stop offset="0.58" stop-color="#eac6e2"/>
      <stop offset="0.63" stop-color="#e5f7fb"/>
    </radialGradient>
    <radialGradient id="pinkPlanetGrad2_2" data-name="New Gradient Swatch 2" cx="100.25" cy="151.17" r="241.74" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fc007d"/>
      <stop offset="0.12" stop-color="#f9017f"/>
      <stop offset="0.2" stop-color="#f00685"/>
      <stop offset="0.27" stop-color="#e10e8f"/>
      <stop offset="0.33" stop-color="#cb189e"/>
      <stop offset="0.39" stop-color="#b027b1"/>
      <stop offset="0.44" stop-color="#8e38c8"/>
      <stop offset="0.45" stop-color="#893acb"/>
      <stop offset="0.48" stop-color="#8540cd"/>
      <stop offset="0.51" stop-color="#7b50d3"/>
      <stop offset="0.55" stop-color="#696adc"/>
      <stop offset="0.6" stop-color="#518fe9"/>
      <stop offset="0.63" stop-color="#3faaf2"/>
    </radialGradient>
    <radialGradient id="pinkPlanetGrad2_2-2" cx="58.79" cy="122.8" r="264.82" xlink:href="#pinkPlanetGrad2_2"/>
 
 <!-- BLUE -->
 
    <radialGradient id="bluePlanetGrad1" cx="74.71" cy="73.44" fx="-22.336210373572413" fy="33.011867337990516" r="105.13" gradientTransform="translate(0 -21.53) scale(1 1.29)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#0064e9"/>
      <stop offset="1" stop-color="#181743" stop-opacity="0"/>
    </radialGradient>
    <radialGradient id="bluePlanetGrad1-2" cx="74.12" cy="82.73" fx="-91.34242452313865" fy="13.807560848246027" r="179.25" gradientTransform="translate(25.68 -29.64) rotate(13.96) scale(1 1.18)" gradientUnits="userSpaceOnUse">
      <stop offset="0.05" stop-color="#0064e9" stop-opacity="0.5"/>
      <stop offset="0.33" stop-color="#025edc" stop-opacity="0.54"/>
      <stop offset="0.59" stop-color="#074cb5" stop-opacity="0.66"/>
      <stop offset="0.85" stop-color="#112e74" stop-opacity="0.85"/>
      <stop offset="1" stop-color="#181743"/>
    </radialGradient>
    <radialGradient id="bluePlanetGrad1-3" cx="-23.91" cy="145.7" r="220.58" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#0064e9"/>
      <stop offset="0.13" stop-color="#0366e9"/>
      <stop offset="0.22" stop-color="#0c6cea"/>
      <stop offset="0.29" stop-color="#1b75eb"/>
      <stop offset="0.36" stop-color="#3183ed"/>
      <stop offset="0.42" stop-color="#4c95ef"/>
      <stop offset="0.48" stop-color="#6fabf2"/>
      <stop offset="0.54" stop-color="#98c5f5"/>
      <stop offset="0.59" stop-color="#c6e3f9"/>
      <stop offset="0.63" stop-color="#e5f7fb"/>
    </radialGradient>
    <radialGradient id="bluePlanetGrad1-4" cx="100.25" cy="151.17" r="241.74" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#0064e9"/>
      <stop offset="0.11" stop-color="#0363e8"/>
      <stop offset="0.19" stop-color="#0c60e6"/>
      <stop offset="0.25" stop-color="#1b5ce3"/>
      <stop offset="0.31" stop-color="#3155de"/>
      <stop offset="0.36" stop-color="#4c4dd8"/>
      <stop offset="0.41" stop-color="#6e42d1"/>
      <stop offset="0.45" stop-color="#893acb"/>
      <stop offset="0.48" stop-color="#8540cd"/>
      <stop offset="0.51" stop-color="#7b50d3"/>
      <stop offset="0.55" stop-color="#696adc"/>
      <stop offset="0.6" stop-color="#518fe9"/>
      <stop offset="0.63" stop-color="#3faaf2"/>
    </radialGradient>
    <radialGradient id="bluePlanetGrad1-5" cx="58.79" cy="122.8" r="264.82" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#0064e9"/>
      <stop offset="0.13" stop-color="#0363e8"/>
      <stop offset="0.23" stop-color="#0c60e6"/>
      <stop offset="0.31" stop-color="#1b5ce3"/>
      <stop offset="0.38" stop-color="#3155de"/>
      <stop offset="0.44" stop-color="#4c4dd8"/>
      <stop offset="0.51" stop-color="#6e42d1"/>
      <stop offset="0.55" stop-color="#893acb"/>
      <stop offset="0.56" stop-color="#8540cd"/>
      <stop offset="0.58" stop-color="#7b50d3"/>
      <stop offset="0.59" stop-color="#696adc"/>
      <stop offset="0.61" stop-color="#518fe9"/>
      <stop offset="0.63" stop-color="#3faaf2"/>
    </radialGradient>
 
      <symbol viewBox="0 0 287 287" id="pinkPlanet">
        <circle cx="143.5" cy="143.5" r="143.5" fill="url(#pinkPlanetGrad1)"/>
        <circle cx="143.5" cy="143.5" r="135.5" fill="url(#pinkPlanetGrad1-2)"/>
        <g>
          <path d="M230.18,165.86h0c-19,12.35-45.86,23.21-76.54,29.87-29.3,6.35-57,7.77-79,4.95-26-3.33-43.93-12.58-47-26.57-2.8-12.93,7.66-27.45,26.85-40.47s46.9-24.46,78.82-31.39C166.65,95,197.9,94.2,221,98.7c21.27,4.14,35.63,12.8,38.32,25.18C262.22,137.31,250.81,152.46,230.18,165.86Z" fill="url(#pinkPlanetGrad1-3)"/>
          <path d="M232.5,153c-17.2,13.21-46.5,25.7-80.94,33.18-32.88,7.13-63.39,8.16-84.47,4-16.12-3.2-26.72-9.44-28.65-18.33-1.78-8.22,4.12-17.45,15.58-26.38,17.12-13.34,46.65-26,81.42-33.55,36.36-7.88,69.81-8.31,90.82-2.48,12.53,3.47,20.64,9.17,22.3,16.83C250.37,134.54,244.27,143.92,232.5,153Z" fill="url(#pinkPlanetGrad2_2)"/>
        </g>
        <path d="M233,143.5a89.54,89.54,0,0,1-.5,9.46c-17.2,13.21-46.5,25.7-80.94,33.18-32.88,7.13-63.39,8.16-84.47,4A89,89,0,0,1,54,145.41c0-.63,0-1.27,0-1.91A89.51,89.51,0,0,1,221,98.7a87.5,87.5,0,0,1,5.27,10.68A89,89,0,0,1,233,143.5Z" fill="url(#pinkPlanetGrad2_2-2)"/>
        <g>
          <path d="M82.8,41.41c1.62-1.1.7.09.7.09" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/>
          <path d="M46.88,79.32A115.57,115.57,0,0,1,69.61,52.09" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/>
        </g>
      </symbol>    
 
      <symbol id="bluePlanet" viewBox="0 0 287 287">
        <circle cx="143.5" cy="143.5" r="143.5" fill="url(#bluePlanetGrad1)"/>
        <circle cx="143.5" cy="143.5" r="135.5" fill="url(#bluePlanetGrad1-2)"/>
        <g>
          <path d="M230.18,165.86h0c-19,12.35-45.86,23.21-76.54,29.87-29.3,6.35-57,7.77-79,4.95-26-3.33-43.93-12.58-47-26.57-2.8-12.93,7.66-27.45,26.85-40.47s46.9-24.46,78.82-31.39C166.65,95,197.9,94.2,221,98.7c21.27,4.14,35.63,12.8,38.32,25.18C262.22,137.31,250.81,152.46,230.18,165.86Z" fill="url(#bluePlanetGrad1-3)"/>
          <path d="M232.5,153c-17.2,13.21-46.5,25.7-80.94,33.18-32.88,7.13-63.39,8.16-84.47,4-16.12-3.2-26.72-9.44-28.65-18.33-1.78-8.22,4.12-17.45,15.58-26.38,17.12-13.34,46.65-26,81.42-33.55,36.36-7.88,69.81-8.31,90.82-2.48,12.53,3.47,20.64,9.17,22.3,16.83C250.37,134.54,244.27,143.92,232.5,153Z" fill="url(#bluePlanetGrad1-4)"/>
        </g>
        <path d="M233,143.5a89.54,89.54,0,0,1-.5,9.46c-17.2,13.21-46.5,25.7-80.94,33.18-32.88,7.13-63.39,8.16-84.47,4A89,89,0,0,1,54,145.41c0-.63,0-1.27,0-1.91A89.51,89.51,0,0,1,221,98.7a87.5,87.5,0,0,1,5.27,10.68A89,89,0,0,1,233,143.5Z" fill="url(#bluePlanetGrad1-5)"/>
        <g>
          <path d="M82.8,45.41c1.62-1.1.7.09.7.09" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/>
          <path d="M46.88,83.32A115.57,115.57,0,0,1,69.61,56.09" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="11"/>
        </g>
      </symbol> 
  </defs>
  <title>pinkPlanet</title>


 
 </defs>
   <g class="cube">
      <g id="Cube">
        <g id="Surface">
          <polygon points="483.25 194.06 316.75 194.06 296.43 237.17 304.65 421.98 495.35 421.98 503.57 237.17 483.25 194.06" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="483.13 194.04 316.63 194.08 296.55 237.21 304.76 422.04 495.46 421.92 503.69 237.14 483.13 194.04" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="482.78 193.97 316.29 194.15 296.89 237.31 305.08 422.21 495.78 421.75 504.04 237.03 482.78 193.97" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="482.2 193.87 315.72 194.26 297.47 237.48 305.62 422.49 496.31 421.46 504.6 236.87 482.2 193.87" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="481.41 193.72 314.94 194.41 298.27 237.7 306.37 422.88 497.02 421.06 505.36 236.63 481.41 193.72" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="480.39 193.54 313.95 194.61 299.3 237.99 307.32 423.37 497.91 420.56 506.32 236.33 480.39 193.54" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="479.17 193.32 312.79 194.84 300.56 238.33 308.49 423.94 498.95 419.94 507.44 235.97 479.17 193.32" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="477.74 193.07 311.45 195.12 302.05 238.72 309.87 424.6 500.14 419.23 508.71 235.55 477.74 193.07" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="476.11 192.8 309.95 195.44 303.77 239.16 311.47 425.34 501.44 418.41 510.1 235.07 476.11 192.8" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="474.27 192.5 308.3 195.81 305.72 239.63 313.28 426.14 502.85 417.49 511.61 234.53 474.27 192.5" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="472.25 192.19 306.52 196.22 307.92 240.14 315.32 427.01 504.33 416.47 513.2 233.93 472.25 192.19" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="470.02 191.85 304.63 196.67 310.9 352.3 317.59 427.93 505.88 415.35 514.85 233.27 470.02 191.85" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="467.61 191.51 302.64 197.16 309.06 353.17 320.08 428.88 507.46 414.13 516.53 232.55 467.61 191.51" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="465.01 191.16 300.57 197.7 307.14 354.11 322.81 429.87 509.06 412.82 518.24 231.78 465.01 191.16" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="462.24 190.8 298.43 198.29 305.16 355.13 325.78 430.88 510.65 411.43 519.93 230.96 462.24 190.8" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="459.29 190.45 296.24 198.92 303.14 356.23 328.98 431.9 512.22 409.94 521.58 230.09 459.29 190.45" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="456.17 190.09 294.02 199.6 301.09 357.41 332.41 432.92 513.74 408.37 523.18 229.17 456.17 190.09" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="452.89 189.75 291.79 200.32 299.04 358.66 336.07 433.93 515.18 406.72 524.71 228.2 452.89 189.75" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="449.46 189.41 289.57 201.08 296.99 360 339.96 434.92 516.54 405 526.14 227.19 449.46 189.41" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="445.88 189.09 287.37 201.89 294.97 361.41 344.07 435.87 517.8 403.21 527.45 226.15 445.88 189.09" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="442.17 188.78 285.21 202.75 292.99 362.89 348.39 436.79 518.93 401.36 528.62 225.06 442.17 188.78" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="438.33 188.49 283.11 203.64 291.06 364.45 352.92 437.65 519.93 399.46 529.65 223.95 438.33 188.49" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="434.37 188.23 281.08 204.58 289.21 366.07 357.63 438.45 520.78 397.5 530.51 222.81 434.37 188.23" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="430.31 187.99 279.15 205.56 287.45 367.77 362.52 439.18 521.46 395.51 531.19 221.65 430.31 187.99" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="426.16 187.78 277.32 206.57 285.8 369.52 367.56 439.83 521.98 393.49 531.69 220.47 426.16 187.78" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="421.92 187.59 275.62 207.62 284.26 371.34 372.75 440.4 522.32 391.44 532 219.27 421.92 187.59" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="417.62 187.44 274.06 208.7 282.86 373.21 378.05 440.87 522.47 389.38 532.11 218.07 417.62 187.44" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="413.26 187.32 272.66 209.81 281.59 375.13 383.45 441.24 522.44 387.3 532.02 216.87 413.26 187.32" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="408.87 187.24 271.41 210.94 280.49 377.09 388.93 441.51 522.22 385.23 531.72 215.66 408.87 187.24" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="404.44 187.18 270.35 212.1 279.55 379.08 394.45 441.67 521.81 383.16 531.23 214.46 404.44 187.18" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="400 187.16 269.46 213.27 278.78 381.11 400 441.73 521.22 381.11 530.54 213.27 400 187.16" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="395.56 187.18 268.77 214.46 278.19 383.16 405.55 441.67 520.45 379.08 529.65 212.1 395.56 187.18" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="391.13 187.24 268.28 215.66 277.78 385.23 411.07 441.51 519.51 377.09 528.59 210.94 391.13 187.24" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="386.74 187.32 267.98 216.87 277.56 387.3 416.55 441.24 518.41 375.13 527.34 209.81 386.74 187.32" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="382.38 187.44 267.89 218.07 277.53 389.38 421.95 440.87 517.14 373.21 525.94 208.7 382.38 187.44" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="378.08 187.59 268 219.27 277.69 391.44 427.25 440.4 515.74 371.34 524.38 207.62 378.08 187.59" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="373.84 187.78 268.31 220.47 278.02 393.49 432.44 439.83 514.2 369.52 522.68 206.57 373.84 187.78" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="369.69 187.99 268.81 221.65 278.54 395.51 437.48 439.18 512.55 367.77 520.85 205.56 369.69 187.99" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="365.63 188.23 269.49 222.81 279.22 397.5 442.37 438.45 510.79 366.07 518.92 204.58 365.63 188.23" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="361.67 188.49 270.35 223.95 280.07 399.46 447.08 437.65 508.94 364.45 516.89 203.64 361.67 188.49" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="357.83 188.78 271.38 225.06 281.07 401.36 451.61 436.79 507.01 362.89 514.79 202.75 357.83 188.78" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="354.12 189.09 272.55 226.15 282.2 403.21 455.93 435.87 505.03 361.41 512.63 201.89 354.12 189.09" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="350.54 189.41 273.86 227.19 283.46 405 460.04 434.92 503.01 360 510.43 201.08 350.54 189.41" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="347.11 189.75 275.29 228.2 284.82 406.72 463.93 433.93 500.96 358.66 508.21 200.32 347.11 189.75" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="343.83 190.09 276.81 229.17 286.26 408.37 467.59 432.92 498.91 357.41 505.98 199.6 343.83 190.09" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="340.71 190.45 278.42 230.09 287.78 409.94 471.03 431.9 496.86 356.23 503.76 198.92 340.71 190.45" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="337.76 190.8 280.07 230.96 289.35 411.43 474.22 430.88 494.84 355.13 501.57 198.29 337.76 190.8" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="334.99 191.16 281.76 231.78 290.94 412.82 477.19 429.87 492.86 354.11 499.43 197.7 334.99 191.16" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="332.39 191.51 283.46 232.55 292.54 414.13 479.92 428.88 490.94 353.17 497.36 197.16 332.39 191.51" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="329.98 191.85 285.15 233.27 294.12 415.35 482.41 427.93 489.1 352.3 495.37 196.67 329.98 191.85" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="327.75 192.19 286.8 233.93 295.67 416.47 484.68 427.01 492.08 240.14 493.48 196.22 327.75 192.19" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="491.7 195.81 325.73 192.5 288.39 234.53 297.15 417.49 486.72 426.14 494.28 239.63 491.7 195.81" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="490.05 195.44 323.89 192.8 289.9 235.07 298.56 418.41 488.53 425.34 496.23 239.16 490.05 195.44" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="488.55 195.12 322.26 193.07 291.29 235.55 299.86 419.23 490.13 424.6 497.95 238.72 488.55 195.12" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="487.21 194.84 320.83 193.32 292.56 235.97 301.05 419.94 491.51 423.94 499.44 238.33 487.21 194.84" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="486.05 194.61 319.61 193.54 293.68 236.33 302.09 420.56 492.68 423.37 500.7 237.99 486.05 194.61" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="485.06 194.41 318.59 193.72 294.64 236.63 302.98 421.06 493.63 422.88 501.73 237.7 485.06 194.41" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="484.28 194.26 317.8 193.87 295.4 236.87 303.69 421.46 494.38 422.49 502.53 237.48 484.28 194.26" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="483.71 194.15 317.22 193.97 295.96 237.03 304.22 421.75 494.92 422.21 503.11 237.31 483.71 194.15" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="483.37 194.08 316.87 194.04 296.31 237.14 304.54 421.92 495.24 422.04 503.45 237.21 483.37 194.08" />
        </g>
      </g>
    </g>
    <g class="cube">
      <g >
        <g >
          <polygon points="483.25 194.06 316.75 194.06 296.43 237.17 304.65 421.98 495.35 421.98 503.57 237.17 483.25 194.06" />
        </g>
      </g>
    </g>
<g clip-path="url(#mask1)">

<use class="pinkPlanet" xlink:href="#pinkPlanet" width="87" height="87" x="360" y="270"/>
 </g>
<g clip-path="url(#mask2)">

<use class="bluePlanet" xlink:href="#bluePlanet" width="87" height="87" x="360" y="270"/>

 </g>
</svg>

planet-cube.markdown

Planet Cube

Experimenting with a refraction effect alongside some 3D output from Cinema4D.

The planet design is inspired by this

A Pen by Band1to on CodePen.

License.

script.js

function PlanetCube() {

  var xmlns = "http://www.w3.org/2000/svg",
    xlinkns = "http://www.w3.org/1999/xlink",
    select = function(s) {
      return document.querySelector(s);
    },
    selectAll = function(s) {
      return document.querySelectorAll(s);
    }, 
      nodeListToArray = function(list, rev){
       var k = Array.prototype.slice.call(list);
       return (rev) ? k.reverse() : k;
     },
    mainSVG = select('.spiralSVG'),
    mainTl, spiralTl,
      allFrames = nodeListToArray(selectAll('.cube')),
      numFrames = allFrames.length-1,
      frameCount = 0,
      currFrame = 0,
      fps = 60,
      startDelay = 0,
      repeatDelay = 0,
      repeat = 0,
      yoyo=false
  
  this.init = function(initObj) {
    TweenMax.set(mainSVG, {
      visibility: 'visible'
    })
   
   startDelay = (initObj) ? initObj.startDelay : startDelay;
   repeat = (initObj) ? initObj.repeat : repeat;
   repeatDelay = (initObj) ? initObj.repeatDelay : repeatDelay;
   yoyo = (initObj) ? initObj.yoyo : yoyo;
   
    mainTl = new TimelineMax({paused:(initObj) ? false : true, repeat:repeat, repeatDelay: repeatDelay, delay:startDelay, yoyo:yoyo}).timeScale(1);
    spiralTl = new TimelineMax({}).timeScale(fps);
   


   spiralTl.to({frameId: 0}, numFrames, {
      frameId: numFrames,
      ease: SteppedEase.ease.config(numFrames),
      onUpdate: function() {
        var frameId = Math.round(this.target.frameId);
        TweenMax.staggerTo(allFrames, 0, {
          cycle: {
            autoAlpha: function(i) {
              return (i == frameId) ? 1 : 0
            }
          }
        }, 0)

      }
    
    })
   .to('.mask1', numFrames, {
    x:380,
    ease:Power1.easeIn
   },'-='+numFrames)
   .to('.pinkPlanet', numFrames, {
    x:'+=150',
    alpha:0,
    scaleX:0,
    ease:Power1.easeIn
   },'-='+numFrames)
  .to('.cube polygon', numFrames, {
    stroke:'#2469E6',    
    ease:Power1.easeInOut
   },'-='+numFrames)
.from('.mask2', numFrames, {
    x:-400,
    ease:Power1.easeOut
   },'-='+numFrames)
   .from('.bluePlanet', numFrames, {
    x:'-=130',
    alpha:0,
    scaleX:0.2,
    transformOrigin:'50% 50%',
    ease:Power1.easeOut
   },'-='+numFrames)
   
   
   mainTl.add(spiralTl);
   
   TweenMax.set(mainSVG, {
    scaleX:1
   })
   TweenMax.to(mainSVG, 8, {
    //rotation:360,
    transformOrigin:'50% 50%',
    repeat:-1,
    yoyo:true,
    ease:Linear.easeNone
   })


  }

  this.play = function(pos) {
   if(pos){mainTl.play(pos);return} ;    
    mainTl.play();
  }
  this.pause = function(pos) {
   if(pos){mainTl.pause(pos);return} ;    
    mainTl.pause();
  }
  this.timeline = function() {
    return mainTl;
  }
}

var myPlanetCube = new PlanetCube();
myPlanetCube.init({repeat:-1, yoyo:true, repeatDelay:1});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

style.css

body {
 background-color: #000;
 overflow: hidden;
 text-align: center;
}

body,
html {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
}

svg {
 
 width: 100%;
 height: 100%;

}

polygon{
 fill:none; 
 stroke:#E70076;
 stroke-width:4px;
 opacity:0.4;
/*  stroke-linecap:round;
 stroke-linejoin:round; */
}

.mask1{
 fill:red;
}