CodePen

HTML

            
              - (1..55).each do |i|
  %div
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              html{
background:rgb(20,0,10);
overflow:hidden;
}
div:nth-child(1) {
  width: 0;
  height: 0;
  border-left: 10px solid #9b0046;
  border-right: 10px solid #fa0047;
  border-bottom: 10px solid #19000f;
  border-top: 10px solid #f90046;
  border-radius: 0.02px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  z-index: 4;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.1s ease-in-out infinite;
  opacity: 0.0375;
}

div:nth-child(2) {
  width: 0;
  height: 0;
  border-left: 20px solid #960044;
  border-right: 20px solid #f50045;
  border-bottom: 20px solid #1a000f;
  border-top: 20px solid #f20044;
  border-radius: 0.04px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -20px;
  margin-left: -20px;
  z-index: 3;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.2s ease-in-out infinite;
  opacity: 0.075;
}

div:nth-child(3) {
  width: 0;
  height: 0;
  border-left: 30px solid #920042;
  border-right: 30px solid #f00044;
  border-bottom: 30px solid #1a000f;
  border-top: 30px solid #ec0043;
  border-radius: 0.06px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -30px;
  margin-left: -30px;
  z-index: 2;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.3s ease-in-out infinite;
  opacity: 0.1125;
}

div:nth-child(4) {
  width: 0;
  height: 0;
  border-left: 40px solid #8e0040;
  border-right: 40px solid #eb0042;
  border-bottom: 40px solid #1a0010;
  border-top: 40px solid #e60041;
  border-radius: 0.08px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -40px;
  margin-left: -40px;
  z-index: 1;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.4s ease-in-out infinite;
  opacity: 0.15;
}

div:nth-child(5) {
  width: 0;
  height: 0;
  border-left: 50px solid #89003e;
  border-right: 50px solid #e60041;
  border-bottom: 50px solid #1a0010;
  border-top: 50px solid #df003f;
  border-radius: 0.1px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -50px;
  margin-left: -50px;
  z-index: 0;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.5s ease-in-out infinite;
  opacity: 0.1875;
}

div:nth-child(6) {
  width: 0;
  height: 0;
  border-left: 60px solid #85003c;
  border-right: 60px solid #e0003f;
  border-bottom: 60px solid #1b0010;
  border-top: 60px solid #d9003d;
  border-radius: 0.12px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -60px;
  margin-left: -60px;
  z-index: -1;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.6s ease-in-out infinite;
  opacity: 0.225;
}

div:nth-child(7) {
  width: 0;
  height: 0;
  border-left: 70px solid #81003a;
  border-right: 70px solid #db003e;
  border-bottom: 70px solid #1b0010;
  border-top: 70px solid #d2003b;
  border-radius: 0.14px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -70px;
  margin-left: -70px;
  z-index: -2;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.7s ease-in-out infinite;
  opacity: 0.2625;
}

div:nth-child(8) {
  width: 0;
  height: 0;
  border-left: 80px solid #7c0038;
  border-right: 80px solid #d6003c;
  border-bottom: 80px solid #1b0010;
  border-top: 80px solid #cc003a;
  border-radius: 0.16px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -80px;
  margin-left: -80px;
  z-index: -3;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.8s ease-in-out infinite;
  opacity: 0.3;
}

div:nth-child(9) {
  width: 0;
  height: 0;
  border-left: 90px solid #780036;
  border-right: 90px solid #d1003b;
  border-bottom: 90px solid #1b0010;
  border-top: 90px solid #c60038;
  border-radius: 0.18px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -90px;
  margin-left: -90px;
  z-index: -4;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 0.9s ease-in-out infinite;
  opacity: 0.3375;
}

div:nth-child(10) {
  width: 0;
  height: 0;
  border-left: 100px solid #740034;
  border-right: 100px solid #cc003a;
  border-bottom: 100px solid #1c0011;
  border-top: 100px solid #bf0036;
  border-radius: 0.2px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -100px;
  margin-left: -100px;
  z-index: -5;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1s ease-in-out infinite;
  opacity: 0.375;
}

div:nth-child(11) {
  width: 0;
  height: 0;
  border-left: 110px solid #6f0032;
  border-right: 110px solid #c70038;
  border-bottom: 110px solid #1c0011;
  border-top: 110px solid #b90034;
  border-radius: 0.22px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -110px;
  margin-left: -110px;
  z-index: -6;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.1s ease-in-out infinite;
  opacity: 0.4125;
}

