Pen Settings

HTML

CSS

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.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

Behavior

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.

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

              
                <div class="nojs" id="wrapper">

   <div id="star-details-wrapper"> 
      <div class="top"><span class="text">Planet <span class="name">PP-19</span></span></div>
      <div class="bottom">
         <div id="warp-wrapper">
            <input id="warp-input" autocomplete="off">
            <button id="warp">warp >></button>
         </div>
         <div class="seed-wrapper"><span class="seed"></span></div>
      </div>
   </div>
   
<!-- For some reason, my pen preview doesn't display any planet. (is Javascript prevented on previews? I hardcoded one and remove it if JS execute -->
<div class="preview atmosphere" style="z-index: 6; border-radius: 50%; width: 41vh; height: 41vh; background-color: rgb(142, 0, 177); position: relative;"><div class="edges" style="border-radius: 50%; width: 88%; height: 88%; position: absolute; top: 5%; left: 5%; background-color: rgb(194, 73, 228); overflow: hidden;"><div class="animwrapper" style="position: relative; width: 100%; height: 100%; z-index: 2;"><div class="lightSpot1 rotate" style="width: 100%; height: 100%; transform: translateX(-100%); position: absolute; animation-duration: 7s;"><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 35%; height: 17.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 17%; left: 74%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 17%; height: 8.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 26%; left: 17%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 20%; height: 10%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 29%; left: 26%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 21%; height: 10.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 32%; left: 29%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 22%; height: 11%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 78%; left: 32%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 37%; height: 18.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 27%; left: 78%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 20%; height: 10%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 53%; left: 27%;"></div></div><div class="lightSpot2 rotate" style="width: 100%; height: 100%; transform: translateX(0%); position: absolute; animation-duration: 7s;"><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 35%; height: 17.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 17%; left: 74%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 17%; height: 8.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 26%; left: 17%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 20%; height: 10%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 29%; left: 26%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 21%; height: 10.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 32%; left: 29%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 22%; height: 11%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 78%; left: 32%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 37%; height: 18.5%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 27%; left: 78%;"></div><div class="lightspot" style="border-radius: 25px; background-color: rgba(255, 150, 255, 0.5); width: 20%; height: 10%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 53%; left: 27%;"></div></div></div></div><div class="center" style="border-radius: 50%; width: 75%; height: 75%; position: absolute; top: 10%; left: 10%; overflow: hidden; background-color: rgb(221, 99, 254);"><div class="animwrapper" style="position: relative; width: 100%; height: 100%; z-index: 1;"><div class="darkSpot1 rotate" style="width: 100%; height: 100%; transform: translateX(-100%); position: absolute; animation-duration: 9s;"><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 30%; height: 30%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 17%; left: 74%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 12%; height: 12%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 26%; left: 17%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 15%; height: 15%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 29%; left: 26%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 16%; height: 16%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 32%; left: 29%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 17%; height: 17%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 78%; left: 32%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 32%; height: 32%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 27%; left: 78%; border: none;"></div></div><div class="darkSpot2 rotate" style="width: 100%; height: 100%; transform: translateX(0%); position: absolute; animation-duration: 9s;"><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 30%; height: 30%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 17%; left: 74%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 12%; height: 12%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 26%; left: 17%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 15%; height: 15%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 29%; left: 26%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 16%; height: 16%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 32%; left: 29%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 17%; height: 17%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 78%; left: 32%; border: none;"></div><div class="darkspot" style="border-radius: 50%; background: rgb(194, 73, 228); width: 32%; height: 32%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 27%; left: 78%; border: none;"></div></div></div></div><div class="mmwrapper" style="position: absolute; z-index: -25;"><div class="moonWrapper" style="width: 100%; height: 100%; position: absolute;"><div class="moon" style="position: absolute; border-radius: 50%; left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);"></div></div></div></div>
   
</div>

              
            
!

