body {
        margin: 0;
        padding: 0;
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: radial-gradient(circle at 50% 50%, #222, #111, #080808);
    }

    .content {
        width: 80vmin;
        height: 80vmin;
        position: relative;
        animation: spin 5s linear 0s infinite;
    }

    @keyframes spin {
        100% {
            transform: rotate(360deg);
        }
    }

    .content>div {
        --line: #47c;
        position: absolute;
        width: 70%;
        height: 70%;
        border-radius: 100%;
        box-sizing: border-box;
        box-shadow: -3vmin 3vmin 3vmin 0 #161616 inset,
            1vmin -1vmin 0.125vmin -1.25vmin var(--line);
        background: radial-gradient(circle at 36% 64%,
                #fff0 0 calc(53.5% - 1px),
                var(--line) 53.5% 54%,
                #fff0 calc(54% + 1px) 100%),
            radial-gradient(circle at 38% 62%,
                #fff0 0 calc(54.5% - 1px),
                var(--line) 54.5% 55%,
                #fff0 calc(55% + 1px) 100%),
            radial-gradient(circle at 42% 58%,
                #fff0 0 calc(57.75% - 1px),
                var(--line) 57.75% 58%,
                #fff0 calc(58% + 1px) 100%),
            radial-gradient(circle at 40% 60%,
                #fff0 0 calc(56.75% - 1px),
                var(--line) 56.75% 57%,
                #fff0 calc(57% + 1px) 100%),
            radial-gradient(circle at 45% 55%,
                #fff0 0 calc(61.75% - 1px),
                var(--line) 61.75% 62%,
                #fff0 calc(62% + 1px) 100%),
            radial-gradient(circle at 43.5% 56.5%,
                #fff0 0 calc(59.75% - 1px),
                var(--line) 59.75% 60%,
                #fff0 calc(60% + 1px) 100%),
            radial-gradient(circle at 45% 55%,
                #fff0 0 calc(64.5% - 1px),
                var(--line) 64.5% 64.75%,
                #fff0 calc(64.75% + 1px) 100%),
            radial-gradient(circle at 46.5% 53.5%,
                #fff0 0 calc(65.5% - 1px),
                var(--line) 65.5% 65.75%,
                #fff0 calc(65.75% + 1px) 100%),
            radial-gradient(circle at 48.5% 51.5%,
                #fff0 0 calc(67.75% - 1px),
                var(--line) 67.75% 68.25%,
                #fff0 calc(68.25% + 1px) 100%),
            radial-gradient(circle at 49% 51%,
                #fff0 0 calc(69.5% - 1px),
                var(--line) 69.5% 70%,
                #fff0 calc(70% + 1px) 100%);
    }

    .top-left {
        left: 11vmin;
        top: 2vmin;
    }

    .left-bot {
        bottom: 11vmin;
        left: 2vmin;
        transform: rotate(-90deg);
    }

    .bot-right {
        right: 11vmin;
        bottom: 2vmin;
        transform: rotate(-180deg);
    }

    .right-top {
        right: 2vmin;
        top: 11vmin;
        transform: rotate(-270deg);
    }