div:nth-child(12) {
  width: 0;
  height: 0;
  border-left: 120px solid #6b0030;
  border-right: 120px solid #c20037;
  border-bottom: 120px solid #1c0011;
  border-top: 120px solid #b30032;
  border-radius: 0.24px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -120px;
  margin-left: -120px;
  z-index: -7;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.2s ease-in-out infinite;
  opacity: 0.45;
}

div:nth-child(13) {
  width: 0;
  height: 0;
  border-left: 130px solid #67002e;
  border-right: 130px solid #bd0035;
  border-bottom: 130px solid #1c0011;
  border-top: 130px solid #ac0031;
  border-radius: 0.26px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -130px;
  margin-left: -130px;
  z-index: -8;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.3s ease-in-out infinite;
  opacity: 0.4875;
}

div:nth-child(14) {
  width: 0;
  height: 0;
  border-left: 140px solid #62002d;
  border-right: 140px solid #b80034;
  border-bottom: 140px solid #1d0011;
  border-top: 140px solid #a6002f;
  border-radius: 0.28px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -140px;
  margin-left: -140px;
  z-index: -9;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.4s ease-in-out infinite;
  opacity: 0.525;
}

div:nth-child(15) {
  width: 0;
  height: 0;
  border-left: 150px solid #5e002b;
  border-right: 150px solid #b30032;
  border-bottom: 150px solid #1d0011;
  border-top: 150px solid #9f002d;
  border-radius: 0.3px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -150px;
  margin-left: -150px;
  z-index: -10;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.5s ease-in-out infinite;
  opacity: 0.5625;
}

div:nth-child(16) {
  width: 0;
  height: 0;
  border-left: 160px solid #5a0029;
  border-right: 160px solid #ad0031;
  border-bottom: 160px solid #1d0011;
  border-top: 160px solid #99002b;
  border-radius: 0.32px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -160px;
  margin-left: -160px;
  z-index: -11;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.6s ease-in-out infinite;
  opacity: 0.6;
}

div:nth-child(17) {
  width: 0;
  height: 0;
  border-left: 170px solid #550027;
  border-right: 170px solid #a80030;
  border-bottom: 170px solid #1d0012;
  border-top: 170px solid #930029;
  border-radius: 0.34px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -170px;
  margin-left: -170px;
  z-index: -12;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.7s ease-in-out infinite;
  opacity: 0.6375;
}

div:nth-child(18) {
  width: 0;
  height: 0;
  border-left: 180px solid #510025;
  border-right: 180px solid #a3002e;
  border-bottom: 180px solid #1e0012;
  border-top: 180px solid #8c0028;
  border-radius: 0.36px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -180px;
  margin-left: -180px;
  z-index: -13;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.8s ease-in-out infinite;
  opacity: 0.675;
}

div:nth-child(19) {
  width: 0;
  height: 0;
  border-left: 190px solid #4d0023;
  border-right: 190px solid #9e002d;
  border-bottom: 190px solid #1e0012;
  border-top: 190px solid #860026;
  border-radius: 0.38px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -190px;
  margin-left: -190px;
  z-index: -14;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 1.9s ease-in-out infinite;
  opacity: 0.7125;
}

div:nth-child(20) {
  width: 0;
  height: 0;
  border-left: 200px solid #480021;
  border-right: 200px solid #99002b;
  border-bottom: 200px solid #1e0012;
  border-top: 200px solid #800024;
  border-radius: 0.4px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -200px;
  margin-left: -200px;
  z-index: -15;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2s ease-in-out infinite;
  opacity: 0.75;
}

div:nth-child(21) {
  width: 0;
  height: 0;
  border-left: 210px solid #44001f;
  border-right: 210px solid #94002a;
  border-bottom: 210px solid #1e0012;
  border-top: 210px solid #790022;
  border-radius: 0.42px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -210px;
  margin-left: -210px;
  z-index: -16;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.1s ease-in-out infinite;
  opacity: 0.7875;
}

div:nth-child(22) {
  width: 0;
  height: 0;
  border-left: 220px solid #40001d;
  border-right: 220px solid #8f0028;
  border-bottom: 220px solid #1f0012;
  border-top: 220px solid #730020;
  border-radius: 0.44px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -220px;
  margin-left: -220px;
  z-index: -17;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.2s ease-in-out infinite;
  opacity: 0.825;
}