CSS

              
                @import url('https://fonts.googleapis.com/css?family=Audiowide&display=swap');

$font: 'Audiowide', cursive;


.preview{
   display:none;
}


/*Style the preview*/
.nojs{
   .preview{
      display:block;
   }
   .name, #warp-wrapper{
      color: rgb(221, 99, 254);
   }
   #warp{
      background-color: rgb(221, 99, 254);
   }
}

html, body{
   min-height: 100vh;
}

body{
   overflow:hidden;
   font-family: $font;
}

#wrapper{
   display: flex;
   align-items: center;
   justify-content: center;
   min-height:100vh;
   background-color: #0f0737;
   overflow:hidden;
}

.rotate{
   animation-name: rotate;
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}

.atmosphere{
   transform: translateX(0) translateY(0) scale(1);
   transition-duration: 1s;
   transition-timing-function: ease-in-out;
   opacity:1;
   &.warpin{
      transform: translateX(100vh) translateY(0) scale(0);
      opacity: 0;
   }
   &.warpout{
      transform: translateX(-100vh) translateY(0) scale(0);
      opacity: 0;
   }
}



@keyframes rotate {
   from {
      left: 0%;
   }
   to{
      left: 100%;
   } 
}


.moon, .mmwrapper{
   animation-iteration-count: infinite;
   animation-timing-function: linear;
}
.mmwrapper{
   animation-name: orbit3d;
}
.moon{
   animation-name: orbit;
}  


@keyframes orbit {
   0% {
      left: 50%;
      opacity: 0.5;
      transform: translateX(-50%) translateY(-50%) scale(1);
   }
   29.99%{
      left: 100%;
      opacity: 0.5;
      transform: translateX(-50%) translateY(-50%) scale(1);
   }
   30%{
      left: 100%;
      opacity: 1;
      transform: translateX(-50%) translateY(-50%) scale(1);
   }
   50%{
      left:50%;
      opacity: 1;
      transform: translateX(-50%) translateY(-50%) scale(2);
   }
   69.99%{
      left:0%;
      opacity: 1;
      transform: translateX(-50%) translateY(-50%) scale(1);
   }
   70%{
      left:0%;
      opacity: 0.5;
      transform: translateX(-50%) translateY(-50%) scale(1);
   }
   100%{
      left: 50%;
      opacity:0.5;
      transform: translateX(-50%) translateY(-50%) scale(1);
   }
}

@keyframes orbit3d {
   0% {
      z-index: -25;
   }
   29.99%{
      z-index: -25;
   }
   30%{
      z-index: 25;
   }
   50%{
      z-index: 25;
   }
   69.99%{
      z-index: 25;
   }
   70%{
      z-index: -25;
   }
   100%{
      z-index: -25;
   }
}

#star-details-wrapper{
   &.hide{
      pointer-events:none;
      opacity:0.5;
      filter: blur(2px);
      .top{
         transform: translateX(0) translateY(-300%) scale(0.5);
      }
      .bottom{
         transform: translateX(0) translateY(300%) scale(0.5);
      }
   }
   opacity:1;
   font-size: 20px;
   transition-timing-function: ease-in-out;
   transition-duration: 0.5s;
   position: absolute;
   top:0;
   box-sizing: border-box;
   padding:10px 0px 7vh 0;
   color: #FFFFFF;
   z-index:3;
   display: flex;
   flex-direction: column;
   height:100%;
   justify-content:space-between;
   .top{
      margin: 10px 0 30px 0;
      text-align:center;
      transform: translateX(0) translateY(0%) scale(1);
      transition-duration: 0.5s;
   }
   .bottom{
      transform: translateX(0) translateY(0%) scale(1);
      transition-duration: 0.5s;
   }
   .seed-wrapper{
      font-size: 13px;
   }
   & > *{
      font-size: 1em;
      position: relative;
      text-transform: uppercase;
   }
   .name, #warp, .seed, #warp-wrapper:after{
      transition-duration: 0.3s;
   }
}

