css实现多边形球体旋转运动效果代码
代码语言：html
所属分类：动画
代码描述：css实现多边形球体旋转运动效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
html {
width: 100%;
height: 100%;
overflow: hidden;
}
body {
position: relative;
width: 100%;
height: 100%;
margin: 0;
font-family: "Cute Font", Roboto, sans-serif;
overflow: hidden;
background-color: #262626;
}
*:before, *:after {
position: absolute;
content: "";
}
.container {
position: relative;
width: 300px;
height: 500px;
margin: auto;
-webkit-transform: scale3d(1.2, 0.8, 1);
transform: scale3d(1.2, 0.8, 1);
}
.circle {
position: absolute;
border-radius: 50%;
}
.circle:nth-child(1) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 15px;
left: 3.22px;
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
}
.circle:nth-child(1) .content {
position: absolute;
width: 65px;
height: 23px;
top: 40%;
left: 40%;
}
.circle:nth-child(1) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(84% 0, 63% 0, 42% 48%);
clip-path: polygon(84% 0, 63% 0, 42% 48%);
background: #1b06f9;
-webkit-transform: rotate(14.4deg) translate(0, 60px);
transform: rotate(14.4deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(1):before, .circle:nth-child(1) .content:nth-child(1):after {
width: 38px;
height: 3px;
-webkit-clip-path: polygon(91% 0, 4% 0, 30% 48%);
clip-path: polygon(91% 0, 4% 0, 30% 48%);
}
.circle:nth-child(1) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #9513ec;
}
.circle:nth-child(1) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(74% 0, 54% 0, 27% 48%);
clip-path: polygon(74% 0, 54% 0, 27% 48%);
background: #2f1fe0;
-webkit-transform: rotate(28.8deg) translate(0, 60px);
transform: rotate(28.8deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(2):before, .circle:nth-child(1) .content:nth-child(2):after {
width: 61px;
height: 6px;
-webkit-clip-path: polygon(34% 0, 23% 0, 57% 48%);
clip-path: polygon(34% 0, 23% 0, 57% 48%);
}
.circle:nth-child(1) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #865da2;
}
.circle:nth-child(1) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(97% 0, 79% 0, 17% 48%);
clip-path: polygon(97% 0, 79% 0, 17% 48%);
background: #2311ee;
-webkit-transform: rotate(43.2deg) translate(0, 60px);
transform: rotate(43.2deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(3):before, .circle:nth-child(1) .content:nth-child(3):after {
width: 28px;
height: 20px;
-webkit-clip-path: polygon(100% 0, 38% 0, 17% 48%);
clip-path: polygon(100% 0, 38% 0, 17% 48%);
}
.circle:nth-child(1) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #83708f;
}
.circle:nth-child(1) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 58% 0, 64% 48%);
clip-path: polygon(47% 0, 58% 0, 64% 48%);
background: #200df2;
-webkit-transform: rotate(57.6deg) translate(0, 60px);
transform: rotate(57.6deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(4):before, .circle:nth-child(1) .content:nth-child(4):after {
width: 70px;
height: 1px;
-webkit-clip-path: polygon(42% 0, 77% 0, 16% 48%);
clip-path: polygon(42% 0, 77% 0, 16% 48%);
}
.circle:nth-child(1) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #8a4db3;
}
.circle:nth-child(1) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(38% 0, 76% 0, 22% 48%);
clip-path: polygon(38% 0, 76% 0, 22% 48%);
background: #6c6996;
-webkit-transform: rotate(72deg) translate(0, 60px);
transform: rotate(72deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(5):before, .circle:nth-child(1) .content:nth-child(5):after {
width: 29px;
height: 6px;
-webkit-clip-path: polygon(31% 0, 14% 0, 63% 48%);
clip-path: polygon(31% 0, 14% 0, 63% 48%);
}
.circle:nth-child(1) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8b47b8;
}
.circle:nth-child(1) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(42% 0, 37% 0, 10% 48%);
clip-path: polygon(42% 0, 37% 0, 10% 48%);
background: #3729d6;
-webkit-transform: rotate(86.4deg) translate(0, 60px);
transform: rotate(86.4deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(6):before, .circle:nth-child(1) .content:nth-child(6):after {
width: 3px;
height: 24px;
-webkit-clip-path: polygon(6% 0, 21% 0, 19% 48%);
clip-path: polygon(6% 0, 21% 0, 19% 48%);
}
.circle:nth-child(1) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #846b94;
}
.circle:nth-child(1) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(58% 0, 23% 0, 41% 48%);
clip-path: polygon(58% 0, 23% 0, 41% 48%);
background: #4337c8;
-webkit-transform: rotate(100.8deg) translate(0, 60px);
transform: rotate(100.8deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(7):before, .circle:nth-child(1) .content:nth-child(7):after {
width: 26px;
height: 47px;
-webkit-clip-path: polygon(46% 0, 37% 0, 57% 48%);
clip-path: polygon(46% 0, 37% 0, 57% 48%);
}
.circle:nth-child(1) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #9222dd;
}
.circle:nth-child(1) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(12% 0, 31% 0, 20% 48%);
clip-path: polygon(12% 0, 31% 0, 20% 48%);
background: #615ba4;
-webkit-transform: rotate(115.2deg) translate(0, 60px);
transform: rotate(115.2deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(8):before, .circle:nth-child(1) .content:nth-child(8):after {
width: 70px;
height: 48px;
-webkit-clip-path: polygon(4% 0, 34% 0, 16% 48%);
clip-path: polygon(4% 0, 34% 0, 16% 48%);
}
.circle:nth-child(1) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #85639c;
}
.circle:nth-child(1) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(15% 0, 98% 0, 39% 48%);
clip-path: polygon(15% 0, 98% 0, 39% 48%);
background: #2311ee;
-webkit-transform: rotate(129.6deg) translate(0, 60px);
transform: rotate(129.6deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(9):before, .circle:nth-child(1) .content:nth-child(9):after {
width: 79px;
height: 19px;
-webkit-clip-path: polygon(11% 0, 84% 0, 98% 48%);
clip-path: polygon(11% 0, 84% 0, 98% 48%);
}
.circle:nth-child(1) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #8854ab;
}
.circle:nth-child(1) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(28% 0, 30% 0, 29% 48%);
clip-path: polygon(28% 0, 30% 0, 29% 48%);
background: #726f90;
-webkit-transform: rotate(144deg) translate(0, 60px);
transform: rotate(144deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(10):before, .circle:nth-child(1) .content:nth-child(10):after {
width: 28px;
height: 39px;
-webkit-clip-path: polygon(70% 0, 3% 0, 70% 48%);
clip-path: polygon(70% 0, 3% 0, 70% 48%);
}
.circle:nth-child(1) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #9512ed;
}
.circle:nth-child(1) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(64% 0, 94% 0, 43% 48%);
clip-path: polygon(64% 0, 94% 0, 43% 48%);
background: #3c2ed1;
-webkit-transform: rotate(158.4deg) translate(0, 60px);
transform: rotate(158.4deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(11):before, .circle:nth-child(1) .content:nth-child(11):after {
width: 27px;
height: 33px;
-webkit-clip-path: polygon(15% 0, 38% 0, 63% 48%);
clip-path: polygon(15% 0, 38% 0, 63% 48%);
}
.circle:nth-child(1) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #960ef1;
}
.circle:nth-child(1) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(16% 0, 72% 0, 37% 48%);
clip-path: polygon(16% 0, 72% 0, 37% 48%);
background: #5249b6;
-webkit-transform: rotate(172.8deg) translate(0, 60px);
transform: rotate(172.8deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(12):before, .circle:nth-child(1) .content:nth-child(12):after {
width: 37px;
height: 46px;
-webkit-clip-path: polygon(87% 0, 91% 0, 57% 48%);
clip-path: polygon(87% 0, 91% 0, 57% 48%);
}
.circle:nth-child(1) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #902fd0;
}
.circle:nth-child(1) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(87% 0, 47% 0, 57% 48%);
clip-path: polygon(87% 0, 47% 0, 57% 48%);
background: #3729d6;
-webkit-transform: rotate(187.2deg) translate(0, 60px);
transform: rotate(187.2deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(13):before, .circle:nth-child(1) .content:nth-child(13):after {
width: 9px;
height: 20px;
-webkit-clip-path: polygon(21% 0, 78% 0, 8% 48%);
clip-path: polygon(21% 0, 78% 0, 8% 48%);
}
.circle:nth-child(1) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #9418e7;
}
.circle:nth-child(1) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(77% 0, 20% 0, 31% 48%);
clip-path: polygon(77% 0, 20% 0, 31% 48%);
background: #67629d;
-webkit-transform: rotate(201.6deg) translate(0, 60px);
transform: rotate(201.6deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(14):before, .circle:nth-child(1) .content:nth-child(14):after {
width: 9px;
height: 8px;
-webkit-clip-path: polygon(30% 0, 86% 0, 77% 48%);
clip-path: polygon(30% 0, 86% 0, 77% 48%);
}
.circle:nth-child(1) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #931de2;
}
.circle:nth-child(1) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(91% 0, 88% 0, 27% 48%);
clip-path: polygon(91% 0, 88% 0, 27% 48%);
background: #473cc3;
-webkit-transform: rotate(216deg) translate(0, 60px);
transform: rotate(216deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(15):before, .circle:nth-child(1) .content:nth-child(15):after {
width: 94px;
height: 16px;
-webkit-clip-path: polygon(30% 0, 2% 0, 96% 48%);
clip-path: polygon(30% 0, 2% 0, 96% 48%);
}
.circle:nth-child(1) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #846a95;
}
.circle:nth-child(1) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(48% 0, 16% 0, 45% 48%);
clip-path: polygon(48% 0, 16% 0, 45% 48%);
background: #2716e9;
-webkit-transform: rotate(230.4deg) translate(0, 60px);
transform: rotate(230.4deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(16):before, .circle:nth-child(1) .content:nth-child(16):after {
width: 99px;
height: 40px;
-webkit-clip-path: polygon(38% 0, 28% 0, 99% 48%);
clip-path: polygon(38% 0, 28% 0, 99% 48%);
}
.circle:nth-child(1) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #8952ad;
}
.circle:nth-child(1) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(91% 0, 38% 0, 8% 48%);
clip-path: polygon(91% 0, 38% 0, 8% 48%);
background: #5952ad;
-webkit-transform: rotate(244.8deg) translate(0, 60px);
transform: rotate(244.8deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(17):before, .circle:nth-child(1) .content:nth-child(17):after {
width: 93px;
height: 21px;
-webkit-clip-path: polygon(62% 0, 34% 0, 46% 48%);
clip-path: polygon(62% 0, 34% 0, 46% 48%);
}
.circle:nth-child(1) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #846a95;
}
.circle:nth-child(1) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 51% 0, 40% 48%);
clip-path: polygon(62% 0, 51% 0, 40% 48%);
background: #67629d;
-webkit-transform: rotate(259.2deg) translate(0, 60px);
transform: rotate(259.2deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(18):before, .circle:nth-child(1) .content:nth-child(18):after {
width: 52px;
height: 49px;
-webkit-clip-path: polygon(1% 0, 60% 0, 15% 48%);
clip-path: polygon(1% 0, 60% 0, 15% 48%);
}
.circle:nth-child(1) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #9805fa;
}
.circle:nth-child(1) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 36% 0, 49% 48%);
clip-path: polygon(35% 0, 36% 0, 49% 48%);
background: #1a05fa;
-webkit-transform: rotate(273.6deg) translate(0, 60px);
transform: rotate(273.6deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(19):before, .circle:nth-child(1) .content:nth-child(19):after {
width: 24px;
height: 27px;
-webkit-clip-path: polygon(77% 0, 100% 0, 73% 48%);
clip-path: polygon(77% 0, 100% 0, 73% 48%);
}
.circle:nth-child(1) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #8d3dc2;
}
.circle:nth-child(1) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(73% 0, 30% 0, 23% 48%);
clip-path: polygon(73% 0, 30% 0, 23% 48%);
background: #2513ec;
-webkit-transform: rotate(288deg) translate(0, 60px);
transform: rotate(288deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(20):before, .circle:nth-child(1) .content:nth-child(20):after {
width: 36px;
height: 4px;
-webkit-clip-path: polygon(7% 0, 80% 0, 57% 48%);
clip-path: polygon(7% 0, 80% 0, 57% 48%);
}
.circle:nth-child(1) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #8b44bb;
}
.circle:nth-child(1) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 7% 0, 15% 48%);
clip-path: polygon(35% 0, 7% 0, 15% 48%);
background: #4a40bf;
-webkit-transform: rotate(302.4deg) translate(0, 60px);
transform: rotate(302.4deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(21):before, .circle:nth-child(1) .content:nth-child(21):after {
width: 37px;
height: 50px;
-webkit-clip-path: polygon(70% 0, 98% 0, 99% 48%);
clip-path: polygon(70% 0, 98% 0, 99% 48%);
}
.circle:nth-child(1) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #9126d9;
}
.circle:nth-child(1) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(58% 0, 47% 0, 97% 48%);
clip-path: polygon(58% 0, 47% 0, 97% 48%);
background: #3222dd;
-webkit-transform: rotate(316.8deg) translate(0, 60px);
transform: rotate(316.8deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(22):before, .circle:nth-child(1) .content:nth-child(22):after {
width: 10px;
height: 47px;
-webkit-clip-path: polygon(34% 0, 27% 0, 34% 48%);
clip-path: polygon(34% 0, 27% 0, 34% 48%);
}
.circle:nth-child(1) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #9804fb;
}
.circle:nth-child(1) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 86% 0, 70% 48%);
clip-path: polygon(47% 0, 86% 0, 70% 48%);
background: #544bb4;
-webkit-transform: rotate(331.2deg) translate(0, 60px);
transform: rotate(331.2deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(23):before, .circle:nth-child(1) .content:nth-child(23):after {
width: 12px;
height: 25px;
-webkit-clip-path: polygon(48% 0, 64% 0, 43% 48%);
clip-path: polygon(48% 0, 64% 0, 43% 48%);
}
.circle:nth-child(1) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #8d3bc4;
}
.circle:nth-child(1) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(96% 0, 69% 0, 58% 48%);
clip-path: polygon(96% 0, 69% 0, 58% 48%);
background: #1c08f7;
-webkit-transform: rotate(345.6deg) translate(0, 60px);
transform: rotate(345.6deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(24):before, .circle:nth-child(1) .content:nth-child(24):after {
width: 26px;
height: 38px;
-webkit-clip-path: polygon(87% 0, 50% 0, 38% 48%);
clip-path: polygon(87% 0, 50% 0, 38% 48%);
}
.circle:nth-child(1) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #8c41be;
}
.circle:nth-child(1) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(5% 0, 65% 0, 78% 48%);
clip-path: polygon(5% 0, 65% 0, 78% 48%);
background: #382ad5;
-webkit-transform: rotate(360deg) translate(0, 60px);
transform: rotate(360deg) translate(0, 60px);
}
.circle:nth-child(1) .content:nth-child(25):before, .circle:nth-child(1) .content:nth-child(25):after {
width: 96px;
height: 31px;
-webkit-clip-path: polygon(26% 0, 49% 0, 31% 48%);
clip-path: polygon(26% 0, 49% 0, 31% 48%);
}
.circle:nth-child(1) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(1) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #85659a;
}
.circle:nth-child(2) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 30px;
left: 6.44px;
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
}
.circle:nth-child(2) .content {
position: absolute;
width: 53px;
height: 7px;
top: 40%;
left: 40%;
}
.circle:nth-child(2) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(4% 0, 20% 0, 56% 48%);
clip-path: polygon(4% 0, 20% 0, 56% 48%);
background: #483dc2;
-webkit-transform: rotate(14.4deg) translate(0, 70px);
transform: rotate(14.4deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(1):before, .circle:nth-child(2) .content:nth-child(1):after {
width: 72px;
height: 8px;
-webkit-clip-path: polygon(77% 0, 28% 0, 75% 48%);
clip-path: polygon(77% 0, 28% 0, 75% 48%);
}
.circle:nth-child(2) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #8c40bf;
}
.circle:nth-child(2) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(20% 0, 1% 0, 26% 48%);
clip-path: polygon(20% 0, 1% 0, 26% 48%);
background: #75738c;
-webkit-transform: rotate(28.8deg) translate(0, 70px);
transform: rotate(28.8deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(2):before, .circle:nth-child(2) .content:nth-child(2):after {
width: 50px;
height: 16px;
-webkit-clip-path: polygon(43% 0, 3% 0, 69% 48%);
clip-path: polygon(43% 0, 3% 0, 69% 48%);
}
.circle:nth-child(2) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(2) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(30% 0, 89% 0, 70% 48%);
clip-path: polygon(30% 0, 89% 0, 70% 48%);
background: #1804fb;
-webkit-transform: rotate(43.2deg) translate(0, 70px);
transform: rotate(43.2deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(3):before, .circle:nth-child(2) .content:nth-child(3):after {
width: 80px;
height: 27px;
-webkit-clip-path: polygon(11% 0, 53% 0, 25% 48%);
clip-path: polygon(11% 0, 53% 0, 25% 48%);
}
.circle:nth-child(2) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #807e81;
}
.circle:nth-child(2) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(24% 0, 69% 0, 76% 48%);
clip-path: polygon(24% 0, 69% 0, 76% 48%);
background: #77758a;
-webkit-transform: rotate(57.6deg) translate(0, 70px);
transform: rotate(57.6deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(4):before, .circle:nth-child(2) .content:nth-child(4):after {
width: 2px;
height: 4px;
-webkit-clip-path: polygon(98% 0, 13% 0, 13% 48%);
clip-path: polygon(98% 0, 13% 0, 13% 48%);
}
.circle:nth-child(2) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #9708f7;
}
.circle:nth-child(2) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(5% 0, 63% 0, 42% 48%);
clip-path: polygon(5% 0, 63% 0, 42% 48%);
background: #68639c;
-webkit-transform: rotate(72deg) translate(0, 70px);
transform: rotate(72deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(5):before, .circle:nth-child(2) .content:nth-child(5):after {
width: 32px;
height: 17px;
-webkit-clip-path: polygon(17% 0, 27% 0, 67% 48%);
clip-path: polygon(17% 0, 27% 0, 67% 48%);
}
.circle:nth-child(2) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(2) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(82% 0, 31% 0, 78% 48%);
clip-path: polygon(82% 0, 31% 0, 78% 48%);
background: #706c93;
-webkit-transform: rotate(86.4deg) translate(0, 70px);
transform: rotate(86.4deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(6):before, .circle:nth-child(2) .content:nth-child(6):after {
width: 17px;
height: 36px;
-webkit-clip-path: polygon(91% 0, 96% 0, 61% 48%);
clip-path: polygon(91% 0, 96% 0, 61% 48%);
}
.circle:nth-child(2) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #9805fa;
}
.circle:nth-child(2) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(10% 0, 75% 0, 24% 48%);
clip-path: polygon(10% 0, 75% 0, 24% 48%);
background: #3729d6;
-webkit-transform: rotate(100.8deg) translate(0, 70px);
transform: rotate(100.8deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(7):before, .circle:nth-child(2) .content:nth-child(7):after {
width: 4px;
height: 15px;
-webkit-clip-path: polygon(60% 0, 84% 0, 4% 48%);
clip-path: polygon(60% 0, 84% 0, 4% 48%);
}
.circle:nth-child(2) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #912ad5;
}
.circle:nth-child(2) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(84% 0, 26% 0, 56% 48%);
clip-path: polygon(84% 0, 26% 0, 56% 48%);
background: #2513ec;
-webkit-transform: rotate(115.2deg) translate(0, 70px);
transform: rotate(115.2deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(8):before, .circle:nth-child(2) .content:nth-child(8):after {
width: 66px;
height: 46px;
-webkit-clip-path: polygon(85% 0, 73% 0, 32% 48%);
clip-path: polygon(85% 0, 73% 0, 32% 48%);
}
.circle:nth-child(2) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #846798;
}
.circle:nth-child(2) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(1% 0, 45% 0, 15% 48%);
clip-path: polygon(1% 0, 45% 0, 15% 48%);
background: #2311ee;
-webkit-transform: rotate(129.6deg) translate(0, 70px);
transform: rotate(129.6deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(9):before, .circle:nth-child(2) .content:nth-child(9):after {
width: 40px;
height: 42px;
-webkit-clip-path: polygon(71% 0, 19% 0, 13% 48%);
clip-path: polygon(71% 0, 19% 0, 13% 48%);
}
.circle:nth-child(2) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #85659a;
}
.circle:nth-child(2) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(20% 0, 26% 0, 72% 48%);
clip-path: polygon(20% 0, 26% 0, 72% 48%);
background: #75738c;
-webkit-transform: rotate(144deg) translate(0, 70px);
transform: rotate(144deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(10):before, .circle:nth-child(2) .content:nth-child(10):after {
width: 58px;
height: 5px;
-webkit-clip-path: polygon(61% 0, 71% 0, 59% 48%);
clip-path: polygon(61% 0, 71% 0, 59% 48%);
}
.circle:nth-child(2) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #8952ad;
}
.circle:nth-child(2) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(15% 0, 53% 0, 28% 48%);
clip-path: polygon(15% 0, 53% 0, 28% 48%);
background: #1f0bf4;
-webkit-transform: rotate(158.4deg) translate(0, 70px);
transform: rotate(158.4deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(11):before, .circle:nth-child(2) .content:nth-child(11):after {
width: 62px;
height: 16px;
-webkit-clip-path: polygon(89% 0, 82% 0, 24% 48%);
clip-path: polygon(89% 0, 82% 0, 24% 48%);
}
.circle:nth-child(2) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #931ce3;
}
.circle:nth-child(2) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(7% 0, 40% 0, 49% 48%);
clip-path: polygon(7% 0, 40% 0, 49% 48%);
background: #1804fb;
-webkit-transform: rotate(172.8deg) translate(0, 70px);
transform: rotate(172.8deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(12):before, .circle:nth-child(2) .content:nth-child(12):after {
width: 98px;
height: 31px;
-webkit-clip-path: polygon(95% 0, 61% 0, 89% 48%);
clip-path: polygon(95% 0, 61% 0, 89% 48%);
}
.circle:nth-child(2) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #9901fe;
}
.circle:nth-child(2) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(81% 0, 24% 0, 83% 48%);
clip-path: polygon(81% 0, 24% 0, 83% 48%);
background: #574fb0;
-webkit-transform: rotate(187.2deg) translate(0, 70px);
transform: rotate(187.2deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(13):before, .circle:nth-child(2) .content:nth-child(13):after {
width: 49px;
height: 25px;
-webkit-clip-path: polygon(80% 0, 94% 0, 38% 48%);
clip-path: polygon(80% 0, 94% 0, 38% 48%);
}
.circle:nth-child(2) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #8b44bb;
}
.circle:nth-child(2) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(92% 0, 3% 0, 29% 48%);
clip-path: polygon(92% 0, 3% 0, 29% 48%);
background: #615ba4;
-webkit-transform: rotate(201.6deg) translate(0, 70px);
transform: rotate(201.6deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(14):before, .circle:nth-child(2) .content:nth-child(14):after {
width: 60px;
height: 6px;
-webkit-clip-path: polygon(14% 0, 43% 0, 51% 48%);
clip-path: polygon(14% 0, 43% 0, 51% 48%);
}
.circle:nth-child(2) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(2) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(54% 0, 43% 0, 83% 48%);
clip-path: polygon(54% 0, 43% 0, 83% 48%);
background: #473cc3;
-webkit-transform: rotate(216deg) translate(0, 70px);
transform: rotate(216deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(15):before, .circle:nth-child(2) .content:nth-child(15):after {
width: 96px;
height: 16px;
-webkit-clip-path: polygon(20% 0, 82% 0, 49% 48%);
clip-path: polygon(20% 0, 82% 0, 49% 48%);
}
.circle:nth-child(2) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #894fb0;
}
.circle:nth-child(2) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(66% 0, 62% 0, 95% 48%);
clip-path: polygon(66% 0, 62% 0, 95% 48%);
background: #4539c6;
-webkit-transform: rotate(230.4deg) translate(0, 70px);
transform: rotate(230.4deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(16):before, .circle:nth-child(2) .content:nth-child(16):after {
width: 69px;
height: 4px;
-webkit-clip-path: polygon(51% 0, 55% 0, 7% 48%);
clip-path: polygon(51% 0, 55% 0, 7% 48%);
}
.circle:nth-child(2) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #856699;
}
.circle:nth-child(2) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 1% 0, 76% 48%);
clip-path: polygon(90% 0, 1% 0, 76% 48%);
background: #4539c6;
-webkit-transform: rotate(244.8deg) translate(0, 70px);
transform: rotate(244.8deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(17):before, .circle:nth-child(2) .content:nth-child(17):after {
width: 37px;
height: 37px;
-webkit-clip-path: polygon(63% 0, 22% 0, 41% 48%);
clip-path: polygon(63% 0, 22% 0, 41% 48%);
}
.circle:nth-child(2) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #931fe0;
}
.circle:nth-child(2) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(2% 0, 87% 0, 41% 48%);
clip-path: polygon(2% 0, 87% 0, 41% 48%);
background: #77758a;
-webkit-transform: rotate(259.2deg) translate(0, 70px);
transform: rotate(259.2deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(18):before, .circle:nth-child(2) .content:nth-child(18):after {
width: 22px;
height: 33px;
-webkit-clip-path: polygon(100% 0, 84% 0, 1% 48%);
clip-path: polygon(100% 0, 84% 0, 1% 48%);
}
.circle:nth-child(2) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(2) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(20% 0, 16% 0, 75% 48%);
clip-path: polygon(20% 0, 16% 0, 75% 48%);
background: #4236c9;
-webkit-transform: rotate(273.6deg) translate(0, 70px);
transform: rotate(273.6deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(19):before, .circle:nth-child(2) .content:nth-child(19):after {
width: 37px;
height: 47px;
-webkit-clip-path: polygon(62% 0, 17% 0, 53% 48%);
clip-path: polygon(62% 0, 17% 0, 53% 48%);
}
.circle:nth-child(2) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #82748b;
}
.circle:nth-child(2) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 37% 0, 21% 48%);
clip-path: polygon(44% 0, 37% 0, 21% 48%);
background: #7a7986;
-webkit-transform: rotate(288deg) translate(0, 70px);
transform: rotate(288deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(20):before, .circle:nth-child(2) .content:nth-child(20):after {
width: 68px;
height: 2px;
-webkit-clip-path: polygon(27% 0, 52% 0, 67% 48%);
clip-path: polygon(27% 0, 52% 0, 67% 48%);
}
.circle:nth-child(2) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #941be4;
}
.circle:nth-child(2) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(23% 0, 41% 0, 78% 48%);
clip-path: polygon(23% 0, 41% 0, 78% 48%);
background: #382ad5;
-webkit-transform: rotate(302.4deg) translate(0, 70px);
transform: rotate(302.4deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(21):before, .circle:nth-child(2) .content:nth-child(21):after {
width: 54px;
height: 46px;
-webkit-clip-path: polygon(26% 0, 22% 0, 92% 48%);
clip-path: polygon(26% 0, 22% 0, 92% 48%);
}
.circle:nth-child(2) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #9512ed;
}
.circle:nth-child(2) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(41% 0, 38% 0, 71% 48%);
clip-path: polygon(41% 0, 38% 0, 71% 48%);
background: #797887;
-webkit-transform: rotate(316.8deg) translate(0, 70px);
transform: rotate(316.8deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(22):before, .circle:nth-child(2) .content:nth-child(22):after {
width: 70px;
height: 7px;
-webkit-clip-path: polygon(96% 0, 14% 0, 81% 48%);
clip-path: polygon(96% 0, 14% 0, 81% 48%);
}
.circle:nth-child(2) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #82718e;
}
.circle:nth-child(2) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(84% 0, 31% 0, 60% 48%);
clip-path: polygon(84% 0, 31% 0, 60% 48%);
background: #3d2fd0;
-webkit-transform: rotate(331.2deg) translate(0, 70px);
transform: rotate(331.2deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(23):before, .circle:nth-child(2) .content:nth-child(23):after {
width: 28px;
height: 32px;
-webkit-clip-path: polygon(85% 0, 28% 0, 14% 48%);
clip-path: polygon(85% 0, 28% 0, 14% 48%);
}
.circle:nth-child(2) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #817887;
}
.circle:nth-child(2) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 17% 0, 62% 48%);
clip-path: polygon(35% 0, 17% 0, 62% 48%);
background: #4033cc;
-webkit-transform: rotate(345.6deg) translate(0, 70px);
transform: rotate(345.6deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(24):before, .circle:nth-child(2) .content:nth-child(24):after {
width: 35px;
height: 38px;
-webkit-clip-path: polygon(32% 0, 56% 0, 81% 48%);
clip-path: polygon(32% 0, 56% 0, 81% 48%);
}
.circle:nth-child(2) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #8e39c6;
}
.circle:nth-child(2) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(18% 0, 23% 0, 17% 48%);
clip-path: polygon(18% 0, 23% 0, 17% 48%);
background: #645ea1;
-webkit-transform: rotate(360deg) translate(0, 70px);
transform: rotate(360deg) translate(0, 70px);
}
.circle:nth-child(2) .content:nth-child(25):before, .circle:nth-child(2) .content:nth-child(25):after {
width: 74px;
height: 3px;
-webkit-clip-path: polygon(45% 0, 87% 0, 17% 48%);
clip-path: polygon(45% 0, 87% 0, 17% 48%);
}
.circle:nth-child(2) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(2) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #9516e9;
}
.circle:nth-child(3) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 45px;
left: 9.66px;
-webkit-animation: rotate-reverse 8s linear infinite;
animation: rotate-reverse 8s linear infinite;
}
.circle:nth-child(3) .content {
position: absolute;
width: 109px;
height: 18px;
top: 40%;
left: 40%;
}
.circle:nth-child(3) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(68% 0, 25% 0, 30% 48%);
clip-path: polygon(68% 0, 25% 0, 30% 48%);
background: #5147b8;
-webkit-transform: rotate(14.4deg) translate(0, 80px);
transform: rotate(14.4deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(1):before, .circle:nth-child(3) .content:nth-child(1):after {
width: 45px;
height: 15px;
-webkit-clip-path: polygon(97% 0, 48% 0, 81% 48%);
clip-path: polygon(97% 0, 48% 0, 81% 48%);
}
.circle:nth-child(3) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #8a49b6;
}
.circle:nth-child(3) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(26% 0, 69% 0, 30% 48%);
clip-path: polygon(26% 0, 69% 0, 30% 48%);
background: #554db3;
-webkit-transform: rotate(28.8deg) translate(0, 80px);
transform: rotate(28.8deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(2):before, .circle:nth-child(3) .content:nth-child(2):after {
width: 82px;
height: 30px;
-webkit-clip-path: polygon(82% 0, 13% 0, 16% 48%);
clip-path: polygon(82% 0, 13% 0, 16% 48%);
}
.circle:nth-child(3) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #902ed1;
}
.circle:nth-child(3) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(56% 0, 14% 0, 55% 48%);
clip-path: polygon(56% 0, 14% 0, 55% 48%);
background: #625ca3;
-webkit-transform: rotate(43.2deg) translate(0, 80px);
transform: rotate(43.2deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(3):before, .circle:nth-child(3) .content:nth-child(3):after {
width: 90px;
height: 11px;
-webkit-clip-path: polygon(32% 0, 40% 0, 92% 48%);
clip-path: polygon(32% 0, 40% 0, 92% 48%);
}
.circle:nth-child(3) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #902ed1;
}
.circle:nth-child(3) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(30% 0, 32% 0, 58% 48%);
clip-path: polygon(30% 0, 32% 0, 58% 48%);
background: #5046b9;
-webkit-transform: rotate(57.6deg) translate(0, 80px);
transform: rotate(57.6deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(4):before, .circle:nth-child(3) .content:nth-child(4):after {
width: 86px;
height: 11px;
-webkit-clip-path: polygon(81% 0, 75% 0, 62% 48%);
clip-path: polygon(81% 0, 75% 0, 62% 48%);
}
.circle:nth-child(3) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #9126d9;
}
.circle:nth-child(3) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(72% 0, 68% 0, 70% 48%);
clip-path: polygon(72% 0, 68% 0, 70% 48%);
background: #7d7d82;
-webkit-transform: rotate(72deg) translate(0, 80px);
transform: rotate(72deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(5):before, .circle:nth-child(3) .content:nth-child(5):after {
width: 26px;
height: 39px;
-webkit-clip-path: polygon(40% 0, 2% 0, 61% 48%);
clip-path: polygon(40% 0, 2% 0, 61% 48%);
}
.circle:nth-child(3) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8a4ab5;
}
.circle:nth-child(3) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(92% 0, 30% 0, 37% 48%);
clip-path: polygon(92% 0, 30% 0, 37% 48%);
background: #3d2fd0;
-webkit-transform: rotate(86.4deg) translate(0, 80px);
transform: rotate(86.4deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(6):before, .circle:nth-child(3) .content:nth-child(6):after {
width: 98px;
height: 28px;
-webkit-clip-path: polygon(38% 0, 88% 0, 56% 48%);
clip-path: polygon(38% 0, 88% 0, 56% 48%);
}
.circle:nth-child(3) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(3) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(7% 0, 12% 0, 68% 48%);
clip-path: polygon(7% 0, 12% 0, 68% 48%);
background: #2716e9;
-webkit-transform: rotate(100.8deg) translate(0, 80px);
transform: rotate(100.8deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(7):before, .circle:nth-child(3) .content:nth-child(7):after {
width: 20px;
height: 17px;
-webkit-clip-path: polygon(31% 0, 70% 0, 15% 48%);
clip-path: polygon(31% 0, 70% 0, 15% 48%);
}
.circle:nth-child(3) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(3) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 100% 0, 19% 48%);
clip-path: polygon(60% 0, 100% 0, 19% 48%);
background: #2311ee;
-webkit-transform: rotate(115.2deg) translate(0, 80px);
transform: rotate(115.2deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(8):before, .circle:nth-child(3) .content:nth-child(8):after {
width: 57px;
height: 9px;
-webkit-clip-path: polygon(76% 0, 57% 0, 2% 48%);
clip-path: polygon(76% 0, 57% 0, 2% 48%);
}
.circle:nth-child(3) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #941be4;
}
.circle:nth-child(3) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(91% 0, 56% 0, 86% 48%);
clip-path: polygon(91% 0, 56% 0, 86% 48%);
background: #1e0af5;
-webkit-transform: rotate(129.6deg) translate(0, 80px);
transform: rotate(129.6deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(9):before, .circle:nth-child(3) .content:nth-child(9):after {
width: 95px;
height: 34px;
-webkit-clip-path: polygon(36% 0, 65% 0, 56% 48%);
clip-path: polygon(36% 0, 65% 0, 56% 48%);
}
.circle:nth-child(3) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #817788;
}
.circle:nth-child(3) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(89% 0, 84% 0, 52% 48%);
clip-path: polygon(89% 0, 84% 0, 52% 48%);
background: #382ad5;
-webkit-transform: rotate(144deg) translate(0, 80px);
transform: rotate(144deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(10):before, .circle:nth-child(3) .content:nth-child(10):after {
width: 17px;
height: 39px;
-webkit-clip-path: polygon(17% 0, 19% 0, 23% 48%);
clip-path: polygon(17% 0, 19% 0, 23% 48%);
}
.circle:nth-child(3) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #9221de;
}
.circle:nth-child(3) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(1% 0, 80% 0, 56% 48%);
clip-path: polygon(1% 0, 80% 0, 56% 48%);
background: #564eb1;
-webkit-transform: rotate(158.4deg) translate(0, 80px);
transform: rotate(158.4deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(11):before, .circle:nth-child(3) .content:nth-child(11):after {
width: 50px;
height: 30px;
-webkit-clip-path: polygon(95% 0, 21% 0, 70% 48%);
clip-path: polygon(95% 0, 21% 0, 70% 48%);
}
.circle:nth-child(3) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(3) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(66% 0, 24% 0, 96% 48%);
clip-path: polygon(66% 0, 24% 0, 96% 48%);
background: #3526d9;
-webkit-transform: rotate(172.8deg) translate(0, 80px);
transform: rotate(172.8deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(12):before, .circle:nth-child(3) .content:nth-child(12):after {
width: 2px;
height: 22px;
-webkit-clip-path: polygon(7% 0, 80% 0, 63% 48%);
clip-path: polygon(7% 0, 80% 0, 63% 48%);
}
.circle:nth-child(3) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #9224db;
}
.circle:nth-child(3) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 55% 0, 84% 48%);
clip-path: polygon(75% 0, 55% 0, 84% 48%);
background: #493ec1;
-webkit-transform: rotate(187.2deg) translate(0, 80px);
transform: rotate(187.2deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(13):before, .circle:nth-child(3) .content:nth-child(13):after {
width: 94px;
height: 32px;
-webkit-clip-path: polygon(7% 0, 83% 0, 22% 48%);
clip-path: polygon(7% 0, 83% 0, 22% 48%);
}
.circle:nth-child(3) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #9804fb;
}
.circle:nth-child(3) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(100% 0, 8% 0, 44% 48%);
clip-path: polygon(100% 0, 8% 0, 44% 48%);
background: #797887;
-webkit-transform: rotate(201.6deg) translate(0, 80px);
transform: rotate(201.6deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(14):before, .circle:nth-child(3) .content:nth-child(14):after {
width: 11px;
height: 14px;
-webkit-clip-path: polygon(97% 0, 82% 0, 88% 48%);
clip-path: polygon(97% 0, 82% 0, 88% 48%);
}
.circle:nth-child(3) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #836e91;
}
.circle:nth-child(3) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(66% 0, 7% 0, 46% 48%);
clip-path: polygon(66% 0, 7% 0, 46% 48%);
background: #7d7d82;
-webkit-transform: rotate(216deg) translate(0, 80px);
transform: rotate(216deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(15):before, .circle:nth-child(3) .content:nth-child(15):after {
width: 91px;
height: 28px;
-webkit-clip-path: polygon(31% 0, 11% 0, 74% 48%);
clip-path: polygon(31% 0, 11% 0, 74% 48%);
}
.circle:nth-child(3) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(3) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(41% 0, 97% 0, 19% 48%);
clip-path: polygon(41% 0, 97% 0, 19% 48%);
background: #3425da;
-webkit-transform: rotate(230.4deg) translate(0, 80px);
transform: rotate(230.4deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(16):before, .circle:nth-child(3) .content:nth-child(16):after {
width: 83px;
height: 19px;
-webkit-clip-path: polygon(38% 0, 7% 0, 4% 48%);
clip-path: polygon(38% 0, 7% 0, 4% 48%);
}
.circle:nth-child(3) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #846798;
}
.circle:nth-child(3) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 71% 0, 63% 48%);
clip-path: polygon(60% 0, 71% 0, 63% 48%);
background: #483dc2;
-webkit-transform: rotate(244.8deg) translate(0, 80px);
transform: rotate(244.8deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(17):before, .circle:nth-child(3) .content:nth-child(17):after {
width: 83px;
height: 13px;
-webkit-clip-path: polygon(89% 0, 33% 0, 34% 48%);
clip-path: polygon(89% 0, 33% 0, 34% 48%);
}
.circle:nth-child(3) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #8857a8;
}
.circle:nth-child(3) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(27% 0, 29% 0, 42% 48%);
clip-path: polygon(27% 0, 29% 0, 42% 48%);
background: #6b6798;
-webkit-transform: rotate(259.2deg) translate(0, 80px);
transform: rotate(259.2deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(18):before, .circle:nth-child(3) .content:nth-child(18):after {
width: 16px;
height: 45px;
-webkit-clip-path: polygon(8% 0, 86% 0, 75% 48%);
clip-path: polygon(8% 0, 86% 0, 75% 48%);
}
.circle:nth-child(3) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #9129d6;
}
.circle:nth-child(3) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(9% 0, 72% 0, 1% 48%);
clip-path: polygon(9% 0, 72% 0, 1% 48%);
background: #3222dd;
-webkit-transform: rotate(273.6deg) translate(0, 80px);
transform: rotate(273.6deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(19):before, .circle:nth-child(3) .content:nth-child(19):after {
width: 69px;
height: 45px;
-webkit-clip-path: polygon(8% 0, 87% 0, 80% 48%);
clip-path: polygon(8% 0, 87% 0, 80% 48%);
}
.circle:nth-child(3) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #807c83;
}
.circle:nth-child(3) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 39% 0, 82% 48%);
clip-path: polygon(35% 0, 39% 0, 82% 48%);
background: #2817e8;
-webkit-transform: rotate(288deg) translate(0, 80px);
transform: rotate(288deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(20):before, .circle:nth-child(3) .content:nth-child(20):after {
width: 39px;
height: 3px;
-webkit-clip-path: polygon(65% 0, 42% 0, 5% 48%);
clip-path: polygon(65% 0, 42% 0, 5% 48%);
}
.circle:nth-child(3) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #902bd4;
}
.circle:nth-child(3) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(70% 0, 7% 0, 71% 48%);
clip-path: polygon(70% 0, 7% 0, 71% 48%);
background: #3324db;
-webkit-transform: rotate(302.4deg) translate(0, 80px);
transform: rotate(302.4deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(21):before, .circle:nth-child(3) .content:nth-child(21):after {
width: 34px;
height: 4px;
-webkit-clip-path: polygon(96% 0, 35% 0, 82% 48%);
clip-path: polygon(96% 0, 35% 0, 82% 48%);
}
.circle:nth-child(3) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #9804fb;
}
.circle:nth-child(3) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 11% 0, 35% 48%);
clip-path: polygon(47% 0, 11% 0, 35% 48%);
background: #1f0bf4;
-webkit-transform: rotate(316.8deg) translate(0, 80px);
transform: rotate(316.8deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(22):before, .circle:nth-child(3) .content:nth-child(22):after {
width: 73px;
height: 29px;
-webkit-clip-path: polygon(39% 0, 93% 0, 30% 48%);
clip-path: polygon(39% 0, 93% 0, 30% 48%);
}
.circle:nth-child(3) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #9222dd;
}
.circle:nth-child(3) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(81% 0, 71% 0, 83% 48%);
clip-path: polygon(81% 0, 71% 0, 83% 48%);
background: #3729d6;
-webkit-transform: rotate(331.2deg) translate(0, 80px);
transform: rotate(331.2deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(23):before, .circle:nth-child(3) .content:nth-child(23):after {
width: 18px;
height: 47px;
-webkit-clip-path: polygon(94% 0, 10% 0, 48% 48%);
clip-path: polygon(94% 0, 10% 0, 48% 48%);
}
.circle:nth-child(3) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #960ef1;
}
.circle:nth-child(3) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(92% 0, 35% 0, 16% 48%);
clip-path: polygon(92% 0, 35% 0, 16% 48%);
background: #65609f;
-webkit-transform: rotate(345.6deg) translate(0, 80px);
transform: rotate(345.6deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(24):before, .circle:nth-child(3) .content:nth-child(24):after {
width: 7px;
height: 46px;
-webkit-clip-path: polygon(2% 0, 22% 0, 51% 48%);
clip-path: polygon(2% 0, 22% 0, 51% 48%);
}
.circle:nth-child(3) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #875ca3;
}
.circle:nth-child(3) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(16% 0, 63% 0, 37% 48%);
clip-path: polygon(16% 0, 63% 0, 37% 48%);
background: #4e44bb;
-webkit-transform: rotate(360deg) translate(0, 80px);
transform: rotate(360deg) translate(0, 80px);
}
.circle:nth-child(3) .content:nth-child(25):before, .circle:nth-child(3) .content:nth-child(25):after {
width: 90px;
height: 39px;
-webkit-clip-path: polygon(33% 0, 10% 0, 13% 48%);
clip-path: polygon(33% 0, 10% 0, 13% 48%);
}
.circle:nth-child(3) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(3) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(4) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 60px;
left: 12.88px;
-webkit-animation: rotate 14s linear infinite;
animation: rotate 14s linear infinite;
}
.circle:nth-child(4) .content {
position: absolute;
width: 124px;
height: 13px;
top: 40%;
left: 40%;
}
.circle:nth-child(4) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 89% 0, 44% 48%);
clip-path: polygon(60% 0, 89% 0, 44% 48%);
background: #6a6699;
-webkit-transform: rotate(14.4deg) translate(0, 90px);
transform: rotate(14.4deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(1):before, .circle:nth-child(4) .content:nth-child(1):after {
width: 23px;
height: 13px;
-webkit-clip-path: polygon(27% 0, 71% 0, 33% 48%);
clip-path: polygon(27% 0, 71% 0, 33% 48%);
}
.circle:nth-child(4) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(4) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(96% 0, 76% 0, 69% 48%);
clip-path: polygon(96% 0, 76% 0, 69% 48%);
background: #4a40bf;
-webkit-transform: rotate(28.8deg) translate(0, 90px);
transform: rotate(28.8deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(2):before, .circle:nth-child(4) .content:nth-child(2):after {
width: 95px;
height: 41px;
-webkit-clip-path: polygon(8% 0, 71% 0, 63% 48%);
clip-path: polygon(8% 0, 71% 0, 63% 48%);
}
.circle:nth-child(4) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #970af5;
}
.circle:nth-child(4) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(36% 0, 99% 0, 1% 48%);
clip-path: polygon(36% 0, 99% 0, 1% 48%);
background: #68639c;
-webkit-transform: rotate(43.2deg) translate(0, 90px);
transform: rotate(43.2deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(3):before, .circle:nth-child(4) .content:nth-child(3):after {
width: 81px;
height: 1px;
-webkit-clip-path: polygon(77% 0, 93% 0, 68% 48%);
clip-path: polygon(77% 0, 93% 0, 68% 48%);
}
.circle:nth-child(4) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #817a85;
}
.circle:nth-child(4) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(22% 0, 45% 0, 23% 48%);
clip-path: polygon(22% 0, 45% 0, 23% 48%);
background: #625ca3;
-webkit-transform: rotate(57.6deg) translate(0, 90px);
transform: rotate(57.6deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(4):before, .circle:nth-child(4) .content:nth-child(4):after {
width: 3px;
height: 46px;
-webkit-clip-path: polygon(85% 0, 30% 0, 25% 48%);
clip-path: polygon(85% 0, 30% 0, 25% 48%);
}
.circle:nth-child(4) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #8b44bb;
}
.circle:nth-child(4) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(57% 0, 86% 0, 12% 48%);
clip-path: polygon(57% 0, 86% 0, 12% 48%);
background: #3222dd;
-webkit-transform: rotate(72deg) translate(0, 90px);
transform: rotate(72deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(5):before, .circle:nth-child(4) .content:nth-child(5):after {
width: 94px;
height: 30px;
-webkit-clip-path: polygon(36% 0, 14% 0, 40% 48%);
clip-path: polygon(36% 0, 14% 0, 40% 48%);
}
.circle:nth-child(4) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #846798;
}
.circle:nth-child(4) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(34% 0, 44% 0, 76% 48%);
clip-path: polygon(34% 0, 44% 0, 76% 48%);
background: #5147b8;
-webkit-transform: rotate(86.4deg) translate(0, 90px);
transform: rotate(86.4deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(6):before, .circle:nth-child(4) .content:nth-child(6):after {
width: 20px;
height: 17px;
-webkit-clip-path: polygon(67% 0, 78% 0, 41% 48%);
clip-path: polygon(67% 0, 78% 0, 41% 48%);
}
.circle:nth-child(4) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(4) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(27% 0, 22% 0, 93% 48%);
clip-path: polygon(27% 0, 22% 0, 93% 48%);
background: #5e57a8;
-webkit-transform: rotate(100.8deg) translate(0, 90px);
transform: rotate(100.8deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(7):before, .circle:nth-child(4) .content:nth-child(7):after {
width: 14px;
height: 31px;
-webkit-clip-path: polygon(19% 0, 34% 0, 28% 48%);
clip-path: polygon(19% 0, 34% 0, 28% 48%);
}
.circle:nth-child(4) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #941ae6;
}
.circle:nth-child(4) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(87% 0, 54% 0, 79% 48%);
clip-path: polygon(87% 0, 54% 0, 79% 48%);
background: #544bb4;
-webkit-transform: rotate(115.2deg) translate(0, 90px);
transform: rotate(115.2deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(8):before, .circle:nth-child(4) .content:nth-child(8):after {
width: 35px;
height: 41px;
-webkit-clip-path: polygon(24% 0, 31% 0, 18% 48%);
clip-path: polygon(24% 0, 31% 0, 18% 48%);
}
.circle:nth-child(4) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(4) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(3% 0, 23% 0, 35% 48%);
clip-path: polygon(3% 0, 23% 0, 35% 48%);
background: #5e57a8;
-webkit-transform: rotate(129.6deg) translate(0, 90px);
transform: rotate(129.6deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(9):before, .circle:nth-child(4) .content:nth-child(9):after {
width: 12px;
height: 47px;
-webkit-clip-path: polygon(61% 0, 10% 0, 4% 48%);
clip-path: polygon(61% 0, 10% 0, 4% 48%);
}
.circle:nth-child(4) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #865ea1;
}
.circle:nth-child(4) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 26% 0, 5% 48%);
clip-path: polygon(90% 0, 26% 0, 5% 48%);
background: #6b6798;
-webkit-transform: rotate(144deg) translate(0, 90px);
transform: rotate(144deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(10):before, .circle:nth-child(4) .content:nth-child(10):after {
width: 19px;
height: 26px;
-webkit-clip-path: polygon(48% 0, 36% 0, 84% 48%);
clip-path: polygon(48% 0, 36% 0, 84% 48%);
}
.circle:nth-child(4) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #8d3dc2;
}
.circle:nth-child(4) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(91% 0, 51% 0, 53% 48%);
clip-path: polygon(91% 0, 51% 0, 53% 48%);
background: #6d6a95;
-webkit-transform: rotate(158.4deg) translate(0, 90px);
transform: rotate(158.4deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(11):before, .circle:nth-child(4) .content:nth-child(11):after {
width: 90px;
height: 34px;
-webkit-clip-path: polygon(19% 0, 12% 0, 27% 48%);
clip-path: polygon(19% 0, 12% 0, 27% 48%);
}
.circle:nth-child(4) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #846996;
}
.circle:nth-child(4) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(14% 0, 78% 0, 75% 48%);
clip-path: polygon(14% 0, 78% 0, 75% 48%);
background: #382ad5;
-webkit-transform: rotate(172.8deg) translate(0, 90px);
transform: rotate(172.8deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(12):before, .circle:nth-child(4) .content:nth-child(12):after {
width: 29px;
height: 48px;
-webkit-clip-path: polygon(69% 0, 96% 0, 65% 48%);
clip-path: polygon(69% 0, 96% 0, 65% 48%);
}
.circle:nth-child(4) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #8a4db3;
}
.circle:nth-child(4) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(48% 0, 22% 0, 13% 48%);
clip-path: polygon(48% 0, 22% 0, 13% 48%);
background: #65609f;
-webkit-transform: rotate(187.2deg) translate(0, 90px);
transform: rotate(187.2deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(13):before, .circle:nth-child(4) .content:nth-child(13):after {
width: 24px;
height: 9px;
-webkit-clip-path: polygon(39% 0, 35% 0, 84% 48%);
clip-path: polygon(39% 0, 35% 0, 84% 48%);
}
.circle:nth-child(4) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #8f32cd;
}
.circle:nth-child(4) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(59% 0, 1% 0, 21% 48%);
clip-path: polygon(59% 0, 1% 0, 21% 48%);
background: #3f32cd;
-webkit-transform: rotate(201.6deg) translate(0, 90px);
transform: rotate(201.6deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(14):before, .circle:nth-child(4) .content:nth-child(14):after {
width: 97px;
height: 30px;
-webkit-clip-path: polygon(38% 0, 80% 0, 99% 48%);
clip-path: polygon(38% 0, 80% 0, 99% 48%);
}
.circle:nth-child(4) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #9221de;
}
.circle:nth-child(4) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 7% 0, 12% 48%);
clip-path: polygon(90% 0, 7% 0, 12% 48%);
background: #463bc4;
-webkit-transform: rotate(216deg) translate(0, 90px);
transform: rotate(216deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(15):before, .circle:nth-child(4) .content:nth-child(15):after {
width: 29px;
height: 13px;
-webkit-clip-path: polygon(93% 0, 17% 0, 89% 48%);
clip-path: polygon(93% 0, 17% 0, 89% 48%);
}
.circle:nth-child(4) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #8c41be;
}
.circle:nth-child(4) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 74% 0, 74% 48%);
clip-path: polygon(47% 0, 74% 0, 74% 48%);
background: #3121de;
-webkit-transform: rotate(230.4deg) translate(0, 90px);
transform: rotate(230.4deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(16):before, .circle:nth-child(4) .content:nth-child(16):after {
width: 96px;
height: 17px;
-webkit-clip-path: polygon(62% 0, 24% 0, 53% 48%);
clip-path: polygon(62% 0, 24% 0, 53% 48%);
}
.circle:nth-child(4) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #931fe0;
}
.circle:nth-child(4) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(64% 0, 36% 0, 40% 48%);
clip-path: polygon(64% 0, 36% 0, 40% 48%);
background: #463bc4;
-webkit-transform: rotate(244.8deg) translate(0, 90px);
transform: rotate(244.8deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(17):before, .circle:nth-child(4) .content:nth-child(17):after {
width: 92px;
height: 5px;
-webkit-clip-path: polygon(4% 0, 47% 0, 9% 48%);
clip-path: polygon(4% 0, 47% 0, 9% 48%);
}
.circle:nth-child(4) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #9320df;
}
.circle:nth-child(4) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(18% 0, 23% 0, 22% 48%);
clip-path: polygon(18% 0, 23% 0, 22% 48%);
background: #2716e9;
-webkit-transform: rotate(259.2deg) translate(0, 90px);
transform: rotate(259.2deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(18):before, .circle:nth-child(4) .content:nth-child(18):after {
width: 51px;
height: 38px;
-webkit-clip-path: polygon(68% 0, 2% 0, 38% 48%);
clip-path: polygon(68% 0, 2% 0, 38% 48%);
}
.circle:nth-child(4) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #9128d7;
}
.circle:nth-child(4) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(66% 0, 4% 0, 78% 48%);
clip-path: polygon(66% 0, 4% 0, 78% 48%);
background: #3729d6;
-webkit-transform: rotate(273.6deg) translate(0, 90px);
transform: rotate(273.6deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(19):before, .circle:nth-child(4) .content:nth-child(19):after {
width: 97px;
height: 47px;
-webkit-clip-path: polygon(86% 0, 4% 0, 2% 48%);
clip-path: polygon(86% 0, 4% 0, 2% 48%);
}
.circle:nth-child(4) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(4) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(16% 0, 78% 0, 94% 48%);
clip-path: polygon(16% 0, 78% 0, 94% 48%);
background: #6c6996;
-webkit-transform: rotate(288deg) translate(0, 90px);
transform: rotate(288deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(20):before, .circle:nth-child(4) .content:nth-child(20):after {
width: 45px;
height: 31px;
-webkit-clip-path: polygon(72% 0, 77% 0, 43% 48%);
clip-path: polygon(72% 0, 77% 0, 43% 48%);
}
.circle:nth-child(4) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #9804fb;
}
.circle:nth-child(4) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(39% 0, 11% 0, 1% 48%);
clip-path: polygon(39% 0, 11% 0, 1% 48%);
background: #67629d;
-webkit-transform: rotate(302.4deg) translate(0, 90px);
transform: rotate(302.4deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(21):before, .circle:nth-child(4) .content:nth-child(21):after {
width: 57px;
height: 20px;
-webkit-clip-path: polygon(36% 0, 99% 0, 82% 48%);
clip-path: polygon(36% 0, 99% 0, 82% 48%);
}
.circle:nth-child(4) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #865da2;
}
.circle:nth-child(4) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(99% 0, 18% 0, 80% 48%);
clip-path: polygon(99% 0, 18% 0, 80% 48%);
background: #66619e;
-webkit-transform: rotate(316.8deg) translate(0, 90px);
transform: rotate(316.8deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(22):before, .circle:nth-child(4) .content:nth-child(22):after {
width: 88px;
height: 41px;
-webkit-clip-path: polygon(97% 0, 29% 0, 44% 48%);
clip-path: polygon(97% 0, 29% 0, 44% 48%);
}
.circle:nth-child(4) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #9512ed;
}
.circle:nth-child(4) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(20% 0, 80% 0, 10% 48%);
clip-path: polygon(20% 0, 80% 0, 10% 48%);
background: #7a7986;
-webkit-transform: rotate(331.2deg) translate(0, 90px);
transform: rotate(331.2deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(23):before, .circle:nth-child(4) .content:nth-child(23):after {
width: 66px;
height: 1px;
-webkit-clip-path: polygon(35% 0, 48% 0, 33% 48%);
clip-path: polygon(35% 0, 48% 0, 33% 48%);
}
.circle:nth-child(4) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #85659a;
}
.circle:nth-child(4) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(31% 0, 97% 0, 95% 48%);
clip-path: polygon(31% 0, 97% 0, 95% 48%);
background: #220ff0;
-webkit-transform: rotate(345.6deg) translate(0, 90px);
transform: rotate(345.6deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(24):before, .circle:nth-child(4) .content:nth-child(24):after {
width: 23px;
height: 34px;
-webkit-clip-path: polygon(77% 0, 68% 0, 18% 48%);
clip-path: polygon(77% 0, 68% 0, 18% 48%);
}
.circle:nth-child(4) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #817986;
}
.circle:nth-child(4) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(24% 0, 13% 0, 10% 48%);
clip-path: polygon(24% 0, 13% 0, 10% 48%);
background: #73708f;
-webkit-transform: rotate(360deg) translate(0, 90px);
transform: rotate(360deg) translate(0, 90px);
}
.circle:nth-child(4) .content:nth-child(25):before, .circle:nth-child(4) .content:nth-child(25):after {
width: 46px;
height: 3px;
-webkit-clip-path: polygon(62% 0, 28% 0, 82% 48%);
clip-path: polygon(62% 0, 28% 0, 82% 48%);
}
.circle:nth-child(4) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(4) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #8857a8;
}
.circle:nth-child(5) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 75px;
left: 16.1px;
-webkit-animation: rotate 8s linear infinite;
animation: rotate 8s linear infinite;
}
.circle:nth-child(5) .content {
position: absolute;
width: 106px;
height: 6px;
top: 40%;
left: 40%;
}
.circle:nth-child(5) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(55% 0, 7% 0, 40% 48%);
clip-path: polygon(55% 0, 7% 0, 40% 48%);
background: #625ca3;
-webkit-transform: rotate(14.4deg) translate(0, 100px);
transform: rotate(14.4deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(1):before, .circle:nth-child(5) .content:nth-child(1):after {
width: 97px;
height: 31px;
-webkit-clip-path: polygon(60% 0, 63% 0, 65% 48%);
clip-path: polygon(60% 0, 63% 0, 65% 48%);
}
.circle:nth-child(5) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #970af5;
}
.circle:nth-child(5) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(67% 0, 37% 0, 4% 48%);
clip-path: polygon(67% 0, 37% 0, 4% 48%);
background: #5952ad;
-webkit-transform: rotate(28.8deg) translate(0, 100px);
transform: rotate(28.8deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(2):before, .circle:nth-child(5) .content:nth-child(2):after {
width: 15px;
height: 29px;
-webkit-clip-path: polygon(64% 0, 69% 0, 90% 48%);
clip-path: polygon(64% 0, 69% 0, 90% 48%);
}
.circle:nth-child(5) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #8c40bf;
}
.circle:nth-child(5) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 41% 0, 22% 48%);
clip-path: polygon(85% 0, 41% 0, 22% 48%);
background: #3526d9;
-webkit-transform: rotate(43.2deg) translate(0, 100px);
transform: rotate(43.2deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(3):before, .circle:nth-child(5) .content:nth-child(3):after {
width: 37px;
height: 37px;
-webkit-clip-path: polygon(18% 0, 85% 0, 40% 48%);
clip-path: polygon(18% 0, 85% 0, 40% 48%);
}
.circle:nth-child(5) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(5) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(29% 0, 51% 0, 94% 48%);
clip-path: polygon(29% 0, 51% 0, 94% 48%);
background: #5952ad;
-webkit-transform: rotate(57.6deg) translate(0, 100px);
transform: rotate(57.6deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(4):before, .circle:nth-child(5) .content:nth-child(4):after {
width: 80px;
height: 5px;
-webkit-clip-path: polygon(16% 0, 54% 0, 17% 48%);
clip-path: polygon(16% 0, 54% 0, 17% 48%);
}
.circle:nth-child(5) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #931fe0;
}
.circle:nth-child(5) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(42% 0, 71% 0, 86% 48%);
clip-path: polygon(42% 0, 71% 0, 86% 48%);
background: #4438c7;
-webkit-transform: rotate(72deg) translate(0, 100px);
transform: rotate(72deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(5):before, .circle:nth-child(5) .content:nth-child(5):after {
width: 6px;
height: 21px;
-webkit-clip-path: polygon(33% 0, 56% 0, 47% 48%);
clip-path: polygon(33% 0, 56% 0, 47% 48%);
}
.circle:nth-child(5) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(5) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(45% 0, 88% 0, 52% 48%);
clip-path: polygon(45% 0, 88% 0, 52% 48%);
background: #6f6b94;
-webkit-transform: rotate(86.4deg) translate(0, 100px);
transform: rotate(86.4deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(6):before, .circle:nth-child(5) .content:nth-child(6):after {
width: 33px;
height: 30px;
-webkit-clip-path: polygon(5% 0, 4% 0, 14% 48%);
clip-path: polygon(5% 0, 4% 0, 14% 48%);
}
.circle:nth-child(5) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #836c93;
}
.circle:nth-child(5) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(100% 0, 100% 0, 62% 48%);
clip-path: polygon(100% 0, 100% 0, 62% 48%);
background: #4438c7;
-webkit-transform: rotate(100.8deg) translate(0, 100px);
transform: rotate(100.8deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(7):before, .circle:nth-child(5) .content:nth-child(7):after {
width: 55px;
height: 38px;
-webkit-clip-path: polygon(40% 0, 32% 0, 3% 48%);
clip-path: polygon(40% 0, 32% 0, 3% 48%);
}
.circle:nth-child(5) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #836c93;
}
.circle:nth-child(5) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(65% 0, 50% 0, 1% 48%);
clip-path: polygon(65% 0, 50% 0, 1% 48%);
background: #625ca3;
-webkit-transform: rotate(115.2deg) translate(0, 100px);
transform: rotate(115.2deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(8):before, .circle:nth-child(5) .content:nth-child(8):after {
width: 35px;
height: 45px;
-webkit-clip-path: polygon(74% 0, 14% 0, 75% 48%);
clip-path: polygon(74% 0, 14% 0, 75% 48%);
}
.circle:nth-child(5) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #865da2;
}
.circle:nth-child(5) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(81% 0, 77% 0, 4% 48%);
clip-path: polygon(81% 0, 77% 0, 4% 48%);
background: #3425da;
-webkit-transform: rotate(129.6deg) translate(0, 100px);
transform: rotate(129.6deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(9):before, .circle:nth-child(5) .content:nth-child(9):after {
width: 98px;
height: 26px;
-webkit-clip-path: polygon(4% 0, 14% 0, 39% 48%);
clip-path: polygon(4% 0, 14% 0, 39% 48%);
}
.circle:nth-child(5) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #960ff0;
}
.circle:nth-child(5) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 12% 0, 52% 48%);
clip-path: polygon(60% 0, 12% 0, 52% 48%);
background: #797887;
-webkit-transform: rotate(144deg) translate(0, 100px);
transform: rotate(144deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(10):before, .circle:nth-child(5) .content:nth-child(10):after {
width: 1px;
height: 32px;
-webkit-clip-path: polygon(82% 0, 27% 0, 15% 48%);
clip-path: polygon(82% 0, 27% 0, 15% 48%);
}
.circle:nth-child(5) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #817788;
}
.circle:nth-child(5) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(61% 0, 74% 0, 91% 48%);
clip-path: polygon(61% 0, 74% 0, 91% 48%);
background: #2f1fe0;
-webkit-transform: rotate(158.4deg) translate(0, 100px);
transform: rotate(158.4deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(11):before, .circle:nth-child(5) .content:nth-child(11):after {
width: 62px;
height: 36px;
-webkit-clip-path: polygon(76% 0, 1% 0, 68% 48%);
clip-path: polygon(76% 0, 1% 0, 68% 48%);
}
.circle:nth-child(5) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #9513ec;
}
.circle:nth-child(5) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 36% 0, 10% 48%);
clip-path: polygon(85% 0, 36% 0, 10% 48%);
background: #68639c;
-webkit-transform: rotate(172.8deg) translate(0, 100px);
transform: rotate(172.8deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(12):before, .circle:nth-child(5) .content:nth-child(12):after {
width: 74px;
height: 25px;
-webkit-clip-path: polygon(51% 0, 48% 0, 7% 48%);
clip-path: polygon(51% 0, 48% 0, 7% 48%);
}
.circle:nth-child(5) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #9900ff;
}
.circle:nth-child(5) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(61% 0, 53% 0, 99% 48%);
clip-path: polygon(61% 0, 53% 0, 99% 48%);
background: #4033cc;
-webkit-transform: rotate(187.2deg) translate(0, 100px);
transform: rotate(187.2deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(13):before, .circle:nth-child(5) .content:nth-child(13):after {
width: 47px;
height: 24px;
-webkit-clip-path: polygon(67% 0, 68% 0, 50% 48%);
clip-path: polygon(67% 0, 68% 0, 50% 48%);
}
.circle:nth-child(5) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #9516e9;
}
.circle:nth-child(5) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(73% 0, 52% 0, 42% 48%);
clip-path: polygon(73% 0, 52% 0, 42% 48%);
background: #6059a6;
-webkit-transform: rotate(201.6deg) translate(0, 100px);
transform: rotate(201.6deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(14):before, .circle:nth-child(5) .content:nth-child(14):after {
width: 100px;
height: 21px;
-webkit-clip-path: polygon(73% 0, 34% 0, 69% 48%);
clip-path: polygon(73% 0, 34% 0, 69% 48%);
}
.circle:nth-child(5) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #9224db;
}
.circle:nth-child(5) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(40% 0, 64% 0, 24% 48%);
clip-path: polygon(40% 0, 64% 0, 24% 48%);
background: #6059a6;
-webkit-transform: rotate(216deg) translate(0, 100px);
transform: rotate(216deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(15):before, .circle:nth-child(5) .content:nth-child(15):after {
width: 43px;
height: 14px;
-webkit-clip-path: polygon(35% 0, 61% 0, 74% 48%);
clip-path: polygon(35% 0, 61% 0, 74% 48%);
}
.circle:nth-child(5) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #902bd4;
}
.circle:nth-child(5) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 31% 0, 63% 48%);
clip-path: polygon(35% 0, 31% 0, 63% 48%);
background: #625ca3;
-webkit-transform: rotate(230.4deg) translate(0, 100px);
transform: rotate(230.4deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(16):before, .circle:nth-child(5) .content:nth-child(16):after {
width: 64px;
height: 23px;
-webkit-clip-path: polygon(66% 0, 1% 0, 39% 48%);
clip-path: polygon(66% 0, 1% 0, 39% 48%);
}
.circle:nth-child(5) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #970af5;
}
.circle:nth-child(5) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(26% 0, 48% 0, 3% 48%);
clip-path: polygon(26% 0, 48% 0, 3% 48%);
background: #2b1ae6;
-webkit-transform: rotate(244.8deg) translate(0, 100px);
transform: rotate(244.8deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(17):before, .circle:nth-child(5) .content:nth-child(17):after {
width: 42px;
height: 32px;
-webkit-clip-path: polygon(6% 0, 7% 0, 8% 48%);
clip-path: polygon(6% 0, 7% 0, 8% 48%);
}
.circle:nth-child(5) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #836f90;
}
.circle:nth-child(5) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(30% 0, 68% 0, 68% 48%);
clip-path: polygon(30% 0, 68% 0, 68% 48%);
background: #564eb1;
-webkit-transform: rotate(259.2deg) translate(0, 100px);
transform: rotate(259.2deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(18):before, .circle:nth-child(5) .content:nth-child(18):after {
width: 22px;
height: 45px;
-webkit-clip-path: polygon(99% 0, 42% 0, 3% 48%);
clip-path: polygon(99% 0, 42% 0, 3% 48%);
}
.circle:nth-child(5) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #8b45ba;
}
.circle:nth-child(5) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(1% 0, 38% 0, 47% 48%);
clip-path: polygon(1% 0, 38% 0, 47% 48%);
background: #65609f;
-webkit-transform: rotate(273.6deg) translate(0, 100px);
transform: rotate(273.6deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(19):before, .circle:nth-child(5) .content:nth-child(19):after {
width: 1px;
height: 49px;
-webkit-clip-path: polygon(85% 0, 69% 0, 43% 48%);
clip-path: polygon(85% 0, 69% 0, 43% 48%);
}
.circle:nth-child(5) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(5) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(3% 0, 80% 0, 49% 48%);
clip-path: polygon(3% 0, 80% 0, 49% 48%);
background: #4337c8;
-webkit-transform: rotate(288deg) translate(0, 100px);
transform: rotate(288deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(20):before, .circle:nth-child(5) .content:nth-child(20):after {
width: 17px;
height: 39px;
-webkit-clip-path: polygon(51% 0, 36% 0, 77% 48%);
clip-path: polygon(51% 0, 36% 0, 77% 48%);
}
.circle:nth-child(5) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #8e36c9;
}
.circle:nth-child(5) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(79% 0, 98% 0, 5% 48%);
clip-path: polygon(79% 0, 98% 0, 5% 48%);
background: #2716e9;
-webkit-transform: rotate(302.4deg) translate(0, 100px);
transform: rotate(302.4deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(21):before, .circle:nth-child(5) .content:nth-child(21):after {
width: 86px;
height: 2px;
-webkit-clip-path: polygon(91% 0, 89% 0, 56% 48%);
clip-path: polygon(91% 0, 89% 0, 56% 48%);
}
.circle:nth-child(5) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #9806f9;
}
.circle:nth-child(5) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(64% 0, 14% 0, 77% 48%);
clip-path: polygon(64% 0, 14% 0, 77% 48%);
background: #1c08f7;
-webkit-transform: rotate(316.8deg) translate(0, 100px);
transform: rotate(316.8deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(22):before, .circle:nth-child(5) .content:nth-child(22):after {
width: 23px;
height: 35px;
-webkit-clip-path: polygon(22% 0, 68% 0, 91% 48%);
clip-path: polygon(22% 0, 68% 0, 91% 48%);
}
.circle:nth-child(5) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #846a95;
}
.circle:nth-child(5) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(36% 0, 52% 0, 66% 48%);
clip-path: polygon(36% 0, 52% 0, 66% 48%);
background: #74718e;
-webkit-transform: rotate(331.2deg) translate(0, 100px);
transform: rotate(331.2deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(23):before, .circle:nth-child(5) .content:nth-child(23):after {
width: 3px;
height: 39px;
-webkit-clip-path: polygon(92% 0, 38% 0, 26% 48%);
clip-path: polygon(92% 0, 38% 0, 26% 48%);
}
.circle:nth-child(5) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #8a4ab5;
}
.circle:nth-child(5) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(45% 0, 83% 0, 99% 48%);
clip-path: polygon(45% 0, 83% 0, 99% 48%);
background: #2b1ae6;
-webkit-transform: rotate(345.6deg) translate(0, 100px);
transform: rotate(345.6deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(24):before, .circle:nth-child(5) .content:nth-child(24):after {
width: 37px;
height: 36px;
-webkit-clip-path: polygon(78% 0, 2% 0, 10% 48%);
clip-path: polygon(78% 0, 2% 0, 10% 48%);
}
.circle:nth-child(5) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #902ed1;
}
.circle:nth-child(5) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 88% 0, 34% 48%);
clip-path: polygon(75% 0, 88% 0, 34% 48%);
background: #3f32cd;
-webkit-transform: rotate(360deg) translate(0, 100px);
transform: rotate(360deg) translate(0, 100px);
}
.circle:nth-child(5) .content:nth-child(25):before, .circle:nth-child(5) .content:nth-child(25):after {
width: 77px;
height: 12px;
-webkit-clip-path: polygon(23% 0, 2% 0, 5% 48%);
clip-path: polygon(23% 0, 2% 0, 5% 48%);
}
.circle:nth-child(5) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(5) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #9129d6;
}
.circle:nth-child(6) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 90px;
left: 19.32px;
-webkit-animation: rotate-reverse 8s linear infinite;
animation: rotate-reverse 8s linear infinite;
}
.circle:nth-child(6) .content {
position: absolute;
width: 38px;
height: 14px;
top: 40%;
left: 40%;
}
.circle:nth-child(6) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(74% 0, 23% 0, 50% 48%);
clip-path: polygon(74% 0, 23% 0, 50% 48%);
background: #4539c6;
-webkit-transform: rotate(14.4deg) translate(0, 110px);
transform: rotate(14.4deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(1):before, .circle:nth-child(6) .content:nth-child(1):after {
width: 11px;
height: 21px;
-webkit-clip-path: polygon(12% 0, 33% 0, 98% 48%);
clip-path: polygon(12% 0, 33% 0, 98% 48%);
}
.circle:nth-child(6) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #836f90;
}
.circle:nth-child(6) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(37% 0, 32% 0, 95% 48%);
clip-path: polygon(37% 0, 32% 0, 95% 48%);
background: #473cc3;
-webkit-transform: rotate(28.8deg) translate(0, 110px);
transform: rotate(28.8deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(2):before, .circle:nth-child(6) .content:nth-child(2):after {
width: 8px;
height: 39px;
-webkit-clip-path: polygon(54% 0, 53% 0, 37% 48%);
clip-path: polygon(54% 0, 53% 0, 37% 48%);
}
.circle:nth-child(6) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #846996;
}
.circle:nth-child(6) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(45% 0, 61% 0, 44% 48%);
clip-path: polygon(45% 0, 61% 0, 44% 48%);
background: #554db3;
-webkit-transform: rotate(43.2deg) translate(0, 110px);
transform: rotate(43.2deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(3):before, .circle:nth-child(6) .content:nth-child(3):after {
width: 49px;
height: 50px;
-webkit-clip-path: polygon(56% 0, 6% 0, 19% 48%);
clip-path: polygon(56% 0, 6% 0, 19% 48%);
}
.circle:nth-child(6) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #836f90;
}
.circle:nth-child(6) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(1% 0, 91% 0, 99% 48%);
clip-path: polygon(1% 0, 91% 0, 99% 48%);
background: #3d2fd0;
-webkit-transform: rotate(57.6deg) translate(0, 110px);
transform: rotate(57.6deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(4):before, .circle:nth-child(6) .content:nth-child(4):after {
width: 14px;
height: 14px;
-webkit-clip-path: polygon(94% 0, 100% 0, 27% 48%);
clip-path: polygon(94% 0, 100% 0, 27% 48%);
}
.circle:nth-child(6) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #8e36c9;
}
.circle:nth-child(6) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(56% 0, 45% 0, 88% 48%);
clip-path: polygon(56% 0, 45% 0, 88% 48%);
background: #716e91;
-webkit-transform: rotate(72deg) translate(0, 110px);
transform: rotate(72deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(5):before, .circle:nth-child(6) .content:nth-child(5):after {
width: 3px;
height: 9px;
-webkit-clip-path: polygon(13% 0, 87% 0, 69% 48%);
clip-path: polygon(13% 0, 87% 0, 69% 48%);
}
.circle:nth-child(6) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #902dd2;
}
.circle:nth-child(6) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(41% 0, 44% 0, 65% 48%);
clip-path: polygon(41% 0, 44% 0, 65% 48%);
background: #5c55aa;
-webkit-transform: rotate(86.4deg) translate(0, 110px);
transform: rotate(86.4deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(6):before, .circle:nth-child(6) .content:nth-child(6):after {
width: 73px;
height: 13px;
-webkit-clip-path: polygon(83% 0, 39% 0, 38% 48%);
clip-path: polygon(83% 0, 39% 0, 38% 48%);
}
.circle:nth-child(6) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #82738c;
}
.circle:nth-child(6) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 44% 0, 82% 48%);
clip-path: polygon(62% 0, 44% 0, 82% 48%);
background: #3e30cf;
-webkit-transform: rotate(100.8deg) translate(0, 110px);
transform: rotate(100.8deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(7):before, .circle:nth-child(6) .content:nth-child(7):after {
width: 94px;
height: 37px;
-webkit-clip-path: polygon(94% 0, 6% 0, 76% 48%);
clip-path: polygon(94% 0, 6% 0, 76% 48%);
}
.circle:nth-child(6) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #865ea1;
}
.circle:nth-child(6) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(83% 0, 93% 0, 73% 48%);
clip-path: polygon(83% 0, 93% 0, 73% 48%);
background: #69659a;
-webkit-transform: rotate(115.2deg) translate(0, 110px);
transform: rotate(115.2deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(8):before, .circle:nth-child(6) .content:nth-child(8):after {
width: 67px;
height: 42px;
-webkit-clip-path: polygon(37% 0, 57% 0, 79% 48%);
clip-path: polygon(37% 0, 57% 0, 79% 48%);
}
.circle:nth-child(6) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #9513ec;
}
.circle:nth-child(6) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(82% 0, 98% 0, 94% 48%);
clip-path: polygon(82% 0, 98% 0, 94% 48%);
background: #1601fe;
-webkit-transform: rotate(129.6deg) translate(0, 110px);
transform: rotate(129.6deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(9):before, .circle:nth-child(6) .content:nth-child(9):after {
width: 38px;
height: 37px;
-webkit-clip-path: polygon(63% 0, 9% 0, 44% 48%);
clip-path: polygon(63% 0, 9% 0, 44% 48%);
}
.circle:nth-child(6) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #8759a6;
}
.circle:nth-child(6) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(3% 0, 24% 0, 16% 48%);
clip-path: polygon(3% 0, 24% 0, 16% 48%);
background: #645ea1;
-webkit-transform: rotate(144deg) translate(0, 110px);
transform: rotate(144deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(10):before, .circle:nth-child(6) .content:nth-child(10):after {
width: 47px;
height: 12px;
-webkit-clip-path: polygon(15% 0, 59% 0, 2% 48%);
clip-path: polygon(15% 0, 59% 0, 2% 48%);
}
.circle:nth-child(6) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #86609f;
}
.circle:nth-child(6) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(7% 0, 60% 0, 83% 48%);
clip-path: polygon(7% 0, 60% 0, 83% 48%);
background: #4b41be;
-webkit-transform: rotate(158.4deg) translate(0, 110px);
transform: rotate(158.4deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(11):before, .circle:nth-child(6) .content:nth-child(11):after {
width: 79px;
height: 5px;
-webkit-clip-path: polygon(72% 0, 3% 0, 75% 48%);
clip-path: polygon(72% 0, 3% 0, 75% 48%);
}
.circle:nth-child(6) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #9514eb;
}
.circle:nth-child(6) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(50% 0, 70% 0, 79% 48%);
clip-path: polygon(50% 0, 70% 0, 79% 48%);
background: #1703fc;
-webkit-transform: rotate(172.8deg) translate(0, 110px);
transform: rotate(172.8deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(12):before, .circle:nth-child(6) .content:nth-child(12):after {
width: 97px;
height: 44px;
-webkit-clip-path: polygon(3% 0, 70% 0, 29% 48%);
clip-path: polygon(3% 0, 70% 0, 29% 48%);
}
.circle:nth-child(6) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #846996;
}
.circle:nth-child(6) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(89% 0, 6% 0, 13% 48%);
clip-path: polygon(89% 0, 6% 0, 13% 48%);
background: #5046b9;
-webkit-transform: rotate(187.2deg) translate(0, 110px);
transform: rotate(187.2deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(13):before, .circle:nth-child(6) .content:nth-child(13):after {
width: 27px;
height: 27px;
-webkit-clip-path: polygon(9% 0, 88% 0, 51% 48%);
clip-path: polygon(9% 0, 88% 0, 51% 48%);
}
.circle:nth-child(6) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #8e37c8;
}
.circle:nth-child(6) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 51% 0, 64% 48%);
clip-path: polygon(90% 0, 51% 0, 64% 48%);
background: #7a7986;
-webkit-transform: rotate(201.6deg) translate(0, 110px);
transform: rotate(201.6deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(14):before, .circle:nth-child(6) .content:nth-child(14):after {
width: 25px;
height: 50px;
-webkit-clip-path: polygon(2% 0, 12% 0, 45% 48%);
clip-path: polygon(2% 0, 12% 0, 45% 48%);
}
.circle:nth-child(6) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #8c40bf;
}
.circle:nth-child(6) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 57% 0, 16% 48%);
clip-path: polygon(85% 0, 57% 0, 16% 48%);
background: #4d42bd;
-webkit-transform: rotate(216deg) translate(0, 110px);
transform: rotate(216deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(15):before, .circle:nth-child(6) .content:nth-child(15):after {
width: 96px;
height: 9px;
-webkit-clip-path: polygon(40% 0, 80% 0, 15% 48%);
clip-path: polygon(40% 0, 80% 0, 15% 48%);
}
.circle:nth-child(6) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #836c93;
}
.circle:nth-child(6) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(50% 0, 18% 0, 58% 48%);
clip-path: polygon(50% 0, 18% 0, 58% 48%);
background: #73708f;
-webkit-transform: rotate(230.4deg) translate(0, 110px);
transform: rotate(230.4deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(16):before, .circle:nth-child(6) .content:nth-child(16):after {
width: 51px;
height: 12px;
-webkit-clip-path: polygon(9% 0, 75% 0, 11% 48%);
clip-path: polygon(9% 0, 75% 0, 11% 48%);
}
.circle:nth-child(6) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #9513ec;
}
.circle:nth-child(6) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(64% 0, 54% 0, 69% 48%);
clip-path: polygon(64% 0, 54% 0, 69% 48%);
background: #797887;
-webkit-transform: rotate(244.8deg) translate(0, 110px);
transform: rotate(244.8deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(17):before, .circle:nth-child(6) .content:nth-child(17):after {
width: 6px;
height: 45px;
-webkit-clip-path: polygon(92% 0, 67% 0, 25% 48%);
clip-path: polygon(92% 0, 67% 0, 25% 48%);
}
.circle:nth-child(6) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #8d3ec1;
}
.circle:nth-child(6) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(27% 0, 58% 0, 76% 48%);
clip-path: polygon(27% 0, 58% 0, 76% 48%);
background: #463bc4;
-webkit-transform: rotate(259.2deg) translate(0, 110px);
transform: rotate(259.2deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(18):before, .circle:nth-child(6) .content:nth-child(18):after {
width: 28px;
height: 27px;
-webkit-clip-path: polygon(27% 0, 70% 0, 57% 48%);
clip-path: polygon(27% 0, 70% 0, 57% 48%);
}
.circle:nth-child(6) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #8853ac;
}
.circle:nth-child(6) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(20% 0, 63% 0, 98% 48%);
clip-path: polygon(20% 0, 63% 0, 98% 48%);
background: #1703fc;
-webkit-transform: rotate(273.6deg) translate(0, 110px);
transform: rotate(273.6deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(19):before, .circle:nth-child(6) .content:nth-child(19):after {
width: 1px;
height: 12px;
-webkit-clip-path: polygon(90% 0, 56% 0, 99% 48%);
clip-path: polygon(90% 0, 56% 0, 99% 48%);
}
.circle:nth-child(6) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #817a85;
}
.circle:nth-child(6) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 91% 0, 24% 48%);
clip-path: polygon(90% 0, 91% 0, 24% 48%);
background: #2e1de2;
-webkit-transform: rotate(288deg) translate(0, 110px);
transform: rotate(288deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(20):before, .circle:nth-child(6) .content:nth-child(20):after {
width: 5px;
height: 44px;
-webkit-clip-path: polygon(95% 0, 29% 0, 45% 48%);
clip-path: polygon(95% 0, 29% 0, 45% 48%);
}
.circle:nth-child(6) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #8950af;
}
.circle:nth-child(6) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(83% 0, 77% 0, 43% 48%);
clip-path: polygon(83% 0, 77% 0, 43% 48%);
background: #68639c;
-webkit-transform: rotate(302.4deg) translate(0, 110px);
transform: rotate(302.4deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(21):before, .circle:nth-child(6) .content:nth-child(21):after {
width: 69px;
height: 50px;
-webkit-clip-path: polygon(28% 0, 42% 0, 15% 48%);
clip-path: polygon(28% 0, 42% 0, 15% 48%);
}
.circle:nth-child(6) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(6) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(36% 0, 84% 0, 83% 48%);
clip-path: polygon(36% 0, 84% 0, 83% 48%);
background: #3729d6;
-webkit-transform: rotate(316.8deg) translate(0, 110px);
transform: rotate(316.8deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(22):before, .circle:nth-child(6) .content:nth-child(22):after {
width: 67px;
height: 46px;
-webkit-clip-path: polygon(48% 0, 55% 0, 33% 48%);
clip-path: polygon(48% 0, 55% 0, 33% 48%);
}
.circle:nth-child(6) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #9224db;
}
.circle:nth-child(6) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(50% 0, 96% 0, 78% 48%);
clip-path: polygon(50% 0, 96% 0, 78% 48%);
background: #3f32cd;
-webkit-transform: rotate(331.2deg) translate(0, 110px);
transform: rotate(331.2deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(23):before, .circle:nth-child(6) .content:nth-child(23):after {
width: 5px;
height: 4px;
-webkit-clip-path: polygon(3% 0, 18% 0, 96% 48%);
clip-path: polygon(3% 0, 18% 0, 96% 48%);
}
.circle:nth-child(6) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #86619e;
}
.circle:nth-child(6) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 85% 0, 20% 48%);
clip-path: polygon(62% 0, 85% 0, 20% 48%);
background: #7c7c83;
-webkit-transform: rotate(345.6deg) translate(0, 110px);
transform: rotate(345.6deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(24):before, .circle:nth-child(6) .content:nth-child(24):after {
width: 1px;
height: 32px;
-webkit-clip-path: polygon(60% 0, 76% 0, 26% 48%);
clip-path: polygon(60% 0, 76% 0, 26% 48%);
}
.circle:nth-child(6) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #856699;
}
.circle:nth-child(6) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(48% 0, 71% 0, 27% 48%);
clip-path: polygon(48% 0, 71% 0, 27% 48%);
background: #7c7c83;
-webkit-transform: rotate(360deg) translate(0, 110px);
transform: rotate(360deg) translate(0, 110px);
}
.circle:nth-child(6) .content:nth-child(25):before, .circle:nth-child(6) .content:nth-child(25):after {
width: 87px;
height: 45px;
-webkit-clip-path: polygon(26% 0, 61% 0, 55% 48%);
clip-path: polygon(26% 0, 61% 0, 55% 48%);
}
.circle:nth-child(6) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(6) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #82758a;
}
.circle:nth-child(7) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 105px;
left: 22.54px;
-webkit-animation: rotate 10s linear infinite;
animation: rotate 10s linear infinite;
}
.circle:nth-child(7) .content {
position: absolute;
width: 124px;
height: 45px;
top: 40%;
left: 40%;
}
.circle:nth-child(7) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(91% 0, 55% 0, 57% 48%);
clip-path: polygon(91% 0, 55% 0, 57% 48%);
background: #3628d7;
-webkit-transform: rotate(14.4deg) translate(0, 120px);
transform: rotate(14.4deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(1):before, .circle:nth-child(7) .content:nth-child(1):after {
width: 15px;
height: 8px;
-webkit-clip-path: polygon(5% 0, 36% 0, 1% 48%);
clip-path: polygon(5% 0, 36% 0, 1% 48%);
}
.circle:nth-child(7) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #8d3bc4;
}
.circle:nth-child(7) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(48% 0, 3% 0, 11% 48%);
clip-path: polygon(48% 0, 3% 0, 11% 48%);
background: #4438c7;
-webkit-transform: rotate(28.8deg) translate(0, 120px);
transform: rotate(28.8deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(2):before, .circle:nth-child(7) .content:nth-child(2):after {
width: 17px;
height: 49px;
-webkit-clip-path: polygon(84% 0, 7% 0, 95% 48%);
clip-path: polygon(84% 0, 7% 0, 95% 48%);
}
.circle:nth-child(7) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #85639c;
}
.circle:nth-child(7) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(15% 0, 93% 0, 2% 48%);
clip-path: polygon(15% 0, 93% 0, 2% 48%);
background: #615ba4;
-webkit-transform: rotate(43.2deg) translate(0, 120px);
transform: rotate(43.2deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(3):before, .circle:nth-child(7) .content:nth-child(3):after {
width: 18px;
height: 38px;
-webkit-clip-path: polygon(61% 0, 66% 0, 42% 48%);
clip-path: polygon(61% 0, 66% 0, 42% 48%);
}
.circle:nth-child(7) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #8b47b8;
}
.circle:nth-child(7) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(29% 0, 27% 0, 44% 48%);
clip-path: polygon(29% 0, 27% 0, 44% 48%);
background: #1b06f9;
-webkit-transform: rotate(57.6deg) translate(0, 120px);
transform: rotate(57.6deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(4):before, .circle:nth-child(7) .content:nth-child(4):after {
width: 32px;
height: 6px;
-webkit-clip-path: polygon(68% 0, 47% 0, 100% 48%);
clip-path: polygon(68% 0, 47% 0, 100% 48%);
}
.circle:nth-child(7) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #846798;
}
.circle:nth-child(7) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(68% 0, 32% 0, 42% 48%);
clip-path: polygon(68% 0, 32% 0, 42% 48%);
background: #1a05fa;
-webkit-transform: rotate(72deg) translate(0, 120px);
transform: rotate(72deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(5):before, .circle:nth-child(7) .content:nth-child(5):after {
width: 78px;
height: 19px;
-webkit-clip-path: polygon(47% 0, 70% 0, 93% 48%);
clip-path: polygon(47% 0, 70% 0, 93% 48%);
}
.circle:nth-child(7) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8c42bd;
}
.circle:nth-child(7) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(79% 0, 90% 0, 7% 48%);
clip-path: polygon(79% 0, 90% 0, 7% 48%);
background: #3729d6;
-webkit-transform: rotate(86.4deg) translate(0, 120px);
transform: rotate(86.4deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(6):before, .circle:nth-child(7) .content:nth-child(6):after {
width: 24px;
height: 18px;
-webkit-clip-path: polygon(39% 0, 4% 0, 44% 48%);
clip-path: polygon(39% 0, 4% 0, 44% 48%);
}
.circle:nth-child(7) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #8758a7;
}
.circle:nth-child(7) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(6% 0, 14% 0, 49% 48%);
clip-path: polygon(6% 0, 14% 0, 49% 48%);
background: #2817e8;
-webkit-transform: rotate(100.8deg) translate(0, 120px);
transform: rotate(100.8deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(7):before, .circle:nth-child(7) .content:nth-child(7):after {
width: 70px;
height: 40px;
-webkit-clip-path: polygon(65% 0, 79% 0, 42% 48%);
clip-path: polygon(65% 0, 79% 0, 42% 48%);
}
.circle:nth-child(7) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #8c42bd;
}
.circle:nth-child(7) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(57% 0, 24% 0, 28% 48%);
clip-path: polygon(57% 0, 24% 0, 28% 48%);
background: #5b54ab;
-webkit-transform: rotate(115.2deg) translate(0, 120px);
transform: rotate(115.2deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(8):before, .circle:nth-child(7) .content:nth-child(8):after {
width: 79px;
height: 6px;
-webkit-clip-path: polygon(89% 0, 32% 0, 25% 48%);
clip-path: polygon(89% 0, 32% 0, 25% 48%);
}
.circle:nth-child(7) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #8f34cb;
}
.circle:nth-child(7) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(29% 0, 9% 0, 76% 48%);
clip-path: polygon(29% 0, 9% 0, 76% 48%);
background: #463bc4;
-webkit-transform: rotate(129.6deg) translate(0, 120px);
transform: rotate(129.6deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(9):before, .circle:nth-child(7) .content:nth-child(9):after {
width: 91px;
height: 28px;
-webkit-clip-path: polygon(84% 0, 37% 0, 37% 48%);
clip-path: polygon(84% 0, 37% 0, 37% 48%);
}
.circle:nth-child(7) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #970af5;
}
.circle:nth-child(7) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(46% 0, 51% 0, 46% 48%);
clip-path: polygon(46% 0, 51% 0, 46% 48%);
background: #74718e;
-webkit-transform: rotate(144deg) translate(0, 120px);
transform: rotate(144deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(10):before, .circle:nth-child(7) .content:nth-child(10):after {
width: 72px;
height: 15px;
-webkit-clip-path: polygon(14% 0, 96% 0, 71% 48%);
clip-path: polygon(14% 0, 96% 0, 71% 48%);
}
.circle:nth-child(7) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(7) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(48% 0, 96% 0, 1% 48%);
clip-path: polygon(48% 0, 96% 0, 1% 48%);
background: #210ef1;
-webkit-transform: rotate(158.4deg) translate(0, 120px);
transform: rotate(158.4deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(11):before, .circle:nth-child(7) .content:nth-child(11):after {
width: 73px;
height: 15px;
-webkit-clip-path: polygon(18% 0, 77% 0, 86% 48%);
clip-path: polygon(18% 0, 77% 0, 86% 48%);
}
.circle:nth-child(7) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #865ea1;
}
.circle:nth-child(7) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(2% 0, 39% 0, 64% 48%);
clip-path: polygon(2% 0, 39% 0, 64% 48%);
background: #4236c9;
-webkit-transform: rotate(172.8deg) translate(0, 120px);
transform: rotate(172.8deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(12):before, .circle:nth-child(7) .content:nth-child(12):after {
width: 63px;
height: 14px;
-webkit-clip-path: polygon(66% 0, 75% 0, 12% 48%);
clip-path: polygon(66% 0, 75% 0, 12% 48%);
}
.circle:nth-child(7) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #960ef1;
}
.circle:nth-child(7) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(69% 0, 27% 0, 64% 48%);
clip-path: polygon(69% 0, 27% 0, 64% 48%);
background: #3324db;
-webkit-transform: rotate(187.2deg) translate(0, 120px);
transform: rotate(187.2deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(13):before, .circle:nth-child(7) .content:nth-child(13):after {
width: 84px;
height: 33px;
-webkit-clip-path: polygon(33% 0, 53% 0, 83% 48%);
clip-path: polygon(33% 0, 53% 0, 83% 48%);
}
.circle:nth-child(7) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(7) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(51% 0, 28% 0, 21% 48%);
clip-path: polygon(51% 0, 28% 0, 21% 48%);
background: #564eb1;
-webkit-transform: rotate(201.6deg) translate(0, 120px);
transform: rotate(201.6deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(14):before, .circle:nth-child(7) .content:nth-child(14):after {
width: 20px;
height: 9px;
-webkit-clip-path: polygon(89% 0, 86% 0, 44% 48%);
clip-path: polygon(89% 0, 86% 0, 44% 48%);
}
.circle:nth-child(7) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #86609f;
}
.circle:nth-child(7) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(95% 0, 34% 0, 62% 48%);
clip-path: polygon(95% 0, 34% 0, 62% 48%);
background: #2d1ce3;
-webkit-transform: rotate(216deg) translate(0, 120px);
transform: rotate(216deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(15):before, .circle:nth-child(7) .content:nth-child(15):after {
width: 43px;
height: 30px;
-webkit-clip-path: polygon(84% 0, 81% 0, 27% 48%);
clip-path: polygon(84% 0, 81% 0, 27% 48%);
}
.circle:nth-child(7) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #9221de;
}
.circle:nth-child(7) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(32% 0, 36% 0, 67% 48%);
clip-path: polygon(32% 0, 36% 0, 67% 48%);
background: #4d42bd;
-webkit-transform: rotate(230.4deg) translate(0, 120px);
transform: rotate(230.4deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(16):before, .circle:nth-child(7) .content:nth-child(16):after {
width: 100px;
height: 29px;
-webkit-clip-path: polygon(19% 0, 86% 0, 41% 48%);
clip-path: polygon(19% 0, 86% 0, 41% 48%);
}
.circle:nth-child(7) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #9222dd;
}
.circle:nth-child(7) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 8% 0, 41% 48%);
clip-path: polygon(44% 0, 8% 0, 41% 48%);
background: #5b54ab;
-webkit-transform: rotate(244.8deg) translate(0, 120px);
transform: rotate(244.8deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(17):before, .circle:nth-child(7) .content:nth-child(17):after {
width: 85px;
height: 20px;
-webkit-clip-path: polygon(13% 0, 49% 0, 89% 48%);
clip-path: polygon(13% 0, 49% 0, 89% 48%);
}
.circle:nth-child(7) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #8b47b8;
}
.circle:nth-child(7) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(56% 0, 88% 0, 95% 48%);
clip-path: polygon(56% 0, 88% 0, 95% 48%);
background: #1804fb;
-webkit-transform: rotate(259.2deg) translate(0, 120px);
transform: rotate(259.2deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(18):before, .circle:nth-child(7) .content:nth-child(18):after {
width: 95px;
height: 9px;
-webkit-clip-path: polygon(4% 0, 21% 0, 68% 48%);
clip-path: polygon(4% 0, 21% 0, 68% 48%);
}
.circle:nth-child(7) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #8d3bc4;
}
.circle:nth-child(7) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(98% 0, 68% 0, 25% 48%);
clip-path: polygon(98% 0, 68% 0, 25% 48%);
background: #2e1de2;
-webkit-transform: rotate(273.6deg) translate(0, 120px);
transform: rotate(273.6deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(19):before, .circle:nth-child(7) .content:nth-child(19):after {
width: 12px;
height: 8px;
-webkit-clip-path: polygon(17% 0, 77% 0, 14% 48%);
clip-path: polygon(17% 0, 77% 0, 14% 48%);
}
.circle:nth-child(7) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(7) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(24% 0, 67% 0, 42% 48%);
clip-path: polygon(24% 0, 67% 0, 42% 48%);
background: #1703fc;
-webkit-transform: rotate(288deg) translate(0, 120px);
transform: rotate(288deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(20):before, .circle:nth-child(7) .content:nth-child(20):after {
width: 54px;
height: 43px;
-webkit-clip-path: polygon(29% 0, 5% 0, 81% 48%);
clip-path: polygon(29% 0, 5% 0, 81% 48%);
}
.circle:nth-child(7) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #807c83;
}
.circle:nth-child(7) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(51% 0, 38% 0, 65% 48%);
clip-path: polygon(51% 0, 38% 0, 65% 48%);
background: #3324db;
-webkit-transform: rotate(302.4deg) translate(0, 120px);
transform: rotate(302.4deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(21):before, .circle:nth-child(7) .content:nth-child(21):after {
width: 8px;
height: 17px;
-webkit-clip-path: polygon(34% 0, 88% 0, 66% 48%);
clip-path: polygon(34% 0, 88% 0, 66% 48%);
}
.circle:nth-child(7) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #8b45ba;
}
.circle:nth-child(7) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(54% 0, 39% 0, 60% 48%);
clip-path: polygon(54% 0, 39% 0, 60% 48%);
background: #706c93;
-webkit-transform: rotate(316.8deg) translate(0, 120px);
transform: rotate(316.8deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(22):before, .circle:nth-child(7) .content:nth-child(22):after {
width: 25px;
height: 19px;
-webkit-clip-path: polygon(24% 0, 50% 0, 23% 48%);
clip-path: polygon(24% 0, 50% 0, 23% 48%);
}
.circle:nth-child(7) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #86609f;
}
.circle:nth-child(7) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 24% 0, 33% 48%);
clip-path: polygon(47% 0, 24% 0, 33% 48%);
background: #4e44bb;
-webkit-transform: rotate(331.2deg) translate(0, 120px);
transform: rotate(331.2deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(23):before, .circle:nth-child(7) .content:nth-child(23):after {
width: 50px;
height: 49px;
-webkit-clip-path: polygon(49% 0, 53% 0, 92% 48%);
clip-path: polygon(49% 0, 53% 0, 92% 48%);
}
.circle:nth-child(7) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #9225da;
}
.circle:nth-child(7) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(70% 0, 38% 0, 88% 48%);
clip-path: polygon(70% 0, 38% 0, 88% 48%);
background: #1a05fa;
-webkit-transform: rotate(345.6deg) translate(0, 120px);
transform: rotate(345.6deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(24):before, .circle:nth-child(7) .content:nth-child(24):after {
width: 52px;
height: 31px;
-webkit-clip-path: polygon(28% 0, 54% 0, 92% 48%);
clip-path: polygon(28% 0, 54% 0, 92% 48%);
}
.circle:nth-child(7) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #894fb0;
}
.circle:nth-child(7) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(92% 0, 71% 0, 34% 48%);
clip-path: polygon(92% 0, 71% 0, 34% 48%);
background: #65609f;
-webkit-transform: rotate(360deg) translate(0, 120px);
transform: rotate(360deg) translate(0, 120px);
}
.circle:nth-child(7) .content:nth-child(25):before, .circle:nth-child(7) .content:nth-child(25):after {
width: 83px;
height: 47px;
-webkit-clip-path: polygon(30% 0, 16% 0, 98% 48%);
clip-path: polygon(30% 0, 16% 0, 98% 48%);
}
.circle:nth-child(7) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(7) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #902fd0;
}
.circle:nth-child(8) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 120px;
left: 25.76px;
-webkit-animation: rotate 11s linear infinite;
animation: rotate 11s linear infinite;
}
.circle:nth-child(8) .content {
position: absolute;
width: 92px;
height: 42px;
top: 40%;
left: 40%;
}
.circle:nth-child(8) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(45% 0, 11% 0, 74% 48%);
clip-path: polygon(45% 0, 11% 0, 74% 48%);
background: #3425da;
-webkit-transform: rotate(14.4deg) translate(0, 130px);
transform: rotate(14.4deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(1):before, .circle:nth-child(8) .content:nth-child(1):after {
width: 11px;
height: 16px;
-webkit-clip-path: polygon(75% 0, 43% 0, 34% 48%);
clip-path: polygon(75% 0, 43% 0, 34% 48%);
}
.circle:nth-child(8) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #8759a6;
}
.circle:nth-child(8) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(65% 0, 29% 0, 34% 48%);
clip-path: polygon(65% 0, 29% 0, 34% 48%);
background: #3222dd;
-webkit-transform: rotate(28.8deg) translate(0, 130px);
transform: rotate(28.8deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(2):before, .circle:nth-child(8) .content:nth-child(2):after {
width: 44px;
height: 47px;
-webkit-clip-path: polygon(48% 0, 74% 0, 40% 48%);
clip-path: polygon(48% 0, 74% 0, 40% 48%);
}
.circle:nth-child(8) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #8c41be;
}
.circle:nth-child(8) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 16% 0, 16% 48%);
clip-path: polygon(62% 0, 16% 0, 16% 48%);
background: #1804fb;
-webkit-transform: rotate(43.2deg) translate(0, 130px);
transform: rotate(43.2deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(3):before, .circle:nth-child(8) .content:nth-child(3):after {
width: 95px;
height: 33px;
-webkit-clip-path: polygon(12% 0, 24% 0, 9% 48%);
clip-path: polygon(12% 0, 24% 0, 9% 48%);
}
.circle:nth-child(8) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #902bd4;
}
.circle:nth-child(8) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(39% 0, 98% 0, 52% 48%);
clip-path: polygon(39% 0, 98% 0, 52% 48%);
background: #483dc2;
-webkit-transform: rotate(57.6deg) translate(0, 130px);
transform: rotate(57.6deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(4):before, .circle:nth-child(8) .content:nth-child(4):after {
width: 16px;
height: 17px;
-webkit-clip-path: polygon(89% 0, 37% 0, 37% 48%);
clip-path: polygon(89% 0, 37% 0, 37% 48%);
}
.circle:nth-child(8) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #846b94;
}
.circle:nth-child(8) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 1% 0, 31% 48%);
clip-path: polygon(47% 0, 1% 0, 31% 48%);
background: #2c1be4;
-webkit-transform: rotate(72deg) translate(0, 130px);
transform: rotate(72deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(5):before, .circle:nth-child(8) .content:nth-child(5):after {
width: 8px;
height: 30px;
-webkit-clip-path: polygon(28% 0, 85% 0, 56% 48%);
clip-path: polygon(28% 0, 85% 0, 56% 48%);
}
.circle:nth-child(8) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #817887;
}
.circle:nth-child(8) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(93% 0, 22% 0, 80% 48%);
clip-path: polygon(93% 0, 22% 0, 80% 48%);
background: #392bd4;
-webkit-transform: rotate(86.4deg) translate(0, 130px);
transform: rotate(86.4deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(6):before, .circle:nth-child(8) .content:nth-child(6):after {
width: 93px;
height: 43px;
-webkit-clip-path: polygon(16% 0, 100% 0, 74% 48%);
clip-path: polygon(16% 0, 100% 0, 74% 48%);
}
.circle:nth-child(8) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(8) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(3% 0, 87% 0, 80% 48%);
clip-path: polygon(3% 0, 87% 0, 80% 48%);
background: #1500ff;
-webkit-transform: rotate(100.8deg) translate(0, 130px);
transform: rotate(100.8deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(7):before, .circle:nth-child(8) .content:nth-child(7):after {
width: 59px;
height: 7px;
-webkit-clip-path: polygon(55% 0, 73% 0, 98% 48%);
clip-path: polygon(55% 0, 73% 0, 98% 48%);
}
.circle:nth-child(8) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #9222dd;
}
.circle:nth-child(8) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(4% 0, 84% 0, 70% 48%);
clip-path: polygon(4% 0, 84% 0, 70% 48%);
background: #645ea1;
-webkit-transform: rotate(115.2deg) translate(0, 130px);
transform: rotate(115.2deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(8):before, .circle:nth-child(8) .content:nth-child(8):after {
width: 94px;
height: 27px;
-webkit-clip-path: polygon(63% 0, 29% 0, 4% 48%);
clip-path: polygon(63% 0, 29% 0, 4% 48%);
}
.circle:nth-child(8) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #8e37c8;
}
.circle:nth-child(8) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 64% 0, 59% 48%);
clip-path: polygon(62% 0, 64% 0, 59% 48%);
background: #6a6699;
-webkit-transform: rotate(129.6deg) translate(0, 130px);
transform: rotate(129.6deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(9):before, .circle:nth-child(8) .content:nth-child(9):after {
width: 66px;
height: 1px;
-webkit-clip-path: polygon(33% 0, 57% 0, 84% 48%);
clip-path: polygon(33% 0, 57% 0, 84% 48%);
}
.circle:nth-child(8) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #8857a8;
}
.circle:nth-child(8) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(74% 0, 49% 0, 66% 48%);
clip-path: polygon(74% 0, 49% 0, 66% 48%);
background: #3f32cd;
-webkit-transform: rotate(144deg) translate(0, 130px);
transform: rotate(144deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(10):before, .circle:nth-child(8) .content:nth-child(10):after {
width: 6px;
height: 47px;
-webkit-clip-path: polygon(90% 0, 42% 0, 97% 48%);
clip-path: polygon(90% 0, 42% 0, 97% 48%);
}
.circle:nth-child(8) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #875ba4;
}
.circle:nth-child(8) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(8% 0, 73% 0, 89% 48%);
clip-path: polygon(8% 0, 73% 0, 89% 48%);
background: #3425da;
-webkit-transform: rotate(158.4deg) translate(0, 130px);
transform: rotate(158.4deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(11):before, .circle:nth-child(8) .content:nth-child(11):after {
width: 21px;
height: 21px;
-webkit-clip-path: polygon(96% 0, 9% 0, 94% 48%);
clip-path: polygon(96% 0, 9% 0, 94% 48%);
}
.circle:nth-child(8) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #9126d9;
}
.circle:nth-child(8) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(36% 0, 93% 0, 13% 48%);
clip-path: polygon(36% 0, 93% 0, 13% 48%);
background: #3628d7;
-webkit-transform: rotate(172.8deg) translate(0, 130px);
transform: rotate(172.8deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(12):before, .circle:nth-child(8) .content:nth-child(12):after {
width: 16px;
height: 5px;
-webkit-clip-path: polygon(57% 0, 9% 0, 98% 48%);
clip-path: polygon(57% 0, 9% 0, 98% 48%);
}
.circle:nth-child(8) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #9806f9;
}
.circle:nth-child(8) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(57% 0, 42% 0, 79% 48%);
clip-path: polygon(57% 0, 42% 0, 79% 48%);
background: #2b1ae6;
-webkit-transform: rotate(187.2deg) translate(0, 130px);
transform: rotate(187.2deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(13):before, .circle:nth-child(8) .content:nth-child(13):after {
width: 18px;
height: 21px;
-webkit-clip-path: polygon(87% 0, 27% 0, 95% 48%);
clip-path: polygon(87% 0, 27% 0, 95% 48%);
}
.circle:nth-child(8) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #970af5;
}
.circle:nth-child(8) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(77% 0, 19% 0, 41% 48%);
clip-path: polygon(77% 0, 19% 0, 41% 48%);
background: #4033cc;
-webkit-transform: rotate(201.6deg) translate(0, 130px);
transform: rotate(201.6deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(14):before, .circle:nth-child(8) .content:nth-child(14):after {
width: 28px;
height: 9px;
-webkit-clip-path: polygon(75% 0, 69% 0, 13% 48%);
clip-path: polygon(75% 0, 69% 0, 13% 48%);
}
.circle:nth-child(8) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #8a4db3;
}
.circle:nth-child(8) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(76% 0, 3% 0, 34% 48%);
clip-path: polygon(76% 0, 3% 0, 34% 48%);
background: #210ef1;
-webkit-transform: rotate(216deg) translate(0, 130px);
transform: rotate(216deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(15):before, .circle:nth-child(8) .content:nth-child(15):after {
width: 30px;
height: 29px;
-webkit-clip-path: polygon(66% 0, 69% 0, 71% 48%);
clip-path: polygon(66% 0, 69% 0, 71% 48%);
}
.circle:nth-child(8) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #807e81;
}
.circle:nth-child(8) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(8% 0, 69% 0, 48% 48%);
clip-path: polygon(8% 0, 69% 0, 48% 48%);
background: #4236c9;
-webkit-transform: rotate(230.4deg) translate(0, 130px);
transform: rotate(230.4deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(16):before, .circle:nth-child(8) .content:nth-child(16):after {
width: 72px;
height: 19px;
-webkit-clip-path: polygon(64% 0, 70% 0, 47% 48%);
clip-path: polygon(64% 0, 70% 0, 47% 48%);
}
.circle:nth-child(8) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(8) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(42% 0, 86% 0, 6% 48%);
clip-path: polygon(42% 0, 86% 0, 6% 48%);
background: #2f1fe0;
-webkit-transform: rotate(244.8deg) translate(0, 130px);
transform: rotate(244.8deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(17):before, .circle:nth-child(8) .content:nth-child(17):after {
width: 53px;
height: 32px;
-webkit-clip-path: polygon(77% 0, 91% 0, 38% 48%);
clip-path: polygon(77% 0, 91% 0, 38% 48%);
}
.circle:nth-child(8) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #902bd4;
}
.circle:nth-child(8) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(87% 0, 72% 0, 9% 48%);
clip-path: polygon(87% 0, 72% 0, 9% 48%);
background: #2614eb;
-webkit-transform: rotate(259.2deg) translate(0, 130px);
transform: rotate(259.2deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(18):before, .circle:nth-child(8) .content:nth-child(18):after {
width: 89px;
height: 48px;
-webkit-clip-path: polygon(57% 0, 28% 0, 61% 48%);
clip-path: polygon(57% 0, 28% 0, 61% 48%);
}
.circle:nth-child(8) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #902fd0;
}
.circle:nth-child(8) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(14% 0, 27% 0, 57% 48%);
clip-path: polygon(14% 0, 27% 0, 57% 48%);
background: #2b1ae6;
-webkit-transform: rotate(273.6deg) translate(0, 130px);
transform: rotate(273.6deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(19):before, .circle:nth-child(8) .content:nth-child(19):after {
width: 21px;
height: 5px;
-webkit-clip-path: polygon(62% 0, 79% 0, 3% 48%);
clip-path: polygon(62% 0, 79% 0, 3% 48%);
}
.circle:nth-child(8) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #846996;
}
.circle:nth-child(8) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(59% 0, 14% 0, 72% 48%);
clip-path: polygon(59% 0, 14% 0, 72% 48%);
background: #1804fb;
-webkit-transform: rotate(288deg) translate(0, 130px);
transform: rotate(288deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(20):before, .circle:nth-child(8) .content:nth-child(20):after {
width: 35px;
height: 42px;
-webkit-clip-path: polygon(84% 0, 76% 0, 61% 48%);
clip-path: polygon(84% 0, 76% 0, 61% 48%);
}
.circle:nth-child(8) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #8857a8;
}
.circle:nth-child(8) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(84% 0, 82% 0, 29% 48%);
clip-path: polygon(84% 0, 82% 0, 29% 48%);
background: #1e0af5;
-webkit-transform: rotate(302.4deg) translate(0, 130px);
transform: rotate(302.4deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(21):before, .circle:nth-child(8) .content:nth-child(21):after {
width: 24px;
height: 49px;
-webkit-clip-path: polygon(98% 0, 1% 0, 90% 48%);
clip-path: polygon(98% 0, 1% 0, 90% 48%);
}
.circle:nth-child(8) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #9806f9;
}
.circle:nth-child(8) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(34% 0, 90% 0, 68% 48%);
clip-path: polygon(34% 0, 90% 0, 68% 48%);
background: #3729d6;
-webkit-transform: rotate(316.8deg) translate(0, 130px);
transform: rotate(316.8deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(22):before, .circle:nth-child(8) .content:nth-child(22):after {
width: 89px;
height: 4px;
-webkit-clip-path: polygon(74% 0, 89% 0, 88% 48%);
clip-path: polygon(74% 0, 89% 0, 88% 48%);
}
.circle:nth-child(8) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #817788;
}
.circle:nth-child(8) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(38% 0, 61% 0, 56% 48%);
clip-path: polygon(38% 0, 61% 0, 56% 48%);
background: #483dc2;
-webkit-transform: rotate(331.2deg) translate(0, 130px);
transform: rotate(331.2deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(23):before, .circle:nth-child(8) .content:nth-child(23):after {
width: 51px;
height: 5px;
-webkit-clip-path: polygon(12% 0, 63% 0, 35% 48%);
clip-path: polygon(12% 0, 63% 0, 35% 48%);
}
.circle:nth-child(8) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #8857a8;
}
.circle:nth-child(8) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(36% 0, 4% 0, 64% 48%);
clip-path: polygon(36% 0, 4% 0, 64% 48%);
background: #1f0bf4;
-webkit-transform: rotate(345.6deg) translate(0, 130px);
transform: rotate(345.6deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(24):before, .circle:nth-child(8) .content:nth-child(24):after {
width: 88px;
height: 50px;
-webkit-clip-path: polygon(10% 0, 31% 0, 92% 48%);
clip-path: polygon(10% 0, 31% 0, 92% 48%);
}
.circle:nth-child(8) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #846798;
}
.circle:nth-child(8) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(55% 0, 25% 0, 10% 48%);
clip-path: polygon(55% 0, 25% 0, 10% 48%);
background: #65609f;
-webkit-transform: rotate(360deg) translate(0, 130px);
transform: rotate(360deg) translate(0, 130px);
}
.circle:nth-child(8) .content:nth-child(25):before, .circle:nth-child(8) .content:nth-child(25):after {
width: 35px;
height: 48px;
-webkit-clip-path: polygon(84% 0, 11% 0, 7% 48%);
clip-path: polygon(84% 0, 11% 0, 7% 48%);
}
.circle:nth-child(8) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(8) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #8c40bf;
}
.circle:nth-child(9) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 135px;
left: 28.98px;
-webkit-animation: rotate-reverse 19s linear infinite;
animation: rotate-reverse 19s linear infinite;
}
.circle:nth-child(9) .content {
position: absolute;
width: 118px;
height: 16px;
top: 40%;
left: 40%;
}
.circle:nth-child(9) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 60% 0, 89% 48%);
clip-path: polygon(47% 0, 60% 0, 89% 48%);
background: #7a7986;
-webkit-transform: rotate(14.4deg) translate(0, 140px);
transform: rotate(14.4deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(1):before, .circle:nth-child(9) .content:nth-child(1):after {
width: 13px;
height: 32px;
-webkit-clip-path: polygon(40% 0, 52% 0, 63% 48%);
clip-path: polygon(40% 0, 52% 0, 63% 48%);
}
.circle:nth-child(9) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #9901fe;
}
.circle:nth-child(9) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(59% 0, 52% 0, 7% 48%);
clip-path: polygon(59% 0, 52% 0, 7% 48%);
background: #564eb1;
-webkit-transform: rotate(28.8deg) translate(0, 140px);
transform: rotate(28.8deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(2):before, .circle:nth-child(9) .content:nth-child(2):after {
width: 85px;
height: 26px;
-webkit-clip-path: polygon(94% 0, 17% 0, 26% 48%);
clip-path: polygon(94% 0, 17% 0, 26% 48%);
}
.circle:nth-child(9) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #8e36c9;
}
.circle:nth-child(9) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(9% 0, 67% 0, 99% 48%);
clip-path: polygon(9% 0, 67% 0, 99% 48%);
background: #554db3;
-webkit-transform: rotate(43.2deg) translate(0, 140px);
transform: rotate(43.2deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(3):before, .circle:nth-child(9) .content:nth-child(3):after {
width: 24px;
height: 6px;
-webkit-clip-path: polygon(2% 0, 95% 0, 55% 48%);
clip-path: polygon(2% 0, 95% 0, 55% 48%);
}
.circle:nth-child(9) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #875ca3;
}
.circle:nth-child(9) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(88% 0, 51% 0, 78% 48%);
clip-path: polygon(88% 0, 51% 0, 78% 48%);
background: #625ca3;
-webkit-transform: rotate(57.6deg) translate(0, 140px);
transform: rotate(57.6deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(4):before, .circle:nth-child(9) .content:nth-child(4):after {
width: 84px;
height: 11px;
-webkit-clip-path: polygon(3% 0, 60% 0, 74% 48%);
clip-path: polygon(3% 0, 60% 0, 74% 48%);
}
.circle:nth-child(9) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #817986;
}
.circle:nth-child(9) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 37% 0, 46% 48%);
clip-path: polygon(44% 0, 37% 0, 46% 48%);
background: #5249b6;
-webkit-transform: rotate(72deg) translate(0, 140px);
transform: rotate(72deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(5):before, .circle:nth-child(9) .content:nth-child(5):after {
width: 14px;
height: 40px;
-webkit-clip-path: polygon(44% 0, 32% 0, 89% 48%);
clip-path: polygon(44% 0, 32% 0, 89% 48%);
}
.circle:nth-child(9) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8853ac;
}
.circle:nth-child(9) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(43% 0, 47% 0, 53% 48%);
clip-path: polygon(43% 0, 47% 0, 53% 48%);
background: #6059a6;
-webkit-transform: rotate(86.4deg) translate(0, 140px);
transform: rotate(86.4deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(6):before, .circle:nth-child(9) .content:nth-child(6):after {
width: 55px;
height: 50px;
-webkit-clip-path: polygon(61% 0, 31% 0, 25% 48%);
clip-path: polygon(61% 0, 31% 0, 25% 48%);
}
.circle:nth-child(9) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #846a95;
}
.circle:nth-child(9) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(56% 0, 2% 0, 57% 48%);
clip-path: polygon(56% 0, 2% 0, 57% 48%);
background: #2614eb;
-webkit-transform: rotate(100.8deg) translate(0, 140px);
transform: rotate(100.8deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(7):before, .circle:nth-child(9) .content:nth-child(7):after {
width: 76px;
height: 33px;
-webkit-clip-path: polygon(45% 0, 23% 0, 66% 48%);
clip-path: polygon(45% 0, 23% 0, 66% 48%);
}
.circle:nth-child(9) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #8d3bc4;
}
.circle:nth-child(9) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(13% 0, 81% 0, 48% 48%);
clip-path: polygon(13% 0, 81% 0, 48% 48%);
background: #6a6699;
-webkit-transform: rotate(115.2deg) translate(0, 140px);
transform: rotate(115.2deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(8):before, .circle:nth-child(9) .content:nth-child(8):after {
width: 93px;
height: 6px;
-webkit-clip-path: polygon(49% 0, 7% 0, 25% 48%);
clip-path: polygon(49% 0, 7% 0, 25% 48%);
}
.circle:nth-child(9) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #9224db;
}
.circle:nth-child(9) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(45% 0, 79% 0, 90% 48%);
clip-path: polygon(45% 0, 79% 0, 90% 48%);
background: #797887;
-webkit-transform: rotate(129.6deg) translate(0, 140px);
transform: rotate(129.6deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(9):before, .circle:nth-child(9) .content:nth-child(9):after {
width: 35px;
height: 15px;
-webkit-clip-path: polygon(23% 0, 58% 0, 63% 48%);
clip-path: polygon(23% 0, 58% 0, 63% 48%);
}
.circle:nth-child(9) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #8759a6;
}
.circle:nth-child(9) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(53% 0, 17% 0, 22% 48%);
clip-path: polygon(53% 0, 17% 0, 22% 48%);
background: #392bd4;
-webkit-transform: rotate(144deg) translate(0, 140px);
transform: rotate(144deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(10):before, .circle:nth-child(9) .content:nth-child(10):after {
width: 3px;
height: 50px;
-webkit-clip-path: polygon(49% 0, 41% 0, 41% 48%);
clip-path: polygon(49% 0, 41% 0, 41% 48%);
}
.circle:nth-child(9) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #902bd4;
}
.circle:nth-child(9) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(100% 0, 21% 0, 83% 48%);
clip-path: polygon(100% 0, 21% 0, 83% 48%);
background: #706c93;
-webkit-transform: rotate(158.4deg) translate(0, 140px);
transform: rotate(158.4deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(11):before, .circle:nth-child(9) .content:nth-child(11):after {
width: 73px;
height: 34px;
-webkit-clip-path: polygon(30% 0, 81% 0, 19% 48%);
clip-path: polygon(30% 0, 81% 0, 19% 48%);
}
.circle:nth-child(9) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #8853ac;
}
.circle:nth-child(9) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 36% 0, 12% 48%);
clip-path: polygon(44% 0, 36% 0, 12% 48%);
background: #1f0bf4;
-webkit-transform: rotate(172.8deg) translate(0, 140px);
transform: rotate(172.8deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(12):before, .circle:nth-child(9) .content:nth-child(12):after {
width: 58px;
height: 1px;
-webkit-clip-path: polygon(85% 0, 5% 0, 17% 48%);
clip-path: polygon(85% 0, 5% 0, 17% 48%);
}
.circle:nth-child(9) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #894fb0;
}
.circle:nth-child(9) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(66% 0, 89% 0, 94% 48%);
clip-path: polygon(66% 0, 89% 0, 94% 48%);
background: #5c55aa;
-webkit-transform: rotate(187.2deg) translate(0, 140px);
transform: rotate(187.2deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(13):before, .circle:nth-child(9) .content:nth-child(13):after {
width: 24px;
height: 2px;
-webkit-clip-path: polygon(32% 0, 17% 0, 44% 48%);
clip-path: polygon(32% 0, 17% 0, 44% 48%);
}
.circle:nth-child(9) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #865da2;
}
.circle:nth-child(9) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(22% 0, 48% 0, 49% 48%);
clip-path: polygon(22% 0, 48% 0, 49% 48%);
background: #625ca3;
-webkit-transform: rotate(201.6deg) translate(0, 140px);
transform: rotate(201.6deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(14):before, .circle:nth-child(9) .content:nth-child(14):after {
width: 13px;
height: 27px;
-webkit-clip-path: polygon(69% 0, 22% 0, 84% 48%);
clip-path: polygon(69% 0, 22% 0, 84% 48%);
}
.circle:nth-child(9) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #960df2;
}
.circle:nth-child(9) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(55% 0, 8% 0, 79% 48%);
clip-path: polygon(55% 0, 8% 0, 79% 48%);
background: #6f6b94;
-webkit-transform: rotate(216deg) translate(0, 140px);
transform: rotate(216deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(15):before, .circle:nth-child(9) .content:nth-child(15):after {
width: 72px;
height: 12px;
-webkit-clip-path: polygon(34% 0, 91% 0, 80% 48%);
clip-path: polygon(34% 0, 91% 0, 80% 48%);
}
.circle:nth-child(9) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #8f32cd;
}
.circle:nth-child(9) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(28% 0, 1% 0, 29% 48%);
clip-path: polygon(28% 0, 1% 0, 29% 48%);
background: #493ec1;
-webkit-transform: rotate(230.4deg) translate(0, 140px);
transform: rotate(230.4deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(16):before, .circle:nth-child(9) .content:nth-child(16):after {
width: 57px;
height: 48px;
-webkit-clip-path: polygon(28% 0, 73% 0, 49% 48%);
clip-path: polygon(28% 0, 73% 0, 49% 48%);
}
.circle:nth-child(9) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(9) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(21% 0, 48% 0, 25% 48%);
clip-path: polygon(21% 0, 48% 0, 25% 48%);
background: #74718e;
-webkit-transform: rotate(244.8deg) translate(0, 140px);
transform: rotate(244.8deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(17):before, .circle:nth-child(9) .content:nth-child(17):after {
width: 57px;
height: 41px;
-webkit-clip-path: polygon(30% 0, 71% 0, 45% 48%);
clip-path: polygon(30% 0, 71% 0, 45% 48%);
}
.circle:nth-child(9) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #9513ec;
}
.circle:nth-child(9) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(37% 0, 52% 0, 71% 48%);
clip-path: polygon(37% 0, 52% 0, 71% 48%);
background: #3121de;
-webkit-transform: rotate(259.2deg) translate(0, 140px);
transform: rotate(259.2deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(18):before, .circle:nth-child(9) .content:nth-child(18):after {
width: 18px;
height: 29px;
-webkit-clip-path: polygon(28% 0, 5% 0, 66% 48%);
clip-path: polygon(28% 0, 5% 0, 66% 48%);
}
.circle:nth-child(9) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #846996;
}
.circle:nth-child(9) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(15% 0, 5% 0, 82% 48%);
clip-path: polygon(15% 0, 5% 0, 82% 48%);
background: #706c93;
-webkit-transform: rotate(273.6deg) translate(0, 140px);
transform: rotate(273.6deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(19):before, .circle:nth-child(9) .content:nth-child(19):after {
width: 53px;
height: 25px;
-webkit-clip-path: polygon(34% 0, 98% 0, 36% 48%);
clip-path: polygon(34% 0, 98% 0, 36% 48%);
}
.circle:nth-child(9) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #9129d6;
}
.circle:nth-child(9) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(43% 0, 50% 0, 35% 48%);
clip-path: polygon(43% 0, 50% 0, 35% 48%);
background: #4337c8;
-webkit-transform: rotate(288deg) translate(0, 140px);
transform: rotate(288deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(20):before, .circle:nth-child(9) .content:nth-child(20):after {
width: 70px;
height: 50px;
-webkit-clip-path: polygon(30% 0, 46% 0, 70% 48%);
clip-path: polygon(30% 0, 46% 0, 70% 48%);
}
.circle:nth-child(9) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #9708f7;
}
.circle:nth-child(9) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(29% 0, 100% 0, 96% 48%);
clip-path: polygon(29% 0, 100% 0, 96% 48%);
background: #6d6a95;
-webkit-transform: rotate(302.4deg) translate(0, 140px);
transform: rotate(302.4deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(21):before, .circle:nth-child(9) .content:nth-child(21):after {
width: 99px;
height: 41px;
-webkit-clip-path: polygon(31% 0, 68% 0, 37% 48%);
clip-path: polygon(31% 0, 68% 0, 37% 48%);
}
.circle:nth-child(9) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #8950af;
}
.circle:nth-child(9) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(50% 0, 18% 0, 27% 48%);
clip-path: polygon(50% 0, 18% 0, 27% 48%);
background: #382ad5;
-webkit-transform: rotate(316.8deg) translate(0, 140px);
transform: rotate(316.8deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(22):before, .circle:nth-child(9) .content:nth-child(22):after {
width: 64px;
height: 35px;
-webkit-clip-path: polygon(69% 0, 13% 0, 82% 48%);
clip-path: polygon(69% 0, 13% 0, 82% 48%);
}
.circle:nth-child(9) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #836c93;
}
.circle:nth-child(9) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(65% 0, 16% 0, 56% 48%);
clip-path: polygon(65% 0, 16% 0, 56% 48%);
background: #5952ad;
-webkit-transform: rotate(331.2deg) translate(0, 140px);
transform: rotate(331.2deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(23):before, .circle:nth-child(9) .content:nth-child(23):after {
width: 64px;
height: 12px;
-webkit-clip-path: polygon(50% 0, 38% 0, 84% 48%);
clip-path: polygon(50% 0, 38% 0, 84% 48%);
}
.circle:nth-child(9) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(9) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(30% 0, 68% 0, 17% 48%);
clip-path: polygon(30% 0, 68% 0, 17% 48%);
background: #615ba4;
-webkit-transform: rotate(345.6deg) translate(0, 140px);
transform: rotate(345.6deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(24):before, .circle:nth-child(9) .content:nth-child(24):after {
width: 38px;
height: 29px;
-webkit-clip-path: polygon(14% 0, 52% 0, 96% 48%);
clip-path: polygon(14% 0, 52% 0, 96% 48%);
}
.circle:nth-child(9) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #9900ff;
}
.circle:nth-child(9) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(47% 0, 7% 0, 88% 48%);
clip-path: polygon(47% 0, 7% 0, 88% 48%);
background: #73708f;
-webkit-transform: rotate(360deg) translate(0, 140px);
transform: rotate(360deg) translate(0, 140px);
}
.circle:nth-child(9) .content:nth-child(25):before, .circle:nth-child(9) .content:nth-child(25):after {
width: 75px;
height: 39px;
-webkit-clip-path: polygon(8% 0, 29% 0, 38% 48%);
clip-path: polygon(8% 0, 29% 0, 38% 48%);
}
.circle:nth-child(9) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(9) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #86619e;
}
.circle:nth-child(10) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 150px;
left: 32.2px;
-webkit-animation: rotate 15s linear infinite;
animation: rotate 15s linear infinite;
}
.circle:nth-child(10) .content {
position: absolute;
width: 73px;
height: 40px;
top: 40%;
left: 40%;
}
.circle:nth-child(10) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(15% 0, 75% 0, 66% 48%);
clip-path: polygon(15% 0, 75% 0, 66% 48%);
background: #6d6a95;
-webkit-transform: rotate(14.4deg) translate(0, 150px);
transform: rotate(14.4deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(1):before, .circle:nth-child(10) .content:nth-child(1):after {
width: 85px;
height: 10px;
-webkit-clip-path: polygon(32% 0, 97% 0, 21% 48%);
clip-path: polygon(32% 0, 97% 0, 21% 48%);
}
.circle:nth-child(10) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #817986;
}
.circle:nth-child(10) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 89% 0, 90% 48%);
clip-path: polygon(60% 0, 89% 0, 90% 48%);
background: #3425da;
-webkit-transform: rotate(28.8deg) translate(0, 150px);
transform: rotate(28.8deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(2):before, .circle:nth-child(10) .content:nth-child(2):after {
width: 45px;
height: 30px;
-webkit-clip-path: polygon(73% 0, 84% 0, 62% 48%);
clip-path: polygon(73% 0, 84% 0, 62% 48%);
}
.circle:nth-child(10) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #8950af;
}
.circle:nth-child(10) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(74% 0, 81% 0, 53% 48%);
clip-path: polygon(74% 0, 81% 0, 53% 48%);
background: #200df2;
-webkit-transform: rotate(43.2deg) translate(0, 150px);
transform: rotate(43.2deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(3):before, .circle:nth-child(10) .content:nth-child(3):after {
width: 33px;
height: 41px;
-webkit-clip-path: polygon(81% 0, 93% 0, 83% 48%);
clip-path: polygon(81% 0, 93% 0, 83% 48%);
}
.circle:nth-child(10) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #807c83;
}
.circle:nth-child(10) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 53% 0, 32% 48%);
clip-path: polygon(90% 0, 53% 0, 32% 48%);
background: #1f0bf4;
-webkit-transform: rotate(57.6deg) translate(0, 150px);
transform: rotate(57.6deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(4):before, .circle:nth-child(10) .content:nth-child(4):after {
width: 29px;
height: 42px;
-webkit-clip-path: polygon(98% 0, 82% 0, 5% 48%);
clip-path: polygon(98% 0, 82% 0, 5% 48%);
}
.circle:nth-child(10) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #9126d9;
}
.circle:nth-child(10) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 52% 0, 75% 48%);
clip-path: polygon(85% 0, 52% 0, 75% 48%);
background: #4438c7;
-webkit-transform: rotate(72deg) translate(0, 150px);
transform: rotate(72deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(5):before, .circle:nth-child(10) .content:nth-child(5):after {
width: 14px;
height: 34px;
-webkit-clip-path: polygon(25% 0, 96% 0, 8% 48%);
clip-path: polygon(25% 0, 96% 0, 8% 48%);
}
.circle:nth-child(10) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #902dd2;
}
.circle:nth-child(10) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(3% 0, 23% 0, 9% 48%);
clip-path: polygon(3% 0, 23% 0, 9% 48%);
background: #3729d6;
-webkit-transform: rotate(86.4deg) translate(0, 150px);
transform: rotate(86.4deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(6):before, .circle:nth-child(10) .content:nth-child(6):after {
width: 1px;
height: 42px;
-webkit-clip-path: polygon(68% 0, 5% 0, 26% 48%);
clip-path: polygon(68% 0, 5% 0, 26% 48%);
}
.circle:nth-child(10) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(10) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(68% 0, 88% 0, 74% 48%);
clip-path: polygon(68% 0, 88% 0, 74% 48%);
background: #1b06f9;
-webkit-transform: rotate(100.8deg) translate(0, 150px);
transform: rotate(100.8deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(7):before, .circle:nth-child(10) .content:nth-child(7):after {
width: 61px;
height: 44px;
-webkit-clip-path: polygon(90% 0, 72% 0, 73% 48%);
clip-path: polygon(90% 0, 72% 0, 73% 48%);
}
.circle:nth-child(10) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #856699;
}
.circle:nth-child(10) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(40% 0, 80% 0, 49% 48%);
clip-path: polygon(40% 0, 80% 0, 49% 48%);
background: #4134cb;
-webkit-transform: rotate(115.2deg) translate(0, 150px);
transform: rotate(115.2deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(8):before, .circle:nth-child(10) .content:nth-child(8):after {
width: 86px;
height: 38px;
-webkit-clip-path: polygon(33% 0, 5% 0, 64% 48%);
clip-path: polygon(33% 0, 5% 0, 64% 48%);
}
.circle:nth-child(10) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #9709f6;
}
.circle:nth-child(10) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(94% 0, 47% 0, 99% 48%);
clip-path: polygon(94% 0, 47% 0, 99% 48%);
background: #5f58a7;
-webkit-transform: rotate(129.6deg) translate(0, 150px);
transform: rotate(129.6deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(9):before, .circle:nth-child(10) .content:nth-child(9):after {
width: 83px;
height: 37px;
-webkit-clip-path: polygon(54% 0, 75% 0, 40% 48%);
clip-path: polygon(54% 0, 75% 0, 40% 48%);
}
.circle:nth-child(10) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #8853ac;
}
.circle:nth-child(10) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(1% 0, 56% 0, 73% 48%);
clip-path: polygon(1% 0, 56% 0, 73% 48%);
background: #2817e8;
-webkit-transform: rotate(144deg) translate(0, 150px);
transform: rotate(144deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(10):before, .circle:nth-child(10) .content:nth-child(10):after {
width: 83px;
height: 15px;
-webkit-clip-path: polygon(91% 0, 55% 0, 84% 48%);
clip-path: polygon(91% 0, 55% 0, 84% 48%);
}
.circle:nth-child(10) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #836e91;
}
.circle:nth-child(10) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 42% 0, 30% 48%);
clip-path: polygon(85% 0, 42% 0, 30% 48%);
background: #4134cb;
-webkit-transform: rotate(158.4deg) translate(0, 150px);
transform: rotate(158.4deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(11):before, .circle:nth-child(10) .content:nth-child(11):after {
width: 55px;
height: 39px;
-webkit-clip-path: polygon(10% 0, 40% 0, 41% 48%);
clip-path: polygon(10% 0, 40% 0, 41% 48%);
}
.circle:nth-child(10) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #836f90;
}
.circle:nth-child(10) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(70% 0, 80% 0, 18% 48%);
clip-path: polygon(70% 0, 80% 0, 18% 48%);
background: #4f45ba;
-webkit-transform: rotate(172.8deg) translate(0, 150px);
transform: rotate(172.8deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(12):before, .circle:nth-child(10) .content:nth-child(12):after {
width: 10px;
height: 10px;
-webkit-clip-path: polygon(45% 0, 8% 0, 39% 48%);
clip-path: polygon(45% 0, 8% 0, 39% 48%);
}
.circle:nth-child(10) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(10) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(4% 0, 45% 0, 3% 48%);
clip-path: polygon(4% 0, 45% 0, 3% 48%);
background: #3324db;
-webkit-transform: rotate(187.2deg) translate(0, 150px);
transform: rotate(187.2deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(13):before, .circle:nth-child(10) .content:nth-child(13):after {
width: 18px;
height: 34px;
-webkit-clip-path: polygon(55% 0, 19% 0, 30% 48%);
clip-path: polygon(55% 0, 19% 0, 30% 48%);
}
.circle:nth-child(10) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #8c41be;
}
.circle:nth-child(10) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(21% 0, 40% 0, 27% 48%);
clip-path: polygon(21% 0, 40% 0, 27% 48%);
background: #1e0af5;
-webkit-transform: rotate(201.6deg) translate(0, 150px);
transform: rotate(201.6deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(14):before, .circle:nth-child(10) .content:nth-child(14):after {
width: 66px;
height: 40px;
-webkit-clip-path: polygon(26% 0, 19% 0, 96% 48%);
clip-path: polygon(26% 0, 19% 0, 96% 48%);
}
.circle:nth-child(10) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #85659a;
}
.circle:nth-child(10) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(13% 0, 33% 0, 76% 48%);
clip-path: polygon(13% 0, 33% 0, 76% 48%);
background: #5249b6;
-webkit-transform: rotate(216deg) translate(0, 150px);
transform: rotate(216deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(15):before, .circle:nth-child(10) .content:nth-child(15):after {
width: 61px;
height: 21px;
-webkit-clip-path: polygon(57% 0, 29% 0, 86% 48%);
clip-path: polygon(57% 0, 29% 0, 86% 48%);
}
.circle:nth-child(10) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #8a4bb4;
}
.circle:nth-child(10) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 86% 0, 18% 48%);
clip-path: polygon(35% 0, 86% 0, 18% 48%);
background: #5f58a7;
-webkit-transform: rotate(230.4deg) translate(0, 150px);
transform: rotate(230.4deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(16):before, .circle:nth-child(10) .content:nth-child(16):after {
width: 18px;
height: 43px;
-webkit-clip-path: polygon(88% 0, 42% 0, 14% 48%);
clip-path: polygon(88% 0, 42% 0, 14% 48%);
}
.circle:nth-child(10) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #902bd4;
}
.circle:nth-child(10) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 17% 0, 14% 48%);
clip-path: polygon(44% 0, 17% 0, 14% 48%);
background: #4033cc;
-webkit-transform: rotate(244.8deg) translate(0, 150px);
transform: rotate(244.8deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(17):before, .circle:nth-child(10) .content:nth-child(17):after {
width: 64px;
height: 4px;
-webkit-clip-path: polygon(39% 0, 84% 0, 78% 48%);
clip-path: polygon(39% 0, 84% 0, 78% 48%);
}
.circle:nth-child(10) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #875ba4;
}
.circle:nth-child(10) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(34% 0, 57% 0, 76% 48%);
clip-path: polygon(34% 0, 57% 0, 76% 48%);
background: #635da2;
-webkit-transform: rotate(259.2deg) translate(0, 150px);
transform: rotate(259.2deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(18):before, .circle:nth-child(10) .content:nth-child(18):after {
width: 91px;
height: 1px;
-webkit-clip-path: polygon(75% 0, 89% 0, 9% 48%);
clip-path: polygon(75% 0, 89% 0, 9% 48%);
}
.circle:nth-child(10) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #807d82;
}
.circle:nth-child(10) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(83% 0, 16% 0, 23% 48%);
clip-path: polygon(83% 0, 16% 0, 23% 48%);
background: #4438c7;
-webkit-transform: rotate(273.6deg) translate(0, 150px);
transform: rotate(273.6deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(19):before, .circle:nth-child(10) .content:nth-child(19):after {
width: 43px;
height: 46px;
-webkit-clip-path: polygon(93% 0, 96% 0, 58% 48%);
clip-path: polygon(93% 0, 96% 0, 58% 48%);
}
.circle:nth-child(10) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #9514eb;
}
.circle:nth-child(10) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 59% 0, 37% 48%);
clip-path: polygon(75% 0, 59% 0, 37% 48%);
background: #4f45ba;
-webkit-transform: rotate(288deg) translate(0, 150px);
transform: rotate(288deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(20):before, .circle:nth-child(10) .content:nth-child(20):after {
width: 90px;
height: 43px;
-webkit-clip-path: polygon(66% 0, 18% 0, 99% 48%);
clip-path: polygon(66% 0, 18% 0, 99% 48%);
}
.circle:nth-child(10) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #8857a8;
}
.circle:nth-child(10) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(70% 0, 67% 0, 77% 48%);
clip-path: polygon(70% 0, 67% 0, 77% 48%);
background: #382ad5;
-webkit-transform: rotate(302.4deg) translate(0, 150px);
transform: rotate(302.4deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(21):before, .circle:nth-child(10) .content:nth-child(21):after {
width: 31px;
height: 1px;
-webkit-clip-path: polygon(70% 0, 2% 0, 23% 48%);
clip-path: polygon(70% 0, 2% 0, 23% 48%);
}
.circle:nth-child(10) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #8e39c6;
}
.circle:nth-child(10) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(33% 0, 64% 0, 64% 48%);
clip-path: polygon(33% 0, 64% 0, 64% 48%);
background: #7a7986;
-webkit-transform: rotate(316.8deg) translate(0, 150px);
transform: rotate(316.8deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(22):before, .circle:nth-child(10) .content:nth-child(22):after {
width: 21px;
height: 42px;
-webkit-clip-path: polygon(21% 0, 95% 0, 62% 48%);
clip-path: polygon(21% 0, 95% 0, 62% 48%);
}
.circle:nth-child(10) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #8f34cb;
}
.circle:nth-child(10) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 29% 0, 38% 48%);
clip-path: polygon(85% 0, 29% 0, 38% 48%);
background: #2412ed;
-webkit-transform: rotate(331.2deg) translate(0, 150px);
transform: rotate(331.2deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(23):before, .circle:nth-child(10) .content:nth-child(23):after {
width: 63px;
height: 35px;
-webkit-clip-path: polygon(7% 0, 30% 0, 58% 48%);
clip-path: polygon(7% 0, 30% 0, 58% 48%);
}
.circle:nth-child(10) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #8c42bd;
}
.circle:nth-child(10) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(61% 0, 56% 0, 54% 48%);
clip-path: polygon(61% 0, 56% 0, 54% 48%);
background: #1d09f6;
-webkit-transform: rotate(345.6deg) translate(0, 150px);
transform: rotate(345.6deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(24):before, .circle:nth-child(10) .content:nth-child(24):after {
width: 88px;
height: 19px;
-webkit-clip-path: polygon(27% 0, 100% 0, 36% 48%);
clip-path: polygon(27% 0, 100% 0, 36% 48%);
}
.circle:nth-child(10) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #902bd4;
}
.circle:nth-child(10) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(83% 0, 89% 0, 22% 48%);
clip-path: polygon(83% 0, 89% 0, 22% 48%);
background: #1500ff;
-webkit-transform: rotate(360deg) translate(0, 150px);
transform: rotate(360deg) translate(0, 150px);
}
.circle:nth-child(10) .content:nth-child(25):before, .circle:nth-child(10) .content:nth-child(25):after {
width: 86px;
height: 40px;
-webkit-clip-path: polygon(96% 0, 69% 0, 4% 48%);
clip-path: polygon(96% 0, 69% 0, 4% 48%);
}
.circle:nth-child(10) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(10) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #9418e7;
}
.circle:nth-child(11) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 165px;
left: 35.42px;
-webkit-animation: rotate 19s linear infinite;
animation: rotate 19s linear infinite;
}
.circle:nth-child(11) .content {
position: absolute;
width: 96px;
height: 22px;
top: 40%;
left: 40%;
}
.circle:nth-child(11) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(68% 0, 76% 0, 50% 48%);
clip-path: polygon(68% 0, 76% 0, 50% 48%);
background: #1703fc;
-webkit-transform: rotate(14.4deg) translate(0, 160px);
transform: rotate(14.4deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(1):before, .circle:nth-child(11) .content:nth-child(1):after {
width: 39px;
height: 9px;
-webkit-clip-path: polygon(59% 0, 63% 0, 26% 48%);
clip-path: polygon(59% 0, 63% 0, 26% 48%);
}
.circle:nth-child(11) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #8c41be;
}
.circle:nth-child(11) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(22% 0, 57% 0, 36% 48%);
clip-path: polygon(22% 0, 57% 0, 36% 48%);
background: #2513ec;
-webkit-transform: rotate(28.8deg) translate(0, 160px);
transform: rotate(28.8deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(2):before, .circle:nth-child(11) .content:nth-child(2):after {
width: 99px;
height: 32px;
-webkit-clip-path: polygon(34% 0, 66% 0, 39% 48%);
clip-path: polygon(34% 0, 66% 0, 39% 48%);
}
.circle:nth-child(11) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #807d82;
}
.circle:nth-child(11) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(65% 0, 34% 0, 65% 48%);
clip-path: polygon(65% 0, 34% 0, 65% 48%);
background: #1f0bf4;
-webkit-transform: rotate(43.2deg) translate(0, 160px);
transform: rotate(43.2deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(3):before, .circle:nth-child(11) .content:nth-child(3):after {
width: 72px;
height: 44px;
-webkit-clip-path: polygon(9% 0, 74% 0, 56% 48%);
clip-path: polygon(9% 0, 74% 0, 56% 48%);
}
.circle:nth-child(11) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #846a95;
}
.circle:nth-child(11) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(72% 0, 78% 0, 21% 48%);
clip-path: polygon(72% 0, 78% 0, 21% 48%);
background: #4b41be;
-webkit-transform: rotate(57.6deg) translate(0, 160px);
transform: rotate(57.6deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(4):before, .circle:nth-child(11) .content:nth-child(4):after {
width: 69px;
height: 16px;
-webkit-clip-path: polygon(40% 0, 40% 0, 78% 48%);
clip-path: polygon(40% 0, 40% 0, 78% 48%);
}
.circle:nth-child(11) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #9806f9;
}
.circle:nth-child(11) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 38% 0, 50% 48%);
clip-path: polygon(90% 0, 38% 0, 50% 48%);
background: #3425da;
-webkit-transform: rotate(72deg) translate(0, 160px);
transform: rotate(72deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(5):before, .circle:nth-child(11) .content:nth-child(5):after {
width: 18px;
height: 37px;
-webkit-clip-path: polygon(66% 0, 68% 0, 57% 48%);
clip-path: polygon(66% 0, 68% 0, 57% 48%);
}
.circle:nth-child(11) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8a4bb4;
}
.circle:nth-child(11) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(95% 0, 83% 0, 98% 48%);
clip-path: polygon(95% 0, 83% 0, 98% 48%);
background: #75738c;
-webkit-transform: rotate(86.4deg) translate(0, 160px);
transform: rotate(86.4deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(6):before, .circle:nth-child(11) .content:nth-child(6):after {
width: 18px;
height: 23px;
-webkit-clip-path: polygon(46% 0, 32% 0, 77% 48%);
clip-path: polygon(46% 0, 32% 0, 77% 48%);
}
.circle:nth-child(11) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(11) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(53% 0, 53% 0, 3% 48%);
clip-path: polygon(53% 0, 53% 0, 3% 48%);
background: #2716e9;
-webkit-transform: rotate(100.8deg) translate(0, 160px);
transform: rotate(100.8deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(7):before, .circle:nth-child(11) .content:nth-child(7):after {
width: 41px;
height: 11px;
-webkit-clip-path: polygon(62% 0, 79% 0, 8% 48%);
clip-path: polygon(62% 0, 79% 0, 8% 48%);
}
.circle:nth-child(11) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #836e91;
}
.circle:nth-child(11) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(14% 0, 70% 0, 9% 48%);
clip-path: polygon(14% 0, 70% 0, 9% 48%);
background: #544bb4;
-webkit-transform: rotate(115.2deg) translate(0, 160px);
transform: rotate(115.2deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(8):before, .circle:nth-child(11) .content:nth-child(8):after {
width: 36px;
height: 35px;
-webkit-clip-path: polygon(64% 0, 41% 0, 4% 48%);
clip-path: polygon(64% 0, 41% 0, 4% 48%);
}
.circle:nth-child(11) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #807d82;
}
.circle:nth-child(11) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 73% 0, 49% 48%);
clip-path: polygon(75% 0, 73% 0, 49% 48%);
background: #6f6b94;
-webkit-transform: rotate(129.6deg) translate(0, 160px);
transform: rotate(129.6deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(9):before, .circle:nth-child(11) .content:nth-child(9):after {
width: 27px;
height: 30px;
-webkit-clip-path: polygon(55% 0, 10% 0, 95% 48%);
clip-path: polygon(55% 0, 10% 0, 95% 48%);
}
.circle:nth-child(11) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #9126d9;
}
.circle:nth-child(11) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(70% 0, 99% 0, 28% 48%);
clip-path: polygon(70% 0, 99% 0, 28% 48%);
background: #77758a;
-webkit-transform: rotate(144deg) translate(0, 160px);
transform: rotate(144deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(10):before, .circle:nth-child(11) .content:nth-child(10):after {
width: 32px;
height: 34px;
-webkit-clip-path: polygon(27% 0, 40% 0, 5% 48%);
clip-path: polygon(27% 0, 40% 0, 5% 48%);
}
.circle:nth-child(11) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #865da2;
}
.circle:nth-child(11) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 96% 0, 95% 48%);
clip-path: polygon(60% 0, 96% 0, 95% 48%);
background: #200df2;
-webkit-transform: rotate(158.4deg) translate(0, 160px);
transform: rotate(158.4deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(11):before, .circle:nth-child(11) .content:nth-child(11):after {
width: 77px;
height: 29px;
-webkit-clip-path: polygon(58% 0, 67% 0, 99% 48%);
clip-path: polygon(58% 0, 67% 0, 99% 48%);
}
.circle:nth-child(11) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #817788;
}
.circle:nth-child(11) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 10% 0, 68% 48%);
clip-path: polygon(44% 0, 10% 0, 68% 48%);
background: #1f0bf4;
-webkit-transform: rotate(172.8deg) translate(0, 160px);
transform: rotate(172.8deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(12):before, .circle:nth-child(11) .content:nth-child(12):after {
width: 70px;
height: 21px;
-webkit-clip-path: polygon(29% 0, 95% 0, 96% 48%);
clip-path: polygon(29% 0, 95% 0, 96% 48%);
}
.circle:nth-child(11) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #912ad5;
}
.circle:nth-child(11) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(37% 0, 83% 0, 77% 48%);
clip-path: polygon(37% 0, 83% 0, 77% 48%);
background: #3f32cd;
-webkit-transform: rotate(187.2deg) translate(0, 160px);
transform: rotate(187.2deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(13):before, .circle:nth-child(11) .content:nth-child(13):after {
width: 47px;
height: 12px;
-webkit-clip-path: polygon(48% 0, 83% 0, 41% 48%);
clip-path: polygon(48% 0, 83% 0, 41% 48%);
}
.circle:nth-child(11) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #8c42bd;
}
.circle:nth-child(11) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(86% 0, 19% 0, 27% 48%);
clip-path: polygon(86% 0, 19% 0, 27% 48%);
background: #5850af;
-webkit-transform: rotate(201.6deg) translate(0, 160px);
transform: rotate(201.6deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(14):before, .circle:nth-child(11) .content:nth-child(14):after {
width: 41px;
height: 29px;
-webkit-clip-path: polygon(80% 0, 19% 0, 23% 48%);
clip-path: polygon(80% 0, 19% 0, 23% 48%);
}
.circle:nth-child(11) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #817a85;
}
.circle:nth-child(11) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(38% 0, 98% 0, 47% 48%);
clip-path: polygon(38% 0, 98% 0, 47% 48%);
background: #2513ec;
-webkit-transform: rotate(216deg) translate(0, 160px);
transform: rotate(216deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(15):before, .circle:nth-child(11) .content:nth-child(15):after {
width: 75px;
height: 7px;
-webkit-clip-path: polygon(68% 0, 7% 0, 2% 48%);
clip-path: polygon(68% 0, 7% 0, 2% 48%);
}
.circle:nth-child(11) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #8f34cb;
}
.circle:nth-child(11) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(54% 0, 31% 0, 84% 48%);
clip-path: polygon(54% 0, 31% 0, 84% 48%);
background: #4e44bb;
-webkit-transform: rotate(230.4deg) translate(0, 160px);
transform: rotate(230.4deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(16):before, .circle:nth-child(11) .content:nth-child(16):after {
width: 59px;
height: 5px;
-webkit-clip-path: polygon(86% 0, 43% 0, 69% 48%);
clip-path: polygon(86% 0, 43% 0, 69% 48%);
}
.circle:nth-child(11) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #894eb1;
}
.circle:nth-child(11) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 98% 0, 93% 48%);
clip-path: polygon(90% 0, 98% 0, 93% 48%);
background: #210ef1;
-webkit-transform: rotate(244.8deg) translate(0, 160px);
transform: rotate(244.8deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(17):before, .circle:nth-child(11) .content:nth-child(17):after {
width: 95px;
height: 2px;
-webkit-clip-path: polygon(42% 0, 58% 0, 22% 48%);
clip-path: polygon(42% 0, 58% 0, 22% 48%);
}
.circle:nth-child(11) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #8f30cf;
}
.circle:nth-child(11) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(58% 0, 14% 0, 58% 48%);
clip-path: polygon(58% 0, 14% 0, 58% 48%);
background: #6d6a95;
-webkit-transform: rotate(259.2deg) translate(0, 160px);
transform: rotate(259.2deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(18):before, .circle:nth-child(11) .content:nth-child(18):after {
width: 18px;
height: 18px;
-webkit-clip-path: polygon(73% 0, 44% 0, 27% 48%);
clip-path: polygon(73% 0, 44% 0, 27% 48%);
}
.circle:nth-child(11) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #8e38c7;
}
.circle:nth-child(11) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(28% 0, 7% 0, 44% 48%);
clip-path: polygon(28% 0, 7% 0, 44% 48%);
background: #2e1de2;
-webkit-transform: rotate(273.6deg) translate(0, 160px);
transform: rotate(273.6deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(19):before, .circle:nth-child(11) .content:nth-child(19):after {
width: 4px;
height: 20px;
-webkit-clip-path: polygon(21% 0, 92% 0, 58% 48%);
clip-path: polygon(21% 0, 92% 0, 58% 48%);
}
.circle:nth-child(11) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #9225da;
}
.circle:nth-child(11) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(64% 0, 85% 0, 22% 48%);
clip-path: polygon(64% 0, 85% 0, 22% 48%);
background: #7b7a85;
-webkit-transform: rotate(288deg) translate(0, 160px);
transform: rotate(288deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(20):before, .circle:nth-child(11) .content:nth-child(20):after {
width: 46px;
height: 36px;
-webkit-clip-path: polygon(54% 0, 26% 0, 40% 48%);
clip-path: polygon(54% 0, 26% 0, 40% 48%);
}
.circle:nth-child(11) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(11) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(13% 0, 86% 0, 8% 48%);
clip-path: polygon(13% 0, 86% 0, 8% 48%);
background: #2e1de2;
-webkit-transform: rotate(302.4deg) translate(0, 160px);
transform: rotate(302.4deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(21):before, .circle:nth-child(11) .content:nth-child(21):after {
width: 73px;
height: 30px;
-webkit-clip-path: polygon(72% 0, 64% 0, 78% 48%);
clip-path: polygon(72% 0, 64% 0, 78% 48%);
}
.circle:nth-child(11) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #817986;
}
.circle:nth-child(11) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(93% 0, 6% 0, 38% 48%);
clip-path: polygon(93% 0, 6% 0, 38% 48%);
background: #615ba4;
-webkit-transform: rotate(316.8deg) translate(0, 160px);
transform: rotate(316.8deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(22):before, .circle:nth-child(11) .content:nth-child(22):after {
width: 96px;
height: 12px;
-webkit-clip-path: polygon(38% 0, 51% 0, 2% 48%);
clip-path: polygon(38% 0, 51% 0, 2% 48%);
}
.circle:nth-child(11) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #817788;
}
.circle:nth-child(11) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(7% 0, 82% 0, 67% 48%);
clip-path: polygon(7% 0, 82% 0, 67% 48%);
background: #382ad5;
-webkit-transform: rotate(331.2deg) translate(0, 160px);
transform: rotate(331.2deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(23):before, .circle:nth-child(11) .content:nth-child(23):after {
width: 85px;
height: 27px;
-webkit-clip-path: polygon(60% 0, 31% 0, 32% 48%);
clip-path: polygon(60% 0, 31% 0, 32% 48%);
}
.circle:nth-child(11) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #836e91;
}
.circle:nth-child(11) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(82% 0, 78% 0, 47% 48%);
clip-path: polygon(82% 0, 78% 0, 47% 48%);
background: #3628d7;
-webkit-transform: rotate(345.6deg) translate(0, 160px);
transform: rotate(345.6deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(24):before, .circle:nth-child(11) .content:nth-child(24):after {
width: 67px;
height: 28px;
-webkit-clip-path: polygon(40% 0, 89% 0, 90% 48%);
clip-path: polygon(40% 0, 89% 0, 90% 48%);
}
.circle:nth-child(11) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #9514eb;
}
.circle:nth-child(11) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 53% 0, 89% 48%);
clip-path: polygon(35% 0, 53% 0, 89% 48%);
background: #2817e8;
-webkit-transform: rotate(360deg) translate(0, 160px);
transform: rotate(360deg) translate(0, 160px);
}
.circle:nth-child(11) .content:nth-child(25):before, .circle:nth-child(11) .content:nth-child(25):after {
width: 78px;
height: 36px;
-webkit-clip-path: polygon(17% 0, 43% 0, 93% 48%);
clip-path: polygon(17% 0, 43% 0, 93% 48%);
}
.circle:nth-child(11) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(11) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #836f90;
}
.circle:nth-child(12) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 180px;
left: 38.64px;
-webkit-animation: rotate-reverse 21s linear infinite;
animation: rotate-reverse 21s linear infinite;
}
.circle:nth-child(12) .content {
position: absolute;
width: 123px;
height: 24px;
top: 40%;
left: 40%;
}
.circle:nth-child(12) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(100% 0, 46% 0, 80% 48%);
clip-path: polygon(100% 0, 46% 0, 80% 48%);
background: #615ba4;
-webkit-transform: rotate(14.4deg) translate(0, 170px);
transform: rotate(14.4deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(1):before, .circle:nth-child(12) .content:nth-child(1):after {
width: 74px;
height: 33px;
-webkit-clip-path: polygon(44% 0, 27% 0, 56% 48%);
clip-path: polygon(44% 0, 27% 0, 56% 48%);
}
.circle:nth-child(12) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #807d82;
}
.circle:nth-child(12) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(88% 0, 95% 0, 95% 48%);
clip-path: polygon(88% 0, 95% 0, 95% 48%);
background: #4d42bd;
-webkit-transform: rotate(28.8deg) translate(0, 170px);
transform: rotate(28.8deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(2):before, .circle:nth-child(12) .content:nth-child(2):after {
width: 85px;
height: 36px;
-webkit-clip-path: polygon(18% 0, 18% 0, 53% 48%);
clip-path: polygon(18% 0, 18% 0, 53% 48%);
}
.circle:nth-child(12) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #875ca3;
}
.circle:nth-child(12) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(27% 0, 10% 0, 19% 48%);
clip-path: polygon(27% 0, 10% 0, 19% 48%);
background: #473cc3;
-webkit-transform: rotate(43.2deg) translate(0, 170px);
transform: rotate(43.2deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(3):before, .circle:nth-child(12) .content:nth-child(3):after {
width: 11px;
height: 38px;
-webkit-clip-path: polygon(45% 0, 38% 0, 34% 48%);
clip-path: polygon(45% 0, 38% 0, 34% 48%);
}
.circle:nth-child(12) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(12) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(88% 0, 57% 0, 5% 48%);
clip-path: polygon(88% 0, 57% 0, 5% 48%);
background: #74718e;
-webkit-transform: rotate(57.6deg) translate(0, 170px);
transform: rotate(57.6deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(4):before, .circle:nth-child(12) .content:nth-child(4):after {
width: 4px;
height: 45px;
-webkit-clip-path: polygon(67% 0, 36% 0, 36% 48%);
clip-path: polygon(67% 0, 36% 0, 36% 48%);
}
.circle:nth-child(12) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #8b47b8;
}
.circle:nth-child(12) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(32% 0, 68% 0, 37% 48%);
clip-path: polygon(32% 0, 68% 0, 37% 48%);
background: #74718e;
-webkit-transform: rotate(72deg) translate(0, 170px);
transform: rotate(72deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(5):before, .circle:nth-child(12) .content:nth-child(5):after {
width: 18px;
height: 43px;
-webkit-clip-path: polygon(63% 0, 49% 0, 51% 48%);
clip-path: polygon(63% 0, 49% 0, 51% 48%);
}
.circle:nth-child(12) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #817a85;
}
.circle:nth-child(12) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(50% 0, 87% 0, 68% 48%);
clip-path: polygon(50% 0, 87% 0, 68% 48%);
background: #220ff0;
-webkit-transform: rotate(86.4deg) translate(0, 170px);
transform: rotate(86.4deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(6):before, .circle:nth-child(12) .content:nth-child(6):after {
width: 42px;
height: 29px;
-webkit-clip-path: polygon(13% 0, 14% 0, 81% 48%);
clip-path: polygon(13% 0, 14% 0, 81% 48%);
}
.circle:nth-child(12) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #8f32cd;
}
.circle:nth-child(12) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 100% 0, 100% 48%);
clip-path: polygon(44% 0, 100% 0, 100% 48%);
background: #5952ad;
-webkit-transform: rotate(100.8deg) translate(0, 170px);
transform: rotate(100.8deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(7):before, .circle:nth-child(12) .content:nth-child(7):after {
width: 91px;
height: 6px;
-webkit-clip-path: polygon(86% 0, 23% 0, 11% 48%);
clip-path: polygon(86% 0, 23% 0, 11% 48%);
}
.circle:nth-child(12) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #9126d9;
}
.circle:nth-child(12) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(80% 0, 94% 0, 39% 48%);
clip-path: polygon(80% 0, 94% 0, 39% 48%);
background: #3222dd;
-webkit-transform: rotate(115.2deg) translate(0, 170px);
transform: rotate(115.2deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(8):before, .circle:nth-child(12) .content:nth-child(8):after {
width: 44px;
height: 13px;
-webkit-clip-path: polygon(13% 0, 2% 0, 63% 48%);
clip-path: polygon(13% 0, 2% 0, 63% 48%);
}
.circle:nth-child(12) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #8758a7;
}
.circle:nth-child(12) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 68% 0, 11% 48%);
clip-path: polygon(62% 0, 68% 0, 11% 48%);
background: #75738c;
-webkit-transform: rotate(129.6deg) translate(0, 170px);
transform: rotate(129.6deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(9):before, .circle:nth-child(12) .content:nth-child(9):after {
width: 57px;
height: 2px;
-webkit-clip-path: polygon(3% 0, 70% 0, 62% 48%);
clip-path: polygon(3% 0, 70% 0, 62% 48%);
}
.circle:nth-child(12) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #9804fb;
}
.circle:nth-child(12) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(83% 0, 69% 0, 13% 48%);
clip-path: polygon(83% 0, 69% 0, 13% 48%);
background: #3324db;
-webkit-transform: rotate(144deg) translate(0, 170px);
transform: rotate(144deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(10):before, .circle:nth-child(12) .content:nth-child(10):after {
width: 70px;
height: 15px;
-webkit-clip-path: polygon(15% 0, 74% 0, 71% 48%);
clip-path: polygon(15% 0, 74% 0, 71% 48%);
}
.circle:nth-child(12) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #8d3dc2;
}
.circle:nth-child(12) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(73% 0, 64% 0, 15% 48%);
clip-path: polygon(73% 0, 64% 0, 15% 48%);
background: #1a05fa;
-webkit-transform: rotate(158.4deg) translate(0, 170px);
transform: rotate(158.4deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(11):before, .circle:nth-child(12) .content:nth-child(11):after {
width: 6px;
height: 48px;
-webkit-clip-path: polygon(85% 0, 26% 0, 1% 48%);
clip-path: polygon(85% 0, 26% 0, 1% 48%);
}
.circle:nth-child(12) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #9418e7;
}
.circle:nth-child(12) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(91% 0, 95% 0, 8% 48%);
clip-path: polygon(91% 0, 95% 0, 8% 48%);
background: #473cc3;
-webkit-transform: rotate(172.8deg) translate(0, 170px);
transform: rotate(172.8deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(12):before, .circle:nth-child(12) .content:nth-child(12):after {
width: 81px;
height: 50px;
-webkit-clip-path: polygon(2% 0, 32% 0, 43% 48%);
clip-path: polygon(2% 0, 32% 0, 43% 48%);
}
.circle:nth-child(12) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #902dd2;
}
.circle:nth-child(12) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(22% 0, 25% 0, 27% 48%);
clip-path: polygon(22% 0, 25% 0, 27% 48%);
background: #1e0af5;
-webkit-transform: rotate(187.2deg) translate(0, 170px);
transform: rotate(187.2deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(13):before, .circle:nth-child(12) .content:nth-child(13):after {
width: 89px;
height: 31px;
-webkit-clip-path: polygon(62% 0, 61% 0, 7% 48%);
clip-path: polygon(62% 0, 61% 0, 7% 48%);
}
.circle:nth-child(12) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #817887;
}
.circle:nth-child(12) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(63% 0, 47% 0, 97% 48%);
clip-path: polygon(63% 0, 47% 0, 97% 48%);
background: #69659a;
-webkit-transform: rotate(201.6deg) translate(0, 170px);
transform: rotate(201.6deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(14):before, .circle:nth-child(12) .content:nth-child(14):after {
width: 43px;
height: 28px;
-webkit-clip-path: polygon(67% 0, 7% 0, 70% 48%);
clip-path: polygon(67% 0, 7% 0, 70% 48%);
}
.circle:nth-child(12) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #941be4;
}
.circle:nth-child(12) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(64% 0, 37% 0, 22% 48%);
clip-path: polygon(64% 0, 37% 0, 22% 48%);
background: #68639c;
-webkit-transform: rotate(216deg) translate(0, 170px);
transform: rotate(216deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(15):before, .circle:nth-child(12) .content:nth-child(15):after {
width: 9px;
height: 31px;
-webkit-clip-path: polygon(38% 0, 35% 0, 19% 48%);
clip-path: polygon(38% 0, 35% 0, 19% 48%);
}
.circle:nth-child(12) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #9805fa;
}
.circle:nth-child(12) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(77% 0, 99% 0, 55% 48%);
clip-path: polygon(77% 0, 99% 0, 55% 48%);
background: #5a53ac;
-webkit-transform: rotate(230.4deg) translate(0, 170px);
transform: rotate(230.4deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(16):before, .circle:nth-child(12) .content:nth-child(16):after {
width: 37px;
height: 11px;
-webkit-clip-path: polygon(7% 0, 53% 0, 41% 48%);
clip-path: polygon(7% 0, 53% 0, 41% 48%);
}
.circle:nth-child(12) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(12) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(44% 0, 13% 0, 27% 48%);
clip-path: polygon(44% 0, 13% 0, 27% 48%);
background: #1804fb;
-webkit-transform: rotate(244.8deg) translate(0, 170px);
transform: rotate(244.8deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(17):before, .circle:nth-child(12) .content:nth-child(17):after {
width: 13px;
height: 16px;
-webkit-clip-path: polygon(97% 0, 66% 0, 99% 48%);
clip-path: polygon(97% 0, 66% 0, 99% 48%);
}
.circle:nth-child(12) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #8e38c7;
}
.circle:nth-child(12) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 81% 0, 6% 48%);
clip-path: polygon(35% 0, 81% 0, 6% 48%);
background: #4134cb;
-webkit-transform: rotate(259.2deg) translate(0, 170px);
transform: rotate(259.2deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(18):before, .circle:nth-child(12) .content:nth-child(18):after {
width: 51px;
height: 20px;
-webkit-clip-path: polygon(53% 0, 2% 0, 99% 48%);
clip-path: polygon(53% 0, 2% 0, 99% 48%);
}
.circle:nth-child(12) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(12) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(53% 0, 66% 0, 37% 48%);
clip-path: polygon(53% 0, 66% 0, 37% 48%);
background: #69659a;
-webkit-transform: rotate(273.6deg) translate(0, 170px);
transform: rotate(273.6deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(19):before, .circle:nth-child(12) .content:nth-child(19):after {
width: 8px;
height: 31px;
-webkit-clip-path: polygon(19% 0, 42% 0, 56% 48%);
clip-path: polygon(19% 0, 42% 0, 56% 48%);
}
.circle:nth-child(12) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #8854ab;
}
.circle:nth-child(12) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 54% 0, 9% 48%);
clip-path: polygon(60% 0, 54% 0, 9% 48%);
background: #6c6996;
-webkit-transform: rotate(288deg) translate(0, 170px);
transform: rotate(288deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(20):before, .circle:nth-child(12) .content:nth-child(20):after {
width: 49px;
height: 11px;
-webkit-clip-path: polygon(87% 0, 37% 0, 25% 48%);
clip-path: polygon(87% 0, 37% 0, 25% 48%);
}
.circle:nth-child(12) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #9225da;
}
.circle:nth-child(12) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 21% 0, 82% 48%);
clip-path: polygon(75% 0, 21% 0, 82% 48%);
background: #4438c7;
-webkit-transform: rotate(302.4deg) translate(0, 170px);
transform: rotate(302.4deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(21):before, .circle:nth-child(12) .content:nth-child(21):after {
width: 69px;
height: 22px;
-webkit-clip-path: polygon(72% 0, 8% 0, 77% 48%);
clip-path: polygon(72% 0, 8% 0, 77% 48%);
}
.circle:nth-child(12) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #85639c;
}
.circle:nth-child(12) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(3% 0, 65% 0, 37% 48%);
clip-path: polygon(3% 0, 65% 0, 37% 48%);
background: #77758a;
-webkit-transform: rotate(316.8deg) translate(0, 170px);
transform: rotate(316.8deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(22):before, .circle:nth-child(12) .content:nth-child(22):after {
width: 78px;
height: 7px;
-webkit-clip-path: polygon(43% 0, 36% 0, 93% 48%);
clip-path: polygon(43% 0, 36% 0, 93% 48%);
}
.circle:nth-child(12) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #9805fa;
}
.circle:nth-child(12) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(16% 0, 65% 0, 100% 48%);
clip-path: polygon(16% 0, 65% 0, 100% 48%);
background: #3526d9;
-webkit-transform: rotate(331.2deg) translate(0, 170px);
transform: rotate(331.2deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(23):before, .circle:nth-child(12) .content:nth-child(23):after {
width: 18px;
height: 40px;
-webkit-clip-path: polygon(91% 0, 58% 0, 32% 48%);
clip-path: polygon(91% 0, 58% 0, 32% 48%);
}
.circle:nth-child(12) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #960ef1;
}
.circle:nth-child(12) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(90% 0, 66% 0, 53% 48%);
clip-path: polygon(90% 0, 66% 0, 53% 48%);
background: #5850af;
-webkit-transform: rotate(345.6deg) translate(0, 170px);
transform: rotate(345.6deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(24):before, .circle:nth-child(12) .content:nth-child(24):after {
width: 12px;
height: 14px;
-webkit-clip-path: polygon(77% 0, 89% 0, 96% 48%);
clip-path: polygon(77% 0, 89% 0, 96% 48%);
}
.circle:nth-child(12) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #8d3ec1;
}
.circle:nth-child(12) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(71% 0, 10% 0, 3% 48%);
clip-path: polygon(71% 0, 10% 0, 3% 48%);
background: #1a05fa;
-webkit-transform: rotate(360deg) translate(0, 170px);
transform: rotate(360deg) translate(0, 170px);
}
.circle:nth-child(12) .content:nth-child(25):before, .circle:nth-child(12) .content:nth-child(25):after {
width: 39px;
height: 6px;
-webkit-clip-path: polygon(64% 0, 80% 0, 41% 48%);
clip-path: polygon(64% 0, 80% 0, 41% 48%);
}
.circle:nth-child(12) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(12) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #8e39c6;
}
.circle:nth-child(13) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 195px;
left: 41.86px;
-webkit-animation: rotate 15s linear infinite;
animation: rotate 15s linear infinite;
}
.circle:nth-child(13) .content {
position: absolute;
width: 118px;
height: 1px;
top: 40%;
left: 40%;
}
.circle:nth-child(13) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(53% 0, 51% 0, 24% 48%);
clip-path: polygon(53% 0, 51% 0, 24% 48%);
background: #797887;
-webkit-transform: rotate(14.4deg) translate(0, 180px);
transform: rotate(14.4deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(1):before, .circle:nth-child(13) .content:nth-child(1):after {
width: 50px;
height: 10px;
-webkit-clip-path: polygon(100% 0, 49% 0, 82% 48%);
clip-path: polygon(100% 0, 49% 0, 82% 48%);
}
.circle:nth-child(13) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #9221de;
}
.circle:nth-child(13) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(11% 0, 96% 0, 43% 48%);
clip-path: polygon(11% 0, 96% 0, 43% 48%);
background: #1f0bf4;
-webkit-transform: rotate(28.8deg) translate(0, 180px);
transform: rotate(28.8deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(2):before, .circle:nth-child(13) .content:nth-child(2):after {
width: 6px;
height: 17px;
-webkit-clip-path: polygon(63% 0, 82% 0, 86% 48%);
clip-path: polygon(63% 0, 82% 0, 86% 48%);
}
.circle:nth-child(13) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #8b46b9;
}
.circle:nth-child(13) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(97% 0, 21% 0, 17% 48%);
clip-path: polygon(97% 0, 21% 0, 17% 48%);
background: #1c08f7;
-webkit-transform: rotate(43.2deg) translate(0, 180px);
transform: rotate(43.2deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(3):before, .circle:nth-child(13) .content:nth-child(3):after {
width: 83px;
height: 43px;
-webkit-clip-path: polygon(69% 0, 12% 0, 100% 48%);
clip-path: polygon(69% 0, 12% 0, 100% 48%);
}
.circle:nth-child(13) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #846b94;
}
.circle:nth-child(13) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(82% 0, 11% 0, 90% 48%);
clip-path: polygon(82% 0, 11% 0, 90% 48%);
background: #7c7c83;
-webkit-transform: rotate(57.6deg) translate(0, 180px);
transform: rotate(57.6deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(4):before, .circle:nth-child(13) .content:nth-child(4):after {
width: 96px;
height: 46px;
-webkit-clip-path: polygon(82% 0, 81% 0, 82% 48%);
clip-path: polygon(82% 0, 81% 0, 82% 48%);
}
.circle:nth-child(13) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #9804fb;
}
.circle:nth-child(13) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(4% 0, 4% 0, 9% 48%);
clip-path: polygon(4% 0, 4% 0, 9% 48%);
background: #4438c7;
-webkit-transform: rotate(72deg) translate(0, 180px);
transform: rotate(72deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(5):before, .circle:nth-child(13) .content:nth-child(5):after {
width: 38px;
height: 16px;
-webkit-clip-path: polygon(24% 0, 47% 0, 70% 48%);
clip-path: polygon(24% 0, 47% 0, 70% 48%);
}
.circle:nth-child(13) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8f30cf;
}
.circle:nth-child(13) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(99% 0, 50% 0, 68% 48%);
clip-path: polygon(99% 0, 50% 0, 68% 48%);
background: #787788;
-webkit-transform: rotate(86.4deg) translate(0, 180px);
transform: rotate(86.4deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(6):before, .circle:nth-child(13) .content:nth-child(6):after {
width: 16px;
height: 44px;
-webkit-clip-path: polygon(67% 0, 1% 0, 82% 48%);
clip-path: polygon(67% 0, 1% 0, 82% 48%);
}
.circle:nth-child(13) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(13) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(48% 0, 78% 0, 88% 48%);
clip-path: polygon(48% 0, 78% 0, 88% 48%);
background: #4438c7;
-webkit-transform: rotate(100.8deg) translate(0, 180px);
transform: rotate(100.8deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(7):before, .circle:nth-child(13) .content:nth-child(7):after {
width: 39px;
height: 23px;
-webkit-clip-path: polygon(28% 0, 61% 0, 27% 48%);
clip-path: polygon(28% 0, 61% 0, 27% 48%);
}
.circle:nth-child(13) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #8f30cf;
}
.circle:nth-child(13) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(78% 0, 84% 0, 55% 48%);
clip-path: polygon(78% 0, 84% 0, 55% 48%);
background: #2e1de2;
-webkit-transform: rotate(115.2deg) translate(0, 180px);
transform: rotate(115.2deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(8):before, .circle:nth-child(13) .content:nth-child(8):after {
width: 50px;
height: 27px;
-webkit-clip-path: polygon(62% 0, 41% 0, 4% 48%);
clip-path: polygon(62% 0, 41% 0, 4% 48%);
}
.circle:nth-child(13) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #86619e;
}
.circle:nth-child(13) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(15% 0, 38% 0, 63% 48%);
clip-path: polygon(15% 0, 38% 0, 63% 48%);
background: #2b1ae6;
-webkit-transform: rotate(129.6deg) translate(0, 180px);
transform: rotate(129.6deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(9):before, .circle:nth-child(13) .content:nth-child(9):after {
width: 51px;
height: 39px;
-webkit-clip-path: polygon(51% 0, 100% 0, 52% 48%);
clip-path: polygon(51% 0, 100% 0, 52% 48%);
}
.circle:nth-child(13) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #817887;
}
.circle:nth-child(13) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(39% 0, 22% 0, 14% 48%);
clip-path: polygon(39% 0, 22% 0, 14% 48%);
background: #4236c9;
-webkit-transform: rotate(144deg) translate(0, 180px);
transform: rotate(144deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(10):before, .circle:nth-child(13) .content:nth-child(10):after {
width: 94px;
height: 48px;
-webkit-clip-path: polygon(73% 0, 14% 0, 86% 48%);
clip-path: polygon(73% 0, 14% 0, 86% 48%);
}
.circle:nth-child(13) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #836e91;
}
.circle:nth-child(13) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(89% 0, 59% 0, 23% 48%);
clip-path: polygon(89% 0, 59% 0, 23% 48%);
background: #2e1de2;
-webkit-transform: rotate(158.4deg) translate(0, 180px);
transform: rotate(158.4deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(11):before, .circle:nth-child(13) .content:nth-child(11):after {
width: 45px;
height: 10px;
-webkit-clip-path: polygon(56% 0, 36% 0, 54% 48%);
clip-path: polygon(56% 0, 36% 0, 54% 48%);
}
.circle:nth-child(13) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #8c40bf;
}
.circle:nth-child(13) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(86% 0, 62% 0, 34% 48%);
clip-path: polygon(86% 0, 62% 0, 34% 48%);
background: #716e91;
-webkit-transform: rotate(172.8deg) translate(0, 180px);
transform: rotate(172.8deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(12):before, .circle:nth-child(13) .content:nth-child(12):after {
width: 64px;
height: 15px;
-webkit-clip-path: polygon(58% 0, 19% 0, 61% 48%);
clip-path: polygon(58% 0, 19% 0, 61% 48%);
}
.circle:nth-child(13) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(13) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(71% 0, 97% 0, 43% 48%);
clip-path: polygon(71% 0, 97% 0, 43% 48%);
background: #615ba4;
-webkit-transform: rotate(187.2deg) translate(0, 180px);
transform: rotate(187.2deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(13):before, .circle:nth-child(13) .content:nth-child(13):after {
width: 9px;
height: 29px;
-webkit-clip-path: polygon(45% 0, 19% 0, 30% 48%);
clip-path: polygon(45% 0, 19% 0, 30% 48%);
}
.circle:nth-child(13) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #807e81;
}
.circle:nth-child(13) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(84% 0, 31% 0, 89% 48%);
clip-path: polygon(84% 0, 31% 0, 89% 48%);
background: #797887;
-webkit-transform: rotate(201.6deg) translate(0, 180px);
transform: rotate(201.6deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(14):before, .circle:nth-child(13) .content:nth-child(14):after {
width: 58px;
height: 16px;
-webkit-clip-path: polygon(80% 0, 19% 0, 17% 48%);
clip-path: polygon(80% 0, 19% 0, 17% 48%);
}
.circle:nth-child(13) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #817887;
}
.circle:nth-child(13) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(25% 0, 29% 0, 2% 48%);
clip-path: polygon(25% 0, 29% 0, 2% 48%);
background: #3526d9;
-webkit-transform: rotate(216deg) translate(0, 180px);
transform: rotate(216deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(15):before, .circle:nth-child(13) .content:nth-child(15):after {
width: 68px;
height: 49px;
-webkit-clip-path: polygon(59% 0, 3% 0, 3% 48%);
clip-path: polygon(59% 0, 3% 0, 3% 48%);
}
.circle:nth-child(13) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #865da2;
}
.circle:nth-child(13) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(34% 0, 55% 0, 20% 48%);
clip-path: polygon(34% 0, 55% 0, 20% 48%);
background: #5249b6;
-webkit-transform: rotate(230.4deg) translate(0, 180px);
transform: rotate(230.4deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(16):before, .circle:nth-child(13) .content:nth-child(16):after {
width: 87px;
height: 35px;
-webkit-clip-path: polygon(41% 0, 22% 0, 53% 48%);
clip-path: polygon(41% 0, 22% 0, 53% 48%);
}
.circle:nth-child(13) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #8b44bb;
}
.circle:nth-child(13) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(77% 0, 6% 0, 59% 48%);
clip-path: polygon(77% 0, 6% 0, 59% 48%);
background: #2817e8;
-webkit-transform: rotate(244.8deg) translate(0, 180px);
transform: rotate(244.8deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(17):before, .circle:nth-child(13) .content:nth-child(17):after {
width: 9px;
height: 37px;
-webkit-clip-path: polygon(71% 0, 72% 0, 95% 48%);
clip-path: polygon(71% 0, 72% 0, 95% 48%);
}
.circle:nth-child(13) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #807c83;
}
.circle:nth-child(13) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(34% 0, 60% 0, 38% 48%);
clip-path: polygon(34% 0, 60% 0, 38% 48%);
background: #544bb4;
-webkit-transform: rotate(259.2deg) translate(0, 180px);
transform: rotate(259.2deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(18):before, .circle:nth-child(13) .content:nth-child(18):after {
width: 42px;
height: 40px;
-webkit-clip-path: polygon(85% 0, 79% 0, 60% 48%);
clip-path: polygon(85% 0, 79% 0, 60% 48%);
}
.circle:nth-child(13) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #8855aa;
}
.circle:nth-child(13) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(12% 0, 22% 0, 25% 48%);
clip-path: polygon(12% 0, 22% 0, 25% 48%);
background: #392bd4;
-webkit-transform: rotate(273.6deg) translate(0, 180px);
transform: rotate(273.6deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(19):before, .circle:nth-child(13) .content:nth-child(19):after {
width: 61px;
height: 19px;
-webkit-clip-path: polygon(9% 0, 15% 0, 57% 48%);
clip-path: polygon(9% 0, 15% 0, 57% 48%);
}
.circle:nth-child(13) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #8f30cf;
}
.circle:nth-child(13) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(14% 0, 84% 0, 49% 48%);
clip-path: polygon(14% 0, 84% 0, 49% 48%);
background: #2817e8;
-webkit-transform: rotate(288deg) translate(0, 180px);
transform: rotate(288deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(20):before, .circle:nth-child(13) .content:nth-child(20):after {
width: 28px;
height: 23px;
-webkit-clip-path: polygon(91% 0, 76% 0, 19% 48%);
clip-path: polygon(91% 0, 76% 0, 19% 48%);
}
.circle:nth-child(13) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #8853ac;
}
.circle:nth-child(13) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 51% 0, 90% 48%);
clip-path: polygon(75% 0, 51% 0, 90% 48%);
background: #3222dd;
-webkit-transform: rotate(302.4deg) translate(0, 180px);
transform: rotate(302.4deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(21):before, .circle:nth-child(13) .content:nth-child(21):after {
width: 23px;
height: 1px;
-webkit-clip-path: polygon(33% 0, 11% 0, 14% 48%);
clip-path: polygon(33% 0, 11% 0, 14% 48%);
}
.circle:nth-child(13) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #807e81;
}
.circle:nth-child(13) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(8% 0, 97% 0, 42% 48%);
clip-path: polygon(8% 0, 97% 0, 42% 48%);
background: #645ea1;
-webkit-transform: rotate(316.8deg) translate(0, 180px);
transform: rotate(316.8deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(22):before, .circle:nth-child(13) .content:nth-child(22):after {
width: 85px;
height: 7px;
-webkit-clip-path: polygon(17% 0, 30% 0, 44% 48%);
clip-path: polygon(17% 0, 30% 0, 44% 48%);
}
.circle:nth-child(13) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #8e36c9;
}
.circle:nth-child(13) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(38% 0, 85% 0, 19% 48%);
clip-path: polygon(38% 0, 85% 0, 19% 48%);
background: #726f90;
-webkit-transform: rotate(331.2deg) translate(0, 180px);
transform: rotate(331.2deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(23):before, .circle:nth-child(13) .content:nth-child(23):after {
width: 21px;
height: 2px;
-webkit-clip-path: polygon(82% 0, 39% 0, 73% 48%);
clip-path: polygon(82% 0, 39% 0, 73% 48%);
}
.circle:nth-child(13) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(13) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(9% 0, 64% 0, 48% 48%);
clip-path: polygon(9% 0, 64% 0, 48% 48%);
background: #2f1fe0;
-webkit-transform: rotate(345.6deg) translate(0, 180px);
transform: rotate(345.6deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(24):before, .circle:nth-child(13) .content:nth-child(24):after {
width: 33px;
height: 4px;
-webkit-clip-path: polygon(74% 0, 13% 0, 40% 48%);
clip-path: polygon(74% 0, 13% 0, 40% 48%);
}
.circle:nth-child(13) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #82718e;
}
.circle:nth-child(13) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 42% 0, 14% 48%);
clip-path: polygon(85% 0, 42% 0, 14% 48%);
background: #726f90;
-webkit-transform: rotate(360deg) translate(0, 180px);
transform: rotate(360deg) translate(0, 180px);
}
.circle:nth-child(13) .content:nth-child(25):before, .circle:nth-child(13) .content:nth-child(25):after {
width: 100px;
height: 2px;
-webkit-clip-path: polygon(15% 0, 72% 0, 44% 48%);
clip-path: polygon(15% 0, 72% 0, 44% 48%);
}
.circle:nth-child(13) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(13) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #8d3cc3;
}
.circle:nth-child(14) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 210px;
left: 45.08px;
-webkit-animation: rotate 22s linear infinite;
animation: rotate 22s linear infinite;
}
.circle:nth-child(14) .content {
position: absolute;
width: 119px;
height: 7px;
top: 40%;
left: 40%;
}
.circle:nth-child(14) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(80% 0, 91% 0, 98% 48%);
clip-path: polygon(80% 0, 91% 0, 98% 48%);
background: #716e91;
-webkit-transform: rotate(14.4deg) translate(0, 190px);
transform: rotate(14.4deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(1):before, .circle:nth-child(14) .content:nth-child(1):after {
width: 58px;
height: 9px;
-webkit-clip-path: polygon(8% 0, 65% 0, 45% 48%);
clip-path: polygon(8% 0, 65% 0, 45% 48%);
}
.circle:nth-child(14) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #807e81;
}
.circle:nth-child(14) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(46% 0, 32% 0, 65% 48%);
clip-path: polygon(46% 0, 32% 0, 65% 48%);
background: #1500ff;
-webkit-transform: rotate(28.8deg) translate(0, 190px);
transform: rotate(28.8deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(2):before, .circle:nth-child(14) .content:nth-child(2):after {
width: 22px;
height: 6px;
-webkit-clip-path: polygon(53% 0, 97% 0, 75% 48%);
clip-path: polygon(53% 0, 97% 0, 75% 48%);
}
.circle:nth-child(14) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #8a4db3;
}
.circle:nth-child(14) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(85% 0, 11% 0, 22% 48%);
clip-path: polygon(85% 0, 11% 0, 22% 48%);
background: #68639c;
-webkit-transform: rotate(43.2deg) translate(0, 190px);
transform: rotate(43.2deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(3):before, .circle:nth-child(14) .content:nth-child(3):after {
width: 92px;
height: 29px;
-webkit-clip-path: polygon(74% 0, 61% 0, 30% 48%);
clip-path: polygon(74% 0, 61% 0, 30% 48%);
}
.circle:nth-child(14) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #836e91;
}
.circle:nth-child(14) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 94% 0, 50% 48%);
clip-path: polygon(35% 0, 94% 0, 50% 48%);
background: #73708f;
-webkit-transform: rotate(57.6deg) translate(0, 190px);
transform: rotate(57.6deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(4):before, .circle:nth-child(14) .content:nth-child(4):after {
width: 45px;
height: 12px;
-webkit-clip-path: polygon(93% 0, 37% 0, 76% 48%);
clip-path: polygon(93% 0, 37% 0, 76% 48%);
}
.circle:nth-child(14) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #846a95;
}
.circle:nth-child(14) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(20% 0, 8% 0, 22% 48%);
clip-path: polygon(20% 0, 8% 0, 22% 48%);
background: #6b6798;
-webkit-transform: rotate(72deg) translate(0, 190px);
transform: rotate(72deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(5):before, .circle:nth-child(14) .content:nth-child(5):after {
width: 78px;
height: 22px;
-webkit-clip-path: polygon(15% 0, 6% 0, 67% 48%);
clip-path: polygon(15% 0, 6% 0, 67% 48%);
}
.circle:nth-child(14) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #836f90;
}
.circle:nth-child(14) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(55% 0, 31% 0, 45% 48%);
clip-path: polygon(55% 0, 31% 0, 45% 48%);
background: #4f45ba;
-webkit-transform: rotate(86.4deg) translate(0, 190px);
transform: rotate(86.4deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(6):before, .circle:nth-child(14) .content:nth-child(6):after {
width: 74px;
height: 15px;
-webkit-clip-path: polygon(58% 0, 29% 0, 29% 48%);
clip-path: polygon(58% 0, 29% 0, 29% 48%);
}
.circle:nth-child(14) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(14) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(81% 0, 80% 0, 93% 48%);
clip-path: polygon(81% 0, 80% 0, 93% 48%);
background: #787788;
-webkit-transform: rotate(100.8deg) translate(0, 190px);
transform: rotate(100.8deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(7):before, .circle:nth-child(14) .content:nth-child(7):after {
width: 49px;
height: 17px;
-webkit-clip-path: polygon(80% 0, 38% 0, 98% 48%);
clip-path: polygon(80% 0, 38% 0, 98% 48%);
}
.circle:nth-child(14) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #941be4;
}
.circle:nth-child(14) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(30% 0, 69% 0, 18% 48%);
clip-path: polygon(30% 0, 69% 0, 18% 48%);
background: #4f45ba;
-webkit-transform: rotate(115.2deg) translate(0, 190px);
transform: rotate(115.2deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(8):before, .circle:nth-child(14) .content:nth-child(8):after {
width: 23px;
height: 10px;
-webkit-clip-path: polygon(76% 0, 21% 0, 19% 48%);
clip-path: polygon(76% 0, 21% 0, 19% 48%);
}
.circle:nth-child(14) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #9513ec;
}
.circle:nth-child(14) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(5% 0, 3% 0, 82% 48%);
clip-path: polygon(5% 0, 3% 0, 82% 48%);
background: #797887;
-webkit-transform: rotate(129.6deg) translate(0, 190px);
transform: rotate(129.6deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(9):before, .circle:nth-child(14) .content:nth-child(9):after {
width: 49px;
height: 44px;
-webkit-clip-path: polygon(27% 0, 89% 0, 7% 48%);
clip-path: polygon(27% 0, 89% 0, 7% 48%);
}
.circle:nth-child(14) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #8c41be;
}
.circle:nth-child(14) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(59% 0, 39% 0, 77% 48%);
clip-path: polygon(59% 0, 39% 0, 77% 48%);
background: #200df2;
-webkit-transform: rotate(144deg) translate(0, 190px);
transform: rotate(144deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(10):before, .circle:nth-child(14) .content:nth-child(10):after {
width: 29px;
height: 36px;
-webkit-clip-path: polygon(7% 0, 99% 0, 19% 48%);
clip-path: polygon(7% 0, 99% 0, 19% 48%);
}
.circle:nth-child(14) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #8f34cb;
}
.circle:nth-child(14) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(64% 0, 49% 0, 31% 48%);
clip-path: polygon(64% 0, 49% 0, 31% 48%);
background: #5f58a7;
-webkit-transform: rotate(158.4deg) translate(0, 190px);
transform: rotate(158.4deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(11):before, .circle:nth-child(14) .content:nth-child(11):after {
width: 30px;
height: 11px;
-webkit-clip-path: polygon(79% 0, 20% 0, 42% 48%);
clip-path: polygon(79% 0, 20% 0, 42% 48%);
}
.circle:nth-child(14) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #9514eb;
}
.circle:nth-child(14) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(21% 0, 20% 0, 36% 48%);
clip-path: polygon(21% 0, 20% 0, 36% 48%);
background: #3425da;
-webkit-transform: rotate(172.8deg) translate(0, 190px);
transform: rotate(172.8deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(12):before, .circle:nth-child(14) .content:nth-child(12):after {
width: 38px;
height: 31px;
-webkit-clip-path: polygon(6% 0, 54% 0, 25% 48%);
clip-path: polygon(6% 0, 54% 0, 25% 48%);
}
.circle:nth-child(14) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #8758a7;
}
.circle:nth-child(14) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(60% 0, 54% 0, 56% 48%);
clip-path: polygon(60% 0, 54% 0, 56% 48%);
background: #1d09f6;
-webkit-transform: rotate(187.2deg) translate(0, 190px);
transform: rotate(187.2deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(13):before, .circle:nth-child(14) .content:nth-child(13):after {
width: 64px;
height: 28px;
-webkit-clip-path: polygon(15% 0, 66% 0, 28% 48%);
clip-path: polygon(15% 0, 66% 0, 28% 48%);
}
.circle:nth-child(14) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #85629d;
}
.circle:nth-child(14) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(92% 0, 74% 0, 78% 48%);
clip-path: polygon(92% 0, 74% 0, 78% 48%);
background: #7e7e81;
-webkit-transform: rotate(201.6deg) translate(0, 190px);
transform: rotate(201.6deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(14):before, .circle:nth-child(14) .content:nth-child(14):after {
width: 100px;
height: 42px;
-webkit-clip-path: polygon(13% 0, 1% 0, 55% 48%);
clip-path: polygon(13% 0, 1% 0, 55% 48%);
}
.circle:nth-child(14) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #8a4bb4;
}
.circle:nth-child(14) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(26% 0, 100% 0, 96% 48%);
clip-path: polygon(26% 0, 100% 0, 96% 48%);
background: #473cc3;
-webkit-transform: rotate(216deg) translate(0, 190px);
transform: rotate(216deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(15):before, .circle:nth-child(14) .content:nth-child(15):after {
width: 13px;
height: 10px;
-webkit-clip-path: polygon(81% 0, 69% 0, 42% 48%);
clip-path: polygon(81% 0, 69% 0, 42% 48%);
}
.circle:nth-child(14) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #9417e8;
}
.circle:nth-child(14) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(72% 0, 79% 0, 44% 48%);
clip-path: polygon(72% 0, 79% 0, 44% 48%);
background: #65609f;
-webkit-transform: rotate(230.4deg) translate(0, 190px);
transform: rotate(230.4deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(16):before, .circle:nth-child(14) .content:nth-child(16):after {
width: 48px;
height: 45px;
-webkit-clip-path: polygon(35% 0, 75% 0, 46% 48%);
clip-path: polygon(35% 0, 75% 0, 46% 48%);
}
.circle:nth-child(14) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #8b44bb;
}
.circle:nth-child(14) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(100% 0, 40% 0, 47% 48%);
clip-path: polygon(100% 0, 40% 0, 47% 48%);
background: #5952ad;
-webkit-transform: rotate(244.8deg) translate(0, 190px);
transform: rotate(244.8deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(17):before, .circle:nth-child(14) .content:nth-child(17):after {
width: 64px;
height: 4px;
-webkit-clip-path: polygon(58% 0, 91% 0, 64% 48%);
clip-path: polygon(58% 0, 91% 0, 64% 48%);
}
.circle:nth-child(14) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #836f90;
}
.circle:nth-child(14) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(20% 0, 30% 0, 66% 48%);
clip-path: polygon(20% 0, 30% 0, 66% 48%);
background: #2918e7;
-webkit-transform: rotate(259.2deg) translate(0, 190px);
transform: rotate(259.2deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(18):before, .circle:nth-child(14) .content:nth-child(18):after {
width: 20px;
height: 2px;
-webkit-clip-path: polygon(23% 0, 42% 0, 33% 48%);
clip-path: polygon(23% 0, 42% 0, 33% 48%);
}
.circle:nth-child(14) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #846798;
}
.circle:nth-child(14) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(55% 0, 93% 0, 24% 48%);
clip-path: polygon(55% 0, 93% 0, 24% 48%);
background: #76748b;
-webkit-transform: rotate(273.6deg) translate(0, 190px);
transform: rotate(273.6deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(19):before, .circle:nth-child(14) .content:nth-child(19):after {
width: 46px;
height: 32px;
-webkit-clip-path: polygon(60% 0, 24% 0, 4% 48%);
clip-path: polygon(60% 0, 24% 0, 4% 48%);
}
.circle:nth-child(14) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #9224db;
}
.circle:nth-child(14) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(79% 0, 19% 0, 24% 48%);
clip-path: polygon(79% 0, 19% 0, 24% 48%);
background: #75738c;
-webkit-transform: rotate(288deg) translate(0, 190px);
transform: rotate(288deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(20):before, .circle:nth-child(14) .content:nth-child(20):after {
width: 30px;
height: 28px;
-webkit-clip-path: polygon(56% 0, 68% 0, 57% 48%);
clip-path: polygon(56% 0, 68% 0, 57% 48%);
}
.circle:nth-child(14) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #9805fa;
}
.circle:nth-child(14) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(51% 0, 40% 0, 44% 48%);
clip-path: polygon(51% 0, 40% 0, 44% 48%);
background: #4236c9;
-webkit-transform: rotate(302.4deg) translate(0, 190px);
transform: rotate(302.4deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(21):before, .circle:nth-child(14) .content:nth-child(21):after {
width: 7px;
height: 23px;
-webkit-clip-path: polygon(18% 0, 73% 0, 40% 48%);
clip-path: polygon(18% 0, 73% 0, 40% 48%);
}
.circle:nth-child(14) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #931ce3;
}
.circle:nth-child(14) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(11% 0, 27% 0, 20% 48%);
clip-path: polygon(11% 0, 27% 0, 20% 48%);
background: #4539c6;
-webkit-transform: rotate(316.8deg) translate(0, 190px);
transform: rotate(316.8deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(22):before, .circle:nth-child(14) .content:nth-child(22):after {
width: 38px;
height: 6px;
-webkit-clip-path: polygon(38% 0, 98% 0, 20% 48%);
clip-path: polygon(38% 0, 98% 0, 20% 48%);
}
.circle:nth-child(14) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #86619e;
}
.circle:nth-child(14) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 86% 0, 10% 48%);
clip-path: polygon(62% 0, 86% 0, 10% 48%);
background: #3d2fd0;
-webkit-transform: rotate(331.2deg) translate(0, 190px);
transform: rotate(331.2deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(23):before, .circle:nth-child(14) .content:nth-child(23):after {
width: 7px;
height: 45px;
-webkit-clip-path: polygon(19% 0, 45% 0, 23% 48%);
clip-path: polygon(19% 0, 45% 0, 23% 48%);
}
.circle:nth-child(14) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #836e91;
}
.circle:nth-child(14) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(84% 0, 85% 0, 100% 48%);
clip-path: polygon(84% 0, 85% 0, 100% 48%);
background: #7b7a85;
-webkit-transform: rotate(345.6deg) translate(0, 190px);
transform: rotate(345.6deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(24):before, .circle:nth-child(14) .content:nth-child(24):after {
width: 95px;
height: 38px;
-webkit-clip-path: polygon(21% 0, 98% 0, 97% 48%);
clip-path: polygon(21% 0, 98% 0, 97% 48%);
}
.circle:nth-child(14) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #894eb1;
}
.circle:nth-child(14) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(34% 0, 41% 0, 70% 48%);
clip-path: polygon(34% 0, 41% 0, 70% 48%);
background: #2e1de2;
-webkit-transform: rotate(360deg) translate(0, 190px);
transform: rotate(360deg) translate(0, 190px);
}
.circle:nth-child(14) .content:nth-child(25):before, .circle:nth-child(14) .content:nth-child(25):after {
width: 58px;
height: 5px;
-webkit-clip-path: polygon(69% 0, 81% 0, 52% 48%);
clip-path: polygon(69% 0, 81% 0, 52% 48%);
}
.circle:nth-child(14) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(14) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #894eb1;
}
.circle:nth-child(15) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 225px;
left: 48.3px;
-webkit-animation: rotate-reverse 20s linear infinite;
animation: rotate-reverse 20s linear infinite;
}
.circle:nth-child(15) .content {
position: absolute;
width: 23px;
height: 9px;
top: 40%;
left: 40%;
}
.circle:nth-child(15) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(13% 0, 87% 0, 18% 48%);
clip-path: polygon(13% 0, 87% 0, 18% 48%);
background: #3a2dd2;
-webkit-transform: rotate(14.4deg) translate(0, 200px);
transform: rotate(14.4deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(1):before, .circle:nth-child(15) .content:nth-child(1):after {
width: 30px;
height: 6px;
-webkit-clip-path: polygon(81% 0, 27% 0, 60% 48%);
clip-path: polygon(81% 0, 27% 0, 60% 48%);
}
.circle:nth-child(15) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #9708f7;
}
.circle:nth-child(15) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(57% 0, 60% 0, 88% 48%);
clip-path: polygon(57% 0, 60% 0, 88% 48%);
background: #5046b9;
-webkit-transform: rotate(28.8deg) translate(0, 200px);
transform: rotate(28.8deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(2):before, .circle:nth-child(15) .content:nth-child(2):after {
width: 67px;
height: 27px;
-webkit-clip-path: polygon(48% 0, 47% 0, 78% 48%);
clip-path: polygon(48% 0, 47% 0, 78% 48%);
}
.circle:nth-child(15) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #8853ac;
}
.circle:nth-child(15) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(41% 0, 84% 0, 7% 48%);
clip-path: polygon(41% 0, 84% 0, 7% 48%);
background: #493ec1;
-webkit-transform: rotate(43.2deg) translate(0, 200px);
transform: rotate(43.2deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(3):before, .circle:nth-child(15) .content:nth-child(3):after {
width: 54px;
height: 48px;
-webkit-clip-path: polygon(54% 0, 79% 0, 49% 48%);
clip-path: polygon(54% 0, 79% 0, 49% 48%);
}
.circle:nth-child(15) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #9128d7;
}
.circle:nth-child(15) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(74% 0, 10% 0, 94% 48%);
clip-path: polygon(74% 0, 10% 0, 94% 48%);
background: #2c1be4;
-webkit-transform: rotate(57.6deg) translate(0, 200px);
transform: rotate(57.6deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(4):before, .circle:nth-child(15) .content:nth-child(4):after {
width: 24px;
height: 6px;
-webkit-clip-path: polygon(95% 0, 83% 0, 37% 48%);
clip-path: polygon(95% 0, 83% 0, 37% 48%);
}
.circle:nth-child(15) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #8e39c6;
}
.circle:nth-child(15) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(61% 0, 15% 0, 64% 48%);
clip-path: polygon(61% 0, 15% 0, 64% 48%);
background: #2513ec;
-webkit-transform: rotate(72deg) translate(0, 200px);
transform: rotate(72deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(5):before, .circle:nth-child(15) .content:nth-child(5):after {
width: 79px;
height: 28px;
-webkit-clip-path: polygon(44% 0, 87% 0, 63% 48%);
clip-path: polygon(44% 0, 87% 0, 63% 48%);
}
.circle:nth-child(15) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(15) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(40% 0, 62% 0, 40% 48%);
clip-path: polygon(40% 0, 62% 0, 40% 48%);
background: #5b54ab;
-webkit-transform: rotate(86.4deg) translate(0, 200px);
transform: rotate(86.4deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(6):before, .circle:nth-child(15) .content:nth-child(6):after {
width: 79px;
height: 33px;
-webkit-clip-path: polygon(100% 0, 94% 0, 54% 48%);
clip-path: polygon(100% 0, 94% 0, 54% 48%);
}
.circle:nth-child(15) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #8a49b6;
}
.circle:nth-child(15) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(46% 0, 100% 0, 24% 48%);
clip-path: polygon(46% 0, 100% 0, 24% 48%);
background: #67629d;
-webkit-transform: rotate(100.8deg) translate(0, 200px);
transform: rotate(100.8deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(7):before, .circle:nth-child(15) .content:nth-child(7):after {
width: 63px;
height: 10px;
-webkit-clip-path: polygon(52% 0, 30% 0, 32% 48%);
clip-path: polygon(52% 0, 30% 0, 32% 48%);
}
.circle:nth-child(15) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #846798;
}
.circle:nth-child(15) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(68% 0, 16% 0, 18% 48%);
clip-path: polygon(68% 0, 16% 0, 18% 48%);
background: #67629d;
-webkit-transform: rotate(115.2deg) translate(0, 200px);
transform: rotate(115.2deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(8):before, .circle:nth-child(15) .content:nth-child(8):after {
width: 82px;
height: 16px;
-webkit-clip-path: polygon(82% 0, 47% 0, 82% 48%);
clip-path: polygon(82% 0, 47% 0, 82% 48%);
}
.circle:nth-child(15) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #960df2;
}
.circle:nth-child(15) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(69% 0, 31% 0, 71% 48%);
clip-path: polygon(69% 0, 31% 0, 71% 48%);
background: #5046b9;
-webkit-transform: rotate(129.6deg) translate(0, 200px);
transform: rotate(129.6deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(9):before, .circle:nth-child(15) .content:nth-child(9):after {
width: 23px;
height: 3px;
-webkit-clip-path: polygon(70% 0, 81% 0, 11% 48%);
clip-path: polygon(70% 0, 81% 0, 11% 48%);
}
.circle:nth-child(15) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #8e36c9;
}
.circle:nth-child(15) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(49% 0, 83% 0, 3% 48%);
clip-path: polygon(49% 0, 83% 0, 3% 48%);
background: #2f1fe0;
-webkit-transform: rotate(144deg) translate(0, 200px);
transform: rotate(144deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(10):before, .circle:nth-child(15) .content:nth-child(10):after {
width: 2px;
height: 43px;
-webkit-clip-path: polygon(14% 0, 36% 0, 89% 48%);
clip-path: polygon(14% 0, 36% 0, 89% 48%);
}
.circle:nth-child(15) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #8f32cd;
}
.circle:nth-child(15) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(98% 0, 92% 0, 30% 48%);
clip-path: polygon(98% 0, 92% 0, 30% 48%);
background: #3425da;
-webkit-transform: rotate(158.4deg) translate(0, 200px);
transform: rotate(158.4deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(11):before, .circle:nth-child(15) .content:nth-child(11):after {
width: 51px;
height: 34px;
-webkit-clip-path: polygon(91% 0, 88% 0, 5% 48%);
clip-path: polygon(91% 0, 88% 0, 5% 48%);
}
.circle:nth-child(15) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #931ce3;
}
.circle:nth-child(15) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(82% 0, 89% 0, 83% 48%);
clip-path: polygon(82% 0, 89% 0, 83% 48%);
background: #3526d9;
-webkit-transform: rotate(172.8deg) translate(0, 200px);
transform: rotate(172.8deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(12):before, .circle:nth-child(15) .content:nth-child(12):after {
width: 50px;
height: 42px;
-webkit-clip-path: polygon(64% 0, 20% 0, 49% 48%);
clip-path: polygon(64% 0, 20% 0, 49% 48%);
}
.circle:nth-child(15) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #9901fe;
}
.circle:nth-child(15) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(74% 0, 77% 0, 89% 48%);
clip-path: polygon(74% 0, 77% 0, 89% 48%);
background: #716e91;
-webkit-transform: rotate(187.2deg) translate(0, 200px);
transform: rotate(187.2deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(13):before, .circle:nth-child(15) .content:nth-child(13):after {
width: 42px;
height: 34px;
-webkit-clip-path: polygon(39% 0, 73% 0, 14% 48%);
clip-path: polygon(39% 0, 73% 0, 14% 48%);
}
.circle:nth-child(15) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #902ed1;
}
.circle:nth-child(15) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(83% 0, 39% 0, 57% 48%);
clip-path: polygon(83% 0, 39% 0, 57% 48%);
background: #1601fe;
-webkit-transform: rotate(201.6deg) translate(0, 200px);
transform: rotate(201.6deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(14):before, .circle:nth-child(15) .content:nth-child(14):after {
width: 95px;
height: 4px;
-webkit-clip-path: polygon(87% 0, 49% 0, 88% 48%);
clip-path: polygon(87% 0, 49% 0, 88% 48%);
}
.circle:nth-child(15) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #9512ed;
}
.circle:nth-child(15) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(30% 0, 83% 0, 11% 48%);
clip-path: polygon(30% 0, 83% 0, 11% 48%);
background: #3324db;
-webkit-transform: rotate(216deg) translate(0, 200px);
transform: rotate(216deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(15):before, .circle:nth-child(15) .content:nth-child(15):after {
width: 74px;
height: 1px;
-webkit-clip-path: polygon(58% 0, 80% 0, 33% 48%);
clip-path: polygon(58% 0, 80% 0, 33% 48%);
}
.circle:nth-child(15) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #9320df;
}
.circle:nth-child(15) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(21% 0, 43% 0, 1% 48%);
clip-path: polygon(21% 0, 43% 0, 1% 48%);
background: #4236c9;
-webkit-transform: rotate(230.4deg) translate(0, 200px);
transform: rotate(230.4deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(16):before, .circle:nth-child(15) .content:nth-child(16):after {
width: 90px;
height: 48px;
-webkit-clip-path: polygon(96% 0, 42% 0, 34% 48%);
clip-path: polygon(96% 0, 42% 0, 34% 48%);
}
.circle:nth-child(15) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #9516e9;
}
.circle:nth-child(15) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(5% 0, 94% 0, 34% 48%);
clip-path: polygon(5% 0, 94% 0, 34% 48%);
background: #463bc4;
-webkit-transform: rotate(244.8deg) translate(0, 200px);
transform: rotate(244.8deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(17):before, .circle:nth-child(15) .content:nth-child(17):after {
width: 49px;
height: 1px;
-webkit-clip-path: polygon(30% 0, 11% 0, 53% 48%);
clip-path: polygon(30% 0, 11% 0, 53% 48%);
}
.circle:nth-child(15) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #846b94;
}
.circle:nth-child(15) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(96% 0, 23% 0, 76% 48%);
clip-path: polygon(96% 0, 23% 0, 76% 48%);
background: #5c55aa;
-webkit-transform: rotate(259.2deg) translate(0, 200px);
transform: rotate(259.2deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(18):before, .circle:nth-child(15) .content:nth-child(18):after {
width: 38px;
height: 10px;
-webkit-clip-path: polygon(81% 0, 28% 0, 77% 48%);
clip-path: polygon(81% 0, 28% 0, 77% 48%);
}
.circle:nth-child(15) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #941ae6;
}
.circle:nth-child(15) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(4% 0, 87% 0, 71% 48%);
clip-path: polygon(4% 0, 87% 0, 71% 48%);
background: #69659a;
-webkit-transform: rotate(273.6deg) translate(0, 200px);
transform: rotate(273.6deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(19):before, .circle:nth-child(15) .content:nth-child(19):after {
width: 47px;
height: 50px;
-webkit-clip-path: polygon(35% 0, 17% 0, 39% 48%);
clip-path: polygon(35% 0, 17% 0, 39% 48%);
}
.circle:nth-child(15) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #82718e;
}
.circle:nth-child(15) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(25% 0, 48% 0, 31% 48%);
clip-path: polygon(25% 0, 48% 0, 31% 48%);
background: #75738c;
-webkit-transform: rotate(288deg) translate(0, 200px);
transform: rotate(288deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(20):before, .circle:nth-child(15) .content:nth-child(20):after {
width: 14px;
height: 42px;
-webkit-clip-path: polygon(99% 0, 62% 0, 20% 48%);
clip-path: polygon(99% 0, 62% 0, 20% 48%);
}
.circle:nth-child(15) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #85629d;
}
.circle:nth-child(15) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(67% 0, 73% 0, 9% 48%);
clip-path: polygon(67% 0, 73% 0, 9% 48%);
background: #493ec1;
-webkit-transform: rotate(302.4deg) translate(0, 200px);
transform: rotate(302.4deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(21):before, .circle:nth-child(15) .content:nth-child(21):after {
width: 90px;
height: 29px;
-webkit-clip-path: polygon(68% 0, 45% 0, 96% 48%);
clip-path: polygon(68% 0, 45% 0, 96% 48%);
}
.circle:nth-child(15) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #902dd2;
}
.circle:nth-child(15) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(32% 0, 25% 0, 35% 48%);
clip-path: polygon(32% 0, 25% 0, 35% 48%);
background: #3f32cd;
-webkit-transform: rotate(316.8deg) translate(0, 200px);
transform: rotate(316.8deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(22):before, .circle:nth-child(15) .content:nth-child(22):after {
width: 27px;
height: 27px;
-webkit-clip-path: polygon(84% 0, 53% 0, 90% 48%);
clip-path: polygon(84% 0, 53% 0, 90% 48%);
}
.circle:nth-child(15) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #865da2;
}
.circle:nth-child(15) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(15% 0, 9% 0, 97% 48%);
clip-path: polygon(15% 0, 9% 0, 97% 48%);
background: #6c6996;
-webkit-transform: rotate(331.2deg) translate(0, 200px);
transform: rotate(331.2deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(23):before, .circle:nth-child(15) .content:nth-child(23):after {
width: 57px;
height: 16px;
-webkit-clip-path: polygon(62% 0, 1% 0, 43% 48%);
clip-path: polygon(62% 0, 1% 0, 43% 48%);
}
.circle:nth-child(15) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #8a49b6;
}
.circle:nth-child(15) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(94% 0, 94% 0, 10% 48%);
clip-path: polygon(94% 0, 94% 0, 10% 48%);
background: #3f32cd;
-webkit-transform: rotate(345.6deg) translate(0, 200px);
transform: rotate(345.6deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(24):before, .circle:nth-child(15) .content:nth-child(24):after {
width: 17px;
height: 47px;
-webkit-clip-path: polygon(27% 0, 30% 0, 10% 48%);
clip-path: polygon(27% 0, 30% 0, 10% 48%);
}
.circle:nth-child(15) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #8c40bf;
}
.circle:nth-child(15) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(13% 0, 68% 0, 95% 48%);
clip-path: polygon(13% 0, 68% 0, 95% 48%);
background: #635da2;
-webkit-transform: rotate(360deg) translate(0, 200px);
transform: rotate(360deg) translate(0, 200px);
}
.circle:nth-child(15) .content:nth-child(25):before, .circle:nth-child(15) .content:nth-child(25):after {
width: 7px;
height: 28px;
-webkit-clip-path: polygon(82% 0, 35% 0, 98% 48%);
clip-path: polygon(82% 0, 35% 0, 98% 48%);
}
.circle:nth-child(15) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(15) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #960ff0;
}
.circle:nth-child(16) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 240px;
left: 51.52px;
-webkit-animation: rotate 21s linear infinite;
animation: rotate 21s linear infinite;
}
.circle:nth-child(16) .content {
position: absolute;
width: 148px;
height: 38px;
top: 40%;
left: 40%;
}
.circle:nth-child(16) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(94% 0, 74% 0, 65% 48%);
clip-path: polygon(94% 0, 74% 0, 65% 48%);
background: #01fefe;
-webkit-transform: rotate(14.4deg) translate(0, 190px);
transform: rotate(14.4deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(1):before, .circle:nth-child(16) .content:nth-child(1):after {
width: 68px;
height: 44px;
-webkit-clip-path: polygon(51% 0, 31% 0, 100% 48%);
clip-path: polygon(51% 0, 31% 0, 100% 48%);
}
.circle:nth-child(16) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #86609f;
}
.circle:nth-child(16) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(12% 0, 71% 0, 60% 48%);
clip-path: polygon(12% 0, 71% 0, 60% 48%);
background: #2bd4d4;
-webkit-transform: rotate(28.8deg) translate(0, 190px);
transform: rotate(28.8deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(2):before, .circle:nth-child(16) .content:nth-child(2):after {
width: 39px;
height: 24px;
-webkit-clip-path: polygon(46% 0, 42% 0, 24% 48%);
clip-path: polygon(46% 0, 42% 0, 24% 48%);
}
.circle:nth-child(16) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #9225da;
}
.circle:nth-child(16) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(39% 0, 3% 0, 69% 48%);
clip-path: polygon(39% 0, 3% 0, 69% 48%);
background: #04fbfb;
-webkit-transform: rotate(43.2deg) translate(0, 190px);
transform: rotate(43.2deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(3):before, .circle:nth-child(16) .content:nth-child(3):after {
width: 98px;
height: 25px;
-webkit-clip-path: polygon(100% 0, 50% 0, 34% 48%);
clip-path: polygon(100% 0, 50% 0, 34% 48%);
}
.circle:nth-child(16) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #85629d;
}
.circle:nth-child(16) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(93% 0, 58% 0, 40% 48%);
clip-path: polygon(93% 0, 58% 0, 40% 48%);
background: #699696;
-webkit-transform: rotate(57.6deg) translate(0, 190px);
transform: rotate(57.6deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(4):before, .circle:nth-child(16) .content:nth-child(4):after {
width: 73px;
height: 9px;
-webkit-clip-path: polygon(68% 0, 96% 0, 90% 48%);
clip-path: polygon(68% 0, 96% 0, 90% 48%);
}
.circle:nth-child(16) .content:nth-child(4):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(4):after {
top: 10px;
left: 30px;
background: #8952ad;
}
.circle:nth-child(16) .content:nth-child(5) {
opacity: 0.5;
-webkit-clip-path: polygon(19% 0, 28% 0, 51% 48%);
clip-path: polygon(19% 0, 28% 0, 51% 48%);
background: #6a9595;
-webkit-transform: rotate(72deg) translate(0, 190px);
transform: rotate(72deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(5):before, .circle:nth-child(16) .content:nth-child(5):after {
width: 84px;
height: 14px;
-webkit-clip-path: polygon(9% 0, 76% 0, 36% 48%);
clip-path: polygon(9% 0, 76% 0, 36% 48%);
}
.circle:nth-child(16) .content:nth-child(5):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(5):after {
top: 10px;
left: 30px;
background: #8f33cc;
}
.circle:nth-child(16) .content:nth-child(6) {
opacity: 0.5;
-webkit-clip-path: polygon(7% 0, 28% 0, 59% 48%);
clip-path: polygon(7% 0, 28% 0, 59% 48%);
background: #1be4e4;
-webkit-transform: rotate(86.4deg) translate(0, 190px);
transform: rotate(86.4deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(6):before, .circle:nth-child(16) .content:nth-child(6):after {
width: 5px;
height: 42px;
-webkit-clip-path: polygon(70% 0, 27% 0, 96% 48%);
clip-path: polygon(70% 0, 27% 0, 96% 48%);
}
.circle:nth-child(16) .content:nth-child(6):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(6):after {
top: 10px;
left: 30px;
background: #85659a;
}
.circle:nth-child(16) .content:nth-child(7) {
opacity: 0.5;
-webkit-clip-path: polygon(54% 0, 15% 0, 36% 48%);
clip-path: polygon(54% 0, 15% 0, 36% 48%);
background: #669999;
-webkit-transform: rotate(100.8deg) translate(0, 190px);
transform: rotate(100.8deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(7):before, .circle:nth-child(16) .content:nth-child(7):after {
width: 16px;
height: 34px;
-webkit-clip-path: polygon(4% 0, 7% 0, 98% 48%);
clip-path: polygon(4% 0, 7% 0, 98% 48%);
}
.circle:nth-child(16) .content:nth-child(7):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(7):after {
top: 10px;
left: 30px;
background: #902ed1;
}
.circle:nth-child(16) .content:nth-child(8) {
opacity: 0.5;
-webkit-clip-path: polygon(100% 0, 60% 0, 25% 48%);
clip-path: polygon(100% 0, 60% 0, 25% 48%);
background: #3cc3c3;
-webkit-transform: rotate(115.2deg) translate(0, 190px);
transform: rotate(115.2deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(8):before, .circle:nth-child(16) .content:nth-child(8):after {
width: 34px;
height: 21px;
-webkit-clip-path: polygon(31% 0, 59% 0, 84% 48%);
clip-path: polygon(31% 0, 59% 0, 84% 48%);
}
.circle:nth-child(16) .content:nth-child(8):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(8):after {
top: 10px;
left: 30px;
background: #931fe0;
}
.circle:nth-child(16) .content:nth-child(9) {
opacity: 0.5;
-webkit-clip-path: polygon(87% 0, 94% 0, 85% 48%);
clip-path: polygon(87% 0, 94% 0, 85% 48%);
background: #22dddd;
-webkit-transform: rotate(129.6deg) translate(0, 190px);
transform: rotate(129.6deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(9):before, .circle:nth-child(16) .content:nth-child(9):after {
width: 81px;
height: 32px;
-webkit-clip-path: polygon(22% 0, 48% 0, 14% 48%);
clip-path: polygon(22% 0, 48% 0, 14% 48%);
}
.circle:nth-child(16) .content:nth-child(9):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(9):after {
top: 10px;
left: 30px;
background: #836c93;
}
.circle:nth-child(16) .content:nth-child(10) {
opacity: 0.5;
-webkit-clip-path: polygon(5% 0, 82% 0, 56% 48%);
clip-path: polygon(5% 0, 82% 0, 56% 48%);
background: #04fbfb;
-webkit-transform: rotate(144deg) translate(0, 190px);
transform: rotate(144deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(10):before, .circle:nth-child(16) .content:nth-child(10):after {
width: 80px;
height: 44px;
-webkit-clip-path: polygon(87% 0, 6% 0, 69% 48%);
clip-path: polygon(87% 0, 6% 0, 69% 48%);
}
.circle:nth-child(16) .content:nth-child(10):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(10):after {
top: 10px;
left: 30px;
background: #856699;
}
.circle:nth-child(16) .content:nth-child(11) {
opacity: 0.5;
-webkit-clip-path: polygon(43% 0, 18% 0, 34% 48%);
clip-path: polygon(43% 0, 18% 0, 34% 48%);
background: #0ef1f1;
-webkit-transform: rotate(158.4deg) translate(0, 190px);
transform: rotate(158.4deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(11):before, .circle:nth-child(16) .content:nth-child(11):after {
width: 73px;
height: 46px;
-webkit-clip-path: polygon(73% 0, 62% 0, 40% 48%);
clip-path: polygon(73% 0, 62% 0, 40% 48%);
}
.circle:nth-child(16) .content:nth-child(11):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(11):after {
top: 10px;
left: 30px;
background: #8c41be;
}
.circle:nth-child(16) .content:nth-child(12) {
opacity: 0.5;
-webkit-clip-path: polygon(10% 0, 62% 0, 92% 48%);
clip-path: polygon(10% 0, 62% 0, 92% 48%);
background: #679898;
-webkit-transform: rotate(172.8deg) translate(0, 190px);
transform: rotate(172.8deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(12):before, .circle:nth-child(16) .content:nth-child(12):after {
width: 61px;
height: 46px;
-webkit-clip-path: polygon(18% 0, 23% 0, 48% 48%);
clip-path: polygon(18% 0, 23% 0, 48% 48%);
}
.circle:nth-child(16) .content:nth-child(12):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(12):after {
top: 10px;
left: 30px;
background: #960ef1;
}
.circle:nth-child(16) .content:nth-child(13) {
opacity: 0.5;
-webkit-clip-path: polygon(13% 0, 73% 0, 29% 48%);
clip-path: polygon(13% 0, 73% 0, 29% 48%);
background: #59a6a6;
-webkit-transform: rotate(187.2deg) translate(0, 190px);
transform: rotate(187.2deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(13):before, .circle:nth-child(16) .content:nth-child(13):after {
width: 24px;
height: 7px;
-webkit-clip-path: polygon(24% 0, 93% 0, 91% 48%);
clip-path: polygon(24% 0, 93% 0, 91% 48%);
}
.circle:nth-child(16) .content:nth-child(13):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(13):after {
top: 10px;
left: 30px;
background: #8759a6;
}
.circle:nth-child(16) .content:nth-child(14) {
opacity: 0.5;
-webkit-clip-path: polygon(81% 0, 16% 0, 100% 48%);
clip-path: polygon(81% 0, 16% 0, 100% 48%);
background: #11eeee;
-webkit-transform: rotate(201.6deg) translate(0, 190px);
transform: rotate(201.6deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(14):before, .circle:nth-child(16) .content:nth-child(14):after {
width: 91px;
height: 9px;
-webkit-clip-path: polygon(67% 0, 31% 0, 87% 48%);
clip-path: polygon(67% 0, 31% 0, 87% 48%);
}
.circle:nth-child(16) .content:nth-child(14):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(14):after {
top: 10px;
left: 30px;
background: #82758a;
}
.circle:nth-child(16) .content:nth-child(15) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 86% 0, 5% 48%);
clip-path: polygon(75% 0, 86% 0, 5% 48%);
background: #3ec1c1;
-webkit-transform: rotate(216deg) translate(0, 190px);
transform: rotate(216deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(15):before, .circle:nth-child(16) .content:nth-child(15):after {
width: 33px;
height: 42px;
-webkit-clip-path: polygon(30% 0, 1% 0, 44% 48%);
clip-path: polygon(30% 0, 1% 0, 44% 48%);
}
.circle:nth-child(16) .content:nth-child(15):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(15):after {
top: 10px;
left: 30px;
background: #9806f9;
}
.circle:nth-child(16) .content:nth-child(16) {
opacity: 0.5;
-webkit-clip-path: polygon(35% 0, 40% 0, 95% 48%);
clip-path: polygon(35% 0, 40% 0, 95% 48%);
background: #2ed1d1;
-webkit-transform: rotate(230.4deg) translate(0, 190px);
transform: rotate(230.4deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(16):before, .circle:nth-child(16) .content:nth-child(16):after {
width: 48px;
height: 46px;
-webkit-clip-path: polygon(32% 0, 44% 0, 56% 48%);
clip-path: polygon(32% 0, 44% 0, 56% 48%);
}
.circle:nth-child(16) .content:nth-child(16):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(16):after {
top: 10px;
left: 30px;
background: #817887;
}
.circle:nth-child(16) .content:nth-child(17) {
opacity: 0.5;
-webkit-clip-path: polygon(93% 0, 57% 0, 41% 48%);
clip-path: polygon(93% 0, 57% 0, 41% 48%);
background: #6e9191;
-webkit-transform: rotate(244.8deg) translate(0, 190px);
transform: rotate(244.8deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(17):before, .circle:nth-child(16) .content:nth-child(17):after {
width: 53px;
height: 4px;
-webkit-clip-path: polygon(49% 0, 79% 0, 62% 48%);
clip-path: polygon(49% 0, 79% 0, 62% 48%);
}
.circle:nth-child(16) .content:nth-child(17):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(17):after {
top: 10px;
left: 30px;
background: #8e36c9;
}
.circle:nth-child(16) .content:nth-child(18) {
opacity: 0.5;
-webkit-clip-path: polygon(69% 0, 19% 0, 18% 48%);
clip-path: polygon(69% 0, 19% 0, 18% 48%);
background: #53acac;
-webkit-transform: rotate(259.2deg) translate(0, 190px);
transform: rotate(259.2deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(18):before, .circle:nth-child(16) .content:nth-child(18):after {
width: 3px;
height: 18px;
-webkit-clip-path: polygon(62% 0, 64% 0, 86% 48%);
clip-path: polygon(62% 0, 64% 0, 86% 48%);
}
.circle:nth-child(16) .content:nth-child(18):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(18):after {
top: 10px;
left: 30px;
background: #9803fc;
}
.circle:nth-child(16) .content:nth-child(19) {
opacity: 0.5;
-webkit-clip-path: polygon(14% 0, 66% 0, 5% 48%);
clip-path: polygon(14% 0, 66% 0, 5% 48%);
background: #26d9d9;
-webkit-transform: rotate(273.6deg) translate(0, 190px);
transform: rotate(273.6deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(19):before, .circle:nth-child(16) .content:nth-child(19):after {
width: 39px;
height: 44px;
-webkit-clip-path: polygon(20% 0, 76% 0, 32% 48%);
clip-path: polygon(20% 0, 76% 0, 32% 48%);
}
.circle:nth-child(16) .content:nth-child(19):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(19):after {
top: 10px;
left: 30px;
background: #8e36c9;
}
.circle:nth-child(16) .content:nth-child(20) {
opacity: 0.5;
-webkit-clip-path: polygon(62% 0, 44% 0, 11% 48%);
clip-path: polygon(62% 0, 44% 0, 11% 48%);
background: #5ea1a1;
-webkit-transform: rotate(288deg) translate(0, 190px);
transform: rotate(288deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(20):before, .circle:nth-child(16) .content:nth-child(20):after {
width: 76px;
height: 21px;
-webkit-clip-path: polygon(87% 0, 71% 0, 28% 48%);
clip-path: polygon(87% 0, 71% 0, 28% 48%);
}
.circle:nth-child(16) .content:nth-child(20):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(20):after {
top: 10px;
left: 30px;
background: #894eb1;
}
.circle:nth-child(16) .content:nth-child(21) {
opacity: 0.5;
-webkit-clip-path: polygon(7% 0, 10% 0, 8% 48%);
clip-path: polygon(7% 0, 10% 0, 8% 48%);
background: #2bd4d4;
-webkit-transform: rotate(302.4deg) translate(0, 190px);
transform: rotate(302.4deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(21):before, .circle:nth-child(16) .content:nth-child(21):after {
width: 92px;
height: 30px;
-webkit-clip-path: polygon(31% 0, 24% 0, 43% 48%);
clip-path: polygon(31% 0, 24% 0, 43% 48%);
}
.circle:nth-child(16) .content:nth-child(21):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(21):after {
top: 10px;
left: 30px;
background: #8c42bd;
}
.circle:nth-child(16) .content:nth-child(22) {
opacity: 0.5;
-webkit-clip-path: polygon(75% 0, 7% 0, 45% 48%);
clip-path: polygon(75% 0, 7% 0, 45% 48%);
background: #7c8383;
-webkit-transform: rotate(316.8deg) translate(0, 190px);
transform: rotate(316.8deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(22):before, .circle:nth-child(16) .content:nth-child(22):after {
width: 56px;
height: 27px;
-webkit-clip-path: polygon(64% 0, 96% 0, 73% 48%);
clip-path: polygon(64% 0, 96% 0, 73% 48%);
}
.circle:nth-child(16) .content:nth-child(22):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(22):after {
top: 10px;
left: 30px;
background: #931fe0;
}
.circle:nth-child(16) .content:nth-child(23) {
opacity: 0.5;
-webkit-clip-path: polygon(13% 0, 69% 0, 59% 48%);
clip-path: polygon(13% 0, 69% 0, 59% 48%);
background: #0ff0f0;
-webkit-transform: rotate(331.2deg) translate(0, 190px);
transform: rotate(331.2deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(23):before, .circle:nth-child(16) .content:nth-child(23):after {
width: 48px;
height: 29px;
-webkit-clip-path: polygon(20% 0, 74% 0, 76% 48%);
clip-path: polygon(20% 0, 74% 0, 76% 48%);
}
.circle:nth-child(16) .content:nth-child(23):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(23):after {
top: 10px;
left: 30px;
background: #9512ed;
}
.circle:nth-child(16) .content:nth-child(24) {
opacity: 0.5;
-webkit-clip-path: polygon(71% 0, 5% 0, 10% 48%);
clip-path: polygon(71% 0, 5% 0, 10% 48%);
background: #20dfdf;
-webkit-transform: rotate(345.6deg) translate(0, 190px);
transform: rotate(345.6deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(24):before, .circle:nth-child(16) .content:nth-child(24):after {
width: 50px;
height: 32px;
-webkit-clip-path: polygon(79% 0, 58% 0, 83% 48%);
clip-path: polygon(79% 0, 58% 0, 83% 48%);
}
.circle:nth-child(16) .content:nth-child(24):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(24):after {
top: 10px;
left: 30px;
background: #85639c;
}
.circle:nth-child(16) .content:nth-child(25) {
opacity: 0.5;
-webkit-clip-path: polygon(54% 0, 91% 0, 93% 48%);
clip-path: polygon(54% 0, 91% 0, 93% 48%);
background: #0bf4f4;
-webkit-transform: rotate(360deg) translate(0, 190px);
transform: rotate(360deg) translate(0, 190px);
}
.circle:nth-child(16) .content:nth-child(25):before, .circle:nth-child(16) .content:nth-child(25):after {
width: 7px;
height: 19px;
-webkit-clip-path: polygon(77% 0, 45% 0, 65% 48%);
clip-path: polygon(77% 0, 45% 0, 65% 48%);
}
.circle:nth-child(16) .content:nth-child(25):before {
background: #fff;
}
.circle:nth-child(16) .content:nth-child(25):after {
top: 10px;
left: 30px;
background: #9320df;
}
.circle:nth-child(17) {
width: 200px;
height: 200px;
-webkit-transform: skew(0, -10deg);
transform: skew(0, -10deg);
top: 255px;
left: 54.74px;
-webkit-animation: rotate 22s linear infinite;
animation: rotate 22s linear infinite;
}
.circle:nth-child(17) .content {
position: absolute;
width: 140px;
height: 29px;
top: 40%;
left: 40%;
}
.circle:nth-child(17) .content:nth-child(1) {
opacity: 0.5;
-webkit-clip-path: polygon(12% 0, 86% 0, 56% 48%);
clip-path: polygon(12% 0, 86% 0, 56% 48%);
background: #7e8181;
-webkit-transform: rotate(14.4deg) translate(0, 180px);
transform: rotate(14.4deg) translate(0, 180px);
}
.circle:nth-child(17) .content:nth-child(1):before, .circle:nth-child(17) .content:nth-child(1):after {
width: 41px;
height: 41px;
-webkit-clip-path: polygon(57% 0, 99% 0, 84% 48%);
clip-path: polygon(57% 0, 99% 0, 84% 48%);
}
.circle:nth-child(17) .content:nth-child(1):before {
background: #fff;
}
.circle:nth-child(17) .content:nth-child(1):after {
top: 10px;
left: 30px;
background: #970af5;
}
.circle:nth-child(17) .content:nth-child(2) {
opacity: 0.5;
-webkit-clip-path: polygon(24% 0, 57% 0, 89% 48%);
clip-path: polygon(24% 0, 57% 0, 89% 48%);
background: #6e9191;
-webkit-transform: rotate(28.8deg) translate(0, 180px);
transform: rotate(28.8deg) translate(0, 180px);
}
.circle:nth-child(17) .content:nth-child(2):before, .circle:nth-child(17) .content:nth-child(2):after {
width: 26px;
height: 34px;
-webkit-clip-path: polygon(99% 0, 92% 0, 42% 48%);
clip-path: polygon(99% 0, 92% 0, 42% 48%);
}
.circle:nth-child(17) .content:nth-child(2):before {
background: #fff;
}
.circle:nth-child(17) .content:nth-child(2):after {
top: 10px;
left: 30px;
background: #9611ee;
}
.circle:nth-child(17) .content:nth-child(3) {
opacity: 0.5;
-webkit-clip-path: polygon(96% 0, 40% 0, 69% 48%);
clip-path: polygon(96% 0, 40% 0, 69% 48%);
background: #03fcfc;
-webkit-transform: rotate(43.2deg) translate(0, 180px);
transform: rotate(43.2deg) translate(0, 180px);
}
.circle:nth-child(17) .content:nth-child(3):before, .circle:nth-child(17) .content:nth-child(3):after {
width: 7px;
height: 13px;
-webkit-clip-path: polygon(17% 0, 28% 0, 26% 48%);
clip-path: polygon(17% 0, 28% 0, 26% 48%);
}
.circle:nth-child(17) .content:nth-child(3):before {
background: #fff;
}
.circle:nth-child(17) .content:nth-child(3):after {
top: 10px;
left: 30px;
background: #9221de;
}
.circle:nth-child(17) .content:nth-child(4) {
opacity: 0.5;
-webkit-clip-path: polygon(32% 0, 38% 0, 41% 48%);
clip-path: polygon(32% 0, 38% 0, 41% 48%);
background: #14ebeb;
-webkit-transform: rotate(57.6deg) translate(0, 180px);
transform: rotate(57.6deg) translate(0, 180px);
}
.circle:nth-child(17) .content:nth-child(4):before, ..........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0