"* { margin: 0; padding: 0; } /* Rotate Sphere animation / @keyframes animateSphere { 0% { transform: rotateY(0deg) rotateX(0deg) rotateZ(0deg); } 50% { transform: rotateY(360deg) rotateX(360deg) rotateZ(0deg); } 100% { transform: rotateY(720deg) rotateX(720deg) rotateZ(360deg); } } html { background: black; } .scene { perspective: 1000px; } .container { margin-top: 5vh; margin-left: auto; margin-right: auto; position: relative; width: 200px; height: 200px; transform-style: preserve-3d; animation-name: animateSphere; animation-duration: 50s; animation-iteration-count: infinite; animation-timing-function: linear; } .border { border: 1px solid black; } .circle { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: rgba(255, 255, 255, 0.1); } / X Axis / .circle:nth-child(1) { transform: rotate3d(1, 0, 0, 0deg); } .circle:nth-child(2) { transform: rotate3d(1, 0, 0, 36deg); } .circle:nth-child(3) { transform: rotate3d(1, 0, 0, 72deg); } .circle:nth-child(4) { transform: rotate3d(1, 0, 0, 108deg); } .circle:nth-child(5) { transform: rotate3d(1, 0, 0, 144deg); } / Y Axis / .circle:nth-child(6) { transform: rotate3d(0, 1, 0, 0deg); } .circle:nth-child(7) { transform: rotate3d(0, 1, 0, 36deg); } .circle:nth-child(8) { transform: rotate3d(0, 1, 0, 72deg); } .circle:nth-child(9) { transform: rotate3d(0, 1, 0, 108deg); } .circle:nth-child(10) { transform: rotate3d(0, 1, 0, 144deg); } / Z Axis / .circle:nth-child(11) { transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 0deg); } .circle:nth-child(12) { transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 36deg); } .circle:nth-child(13) { transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 72deg); } .circle:nth-child(14) { transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 108deg); } .circle:nth-child(15) { transform: rotate3d(0, 1, 0, 90deg) rotate3d(1, 0, 0, 144deg); } / Light effect / .light { margin: auto; border-radius: 50%; width: 200px; height: 200px; box-shadow: 10px 1px 30px #000000; } / Clip the sphere a bit */ .clip { clip-path: circle(50%); } " 

"import React from "react"; import "./planet.css";  const Planet = ({ className = "", style = {} }) => {   return (     <div className="scene">       <div className="light">         <div className="clip">           <div className="container">             {/* <!-- X Axis --> /}             <div className="circle border"></div>             <div className="circle border"></div>             <div className="circle border"></div>             <div className="circle border"></div>             <div className="circle border"></div>             {/ <!-- Y Axis --> /}             <div className="circle border"></div>             <div className="circle border"></div>             <div className="circle border"></div>             <div className="circle border"></div>             <div className="circle border"></div>             {/ <!-- Z Axis --> */}             <div className="circle"></div>             <div className="circle"></div>             <div className="circle"></div>             <div className="circle"></div>             <div className="circle"></div>           </div>         </div>       </div>     </div>   ); };  export default Planet; "

Make it a grid fractal with more geometrical lines and rather make it like a 3d flower of life. use whatever the math you want. and make exactly like a sphere flower of life.