.name{
   color: #FFFFFF;
}

#warp-wrapper{
   display: flex;
   margin: 40px 0 0 0;
   width: 100%;
   max-width: 364px;
   margin: 0 auto;
   border-radius: 20px 20px 20px 0;
   transition-duration: 0.3s;
   position: relative;
   border-width: 4px;
   border-style: solid;
   padding: 0 0 0 20px;
   overflow:hidden;
   &:hover{
      background-color: #160a50;
      #warp {
         filter: brightness(120%);
      }
   }
   #warp-input{
      display:block;
      width: 70%;
      font-size: 1em;
      background-color: transparent;
      border: none;
      outline: none;
      color: #FFFFFF;
      font-family: $font;
      &::placeholder{
         color: #F1F1F1;
      }
      &::selection {
         background-color: #765eef;
         color: grey;
      }
   }
   #warp{
      min-width:135px;
      width: 30%;
      transition-duration: 0.3s;
      font-size: 1em;
      border: none;
      font-family: $font;
      color: #F1F1F1;
      border-radius: 0px;
      padding: 4px 20px;
      cursor: pointer;
      outline: none;
      border-radius: 20px 0px 0px 0px;
      position:relative;
      transform: translateX(1px);
   }
}

              
            
!

JS

              
                /*
Inspired by Kurzgesagt ❤️
(and especially by this design : https://www.itl.cat/pngfile/big/20-208263_kurzgesagt-illustration.png)
*/

console.clear();


/*Remove hardcoded planet*/
document.getElementById('wrapper').classList.remove('nojs');
document.getElementsByClassName('preview')[0].parentNode.removeChild(document.getElementsByClassName('preview')[0]);
/*End Remove hardcoded planet*/

/* UTILS */
var seed = function() {
   if(!document.getElementById('warp-input').value) {
      document.getElementById('warp-input').value = new Date().getTime();
   }
   return document.getElementById('warp-input').value;
};

document.getElementsByClassName('name')[0].innerHTML = seed();

/***
Generate a seed from anything
*/
function pseudoRand(w) {
   let anything = w.toString().toUpperCase();
   let seed = Number((Array.from(anything.toString()).map((char, ind) => anything.toString().charCodeAt(ind))).reverse().join(''));
   let x = Math.sin(seed++) * 10000;
   return x - Math.floor(x);
}

/***
Get value between range according to the given seed
*/
function getBetween(min, max, seed) {
  return Math.floor(pseudoRand(seed) * (max - min + 1) + min);
}

