index.js

<div style="position: relative; width: 500px; height:400px; display: block; transform-style: preserve-3d; transform: rotateX(-20deg);">
  <div style="position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: spin 4s linear infinite; transform: rotateY(10deg) rotateX(-10deg); rotateZ(0deg);">
    <span style="width: 400px; height: 400px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-origin: center top; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: rotateZ(-30deg) rotateY(90deg); background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);"></span>
    <span style="width: 400px; height: 400px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-origin: center top; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: rotateZ(30deg) rotateY(90deg); background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);"></span>
    <span style="width: 400px; height: 400px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-origin: center top; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: rotateX(30deg); background: conic-gradient( #2F2585, #D8CCE6, #F028FD, #2BDEAC);"></span>
    <span style="width: 400px; height: 400px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; transform-origin: center top; clip-path: polygon(50% 0%, 0% 100%, 100% 100%); transform: rotateX(-30deg); background: conic-gradient( #2BDEAC, #F028FD, #D8CCE6, #2F2585);"></span>
    <span style="width: 0px; height: 0px; background: #8B5AD5; position: absolute; top: 0; left: 0; right:0; bottom: 0; margin: auto; transform: rotateX(90deg) translateZ(-40px); filter: blur(12px);"></span>
  </div>
</div>;