@-webkit-keyframes rotate-left { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  to { -webkit-transform: rotate(0); transform: rotate(0); } }

@keyframes rotate-left { from { -webkit-transform: rotate(360deg); transform: rotate(360deg); }
  to { -webkit-transform: rotate(0); transform: rotate(0); } }

@-webkit-keyframes rotate-right { from { -webkit-transform: rotate(0); transform: rotate(0); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@keyframes rotate-right { from { -webkit-transform: rotate(0); transform: rotate(0); }
  to { -webkit-transform: rotate(360deg); transform: rotate(360deg); } }

@-webkit-keyframes rotate-left-right { 0% { -webkit-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); }
  30% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
  50% { -webkit-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); }
  100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } }

@keyframes rotate-left-right { 0% { -webkit-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); }
  30% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); }
  50% { -webkit-transform: translate(-50%, -50%) rotate(0); transform: translate(-50%, -50%) rotate(0); }
  100% { -webkit-transform: translate(-50%, -50%) rotate(360deg); transform: translate(-50%, -50%) rotate(360deg); } }

body { 
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background-color: #000;
  margin: 0;
}

.reactor {
  position: relative;
}

.triangle {
  position: absolute;
  top: 66%;
  left: 50%;
  z-index: 99;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 155px; aspect-ratio: 1;
  background-color: #69f1f1;
  -webkit-clip-path: polygon(50% 88%, 0 0, 100% 0);
  clip-path: polygon(50% 88%, 0 0, 100% 0);
}

.triangle::after {
  content: '';
  display: block;
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 999;
  width: 120px;
  height: 120px;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background-color: #000;
  -webkit-clip-path: polygon(50% 90%, 0 0, 100% 0);
  clip-path: polygon(50% 90%, 0 0, 100% 0);
}

.circle-1 {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: -webkit-gradient(linear, left top, left bottom, 
  from(rgba(105, 241, 241, 0.8)), to(rgba(99, 193, 223, 0.8)));
  background: linear-gradient(rgba(105, 241, 241, 0.8), rgba(99, 193, 223, 0.8));
  -webkit-animation: rotate-right 2s linear infinite;
  animation: rotate-right 2s linear infinite;
}

.circle-1::before { content: ''; position: absolute; z-index: 1; inset: 10px; border-radius: 50%; background-color: #000; }

.circle-1 span { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: -webkit-gradient(linear, left top, left bottom, from(rgba(105, 241, 241, 0.8)), to(rgba(99, 193, 223, 0.8))); background: linear-gradient(rgba(105, 241, 241, 0.8), rgba(99, 193, 223, 0.8)); }

.circle-1 span:nth-child(1) { -webkit-filter: blur(5px); filter: blur(5px); }

.circle-1 span:nth-child(2) { -webkit-filter: blur(5px); filter: blur(5px); }

.circle-1 span:nth-child(3) { -webkit-filter: blur(15px); filter: blur(15px); }

.circle-1 span:nth-child(4) { -webkit-filter: blur(75px); filter: blur(75px); }

.circle-2 { position: absolute; inset: 20px; width: calc(100% - 60px); height: calc(100% - 60px); border-radius: 50%; border: 10px solid #69f1f1; -webkit-box-shadow: 0 0 30px 30px rgba(105, 241, 241, 0.2); box-shadow: 0 0 30px 30px rgba(105, 241, 241, 0.2); z-index: 9; -webkit-animation: rotate-left 4s linear infinite; animation: rotate-left 4s linear infinite; }

.circle-2 span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 20px); height: 10px; background-color: #000; }

.circle-2 span:nth-child(1) { -webkit-transform: translate(-50%, -50%) rotate(90deg); transform: translate(-50%, -50%) rotate(90deg); }

.circle-2 span:nth-child(2) { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); }

.circle-2 span:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); }

.circle-2 span:nth-child(4) { -webkit-transform: translate(-50%, -50%) rotate(30deg); transform: translate(-50%, -50%) rotate(30deg); }

.circle-2 span:nth-child(5) { -webkit-transform: translate(-50%, -50%) rotate(-30deg); transform: translate(-50%, -50%) rotate(-30deg); }

.circle-2 span:nth-child(6) { -webkit-transform: translate(-50%, -50%) rotate(0deg); transform: translate(-50%, -50%) rotate(0deg); }