/***
Set CSS
*/
function setStyle(el, obj) {
   for(var attr in obj) {
      el.style[attr] = obj[attr];
   }
}
const rand = (s) => {
   return {   
      name: new Array(2).fill('').map((_, i) => {
         return new Array(getBetween(1, 5, s+i)).fill('').map((__, ii) => {
            return ['abcdefghijklmnopqrstuvwxyz', '0123456789'][i][getBetween(0, ['abcdefghijklmnopqrstuvwxyz', '0123456789'][i].length - 1, s+(ii+i))];
         }).join('');
      }).join('-'),
      mainDiam: getBetween(10, 50, s),
      planetRotationDelay: getBetween(3, 10, s),
      cloudsRotationDelay: getBetween(3, 10, s) - 2,
      atmosphere: {
         color: chroma([getBetween(0, 255, s), getBetween(0, 255, s*2), getBetween(0, 255, s*3)]).saturate(3).darken(1.5)
      },
      edges: {
         color: chroma([getBetween(0, 255, s), getBetween(0, 255, s*2), getBetween(0, 255, s*3)]).saturate(3).darken(1.5).brighten(1)
      },
      center: {
         color: chroma([getBetween(0, 255, s), getBetween(0, 255, s*2), getBetween(0, 255, s*3)]).saturate(3).darken(1.5).brighten(1.5)
      },
      darkSpots: {
         color: new Array(getBetween(4, 6, s)).fill('').map(_ => {
            return chroma([getBetween(0, 255, s), getBetween(0, 255, s*2), getBetween(0, 255, s*3)]).saturate(3).darken(1.5).brighten(1);
         }),
         quantity: getBetween(4, 6, s),
         diam: new Array(getBetween(4, 6, s)).fill('').map((_, i) => {
            return getBetween(10, 35, s+i)
         }),
         posX: new Array(getBetween(4, 6, s)).fill('').map((_, i) => {
            return getBetween(10, 90, s+i)
         }),
         posY: new Array(getBetween(4, 6, s)).fill('').map((_, i) => {
            return getBetween(10, 90, s+(i+1))
         }),
      },
      lightSpots: {
         color: new Array(getBetween(5, 7, s)).fill('').map(_ => {
            return chroma([getBetween(0, 255, s), getBetween(0, 255, s*2), getBetween(0, 255, s*3)]).saturate(3).darken(1.5).brighten(2.5).alpha(0.5);
         }),
         quantity: getBetween(5, 7, s),
         diam: new Array(getBetween(5, 7, s)).fill('').map((_, i) => {
            return getBetween(15, 40, s+i)
         }), 
         posX: new Array(getBetween(5, 7, s)).fill('').map((_, i) => {
            return getBetween(10, 90, s+i)
         }),
         posY: new Array(getBetween(5, 7, s)).fill('').map((_, i) => {
            return getBetween(10, 90, s+(i+1))
         }),
      },
      moons: {
         color: new Array(Math.floor(getBetween(0, 10, s)/10)).fill('').map((_, i) => {
            return chroma([getBetween(0, 255, s), getBetween(0, 255, s*2), getBetween(0, 255, s*3)]).saturate(3).darken(1).desaturate(0.5);
         }),
         quantity: new Array(Math.floor(getBetween(0, 10, s)/10)),
         diam: new Array(Math.floor(getBetween(0, 10, s)/10)).fill('').map((_, i) => {
            return getBetween(5, 20, s+i)
         }),
         orbitDuration: new Array(Math.floor(getBetween(0, 10, s)/10)).fill('').map((_, i) => {
            return getBetween(5, 10, s+i)
         }),
         orbitWidth: new Array(Math.floor(getBetween(0, 10, s)/10)).fill('').map((_, i) => {
            return getBetween(0, 10, s+i)
         }),
         orbitInclinaison: new Array(Math.floor(getBetween(0, 10, s)/10)).fill('').map((_, i) => {
            return getBetween(0, 365, s)
         }),
         orbitDelay: new Array(Math.floor(getBetween(0, 10, s)/10)).fill('').map((_, i) => {
            return getBetween(0, 4, s)
         }),
      }
   }
}

