cssAudio - ActiveCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmloctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              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);
  }
}
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console