HTML
<svg height = "400" width = "400" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<path class = "colorA" d="M200 200 L200 100 L270.71 29.29 270.71 129.29 Z" />
<path class = "colorB" d = "M200 200 L270.71 129.29 L370.71 129.29 L300 200 Z"/>
<path class = "colorA" d = "M200 200 L300 200 L370.71 270.71 L270.71 270.71 Z "/>
<path class = "colorB" d = "M200 200 L270.71 270.71 L270.71 370.71 L200 300 Z "/>
<path class = "colorA" d = "M200 200 L129.29 270.71 L129.29 370.71 L200 300 Z"/>
<path class = "colorB" d = "M200 200 L100 200 L29.29 270.71 L129.29 270.71 Z"/>
<path class = "colorA" d = "M200 200 L129.29 129.29 L29.29 129.29 L100 200 Z"/>
<path class = "colorB" d = "M200 200 L200 100 L129.29 29.29 L129.29 129.29 Z"/>
</svg>
SCSS
$colorA: rgb(12,94,138);
$colorB: rgb(242,0,86);
$colorC: rgb(0,200,200);
body {
background: #000;
}
svg {
display: block;
margin: auto;
stroke-width: 3;
fill: none;
}
.colorA {
stroke: $colorA;
}
.colorB {
stroke: $colorB;
}
.colorA, .colorB {
animation: rot 5s linear infinite;
transform-origin: center center;
}
@keyframes rot {
to {
transform: rotate(360deg);
stroke: $colorC;
}
}