const odds = [
   {
      roll: 7,
      name: 'Earth',
      mainDiam: 35,
      planetRotationDelay: 8,
      cloudsRotationDelay: 6.5,
      atmosphere: {
         color: '#244e80'
      },
      edges: {
         color: '#22618c'
      },
      center: {
         color: '#065288'
      },
      darkSpots: {
         quantity: 7,
         color: new Array(7).fill('green'),
         diam: [23, 22, 9, 15, 29, 29, 12],
         posX: [20, 28, 39, 55, 75, 73, 91],
         posY: [40, 56, 25, 75, 30, 60, 47]
      },
      lightSpots: {
         quantity: 5,
         color: new Array(5).fill('rgba(255,255,255,0.4)'),
         diam: [18, 20, 18, 15, 14],
         posX: [19, 33, 40, 55, 57],
         posY: [20, 45, 25, 33, 69]
      },
      moons: {
         quantity: 1,
         color: ['#5a5550'],
         diam: [15],
         orbitDuration: [5],
         orbitWidth: [10],
         orbitInclinaison: [9],
         orbitDelay: [0]
      }
   },
   {
      roll: 20,
      name: 'Hoth',
      mainDiam: 40,
      planetRotationDelay: 9,
      cloudsRotationDelay: 10,
      atmosphere: {
         color: '#4fa8e4'
      },
      edges: {
         color: '#8fd2ff'
      },
      center: {
         color: '#b8e1ff'
      },
      darkSpots: {
         quantity: 7,
         color: new Array(7).fill('#8fd2ff'),
         diam: [32, 28, 27, 19, 29, 29, 17],
         posX: [20, 28, 39, 55, 75, 73, 91],
         posY: [40, 56, 25, 75, 30, 60, 47]
      },
      lightSpots: {
         quantity: 5,
         color: new Array(5).fill('rgba(255,255,255,0.4)'),
         diam: [28, 20, 18, 15, 14],
         posX: [20, 33, 40, 55, 57],
         posY: [60, 45, 25, 33, 69]
      },
      moons: {
         quantity: 3,
         color: new Array(3).fill('#a4cfef'),
         diam: [15, 15, 15],
         orbitDuration: [5, 4, 3.5],
         orbitWidth: [10, 15, 9],
         orbitInclinaison: [9, 27, 88],
         orbitDelay: [0, 0, 0]
      }
   },
   {
      roll: 66,
      name: 'Mars',
      mainDiam: 32,
      planetRotationDelay: 8.2,
      cloudsRotationDelay: 0,
      atmosphere: {
         color: '#a92103'
      },
      edges: {
         color: chroma('#a92103').brighten(1)
      },
      center: {
         color: '#b33513'
      },
      darkSpots: {
         quantity: 7,
         color: new Array(7).fill(chroma('#a92103').brighten(1)),
         diam: [23, 22, 9, 15, 29, 29, 12],
         posX: [20, 28, 39, 55, 75, 73, 91],
         posY: [40, 56, 25, 75, 30, 60, 47]
      },
      lightSpots: {
         quantity: 0,
         color: [],
         diam: [],
         posX: [],
         posY: []
      },
      moons: {
         quantity: 2,
         color: [chroma('#a92103').darken(1).desaturate(0.5), chroma('#a92103').darken(1).desaturate(0.5)],
         diam: [12, 10],
         orbitDuration: [5, 4],
         orbitWidth: [10, 10],
         orbitInclinaison: [40, 20],
         orbitDelay: [0, 0]
      }
   },
   {
      roll: 77,
      name: 'Eden',
      mainDiam: 32,
      planetRotationDelay: 8.2,
      cloudsRotationDelay: 8,
      atmosphere: {
         color: '#7608da'
      },
      edges: {
         color: '#0c68c7'
      },
      center: {
         color: '#3799ff'
      },
      darkSpots: {
         quantity: 3,
         color: [
            'radial-gradient(3.5vh at 50% 50%, #02752c 0%, #02752c 60%, #ffeb02 60%, #ffeb02 100%)',
            'radial-gradient(4.8vh at 50% 50%, #02752c 0%, #02752c 60%, #ffeb02 60%, #ffeb02 100%)',
            'radial-gradient(4vh at 50% 50%, #02752c 0%, #02752c 60%, #ffeb02 60%, #ffeb02 100%)',
         ],
         diam: [23, 30, 27],
         posX: [20, 60, 75],
         posY: [40, 60, 20]
      },
      lightSpots: {
         quantity: 4,
         color: new Array(4).fill('rgba(247, 136, 218, 0.4)'),
         diam: [40, 35, 30, 41],
         posX: [10, 20, 24, 44],
         posY: [40, 10, 62, 70]
      },
      moons: {
         quantity: 1,
         color: ['#d41ab5'],
         diam: [10],
         orbitDuration: [5],
         orbitWidth: [10],
         orbitInclinaison: [90],
         orbitDelay: [0]
      }
   },
   {
      roll: 100,
      name: 'Death Star',
      mainDiam: 25,
      planetRotationDelay: 0,
      cloudsRotationDelay: 0,
      atmosphere: {
         color: '#2f2f2e'
      },
      edges: {
         color: '#404040'
      },
      center: {
         color: '#505050'
      },
      darkSpots: {
         quantity: 2,
         color: [
            'radial-gradient(3vh at 50% 29%, #404040 16%, transparent 16%), radial-gradient(15vh at 50% 29%, #505050 16%, rgb(64, 64, 65) 10%, #404040 20%, transparent 20%)',
            'linear-gradient(to bottom, transparent 48%, #404040 48%, #404040 52%, transparent 52%)'
         ],
         diam: [100, 100],
         posX: [40, 50],
         posY: [45, 50]
      },
      lightSpots: {
         quantity: 5,
         color: new Array(5).fill('#404040'),
         diam: [30, 30, 30, 30, 30],
         posX: [75, 85, 90, 85, 75],
         posY: [16, 32, 48, 64, 80]
      },
      moons: {
         quantity: 0,
         color: [],
         diam: [],
         orbitDuration: [],
         orbitWidth: [],
         orbitInclinaison: [],
         orbitDelay: []
      }
   },
];

