@property --angle {

  syntax: '<angle>';

  inherits: false;

  initial-value: 0deg;

}

​

html, body {

    width: 100%;

    height: 100%;

    display: flex;

    background: #000;

}

​

.g-container {

    position: relative;

    margin: auto;

    width: 260px;

    height: 260px;

    filter: drop-shadow(0 0 5px hsl(162, 100%, 58%)) drop-shadow(0 0 10px hsl(270, 73%, 53%));

}

​

.g-triangle {

    width: 260px;

    height: 260px;

    clip-path: 

        polygon(

        50% 0%,

        0% 100%,

        8% 100%,

        50% 15%,

        88% 93%,

        7% 93%,

        7% 100%,

        100% 100%

    );

    background: conic-gradient(from var(--angle), hsl(162, 100%, 58%), hsl(270, 73%, 53%), hsl(162, 100%, 58%));

    animation: rotate 3s infinite linear;

}

​

@keyframes rotate {

    to {

        --angle: 360deg;

    }

}