HTML
<p><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600">
<path fill="#3EB4E5" d="M511.423 511.424L400.778 400.78c26.92-26.923 41.742-62.717 41.75-100.78 0-38.07-14.83-73.857-41.75-100.778L511.424 88.577c116.768 116.77 116.768 306.078 0 422.847z"/>
<path fill="#785BA0" d="M400.778 400.78l110.645 110.644c-116.77 116.77-306.077 116.77-422.846 0L199.222 400.78c26.92 26.92 62.715 41.742 100.778 41.748 38.063-.006 73.856-14.827 100.778-41.75z"/>
<path fill="#EE3D78" d="M199.222 400.78L88.577 511.423c-116.77-116.77-116.77-306.078 0-422.847L199.222 199.22c-26.92 26.92-41.75 62.71-41.75 100.778.007 38.063 14.828 73.857 41.75 100.78z"/>
<path fill="#8DC63F" d="M511.424 88.577L400.778 199.222c-26.922-26.922-62.71-41.75-100.778-41.75-38.07 0-73.857 14.828-100.778 41.75L88.577 88.577c116.77-116.77 306.077-116.77 422.847 0z"/>
<linearGradient id="a" x1="500.432" x2="500.432" y1="399.666" y2="200.334" gradientUnits="userSpaceOnUse" gradientTransform="rotate(45 300.006 299.998)">
<stop offset="0" stop-color="#785BA0"/>
<stop offset="1" stop-color="#3EB4E5"/>
</linearGradient>
<path class="grad" fill="url(#a)" d="M569.867 428.918c-14.256 29.832-33.735 57.797-58.444 82.505-24.708 24.708-52.672 44.188-82.504 58.444l-127.365-127.36c37.493-.395 72.673-15.18 99.22-41.73s41.334-61.728 41.73-99.22l127.36 127.36z"/>
<path fill="#3EB4E5" d="M569.867 428.918l-127.36-127.36c.02-.516.02-1.037.02-1.56s0-1.04-.02-1.556l127.36-127.36c38.838 81.305 38.84 176.53 0 257.836z"/>
<path fill="#785BA0" d="M301.558 442.506l127.36 127.36c-81.306 38.84-176.53 38.84-257.837 0l127.365-127.36c.514.02 1.036.02 1.558.02s1.044 0 1.56-.02z"/>
<linearGradient id="b" x1="200.334" x2="399.666" y1="500.434" y2="500.434" gradientUnits="userSpaceOnUse" gradientTransform="rotate(45 300.006 299.998)">
<stop offset="0" stop-color="#EE3D78"/>
<stop offset="1" stop-color="#785BA0"/>
</linearGradient>
<path class="grad" fill="url(#b)" d="M298.442 442.506l-127.36 127.36c-29.833-14.256-57.797-33.735-82.505-58.443S44.39 458.75 30.132 428.918l127.36-127.36c.396 37.492 15.18 72.673 41.73 99.22s61.728 41.334 99.22 41.728z"/>
<linearGradient id="c" x1="200.334" x2="399.666" y1="99.567" y2="99.567" gradientUnits="userSpaceOnUse" gradientTransform="rotate(45 300.006 299.998)">
<stop offset="0" stop-color="#8DC63F"/>
<stop offset="1" stop-color="#3EB4E5"/>
</linearGradient>
<path class="grad" fill="url(#c)" d="M569.867 171.08l-127.36 127.362c-.388-37.5-15.18-72.672-41.73-99.22s-61.72-41.34-99.22-41.728L428.92 30.132c29.83 14.257 57.795 33.736 82.504 58.445 24.708 24.708 44.186 52.672 58.443 82.504z"/>
<path fill="#EE3D78" d="M157.494 301.558L30.132 428.918c-38.838-81.306-38.838-176.53 0-257.837l127.362 127.365c-.02.515-.02 1.036-.02 1.557s0 1.043.02 1.56z"/>
<path fill="#8DC63F" d="M428.92 30.132L301.557 157.494c-.515-.02-1.036-.02-1.558-.02s-1.046 0-1.56.02L171.08 30.132c81.308-38.838 176.532-38.838 257.84 0z"/>
<linearGradient id="d" x1="99.567" x2="99.567" y1="399.666" y2="200.334" gradientUnits="userSpaceOnUse" gradientTransform="rotate(45 300.006 299.998)">
<stop offset="0" stop-color="#EE3D78"/>
<stop offset="1" stop-color="#8DC63F"/>
</linearGradient>
<path class="grad" fill="url(#d)" d="M171.08 30.132l127.363 127.36c-37.5.39-72.673 15.18-99.22 41.73s-41.34 61.72-41.73 99.22L30.133 171.08c14.257-29.833 33.736-57.796 58.444-82.504 24.71-24.71 52.674-44.19 82.505-58.446z"/>
</svg></p>
CSS
body {
margin: 0;
padding: 0;
overflow: hidden;
background-color: #203549
}
svg {
display: block;
width: 90vmin;
height: 90vmin;
display: block;
position: absolute;
top: 50%;
left: 50%;
margin: -45vmin 0 0 -45vmin;
animation: 6s Rotate360 linear infinite;
box-sizing: border-box;
box-shadow: 0 0 16px rgba(0, 0, 0, 0.35);
border-radius: 50%;
}
@keyframes Rotate360 {
20% {
transform: rotate(185deg)
}
80% {
transform: rotate(175deg)
}
100% {
transform: rotate(360deg)
}
}
.grad {
animation: 6s Grad infinite
}
@keyframes Grad {
30% {
opacity: 1
}
40% {
opacity: 0
}
50% {
opacity: 0
}
60% {
opacity: 0
}
70% {
opacity: 1
}
}