function roll(s) {
   let res = rand(seed());
   odds.forEach(odd => {
      if(s == odd.roll) res = odd;
   });
   return res;
}

class Stars {
   constructor(anchor, seed) {
      this.seed = seed,
      this.anchor = anchor
   }

   stars() {
      return new Array(getBetween(30, 60, this.seed)).fill('').map((star, ind) => {
         let st = document.createElement('div');
         st.setAttribute('class', 'star');

         setStyle(st, {
            width: `${getBetween(2, 5, this.seed+ind)}px`,
            height: `${getBetween(2, 5, this.seed+ind)}px`,
            backgroundColor: '#1a0671',
            boxShadow: `0px 0px 0px ${getBetween(2, 5, this.seed+ind)}px ${chroma('5a06ab').alpha(getBetween(0, 5, this.seed+ind)/10)}`,
            position: 'absolute',
            borderRadius: '50%',
            top: `${getBetween(0, 100, this.seed+ind*2)}%`,
            left: `${getBetween(0, 100, (this.seed+ind*3))}%`
         });

         return st;

      });
   }

   get make() {

      this.stars().forEach(star => {
         this.anchor.appendChild(star);
      });

   }
};

class World {
   constructor(anchor, conf, seed) {
      this.anchor = anchor,
      this.conf = conf,
      this.seed = seed
   }

   moons() {
      return new Array(this.conf.moons.quantity).fill('').map((mn, ind) => {

         let moonWrapper = document.createElement('div');
         moonWrapper.setAttribute('class', 'moonWrapper');

         setStyle(moonWrapper, {
            width: '100%',
            height: '100%',
            position: 'absolute',
         });

         let moon = document.createElement('div');
         moon.setAttribute('class', 'moon');

         setStyle(moon, {
            position: 'absolute',
            width: `${this.conf.moons.diam[ind]}px`,
            height: `${this.conf.moons.diam[ind]}px`,
            borderRadius: '50%',
            left: '50%',
            top: '50%',
            transform: 'translateX(-50%) translateY(-50%)',
            backgroundColor: this.conf.moons.color[ind],
            animationDuration: `${this.conf.moons.orbitDuration[ind]}s`,
         });

         let moonMainWrapper = document.createElement('div');
         moonMainWrapper.setAttribute('class', 'mmwrapper');

         setStyle(moonMainWrapper, {
            width: `${this.conf.mainDiam + 3 + this.conf.moons.orbitWidth[ind]}vh`,
            height: `${this.conf.mainDiam + 3 + this.conf.moons.orbitWidth[ind]}vh`,
            position: 'absolute',
            transform: `rotate(${this.conf.moons.orbitInclinaison[ind]}deg)`,
            animationDuration: `${this.conf.moons.orbitDuration[ind]}s`,
            zIndex: '-25',
            left: `-${((this.conf.mainDiam + 3 + this.conf.moons.orbitWidth[ind]) - this.conf.mainDiam)/2}vh`,
            top: `-${((this.conf.mainDiam + 3 + this.conf.moons.orbitWidth[ind]) - this.conf.mainDiam)/2}vh`
         });

         moonWrapper.appendChild(moon);

         moonMainWrapper.appendChild(moonWrapper);

         return moonMainWrapper;
      })


   }