.circle-2 span:nth-child(7) { -webkit-transform: translate(-50%, -50%) rotate(55deg); transform: translate(-50%, -50%) rotate(55deg); height: 5px; }

.circle-2 span:nth-child(8) { -webkit-transform: translate(-50%, -50%) rotate(125deg); transform: translate(-50%, -50%) rotate(125deg); height: 5px; }

.circle-3 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99; border-radius: 50%; -webkit-box-shadow: 0 0 10px 10px rgba(105, 241, 241, 0.2); box-shadow: 0 0 10px 10px rgba(105, 241, 241, 0.2); }

.circle-3::after { content: ''; display: block; width: 115px; height: 115px; border-radius: 50%; border: 3px dotted rgba(105, 241, 241, 0.8); -webkit-animation: rotate-right 10s linear infinite; animation: rotate-right 10s linear infinite; }

.circle-4 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99; width: 100px; height: 100px; border-radius: 50%; -webkit-box-shadow: 0 0 10px 10px rgba(105, 241, 241, 0.1); box-shadow: 0 0 10px 10px rgba(105, 241, 241, 0.1); -webkit-animation: rotate-left-right 20s infinite ease-in; animation: rotate-left-right 20s infinite ease-in; }

.circle-4 span { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 100%; height: 100%; border-radius: 50%; border: 3px solid; border-color: #69f1f1 transparent transparent; }

.circle-4 span:nth-child(1) { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); }

.circle-4 span:nth-child(2) { -webkit-transform: translate(-50%, -50%) rotate(-75deg); transform: translate(-50%, -50%) rotate(-75deg); }

.circle-4 span:nth-child(3) { -webkit-transform: translate(-50%, -50%) rotate(165deg); transform: translate(-50%, -50%) rotate(165deg); }

.circle-5 { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 99; width: 64px; height: 64px; border-radius: 50%; -webkit-animation: rotate-left-right 10s infinite ease-in; animation: rotate-left-right 10s infinite ease-in; background-color: rgba(105, 241, 241, 0.2); -webkit-box-shadow: 0 0 20px 20px rgba(105, 241, 241, 0.2); box-shadow: 0 0 20px 20px rgba(105, 241, 241, 0.2); }

.circle-5 span { position: absolute; inset: 0; z-index: 99; width: 54px; height: 54px; border-radius: 50%; border: 5px solid; border-color: #69f1f1 transparent transparent; }

.circle-5 span:nth-child(1) { -webkit-transform: rotate(0deg); transform: rotate(0deg); }

.circle-5 span:nth-child(2) { -webkit-transform: rotate(120deg); transform: rotate(120deg); }

.circle-5 span:nth-child(3) { -webkit-transform: rotate(240deg); transform: rotate(240deg); }

.circle-6 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
}

.circle-6::after {
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 3px dashed #69f1f1;
  -webkit-animation: rotate-left 5s infinite ease-in;
  animation: rotate-left 5s infinite ease-in;
}

.circle-7 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
}

.circle-7::after {
  content: '';
  display: block;
  width: 27px;
  height: 27px;
  border-radius: 50%;
  background-color: #69f1f1;
  -webkit-animation: rotate-left 5s infinite ease-in;
  animation: rotate-left 5s infinite ease-in;
  -webkit-box-shadow: 0 0 5px 5px rgba(105, 241, 241, 0.2);
  box-shadow: 0 0 5px 5px rgba(105, 241, 241, 0.2);
}

.circle-8 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  -webkit-animation: rotate-left-right 5s infinite ease-in;
  animation: rotate-left-right 5s infinite ease-in;
}

.circle-8 span { position: absolute; inset: 0; z-index: 99; width: 13px; height: 13px; border-radius: 50%; border: 1px solid; border-color: #000 transparent transparent; }

.circle-8 span:nth-child(1) { -webkit-transform: rotate(120deg); transform: rotate(120deg); }

.circle-8 span:nth-child(2) { -webkit-transform: rotate(240deg); transform: rotate(240deg); }
/*
.circle-9 {
  position: absolute;
  top: 50%; left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  -webkit-animation: rotate-left-right 5s infinite ease-in;
  animation: rotate-left-right 5s infinite ease-in;
}

.circle-9 {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
}

.circle-9::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #69f1f1;
  -webkit-animation: rotate-left 8s infinite ease-in;
  animation: rotate-left 5s infinite ease-in;
}
*/