div:nth-child(23) {
  width: 0;
  height: 0;
  border-left: 230px solid #3b001b;
  border-right: 230px solid #8a0027;
  border-bottom: 230px solid #1f0013;
  border-top: 230px solid #6c001f;
  border-radius: 0.46px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -230px;
  margin-left: -230px;
  z-index: -18;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.3s ease-in-out infinite;
  opacity: 0.8625;
}

div:nth-child(24) {
  width: 0;
  height: 0;
  border-left: 240px solid #370019;
  border-right: 240px solid #850025;
  border-bottom: 240px solid #1f0013;
  border-top: 240px solid #66001d;
  border-radius: 0.48px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -240px;
  margin-left: -240px;
  z-index: -19;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.4s ease-in-out infinite;
  opacity: 0.9;
}

div:nth-child(25) {
  width: 0;
  height: 0;
  border-left: 250px solid #330017;
  border-right: 250px solid #800024;
  border-bottom: 250px solid #1f0013;
  border-top: 250px solid #60001b;
  border-radius: 0.5px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -250px;
  margin-left: -250px;
  z-index: -20;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.5s ease-in-out infinite;
  opacity: 0.9375;
}

div:nth-child(26) {
  width: 0;
  height: 0;
  border-left: 260px solid #2e0015;
  border-right: 260px solid #7a0023;
  border-bottom: 260px solid #200013;
  border-top: 260px solid #590019;
  border-radius: 0.52px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -260px;
  margin-left: -260px;
  z-index: -21;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.6s ease-in-out infinite;
  opacity: 0.975;
}

div:nth-child(27) {
  width: 0;
  height: 0;
  border-left: 270px solid #2a0013;
  border-right: 270px solid #750021;
  border-bottom: 270px solid #200013;
  border-top: 270px solid #530017;
  border-radius: 0.54px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -270px;
  margin-left: -270px;
  z-index: -22;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.7s ease-in-out infinite;
  opacity: 1.0125;
}

div:nth-child(28) {
  width: 0;
  height: 0;
  border-left: 280px solid #260011;
  border-right: 280px solid #700020;
  border-bottom: 280px solid #200013;
  border-top: 280px solid #4d0016;
  border-radius: 0.56px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -280px;
  margin-left: -280px;
  z-index: -23;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.8s ease-in-out infinite;
  opacity: 1.05;
}

div:nth-child(29) {
  width: 0;
  height: 0;
  border-left: 290px solid #21000f;
  border-right: 290px solid #6b001e;
  border-bottom: 290px solid #200013;
  border-top: 290px solid #460014;
  border-radius: 0.58px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -290px;
  margin-left: -290px;
  z-index: -24;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 2.9s ease-in-out infinite;
  opacity: 1.0875;
}

div:nth-child(30) {
  width: 0;
  height: 0;
  border-left: 300px solid #1d000d;
  border-right: 300px solid #66001d;
  border-bottom: 300px solid #210014;
  border-top: 300px solid #400012;
  border-radius: 0.6px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -300px;
  margin-left: -300px;
  z-index: -25;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3s ease-in-out infinite;
  opacity: 1.125;
}

div:nth-child(31) {
  width: 0;
  height: 0;
  border-left: 310px solid #19000b;
  border-right: 310px solid #61001b;
  border-bottom: 310px solid #210014;
  border-top: 310px solid #390010;
  border-radius: 0.62px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -310px;
  margin-left: -310px;
  z-index: -26;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.1s ease-in-out infinite;
  opacity: 1.1625;
}

div:nth-child(32) {
  width: 0;
  height: 0;
  border-left: 320px solid #140009;
  border-right: 320px solid #5c001a;
  border-bottom: 320px solid #210014;
  border-top: 320px solid #33000e;
  border-radius: 0.64px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -320px;
  margin-left: -320px;
  z-index: -27;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.2s ease-in-out infinite;
  opacity: 1.2;
}

div:nth-child(33) {
  width: 0;
  height: 0;
  border-left: 330px solid #100007;
  border-right: 330px solid #570018;
  border-bottom: 330px solid #210014;
  border-top: 330px solid #2d000d;
  border-radius: 0.66px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -330px;
  margin-left: -330px;
  z-index: -28;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.3s ease-in-out infinite;
  opacity: 1.2375;
}