   atmosphere() {
      let atmosphere = document.createElement('div');
      atmosphere.setAttribute('class', 'atmosphere warpin');

      setStyle(atmosphere, {
         zIndex: '6',
         borderRadius: '50%',
         width: `${this.conf.mainDiam}vh`,
         height: `${this.conf.mainDiam}vh`,
         backgroundColor: this.conf.atmosphere.color,
         position: 'relative'
      });

      return atmosphere;
   }

   edges() {
      let edges = document.createElement('div');
      edges.setAttribute('class', 'edges');

      setStyle(edges, {
         borderRadius: '50%',
         width: '88%',
         height: '88%',
         position: 'absolute',
         top: '5%',
         left: '5%',
         backgroundColor: this.conf.edges.color,
         overflow: 'hidden'
      });

      return edges;
   }

   center() {
      let center = document.createElement('div');
      center.setAttribute('class', 'center');

      setStyle(center, {
         borderRadius: '50%',
         width: '75%',
         height: '75%',
         position: 'absolute',
         top: '10%',
         left: '10%',
         overflow: 'hidden',
         backgroundColor: this.conf.center.color
      });

      return center;
   }

   darkSpots() {
      return new Array(this.conf.darkSpots.quantity).fill('').map((spot, ind) => {
         let sp = document.createElement('div');
         sp.setAttribute('class', 'darkspot');

         setStyle(sp, {
            borderRadius: '50%',
            background: this.conf.darkSpots.color[ind],
            width: `${this.conf.darkSpots.diam[ind]}%`,
            height: `${this.conf.darkSpots.diam[ind]}%`,
            position: 'absolute',
            transform: 'translateX(-50%) translateY(-50%)',
            top: `${this.conf.darkSpots.posY[ind]}%`,
            left: `${this.conf.darkSpots.posX[ind]}%`,
            border: `${this.conf.darkSpots.border ? this.conf.darkSpots.border[ind] : 'none'}`
         });

         return sp;
      });
   }

   lightSpots() {
      return new Array(this.conf.lightSpots.quantity).fill('').map((spot, ind) => {
         let lsp = document.createElement('div');
         lsp.setAttribute('class', 'lightspot');

         setStyle(lsp, {
            borderRadius: '25px',
            backgroundColor: this.conf.lightSpots.color[ind],
            width: `${this.conf.lightSpots.diam[ind]}%`,
            height: `${this.conf.lightSpots.diam[ind]*.5}%`,
            position: 'absolute',
            transform: 'translateX(-50%) translateY(-50%)',
            top: `${this.conf.lightSpots.posY[ind]}%`,
            left: `${this.conf.lightSpots.posX[ind]}%`
         });

         return lsp;
      });

   }



