$colorMain: #673ab7;

$colorSub: #00bcd4;

​

body, html {

    width: 100%;

    height: 100%;

    display: flex;

    padding: 16px;

    // background: #333;

}

​

div {

    position: relative;

    width: 200px;

    height: 200px;

    box-sizing: border-box;

    border-radius: 50%;

    overflow: hidden;

    margin-right: 24px;

    box-shadow: 1px 1px 4px 2px #222;

    margin: auto;

}

​

div:nth-child(4) {

    //background: linear-gradient($colorMain, $colorSub);

    // background: $colorSub;

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        // background: $colorSub;

        background: 

            repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px);

        mask: conic-gradient(from 45deg, transparent, #fff, transparent 50%);

        // -webkit-mask-composite: xor;

    }

    &::after {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        // background: $colorSub;

        background: 

            repeating-linear-gradient(0, $colorMain 0, $colorMain 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(60deg, $colorMain 0, $colorMain 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(-60deg, $colorMain 0, $colorMain 3px, transparent 3px, transparent 10px);

        mask: conic-gradient(from -135deg, transparent, #fff, transparent 50%);

    }

}

​

div:nth-child(1) {

    //background: linear-gradient($colorMain, $colorSub);

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: 

            repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px);

    }

}

​

div:nth-child(2) {

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: 

            conic-gradient(from -135deg, transparent 50%, #000);

    }

}

​

div:nth-child(3) {

    //background: linear-gradient($colorMain, $colorSub);

    &::before {

        content: "";

        position: absolute;

        top: 0;

        left: 0;

        right: 0;

        bottom: 0;

        background: 

            repeating-linear-gradient(0, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px),

            repeating-linear-gradient(-60deg, $colorSub 0, $colorSub 3px, transparent 3px, transparent 10px);

        mask: conic-gradient(from -135deg, transparent 50%, #000);

    }

}