div:nth-child(34) {
  width: 0;
  height: 0;
  border-left: 340px solid #0c0005;
  border-right: 340px solid #520017;
  border-bottom: 340px solid #220014;
  border-top: 340px solid #26000b;
  border-radius: 0.68px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -340px;
  margin-left: -340px;
  z-index: -29;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.4s ease-in-out infinite;
  opacity: 1.275;
}

div:nth-child(35) {
  width: 0;
  height: 0;
  border-left: 350px solid #070003;
  border-right: 350px solid #4d0016;
  border-bottom: 350px solid #220014;
  border-top: 350px solid #200009;
  border-radius: 0.7px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -350px;
  margin-left: -350px;
  z-index: -30;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.5s ease-in-out infinite;
  opacity: 1.3125;
}

div:nth-child(36) {
  width: 0;
  height: 0;
  border-left: 360px solid #030001;
  border-right: 360px solid #470014;
  border-bottom: 360px solid #220015;
  border-top: 360px solid #1a0007;
  border-radius: 0.72px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -360px;
  margin-left: -360px;
  z-index: -31;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.6s ease-in-out infinite;
  opacity: 1.35;
}

div:nth-child(37) {
  width: 0;
  height: 0;
  border-left: 370px solid black;
  border-right: 370px solid #420013;
  border-bottom: 370px solid #220015;
  border-top: 370px solid #130005;
  border-radius: 0.74px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -370px;
  margin-left: -370px;
  z-index: -32;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.7s ease-in-out infinite;
  opacity: 1.3875;
}

div:nth-child(38) {
  width: 0;
  height: 0;
  border-left: 380px solid black;
  border-right: 380px solid #3d0011;
  border-bottom: 380px solid #230015;
  border-top: 380px solid #0d0004;
  border-radius: 0.76px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -380px;
  margin-left: -380px;
  z-index: -33;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.8s ease-in-out infinite;
  opacity: 1.425;
}

div:nth-child(39) {
  width: 0;
  height: 0;
  border-left: 390px solid black;
  border-right: 390px solid #380010;
  border-bottom: 390px solid #230015;
  border-top: 390px solid #060002;
  border-radius: 0.78px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -390px;
  margin-left: -390px;
  z-index: -34;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 3.9s ease-in-out infinite;
  opacity: 1.4625;
}

div:nth-child(40) {
  width: 0;
  height: 0;
  border-left: 400px solid black;
  border-right: 400px solid #33000e;
  border-bottom: 400px solid #230015;
  border-top: 400px solid black;
  border-radius: 0.8px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -400px;
  margin-left: -400px;
  z-index: -35;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4s ease-in-out infinite;
  opacity: 1.5;
}

div:nth-child(41) {
  width: 0;
  height: 0;
  border-left: 410px solid black;
  border-right: 410px solid #2e000d;
  border-bottom: 410px solid #230015;
  border-top: 410px solid black;
  border-radius: 0.82px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -410px;
  margin-left: -410px;
  z-index: -36;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.1s ease-in-out infinite;
  opacity: 1.5375;
}

div:nth-child(42) {
  width: 0;
  height: 0;
  border-left: 420px solid black;
  border-right: 420px solid #29000c;
  border-bottom: 420px solid #240015;
  border-top: 420px solid black;
  border-radius: 0.84px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -420px;
  margin-left: -420px;
  z-index: -37;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.2s ease-in-out infinite;
  opacity: 1.575;
}

div:nth-child(43) {
  width: 0;
  height: 0;
  border-left: 430px solid black;
  border-right: 430px solid #24000a;
  border-bottom: 430px solid #240016;
  border-top: 430px solid black;
  border-radius: 0.86px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -430px;
  margin-left: -430px;
  z-index: -38;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.3s ease-in-out infinite;
  opacity: 1.6125;
}

div:nth-child(44) {
  width: 0;
  height: 0;
  border-left: 440px solid black;
  border-right: 440px solid #1f0009;
  border-bottom: 440px solid #240016;
  border-top: 440px solid black;
  border-radius: 0.88px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -440px;
  margin-left: -440px;
  z-index: -39;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.4s ease-in-out infinite;
  opacity: 1.65;
}

div:nth-child(45) {
  width: 0;
  height: 0;
  border-left: 450px solid black;
  border-right: 450px solid #1a0007;
  border-bottom: 450px solid #240016;
  border-top: 450px solid black;
  border-radius: 0.9px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -450px;
  margin-left: -450px;
  z-index: -40;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.5s ease-in-out infinite;
  opacity: 1.6875;
}