   get make() {
      let atmosphere = this.atmosphere(),
          edges = this.edges(),
          center = this.center(),
          darkSpots = this.darkSpots(),
          lightSpots = this.lightSpots();

      let animWrapper = document.createElement('div');
      animWrapper.setAttribute('class', 'animwrapper');

      setStyle(animWrapper, {
         position: 'relative',
         width: '100%',
         height: '100%',
         zIndex: '1'
      });

      let darkSpot1 = document.createElement('div');
      darkSpot1.setAttribute('class', 'darkSpot1 rotate');

      setStyle(darkSpot1, {
         width: '100%',
         height: '100%',
         transform: 'translateX(-100%)',
         position: 'absolute',
         animationDuration: `${this.conf.planetRotationDelay}s`
      })

      let darkSpot2 = document.createElement('div');
      darkSpot2.setAttribute('class', 'darkSpot2 rotate');

      setStyle(darkSpot2, {
         width: '100%',
         height: '100%',
         transform: 'translateX(0%)',
         position: 'absolute',
         animationDuration: `${this.conf.planetRotationDelay}s`
      })

      let lightSpot1 = document.createElement('div');
      lightSpot1.setAttribute('class', 'lightSpot1 rotate');

      setStyle(lightSpot1, {
         width: '100%',
         height: '100%',
         transform: 'translateX(-100%)',
         position: 'absolute',
         animationDuration: `${this.conf.cloudsRotationDelay}s`
      })

      let lightSpot2 = document.createElement('div');
      lightSpot2.setAttribute('class', 'lightSpot2 rotate');

      setStyle(lightSpot2, {
         width: '100%',
         height: '100%',
         transform: 'translateX(0%)',
         position: 'absolute',
         animationDuration: `${this.conf.cloudsRotationDelay}s`
      })

      this.anchor.appendChild(atmosphere);
      atmosphere.appendChild(edges);
      atmosphere.appendChild(center);

      let animWrapper2 = animWrapper.cloneNode();

      setStyle(animWrapper2, {
         zIndex: '2'
      });

      edges.appendChild(animWrapper2);

      center.appendChild(animWrapper);
      animWrapper.appendChild(darkSpot1);
      animWrapper.appendChild(darkSpot2);
      animWrapper2.appendChild(lightSpot1);
      animWrapper2.appendChild(lightSpot2);

      darkSpots.forEach(d1 => {
         let d2 = d1.cloneNode();
         darkSpot1.appendChild(d1);
         darkSpot2.appendChild(d2);
      });

      lightSpots.forEach(d1 => {
         let d2 = d1.cloneNode();
         lightSpot1.appendChild(d1);
         lightSpot2.appendChild(d2);
      })

      document.getElementsByClassName('name')[0].style.color = this.conf.center.color;
      document.getElementsByClassName('seed')[0].style.color = this.conf.center.color;
      document.getElementById('warp-wrapper').style.color = this.conf.center.color;
      document.getElementById('warp').style.backgroundColor = this.conf.center.color;
      
      

      if(this.moons()) {
         this.moons().forEach(moon => {
            atmosphere.appendChild(moon);
         })
      }

      document.getElementById('warp-input').value = '';
      document.getElementsByClassName('seed')[0].innerHTML = this.seed;
      document.getElementsByClassName('name')[0].innerHTML = this.conf.name;


      return atmosphere;
   }

};

new Stars(document.getElementById('wrapper'), seed()).make;


function warpOut() {
   document.getElementById('star-details-wrapper').classList.add('hide');
   document.getElementsByClassName('atmosphere')[0].classList.add('warpout');
   setTimeout(function() {
      document.getElementsByClassName('atmosphere')[0].parentNode.removeChild(document.getElementsByClassName('atmosphere')[0]);
      warpin();
   }, 1000);
}

function warpin() {
   let world = new World(document.getElementById('wrapper'), roll(getBetween(0, 100, seed())), seed()).make;
   setTimeout(() => {
      world.classList.remove('warpin');
      document.getElementById('star-details-wrapper').classList.remove('hide');
   }, 100);
}

document.getElementById('warp').addEventListener('click', () => {
   warpOut();
});


document.getElementById('warp-input').addEventListener("keyup", function(event) {
   if (event.keyCode === 13) {
      event.preventDefault();
      document.getElementById("warp").click();
   }
});

warpin();

              
            
!
999px

Console