div:nth-child(46) {
  width: 0;
  height: 0;
  border-left: 460px solid black;
  border-right: 460px solid #140006;
  border-bottom: 460px solid #250016;
  border-top: 460px solid black;
  border-radius: 0.92px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -460px;
  margin-left: -460px;
  z-index: -41;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.6s ease-in-out infinite;
  opacity: 1.725;
}

div:nth-child(47) {
  width: 0;
  height: 0;
  border-left: 470px solid black;
  border-right: 470px solid #0f0004;
  border-bottom: 470px solid #250016;
  border-top: 470px solid black;
  border-radius: 0.94px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -470px;
  margin-left: -470px;
  z-index: -42;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.7s ease-in-out infinite;
  opacity: 1.7625;
}

div:nth-child(48) {
  width: 0;
  height: 0;
  border-left: 480px solid black;
  border-right: 480px solid #0a0003;
  border-bottom: 480px solid #250016;
  border-top: 480px solid black;
  border-radius: 0.96px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -480px;
  margin-left: -480px;
  z-index: -43;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.8s ease-in-out infinite;
  opacity: 1.8;
}

div:nth-child(49) {
  width: 0;
  height: 0;
  border-left: 490px solid black;
  border-right: 490px solid #050001;
  border-bottom: 490px solid #250016;
  border-top: 490px solid black;
  border-radius: 0.98px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -490px;
  margin-left: -490px;
  z-index: -44;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 4.9s ease-in-out infinite;
  opacity: 1.8375;
}

div:nth-child(50) {
  width: 0;
  height: 0;
  border-left: 500px solid black;
  border-right: 500px solid black;
  border-bottom: 500px solid #260017;
  border-top: 500px solid black;
  border-radius: 1px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -500px;
  margin-left: -500px;
  z-index: -45;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 5s ease-in-out infinite;
  opacity: 1.875;
}

div:nth-child(51) {
  width: 0;
  height: 0;
  border-left: 510px solid black;
  border-right: 510px solid black;
  border-bottom: 510px solid #260017;
  border-top: 510px solid black;
  border-radius: 1.02px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -510px;
  margin-left: -510px;
  z-index: -46;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 5.1s ease-in-out infinite;
  opacity: 1.9125;
}

div:nth-child(52) {
  width: 0;
  height: 0;
  border-left: 520px solid black;
  border-right: 520px solid black;
  border-bottom: 520px solid #260017;
  border-top: 520px solid black;
  border-radius: 1.04px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -520px;
  margin-left: -520px;
  z-index: -47;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 5.2s ease-in-out infinite;
  opacity: 1.95;
}

div:nth-child(53) {
  width: 0;
  height: 0;
  border-left: 530px solid black;
  border-right: 530px solid black;
  border-bottom: 530px solid #270017;
  border-top: 530px solid black;
  border-radius: 1.06px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -530px;
  margin-left: -530px;
  z-index: -48;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 5.3s ease-in-out infinite;
  opacity: 1.9875;
}

div:nth-child(54) {
  width: 0;
  height: 0;
  border-left: 540px solid black;
  border-right: 540px solid black;
  border-bottom: 540px solid #270017;
  border-top: 540px solid black;
  border-radius: 1.08px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -540px;
  margin-left: -540px;
  z-index: -49;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 5.4s ease-in-out infinite;
  opacity: 2.025;
}

div:nth-child(55) {
  width: 0;
  height: 0;
  border-left: 550px solid black;
  border-right: 550px solid black;
  border-bottom: 550px solid #270017;
  border-top: 550px solid black;
  border-radius: 1.1px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -550px;
  margin-left: -550px;
  z-index: -50;
  transform-origin: center center;
  transform: rotate(85deg);
  animation: 9.5s move 5.5s ease-in-out infinite;
  opacity: 2.0625;
}

@keyframes move {
  0% {
    transform: rotate(86deg);
  }

  25% {
    transform: rotate(-90deg);
    transform-origin: 0px 45px;
  }

  50% {
    transform: rotate(10deg);
    transform-origin: 10px 90px;
  }

  100% {
    transform: rotate(86deg), scale(1.5, 1.5), skew(30deg, 60deg), matrix(0.866, 0.5, -0.9, 0.866, 0, 0);
  }
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              //http://codepen.io/Mobilpadde/pen/qwvh
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................